Skip to main content

Hello world: How I built this site

00:02:42:39

How it all started

In 2020, during the COVID-19 lockdown, I decided it was time to refresh my portfolio site—a task that, as designers know all too well, often feels long overdue. I wanted to break away from the usual design trends and create something that truly reflected my personality and interests. Drawing inspiration from the Cyberpunk genre—a futuristic blend of high-tech and dystopian aesthetics—I decided to infuse my site with elements from the 80s and 90s Cyberpunk culture.

The genre has always been close to my heart, with iconic films like Ghost in the Shell (1995), The Matrix (1999), Akira (1988), and Mandalorian shaping much of my visual taste. I incorporated visual motifs from these films, such as bold Star Wars lettering on the homepage and a text-decoding effect, which was a subtle homage to The Matrix’s “Digital Rain”—itself inspired by the opening credits of Ghost in the Shell. There's even a nod to Ghost in the Shell on my 404 page.

A scene from Ghost in the Shell (1995) with the Major cloaking with thermoptic camouflage; the poster for Akira; The Matrix's digital rain effect

The Humble Beginnings with HTML

My web development journey began with HTML. I started by creating simple pages, learning the basics of tags, CSS, and content structuring. I spent hours inspecting others’ code and building small projects to develop my skills.

Once I grew comfortable with static HTML, I transitioned to React, eager to build dynamic web apps. React’s component-based structure was a revelation, and as I experimented with states, props, and lifecycle methods, I learned by diving into open-source code on GitHub and replicating patterns. React Router and Styled Components soon became essential tools for managing navigation and styling. Thumbnail for my Clay Mockups 3D plugin

Landing on Remix

After years of working with React, I sought more flexibility and structure, which led me to Remix in February 2024. Remix’s seamless integration of server-side rendering (SSR) and static site generation (SSG) was a game-changer. It simplified data fetching and style management, allowing me to focus more on building than configuring.

The transition was smooth but required learning, particularly by exploring how others were using Remix. Remix’s approach to routing, data fetching, and state management refined my skills and helped me build more performant, data-driven sites.

February 2024 Update: Why Remix Was the Right Move

Looking back, switching to Remix has significantly improved my workflow. CSS View Transitions replaced JavaScript-based animations, and route transitions are now smoother. The app’s performance has increased, and I no longer need complex configuration for features like scroll restoration.

Remix’s support for user theming and session-based cookies simplified what was once a tedious process. The combination of SSR and React’s component-based structure allows me to create interactive applications with exceptional performance and less boilerplate code.

What's Next?

I’m excited to continue exploring Remix, especially with upcoming features like the scroll-driven animation CSS API. My evolution from HTML to React and Remix has been a journey of learning, and I look forward to building even more sophisticated projects with modern tools.