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/
, andtypes/
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 modernNext.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
- Previously folders like
- 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
- on the
- Table of contents generation
- Time-to-read estimation
- Assumes a reasonable 200 words read per minute
- Uses
- 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.