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 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, it looked like this until recently
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 (yes, 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.
The biggest challenge was creating post layouts that adapted to different types of content, but felt cohesive. Using reusable components was key in achieving this, so despite the more relaxed approach I ended up creating a basic design system for myself.
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?
Accessibility was a priority. Guidelines ensure the web is welcoming for everyone, and this resonated with the kind of space I hoped to create. Clear hover and focus states, proper contrast, and a theme toggle were some of the features motivated by this learning.
I also wanted a clear information architecture. In my old website, posts that didn’t fit the portfolio format were grouped into a single section. This time around, I accounted for different types of content from the start, both in terms of layout and organisation.
During my time as a product designer, I’ve also learned more about micro-interactions. I’ve begun applying some of these learnings with small animations and transitions, but I’d like to expand on these in the future.
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 recommended Hugo, a static website builder. At first glance, it looked simple enough.
What 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 seemed 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 realised that Hugo did not make sense for the component-based approach I had used for my designs.
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!
Fortunately, Astro also allows me to create content as Markdown files, which made migrating relatively easy. The difficulty was mostly in adapting to its “islands” philosophy that follows component-first conventions.
Room for improvement
While this new version of kaiajimenez.com is now live and fully functional, there is always room to learn. One of my ambitions was to create a site that grows with me, after all.
Below are some of the areas I’d like to explore in the future:
- Transitions and animations.
- Tags, reading time, and an RSS feed for /blog.
- Dynamic previews for social media sharing with Open Graph images.
- Showcase more dynamic content in my posts, such as link and post previews.
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 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.