Astro Portfolio

Table of Contents

Introduction

I have indeed been using React and JavaScript quite a lot before, but not Astro. I stumbled across Astro while browsing through different website frameworks. Its landing page seems promising - better SEO, zero lock-in, and the support of major UI frameworks. I tried to build a static blog website using Hugo once, but it was a headache for my lack of familiarity with the Go language.

So I decided to give Astro a try using this cool template: Portfolio Template.

It has the bare bones but still misses some essential components and features. So, I decided to build my unique portfolio on top of it.

Development Details

I added these components to the original template:

  1. Dynamic Routing: Using Astro’s [slug].astro patterns to generate unique detail pages for every project.
  2. Theming: A seamless Dark Mode toggle and user-friendly color-theme.
  3. Component Architecture: Building out custom UI elements that weren’t in the original kit.

Rather than spending weeks leafing through documentation, I used AI as a high-speed pair programmer. By feeding the AI my specific requirements and the Astro documentation context, I was able to:

  1. Bridge the Gap: Understood Astro with the help of my knowledge of React.
  2. Automate Boilerplate: I used AI to generate the logic for the dark mode state management and the complex file-system routing required for the markdown slugs.
  3. Rapid Iteration: When a component didn’t behave as expected in the build step, I used AI to help me debug.

To generate unique and well-designed detail pages for my Markdown articles, I also used the code of this template as a reference: Blog Template.

By treating AI as a tool to boost my output rather than a crutch, I mastered the core components of Astro—from its unique .astro syntax to its structure—in just two days.

The result isn’t just a website; it’s a testament to how modern developers can stay agile. I didn’t just learn a new framework; I optimized the process of learning itself. My portfolio is now live, lightning-fast, and built on a stack that I actually enjoy maintaining.

Takeaways

  1. AI is a Helper, Not a Crutch: Using AI to handle boilerplate (like dark mode logic or slug generation) isn’t “cheating”—it’s efficient resource management. It allowed me to focus on the higher-level architecture and user experience.
  2. The “Two-Day Mastery” is the New Standard: With the right prompts and a solid foundational understanding of JavaScript, the learning curve for any new technology has been flattened. If you can describe the logic, AI can help you implement the syntax.
  3. Verification is the New Coding: My value shifted from writing lines of code to verifying them. As developers, our “taste” and ability to debug the AI’s output are now our most competitive assets.
  4. Caveat: AI is a pilot, not an autopilot. As a programmer, to efficiently make the best of AI, we still need a solid programming foundation to debug, read the error message, and understand the logic of the code.

In a nutshell, we need to learn to utilize this powerful tool to boost our productivity instead of fearing that it may take away our jobs.