Vaycode Website Revamp
Context
My portfolio site is the first thing potential clients see. The old version had grown cluttered and hard to maintain, especially keeping English and French content in sync. It was time for a clean slate.
Problem
The previous stack was heavy for a solo developer. Projects were styled inconsistently, translations drifted out of sync, and every update risked breaking something. The design looked fine but didn’t tell clear stories.
Solution
I rebuilt everything from scratch with SvelteKit and TypeScript. Instead of utility CSS, I wrote a small token-based stylesheet, just a few variables for colors, spacing, and typography. The result is a lighter bundle and full control over the design.
Content now lives in Markdown files processed by mdsvex. Each case study has the same frontmatter structure, and dev-time checks flag missing fields or untranslated pages before I can ship.
For hosting, I moved to a Docker setup on my own Linux VPS. GitHub Actions handles CI: every push runs tests and deploys automatically. Rollbacks take seconds.
Results
Lighthouse scores hit 100 for performance (up from 98), 96 for accessibility (+7), and stayed at 100 for best practices and SEO.
Bundle size dropped from ~614 KB to ~69 KB transferred—nearly 90% smaller.
Global response times improved across the board: average latency fell from 609 ms to 365 ms, a 40% drop. The biggest gains were in Europe, where total response time went from 579 ms to 197 ms.
Takeaways
The site now loads instantly and stays consistent across languages. Adding new work is straightforward, just create a Markdown file and the system handles the rest. The minimal design matches how I like to work: clear, fast, no clutter.