Rebuilding Vantage Fit
entirely in code.

01 — Overview

I stopped handing off designs — and built them.

For years my work ended at handoff: I'd design a screen and pass it to engineers to build. This project broke that wall. I took the Vantage Fit marketing website and rebuilt it in code, myself — learning HTML, CSS, and JavaScript through AI-assisted "vibe coding," picking up the terminology, the tooling, and the workflow as I went.

The live site is built with Astro. Going from "I design websites" to "I ship websites" is the single biggest leap of my career so far — and it started here.

02 — The challenge

Learn to build — without losing the design.

I was a designer, not an engineer. I had to learn an entire discipline from the ground up while still holding the same bar for craft I'd always had. Every concept — semantic HTML, layout in CSS, what JavaScript actually does, version control, deployment — was new, and I was learning it on a real, live product.

• Learn HTML, CSS & JS well enough to build a real site
• Pick up the vocabulary — repos, commits, branches, builds, hosting
• Use AI as a teacher and pair, not a crutch
• Translate my own designs faithfully into working code
• Get it live — and keep it maintainable

03 — Process

Vibe coding, one concept at a time.

I learned by doing — building the real thing while AI explained each piece, then doing it myself until it stuck. Slowly the unfamiliar words became second nature: a tag, a class, a flexbox, a commit, a push, a deploy. I wasn't memorising tutorials; I was building a website and absorbing the craft underneath it.

• Learn — HTML & CSS structure and layout, then JS behaviour
• Build — recreated the site section by section in code
• Version — learned Git & GitHub to track and manage my work
• Host — deployed with GitHub Pages to see it live
• Iterate — refined, fixed, and improved with AI alongside me

04 — The build

Where design and code finally met.

Building my own designs taught me things no handoff ever could — why a layout that's easy to draw can be hard to build, how spacing and type really behave in a browser, and where my design decisions cost or saved effort in code. I stopped thinking of design and development as two stages and started seeing them as one continuous craft.

That bridge is now permanent: I'm gradually shifting sections of the live site from the original dark theme to lighter ones — myself, in code. The design keeps evolving, and this time I don't hand it off. [ Add a specific section or feature you've rebuilt or relit here. ]

05 — Outcome

A live site — built by the person who designed it.

The Vantage Fit marketing site runs on code I learned to write, deployed through a workflow I learned to use. [ Add any specifics — which sections, what's now live, any performance or maintainability wins — here. ] It turned me from a designer who imagines interfaces into one who can also ship them.

06 — What I learned

The wall between design and code was never real.

This project gave me a superpower I didn't know I could have: the ability to take an idea all the way from a blank canvas to a live, coded product, on my own. I learned that AI is an incredible teacher when you stay curious and do the work, that shipping teaches you things designing alone never will, and that I love living in both worlds at once. It's the pivot the rest of my work now flows from.