Code369 Website Development
CODE369 engaged me to build a website spanning fashion, music, and digital tokens/NFTs, starting from a written specification and a hand-drawn wireframe. I worked as the sole developer, iterating directly with the client throughout, and delivered a fully custom WordPress site with e-commerce handled through a Shopify integration.
Skills demonstrated
The brief
The client came to me with a written project specification and a hand-drawn wireframe, and asked me to bring that vision to life as a fully functioning site — with room to modernise and elevate the design creatively rather than build a literal, unadorned translation of the wireframe.
The client's original wireframes — numbered and hand-drawn page by page before any design work began — plus notes exchanged along the way. Click any page to view it full-size.
Process & collaboration
This wasn't a one-shot handoff. I worked directly and iteratively with the client throughout the build to keep the design aligned with their vision, while introducing modern design ideas without overriding what they actually wanted. Where parts of their vision weren't practical to build as described, I assessed the feasibility myself and communicated that back clearly — so the client understood what was actually possible rather than having ideas silently reinterpreted or dropped — and used that shared understanding to build the best achievable version of the product.
Design & product decisions
I owned the site's entire visual language end to end — layout, typography, animation, and the underlying design principles — translating the client's written spec and hand-drawn wireframe into a cohesive brand identity (Michroma/Audiowide for display type, paired with Space Grotesk) built specifically around their fashion/music/tokens positioning, not a generic template. That included designing the hero treatment and shaping the CTAs to actually catch the eye and convert, not just look good.
Nebula/starfield hero
An animated star-field hero section establishing the brand's cosmic/numerology visual identity from the first scroll.
Wave-based video background
A looping video background used to add motion and depth to a key homepage section.
Moon/orbit canvas overlay
A canvas-based overlay animation reinforcing the moon/orbit theme running through the brand.
Lucky Moon NFTs collection page
A dedicated collection page built specifically to present the client's NFT offering.
Eye-catching, target-market-informed CTAs
Defined the site's target market up front and used it to deliberately place calls-to-action, rather than defaulting to generic placement.
Technical architecture
Evaluated Shopify against a self-hosted WordPress build before deciding on an approach:
| Option | Trade-off |
|---|---|
| Shopify | Strong out-of-the-box e-commerce, but less flexible for the fully custom design the client wanted. |
| Self-hosted WordPress | Full design flexibility via Full Site Editing, but no native e-commerce. |
Decision: a hybrid approach — WordPress (Full Site Editing, Loudness theme as a base) for the fully custom design and content, with Shopify Buy Button embeds handling e-commerce/checkout specifically. This fit the client's budget and technical needs better than committing fully to either platform.
Infrastructure
Built & run the home server myself
Set up and maintain the physical home server (ZimaOS, Docker-based) that hosts the WordPress instance, so the client could review the live site at any time rather than waiting on a hosted staging environment.
Cloudflare Tunnel & domain routing
Routed the home server through a Cloudflare Tunnel and pointed the 369keys.com domain at it, so the client's site is reachable on a real public domain rather than a bare IP address.
Direct-to-production deploys
Every change goes straight onto the live site the client already has bookmarked, no separate staging environment or deploy step, so they always see the latest work immediately.
Remote access via Tailscale
Configured a Tailscale VPN so the site could be reviewed and worked on securely from outside the home network.
Dynamic URL handling
Resolved wp-config.php configuration so the site behaved correctly whether accessed locally or remotely.
WSL2 / SSHFS mounting
Mounted the WordPress files via WSL2/SSHFS so the codebase could be accessed and edited directly during development.
Tools & development approach
Built on WordPress with the native block editor (Gutenberg). Custom JavaScript powers the site's animated/interactive elements (starfield hero, canvas overlays, video background), with PHP handling the WordPress theme templating underneath.
This was a solo project end to end: design, development, infrastructure, hosting, and client communication were all my own work, from the first conversation about the brief through to the site going live and every update since.
Outcomes
"The client was very happy with the result and felt it exceeded expectations." As a direct result, I was engaged for a second project — a website for the client's wife.