My First Personal Website
I built my personal website to be more than a static portfolio - a place to showcase projects, freelance work, and my growth as a developer.
Related
Read the full write-up →Overview
This was my first website that felt truly public and persistent, not a short-lived test project. I built it as a personal site about who I am and what I am building, then shaped the structure around what I wanted to share: projects, blog posts, and music.
The design direction came from a Tailwind site style I liked, which I adapted into my own version. I added a projects section to showcase my work, then introduced blogs because many of my early projects were simple and I wanted a space to explain my thinking, decisions, and growth behind the code. I also added a music section to keep the site more personal and fun.
What I Built
- A responsive multi-page frontend for portfolio, blog, and music/booking flows with reusable cards, section wrappers, theme switching, and motion-based reveals.
- The Payload CMS schema and admin-backed content system powering all dynamic sections.
- A validated contact workflow using React Hook Form, Zod, a server action, and Payload/Resend email delivery.
How It Works
- The public site is built in Next.js App Router with server-rendered sections that query Payload collections directly for projects, freelance work, blog posts, and mixes.
- Blog posts use slug-based routes, generated metadata, and a Lexical rich-text renderer so editorial content can be managed in the CMS but delivered through custom frontend components.
- Payload runs inside the same application, backed by PostgreSQL for structured content, Vercel Blob for uploaded media, and Resend for transactional email from the contact form.
Technical Highlights
- Single deployment with embedded CMS: I chose Payload over a separate-hosted CMS so the admin, content APIs, and frontend could ship together in one deployment instead of managing multiple services.
- Next.js architecture and component-first React patterns: I used this project to practice App Router structure, server/client boundaries, and reusable React components so new sections could be added without rewriting large parts of the UI.
- Tailwind-driven visual direction: The UI style started from Tailwind patterns I liked and was adapted into reusable layouts/components to keep the site cohesive while still feeling personal.
- Blog pipeline with Lexical rendering: Posts are managed in Payload and rendered through a custom Lexical rich-text flow, which let me publish project writeups with more depth than short portfolio summaries.