[YJX]

Personal Website

[Source Code] [Live Demo]

This is my personal website and blog, built using Astro and TailwindCSS.

After all the years, I have remade this site multiple times, going with various technologies and frameworks such as React, Vue. This time, I landed with Astro for its ‘in-the-middle’ approach that handles the static site generation and markdown integration, while providing the flexiblity to just drop in some javascript when needed.

In this refresh, quite a bit of the styling is aided by AI technology. I am quite happy with the guidance and ability to mix and match designs that I would not have put in the effort to try, given the amount of time I would need to dive into the color choices, styling, etc. I think it’s a great example of how AI can be a great ‘jack-of-all-trades’ assistant to enhance people’s lives.

Technology Stack

  • Framework: Astro, handles all the basics of a static site generator with great support for markdown and modern web features.
  • Styling: Tailwind because I do not want to wrangle too much with CSS.
  • Content: Markdown for its simplicity.
  • Deployment: Hosted directly on GitHub Pages.

Development Process

Remodeling this personal website has always been a hobby side project to check out the fun new things in the web development space. With AI, I got another chance to check out Astro. I always heard good things about it so I wanted to give it a shot. After trying out React, Vue and Svelte, I realised I don’t have enough time to dive into using all the features of these frameworks. I do not need all that reactivity and stuff. I just want a simple website that I can occasionally write some javascript. Astro fits in nicely to handle all of that static site generation while coming with the simple astro templating that allows for me to inject more complex logic when I want to.

For the theme, I turn to AI for inspiration. Starting off, I just popped open a new chat and asked Gemini for some inspiration for my website, giving it some keywords like ‘backend developer’, ‘minimal’. The idea of a ‘blueprint’ theme came up and I also threw in the nord color scheme that has accompanied my developer journey. At the end, I asked the agent to generate a plan which you can find in the PLAN.md file. I plonked it into the code folder and swapped over to Antigravity to help me build it.

Wins

The agent is really good at slapping together the theme and following the plan. I asked it to generate a few sample content pages so I could see how the site will look when its all populated. All this was done in a few minutes by the agent. In comparison, doing it myself I would not have spent that much effort in fleshing out the content.

Challenges

Agent is quick to generate a lot of code, it might not be the best or most coherent. It is still a manual proces to ensure that everything is in order. For example, it missed out updating the 404 page (though it was just another quick prompt to fix it). Even now, I am not too sure if the theme is consistent.

Moving forward, I think AI will become a key tool in everyone’s daily lives, like it or not. With how quickly it can bootstrap projects, its just another step in how technology is augmenting our lives. I am grateful that it can help me put out this website and make it fun to work on.