Case Study — Freelance Web Development

Bringing a client's vision from wireframe to a fully custom, live brand site

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.

Role
Freelance web developer (sole developer)
Timeline
April/May 2026 — Present
Live site
01

The brief

Screenshot of the live homepage goes here.

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.

02

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.

03

Design & product decisions

The homepage was treated as the site's key first impression, so that's where most of the visual language work went: animation, colour, layout, and whitespace, built into a cohesive brand identity with consistent theming and typography (Michroma/Audiowide for display type, paired with Space Grotesk).

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.

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.

04

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.

05

Infrastructure

Self-hosted on ZimaOS

Ran the WordPress instance on a home server (Docker-based), so the client could review the live site at any time rather than waiting on a hosted staging environment.

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.

06

Tools & development approach

An honest breakdown of what I did myself versus what was AI-assisted, since that distinction matters:

Built primarily using Claude Code plus the native WordPress block editor (Gutenberg).

Claude Code was the primary development tool throughout the project.

JavaScript

Claude Code produced most of the front-end JS for this project (canvas overlays, animated hero, video background), but this isn't a black box to me — I can read, write, and modify JavaScript independently, and had used it before this project.

PHP

Mostly Claude Code-generated (WordPress itself runs on PHP). I would not currently be able to independently explain or modify this PHP code — that's a genuine gap, not false modesty, and it's worth being upfront about it here.

What I owned directly, hands-on

The infrastructure/DevOps side (Docker, Tailscale, SSHFS mounting, wp-config.php troubleshooting); all client communication and requirements translation; the design and branding decisions; the platform trade-off decision (Shopify vs. WordPress); target market/CTA strategy; and all content work via the block editor.

07

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.

08

Skills demonstrated

Requirements gathering & scoping ambiguous briefs Platform/technology trade-off evaluation UI/visual design & brand identity Product thinking (target market, CTA strategy) Docker & self-hosting Tailscale VPN WSL2 / SSHFS Client management & expectation-setting Working effectively with AI-assisted development tools