The Idea
I previously had a website on WordPress, but I wanted an upgrade. Specifically, a cleaner, modern website that ran smoothly. I decided to give Claude Code a try. I generated a prompt with the help of Claude, then gave it to Claude Code. It generated this whole website with my guidance. Then I started to add projects, and modify small details here and there.
How It Works
The website is built on Next.js, and is hosted by Cloudflare Pages.
Content
Projects are stored in individual MDX files, with metadata like the title, date, and thumbnail, and the full project writeup as the content.
Contact Form
This features two layers of moderation, one manual, and one AI (powered by Claude). The manual detection filters all messages that contain hateful content, and the AI checks one level deeper, categorizing messages, based on the content. Every message is filtered. There are three categories that each message could fall into: Allow, Hateful, or Gibberish. If the message is hateful, it blocks the message, and if the message contains random strings, it marks the message as gibberish. Finally, there is a captcha, so no bot can spam or send a message.
This makes sure that there are no hateful or random messages appearing.
Performance
I wanted to make my website as fast as possible, while remaining functional. I optimized my website, so everything fits together. Each image is WebP, resized and compressed at build time for fast loading without losing quality. Desktop speeds are regularly a 100 on Cloudflare Synthetic Monitoring, while Mobile range from 80 to 90, which is still great.
Easter Eggs
While I was modifying this website, I also wanted to add some easter eggs.
Visit the Achievements page for hints on finding all the hidden secrets.
Note: Claude helped me with designing and implementing features into my website
Challenges
There were some challenges along the way, such as builds failing, the formatting breaking, and the captcha not working. After all of these hurdles, the website turned out perfect!
What I Learned
I learned a lot about how websites work, and how the structure of a website is formed. I also learned a lot about improving performance, and how AI tools can help development.
The website looks amazing right now. It is sleek, modern, and runs smoothly.