Back to Home

How I Built This Site in Under 4 Hours With AI

AIArchitectureVercel

How I Built This Site in Under 4 Hours With AI

Recently I tried Claude AI and was instantly hooked. I used the free version in the chat prompt to see how well it could build code. After taking what it made and dropping it into various pages, I knew I wanted more out of it, so I purchased pro.

I would say in the least, if you are going to try this tool, you have to try the pro version and see how well it works with your editor. In my case I used Visual Studio Code and asked it to write a Next JS site. Here are the steps I used to get this site to where it is now.

How I did it.

I searched the internet for other examples of resume sites to get an example of what I wanted. I then told Claude to use an example to build this site with the resume that I fed it via file path.

Once I had my starting look for the site, I went ahead and customized a few things.

  • I updated the link structure.
  • Removed a couple sections I didnt think were necessary.
  • Updated linking behaviors on panels as well as sites found in text.

I found that my experience section was a little big so I asked Claude to show the first 5 and build a more link after that.

Then I thought it would be really neat if I had my blog posts from my old site integrating in here. So I asked Claude:

  • What different approaches I could take to run a blog through my site. We landed on the use of MDX files to produce my blog posts as I am technical and dont need a front end interface.
  • From there I asked it to import my blog posts. At first it only imported the first 3 without images, and it changed the structure of my blogs.
  • So I specifically told it to import the text as it is, include images, and to do all the posts. And it elegentally pulled everything over!
  • Finally I asked it to add tag filtering and pagination.

From there I upload to my github, synced vercel, and point my domain DNS at the site.

Complete in under 4 hours!

Overall I think it did a really good job of interpretting what I was asking it. It did have a hiccup on how to import data from my old blog site. But I learned once I gave it more specifics it knew what to do.

I also found a few bugs along the way, but upon prompting Claude about those issues, it was able to find the problem usually within one or two prompts.

I think this AI Agent might be my personal favorite at the moment. I am certainly doing my best to max out he tokens per day (200k, you can pay for more). If I was to describe it, its like having a junior developer in your back pocket, just 100x faster at coding. You still need to understand the architecture in order to direct it properly, but the time saving of building out structure is impressive!

I think AI code generation for smaller projects is a no-brainer. It allows you to move past the redundant structure buildout we all spend so much time on and really focus on learning new things and improving what you have. For me I learned all mdx based blogs. I think you still need to understand fully what is being developed under the hood, and I think as you escalate into larger projects, the more standard approach to planned architecture will prevail.