~/work/stavroslazaris-gr
This site
I rebuilt my portfolio from scratch on Next.js: one neon design system, motion that doesn't slow the page down, and a small game hidden inside.

01The problem
My old site said the right things, but it felt like a template. It had heavy plugins, sliders and extra fonts, the sections didn't belong together, and there was no clear path from who I am to what I build.
I work on frontend architecture and performance, so my own site has to prove it. A slow, generic portfolio would undercut everything written on it.
02The approach
I treated it like a real product: one design system, proper routes, and a performance check after every change.
- The design system has one shape language with cut corners, two colour tokens, dark and light modes, and three typefaces loaded through next/font.
- Pages are rendered on the server. A small client script handles the motion, the achievements and the 404 game, and cleans up after itself on every route change.
- I measured instead of guessing. Lighthouse and main-thread traces on a throttled phone showed a lightning bolt being redrawn with blur on every frame, and a typewriter effect that relaid the page on every letter. Both run on the compositor now, and they look the same.
03Key decisions
What keeps it fast, a bit playful, and easy to add to.
- 01
Motion that stays light
Every loop animates only transform, opacity or clip-path, pauses when it's off screen and respects reduced motion. Nothing visible at load animates in, so the main content shows up right away.
- 02
A game you have to find
There are nine hidden achievements, a name that fills with neon as you scroll, and a Box Model Stack game behind the 404. If you only came for the work, you'll barely notice them.
- 03
Content lives in data files
The copy, projects and case studies are plain data files. Adding a case study means adding one object, not building a new page.
04Results
These are Lighthouse scores on the production build. On a throttled mobile profile performance is 93–97, and most of what holds it back is the framework itself.
- 100Desktop performance
- 100Accessibility
- 100SEO