Balázs Barta

Design Technologist

Back

New year, new website... My journey with Astro

Balázs Barta ∙ Published on January 16, 2025
New year, new website... My journey with Astro

As a designer who loves to code, there’s an unwritten rule: your personal website is never truly finished. Like many of us, I found myself reimagining my personal website almost yearly, experimenting with various platforms from WordPress to Webflow. But this time was different. After my recent promotion to Design Technologist, where I work with cutting-edge web technologies daily, I decided it was time to break free from traditional platforms and build something truly my own.

Breaking free from traditional platforms

My previous websites were built on familiar grounds – WordPress and Webflow. They served their purpose well, but as I found myself working with Next.js daily at work, I began to see limitations in these platforms. The designer in me craved more creative freedom, while the technologist wanted deeper control over performance and functionality.

Setting the bar high: My requirements

Before jumping into the design phase, I sat down with my favorite notebook and sketched out what my ideal website would look like. Not just visually, but fundamentally. My wishlist was ambitious:

  • a fully custom-built platform using modern technologies
  • lightning-fast performance with sub-3-second speed index
  • and it had to cost virtually nothing.

I wanted version control for fearless experimentation, a flexible content system that could rival Webflow’s CMS (without the hefty price tag), and the ability to implement a sophisticated design token system. Some might call it perfectionist; I call it setting the bar high.

Choosing the right framework for the job

While Next.js had become my daily companion at work, it felt like bringing a rocket launcher to a water balloon fight for this project. I needed something lighter, something that would let me focus on crafting experiences rather than configuring build systems.

During my research, I stumbled upon Astro – a framework that caught my eye with its promise of speed and simplicity. It was love at first sight. Astro offered everything I needed:

  • blazing-fast performance
  • framework agnosticism
  • content-first approach that felt natural for a personal website

The cherry on top? Its component syntax felt like writing good old HTML, CSS, and JavaScript, but with modern superpowers.

How I built my dream website

My journey began in Figma, where I meticulously crafted every design token and component. I’m a firm believer in organized chaos, so I created a structured system of style files that would serve as the foundation for my entire website. Each token group – colors, semantics, typography, dimensions – had its own home, making maintenance a breeze.

Some of my semantic color variables in Figma

The development process was surprisingly smooth. Astro’s component syntax made it easy to transform my Figma designs into living, breathing code. I built each component with purpose, ensuring they were not just beautiful but also performant and accessible.

One of my favorite parts was creating the content schema system. I wanted something that could handle different types of content – blog posts, projects, stack – without becoming overly complex. Astro’s content collections API proved to be the perfect solution, offering just the right balance of flexibility and structure.

The numbers game

Here’s the part that still makes me smile: the cost breakdown. Apart from my domain registration ($25/year with Cloudflare), everything else is completely free. Astro for the framework, Vercel for hosting, and simple markdown files for content. Here’s the full breakdown:

ToolCost
FrameworkAstro$0
HostingVercel$0
Database-$0
CMSAstro’s built in content collections$0
DomainCloudflare$25 / year

Compare that to my previous Webflow setup, which would have cost over $500 annually, or a WordPress solution running at least $100 per year.

Performance that speaks

The real triumph came when I started testing performance. Thanks to Astro’s built-in optimizations and some thoughtful implementation choices, the website flies. Images are automatically optimized, styles are scoped and efficient, and resource-intensive scripts run in web workers thanks to Partytown.

PageSpeed performance results showing perfect scores and blazing-fast load times

The entire project – from initial design to final deployment – took about two weeks. This included everything: designing the system in Figma, building the components, migrating content, and fine-tuning performance. It was an intense couple of weeks, but seeing the final result made every late-night coding session worth it (My wife would argue 😅).

Looking forward

While markdown files currently serve my content needs perfectly, I’m excited about the possibilities ahead. I’m exploring integrations with Sanity or Obsidian for a more robust content management system. But that’s the beauty of building your own platform – you can evolve it as your needs change.

The bigger picture

This project taught me something valuable: sometimes, the best solutions are the simplest ones. By choosing modern tools and focusing on what really matters – speed, flexibility, and user experience – I created something that not only meets my needs but exceeds my expectations.

For fellow designers and unicorns out there, this journey shows that you don’t need expensive tools or complex setups to create something professional and powerful. With the right approach and modern web technologies, you can build a website that’s fast, flexible, and completely yours.