kaiajimenez.com
My most ambitious personal project to date
What better way to learn web development than building a website from scratch? I've spent the last year slowly designing and developing what I hope will become my very own corner of the internet. No vibe-coding, just many hours of trial and error and a dream of reliving my memories of a more personal, creative web. This post is a sneak peek into the process, with its many twists and turns!
tl;dr
Design and development of a personal website
UX and UI, design systems, front-end development
Figma, HTML, CSS, JavaScript, Astro, WCAG
A short backstory
In 2021, I graduated from my Master’s in Design Engineering and entered the job market, having found my calling for product design. I had spent three months juggling the creation of a digital portfolio with the final stretch of my Master’s thesis. As a result, my website back then looked like this
Apart from the immediately obvious lack of visual polish, there were several issues with my old website that made maintaining it a chore.
- It had been designed to be a portfolio. The home page showcased twelve (!?) projects across various disciplines, most of which do not represent me anymore.
- It was not flexible. I began wanting to share less serious side-projects, blog posts, and other creative work, and the strong portfolio focus made it difficult. This resulted in a messy information architecture.
- It did not reflect who I am. It’s not difficult to see that the previous design was lacking personal identity. I wanted my website to actually feel like me.
- It was built on WordPress. I had chosen a platform I was already familiar with, and used a pre-existing template that I had customised to fit my needs. However, I often found myself fighting against its limitations, and wishing I could just do it all myself.
A new philosophy
I decided to start from scratch, taking this as an opportunity to broaden my web development skills. Before I got started, I defined the type of website I wanted to own.
- A site that is personal. It should reflect who I am, what I like, and what I care about.
- A site that grows with me. It should evolve as I do, with space to update posts as I learn new things and room for new types of content.
- A site that I control. I don’t need a fancy CMS that actually limits what I can do, I want to own my content and the way it’s presented.
- Oh! And it should have a blog. Blogs are a part of the web I grew up with that I really miss. Let’s bring them back!
This new philosophy would guide my design and development decisions, and it was partly inspired by the IndieWeb movement and the many creators who are part of it.
The design process
Since this was a personal project, I took a relaxed approach. I explored similar websites, sketched out ideas on paper, daydreamed about the types of content I wanted to share, and created colour palettes that resonated with me. Then, I explored those ideas on Figma and iterated until they felt just right.
Other than that, my design process was guided by two main questions.
If I could hire someone to build this website for me, what would it look like?
I didn’t want to think about limitations just yet. Whenever I found myself hesitating about whether I would be able to implement a feature with my development skills, I went back to this question. Some aspects of this site would not have been possible without this mindset, such as the playful paper-like borders or the star ratings in /library.
What have I learned during these years as a product designer that I want to incorporate into my website?
The first thing that sprung to mind was accessibility. Guidelines exist to ensure the web is welcoming for everyone, and this resonated with the kind of space I hoped to create. Obvious hover and focus states and a theme toggle were only a few of the features motivated by this learning.
A clearer information architecture was also a priority. In my previous website, posts that didn’t fit the portfolio format were grouped into a single chaotic section. This time around, I accounted for different types of content from the start.
The development process
Remember that first question I asked myself? Well, it was up to me to become that web dev for hire, and it was not a straightforward task.
First attempt: Hugo
I had experience with HTML, CSS, and JavaScript, but I had never built a site from scratch. I enlisted the help of my wonderful partner, who initially recommended Hugo, a static website builder I had heard about before.
Something that drew me to Hugo was the way it handles content. Posts are generated from Markdown files that I can access and edit within VS Code. I can also easily add metadata with front matter, as shown below.
---
draft: true
title: 'kaiajimenez.com'
description: 'Welcome to my most ambitious side-project to date'
publishDate: '2026-02-01'
summaryImage: './website_featured.webp'
---Unfortunately, working with Hugo quickly became a frustrating experience. These are a few of the reasons that led me to look for other options:
- Hugo’s Go template syntax was unlike any I had learned, and I found it unintuitive.
- Its documentation was seemingly written for a more experienced audience, which did not make it any easier to learn the syntax, project structure, etc.
- I struggled to implement more dynamic elements, and soon it became clear that a component-based approach was more fitting for my designs.
So, right as I was about to finish my implementation, I found an alternative.
Second attempt: Astro
While searching for more inspiration, I came across many sites that used Astro. The migration journey could be a post in itself, but I’ll try to keep it brief.
Here’s why I chose Astro for my second and final attempt:
- I wasn’t forced to learn new syntax, since it uses TypeScript. I was already familiar with it, and learning more of it felt more useful to me than learning Go templates.
- Astro’s documentation is much easier to follow, in my opinion.
- It has an engaged community that actively contributes with resources.
- Its component-first philosophy worked better with my design approach.
- I can extend my Markdown with MDX for easy use of components within my content.
That’s what lets me add callouts to my posts, like this one! Or icons, like this one
Fortunately, Astro also allows me to create and edit content as Markdown files, which made migrating relatively easy.
Room for improvement
While this new version of kaiajimenez.com is now live and fully functional, there is always room to learn.
Below are some of the areas I’d like to improve in the future:
- Transitions and animations.
- A better blog with tags, reading time, and an RSS feed.
- Use OpenGraph to generate dynamic previews for social media sharing.
- Make use of the component-based architecture that Astro offers to showcase more dynamic content in my posts.
Here’s a sneak peek for some of those ideas!
Final thoughts
If you’ve made it this far, thank you for taking the time to read about this site’s journey. Building it has been a bigger task than anticipated, but it’s been very rewarding! I’ve learned so much in a short span of time, and I’m now feeling more confident in my web development knowledge. I hope that this site will be a space where I can continue to learn and build new things.