Portfolio
Website

Claude Code HTML CSS AI Canva Github Vercel
Brand Identity Collage

Purpose

I wanted to create a website that could showcase my work, my skills, my interests. I have created websites before using C++ and HTML, but I wanted to try something new by using Anthropic's Claude Code website design tools and a method I had read about called Vibe Coding.

Process

The first step was designing my website's branding. I was able to get inspiration from sites like Pinterest and Public.Work to build my brand deck, which included the brand's logo, color palette, and typography. All of these elements I designed on Canva.

I then did some research on Vibe Coding for creating websites, and found the best video reference for creating my website: 5 Simple Hacks for Building Beautiful Claude Code Websites. The tools I used to create my website were Anthropic's Claude Code, Visual Studio Code, Github, and Vercel.

After connecting Claude Code to Visual Studio Code, I was able to create and tweak the website using prompt engineering and HTML edits. I started by creating the homepage in Visual Code Studio, and then added new pages for my projects and about sections with the help of Claude Code's built-in page creation tools. I also made sure to make the website responsive so that it would look good on all devices. I deployed the website using Vercel, which made it easy to share and get feedback on.

Outcome

I was able to design a website all on my own, in only a few hours! This is a project I plan on updating and tweaking as I learn more about website design and development, but I am very happy with how it turned out for a first version. I am also excited to have a space that can grow and evolve with me as I do. If you have any feedback or suggestions for the website, please feel free to reach out to me on LinkedIn or email.

Back to projects