TLDR,

No, this post was not written with any AI involved.

Here's what I used:

1. ChatGPT for prompt generation
2. Claude 3.5 Sonnet for initial code generation
3. V0 for initial setup
4. Copilot for ongoing development

If you're curious, the source code for this entire site is open at: https://github.com/hlminh2000/portfolio

Check it out, and you can buy me a coffee if you decide to clone it for yourself. 😉

Introduction

Somehow for the entirety of my career, I've got away without a portfolio site... I decided to change that this year. I didn't want a "resume on a webpage", I already have a LinkedIn page. I wanted a custom product where I can continuously build and experiment on, a space where I can share my journey in building tech, using tech.

All that seemed like a lot of work, and I'm no designer, and frankly too lazy to hand-code the design. So it being 2025, I decided to see what happens if I went all-in with using AIs for this.

Though I have a lot of other tools and thoughts that I can go on about all day, I want to focus this post on how AI tools made this timeline possible. There will be more posts to come about everything else involved.

1. ChatGPT for prompt generation

I started with my own prompt:

Generate me a concept for portfolio webpage design to showcase my work as a full-stack engineer. Imagine something that's modern, simple but creative, dark theme with gradient. Have sections for "about me", "timeline", "blog", "get in touch".

After feeding this to a few models, the result was underwhelming, so I thought the prompt could be better. I took the original prompt and dropped it into ChatGPT again, asking the AI to improve the prompt, like so:

Improve this prompt for better result: Generate me a ...".

Which yielded:

Design a concept for a portfolio webpage to showcase the work of a senior full-stack engineer. The design should be modern, minimalistic, and creative, with a dark theme enhanced by subtle gradient accents. Include clearly defined sections: 'About Me' featuring a profile photo, a concise bio, and a navigation bar; 'Timeline' showcasing career milestones in an elegant vertical layout; 'Blog' displaying previews of posts in a clean grid format with bold typography; and 'Get in Touch' with a sleek contact form and prominent social media icons. Emphasize a professional yet engaging aesthetic, using smooth transitions, well-placed highlights, and a balanced layout.

Clearly this is a much better prompt that actually describe what I was going for. I experimented with feeding this to ChatGPT and Gemini for concept art, and once I was happy with the prompt, it was time to go get some code.

2. Claude for initial code generation

Claude is known for its superior code generation. I've actually been using Claude quite often on a day-to-day, so naturally this was where I went to get the first batch of code.

My original prompt with Claude yielded the following:

With the improved prompt that ChatGPT gave me, the result was as follow:

Full-Stack Engineer
Building the future of web

With over 8 years of experience in full-stack development, I specialize in building scalable web applications using modern technologies. Passionate about clean code, performance optimization, and creating exceptional user experiences.

Career Timeline

2024

Senior Full-Stack Engineer

TechCorp

Leading development of cloud-native applications

2022

Full-Stack Developer

StartupX

Architected and built scalable web applications

2020

Frontend Developer

DigitalCo

Developed responsive web interfaces

Latest Posts

2024-12-15 · 8 min

Building Scalable Microservices

Exploring best practices for designing and implementing microservices architecture...

Read more

2024-11-30 · 6 min

React Performance Optimization

Deep dive into advanced techniques for optimizing React applications...

Read more

2024-11-15 · 5 min

The Future of Web Development

Analyzing emerging trends and technologies shaping the future of web development...

Read more

Get in Touch

Name

Email

Message

Send Message

Already, we can see the resemblance to the site you're on. That's just to show how a strong prompt makes all the difference, thankfully an LLM can help with that too.

3. V0 for initial setup

If you haven't already, you should totally check out V0. I learned about it from my friend Aaron at Vercel, its ability to generate UI code over multiple files that are nicely organized is a game changer.

For this project, I knew I wanted to use Next.js (which we will get into in another post), so I dropped the code that Claude gave me into V0, with the following prompt:

Set up a Next.js project with this code. For the timeline, include an optional image slots for visuals. Generate a blogs page, and individual blog pages for each blog post. Do this with consistent formats using the app router.

And voi-la! 🙌

The basic setup for my site was done, even comes with dynamic routing for the blog posts:

With a few more minor prompts, V0 got me 90% of what I needed to get started:

• a basic layout
• a blog page
• the basic routing
• basically a style guide that I can build on top of.

Once I got something I liked, it was a single command with shadcn to bring these components into my local setup to start on the coding fun.

Claude and V0 have probably together saved me a few days compared to if I was to design and setup everything myself.

4. Copilot for ongoing development

This one probably doesn't need much introduction.

Aside from the autocomplete - which can be rather hit-or-miss - it's particularly helpful for the kinds of small things that's just not worth much time to think about: being able to highlight a nav bar that's broken on mobile and say "make this responsive" is the kind of productivity boost that would have saved my soul in my early days of web development.

I can focus on writing the code I want to write, adding the finishing touches: tilting my profile picture just right, adding subtle visual cues and interactions, implementing that annoying blob that's been following you around all this time, etc... and of course the content and system on how I manage them.

Conclusion

This is by no means to say that no human effort was involved in the making of this site. There were tons of code I still have to (or rather, get to) write, but being able to get a unique design and setup put together in an hour is a huge productivity boost.

Content site generation is certainly the "simpler" side of web development, so this alone doesn't say much about the usefulness of these tools for larger systems, but they're only going to get better. I'm still writing tons of code for this project, it's just the type of code that I prefer to write.

I'm a developer with - what I'd like to think - a decent eye for design, but I'm no designer. Likewise, how many amazing product designers out there who don't have the capacity to sit down and realize their beautiful designs?

P.S. There's a ton more things I'd like to share here, about other tools and tech that was used for this project and beyond. Keep an eye out for more to come.