Unlocked

~/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.

  • RoleDesign & development
  • Timeline2026
  • StackNext.js, React, CSS
Home page of stavroslazaris.gr in the neon design

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.

  1. 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.

  2. 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.

  3. 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