First Blog Post

    •3 min read
    web-developmentai

    First Post!

    The blog is finally set up, and it's thanks to VSCode's AI agent mode. The agent mode has been super helpful getting me to this point, but I'll do the heavy lifting from here. I love that I can make a request in a chat window, the agent scans my directory structure and just does everything in the background while I'm anticipating the next problem. I've been procrastinating setting up the blog because I had no idea how to start, and this blog scaffolding from Vercel wasn't being very helpful when I asked a question.

    Using AI agents does feels like sort of a cheat, I'll admit. But to be fair, I'm not a web developer anyway, and this is more of a hobby or a 4fun project. On the other hand, if I did want to get into web development, I should seriously learn everything that I'm writing. I do feel like I can understand why the AI agent does certain things but it would take me a lot longer to figure it out (and a lot of googling!). Moreover, this website could have been a lot easier since I'm just making a static website. I could have just used something easier like Hugo or plain html or md files, but I'm extra and wanted to learn typescript and Next.js so I feel like a real software engineer (lol).

    I wrote pretty much everything else on the website though, but I appreciate having a second glance at the codebase, especially because I'm a noob with TypeScript and don't have anyone else to consult. I'm sure this website is really bad if a real web developer came across it, but it's fineokay.

    So far, I've gotten help with the following things:

    • Refactoring codebase into src/ folder
      • Previously folders like components/, styles/, and types/ were located on the top level which made the code feel cluttered yet scattered
      • I had to explicitly tell the AI agent to use the new @app router structure for modern Next.js
        • Refactoring redundant item lists (and other code) from the various pages
      • I keep forgetting that the core principle behind and power of React is the modularity and reusability of components
    • Refactoring app/ folder into logical groups using parenthesis syntax ()
    • Setting up the blog
      • Uses mdx for the blog posts (basically markdown plus react) which is A) easy to write and B) maintains consistent formatting
      • Slug generation
        • Use the metadata variable from each posts
      • Chronological Pagination (newest first), showing five posts at a time
        • on the / (index) route -- limited to the three latest posts
        • on the /blog route
      • Table of contents generation
      • Time-to-read estimation
        • Assumes a reasonable 200 words read per minute
    • Setting up the portfolio
      • Links to and pulls information from my resume GitHub repository
      • Grouped by month and year
      • Ability to download each resume
      • Drop down under each release

    TLDR; I still don't really know what I'm doing with this website, so I'll use the AI to point me in the right direction.