The Production Behind 24 Hour Journey

A 24-hour journey: how we built a website in a week.

How It All Started

The idea for the site didn’t begin as something fully formed—it started as a rough vision. I wanted to build something that could showcase design work while also being useful to people who actually visited it. Not just another project, but something intentional.

I spent the first couple of days just thinking through what that even meant. Sketching layouts, revising ideas, and throwing out anything that felt overcomplicated. Eventually, a direction started to form: a clean, modern blog-style site focused on simplicity and clarity.

By the end of the first week’s early planning phase, I had a mockup I was actually confident in. It wasn’t perfect, but it felt like something I could build on.

The Build Begins

Once the mockup was in place, I moved into figuring out how to actually bring it to life. I had some experience with Vite and React, but I’d never built a blog system before. That led to a lot of research—frameworks, static site generators, and different ways people structured content-driven websites.

Almost everything pointed in the same direction: Astro.

At first, it was just another tool I didn’t fully understand. But as I read through the documentation, it started to make sense. Astro was built for exactly what I was trying to do—fast static sites, clean structure, and simple content handling. It also aligned better with how I originally learned web development: HTML, CSS, and JavaScript without heavy abstraction.

That realization shifted the direction of the project. Instead of forcing a React-style component system, I decided to rebuild around Astro’s page-and-layout structure.

First Days of Development

I set up the repository and got Astro running, then started building the foundation of the site.

The first focus was structure—navigation, footer, and the core layout system. Once that base was stable, I moved into the homepage. That became the centerpiece of the entire project, so I didn’t rush it. I iterated on spacing, typography, and layout details until it felt consistent with the mockup.

Over the next couple of days, development started to fall into a rhythm. Each section of the homepage was refined step by step instead of all at once. By the end of that phase, most of the homepage was already functional, even though I was still adjusting details.

Expanding the Site

As the foundation stabilized, I started expanding outward from the homepage into full site functionality.

I built out the article pages and focused on getting Markdown content to render correctly. That process took some time—dialing in the structure, formatting, and layout consistency wasn’t immediate—but once it was in place, it made the rest of the system click together.

From there, I added search functionality. Instead of relying on a backend, I built it directly into the frontend. It wasn’t perfect at first, but after a few adjustments and debugging sessions, it started working smoothly.

Over the following days, I continued adding the remaining core pages: About, Case Studies, Contact, Privacy Policy, and Terms of Service. Each one was built to match the same design system so the entire site stayed consistent.

By the End of the Week

By the end of the week, the project had evolved from a rough idea into a fully functioning website.

What started as a mockup became a structured blog system with working navigation, article support, search, and multiple content pages—all built without a backend. There were still refinements to make, but the core system was in place.

More importantly, the project felt real at that point. Not just something being built, but something ready to be shared.

The first post

This is the first post of the website. What better then to have the first article be about the production of the website itself? It’s a bit meta, but it felt right to share the story of how this project came together as the first piece of content on the site.

Thanks to the following resources for helping me along the way: