I recently rebuilt my personal website using Next.js, Tailwind CSS, and the amazing Cursor IDE. Here's a breakdown of the process, the tech stack, and what I learned along the way.

---

The Tech Stack

• Next.js 15.3.2 – For server-side rendering and performance
• Tailwind CSS – For rapid styling and consistent design
• TypeScript – For type safety and confidence while coding
• Vercel – For seamless deployment

---

Development Journey

1. Initial Setup & Design

The vision: a retro-tech inspired portfolio that’s both modern and nostalgic.
Dark background, green accents, and terminal-style typography evoke a classic feel.

---

2. Key Features

• Retro-inspired styling (green glow, terminal fonts)
• Animated UI (blinking cursors, loading dots)
• Fully responsive layout
• Grid overlays & glowing borders
• Type-safe newsletter form

---

3. Project Structure

Built with the Next.js 13+ app directory, including:

• Custom layout components
• Static site generation
• Client-side interactions via React hooks
• Custom loading and 404 states

---

4. Styling Approach

Tailwind CSS with custom configuration:

• Custom color palette for brand identity
• Breakpoints for full responsiveness
• Animations for UI feedback
• Fonts: JetBrains Mono & VT323

---

5. Deployment & Performance

Hosted on Vercel with:

• Automatic deploys via GitHub
• Custom domain setup
• Image optimization
• Edge caching for global speed

---

Key Learnings

• How to properly configure Next.js for deployment flexibility
• Preventing layout shift using container widths
• Why utility-first CSS (Tailwind) speeds up iteration
• CSS Grid and Flexbox can peacefully coexist

---

What's Next?

• Switch to MDX for blog content (😅 kinda doing that now)
• Dark/light mode toggle
• More interactive micro-features
• Project showcase section

---

This site is open source on GitHub.
Feel free to check it out and remix it for your own ideas!