How I Built My ZX Spectrum-Inspired Website

The time had come to refresh my website. My previous portfolio lived under the domain miukimiu.com, a nickname I adopted online as a teenager. With so many Elizabet Oliveiras in the world, I wanted something unique. Miukimiu sounded fun, playful—just right for my younger self.

Back then, my aesthetic was heavily influenced by kawaii culture, which later inspired me to create React Kawaii—a library of cute illustrations for projects. While I still love cute things, time passed, and my focus evolved. After years working at the intersection of design and development, I felt the need for a more professional, personal touch. I wanted to use my real name. I wanted to be Elizabet Oliveira.

A Spark of Inspiration

The answer came unexpectedly during a visit to my mother’s house in Lisbon. In my brother’s old room, I found our family's ZX Spectrum. Nostalgia hit me hard—loading cassette tapes, waiting for games to start. That’s when it clicked: why not create a website inspired by the ZX Spectrum?

Researching the Look & Feel

I dove deep into research. I wanted the site to feel unmistakably ZX Spectrum while still being modern. Since I was already using Next.js and Tailwind CSS in my daily work, they felt like natural choices. No need to reinvent the wheel.

In Figma, I began designing, incorporating ZX Spectrum’s signature colors, typography, and geometric shapes. Along the way, I stumbled upon retro websites that used bold orange tones, which I wanted to contrast with the Spectrum’s signature dark hues.

I also discovered that Portugal has a ZX Spectrum museum, LOAD ZX Spectrum, just a 30-minute drive from my house. Visiting it in person helped me refine my vision, seeing the device’s colors, details, and textures up close.

Beyond the retro aesthetics, I also drew inspiration from hip-hop and urban design. The fusion of these influences shaped my creative direction.

Designing & Coding the Website

My initial attempts didn’t quite hit the mark. Then, I started experimenting with a bento grid layout, structuring the homepage with interactive cards reminiscent of ZX Spectrum games.

At some point, I had an idea: why not create a mini-game character?

One of the homepage cards became an interactive keyboard-powered bio section, where pressing keys or clicking buttons revealed details about me. Another card featured just the mini-game.

I also included a Featured Projects section to highlight work I’m particularly proud of.

And, of course, a Blog, where I could document my projects, ideas, and experiences.

Building the Blog

For content, I chose MDX—a powerful format that blends Markdown with React components. To handle content efficiently, I’m using Content Collections. It transforms content into type-safe data collections, eliminating manual fetching and parsing. I used to rely on Contentlayer, but with its uncertain maintenance, I opted for a more future-proof solution.

Another key consideration was SEO. Thanks to Next.js’s generateMetadata, I could optimize pages dynamically, improving discoverability and social sharing.

SEO & Analytics

My website is hosted for free on Vercel, where I also take advantage of their built-in Analytics. I specifically avoided Google Analytics—I didn’t want to deal with intrusive cookie banners. Keeping things lightweight and privacy-friendly was a priority.

Just Ship It

At some point, I had to stop tweaking and just ship it. I realized my website would never be perfect, and that’s okay. It’s a reflection of my journey—evolving as a designer and developer. I’m proud of what I built and excited to share it with the world.

Looking back, I did wonder if Next.js was overkill for such a simple site. Astro might have been a better fit. But by the time I considered switching, it was too late. I also had to deal with updates—Next.js 19 and Tailwind CSS 4.0—which took some time.

Still, I’m happy with the result. If you have feedback or suggestions, feel free to reach out on Bluesky. I’d love to hear your thoughts!