My Portfolio is Live: Here's What I Learned

Building this portfolio has been quite the journey! From choosing the tech stack to implementing features like the blog system and contact forms, every step taught me something new about modern web development.

Why I Built This

As a developer from Sydney, I wanted to create something that truly represents my skills and personality. Not just another template-based portfolio, but a custom-built site that showcases what I can do with modern technologies.

Tech Stack Decisions

Next.js 15 with App Router

I chose Next.js for its excellent developer experience and performance optimizations. The new App Router made structuring the site intuitive, and server components helped with initial load times.

Shadcn/UI + TailwindCSS

This combination was a game-changer. Shadcn/UI provided beautiful, accessible components while TailwindCSS gave me the flexibility to customize everything exactly how I wanted it.

TypeScript Throughout

Type safety was crucial for maintainability. It caught so many potential bugs during development and made refactoring much more confident.

Key Features I Built

Responsive Navigation

Created a header component that adapts between desktop text navigation and mobile emoji navigation. The emoji approach makes mobile navigation fun and unique!

Contact Form with Email Integration

Implemented a working contact form using Resend for email delivery. It includes proper validation, loading states, and user feedback.

Blog System

Built a complete blog system from scratch with:

• Search functionality
• Tag filtering
• Responsive design
• Markdown content support

Smooth Scrolling

Getting smooth scrolling to work properly across all browsers was trickier than expected, but worth it for the polished feel.

Challenges I Faced

Scroll Behavior Issues

The CSS scroll-behavior: smooth wasn't working consistently. Had to implement multiple approaches including JavaScript fallbacks and proper scroll padding for the sticky header.

Component Architecture

Deciding how to structure reusable components, especially the header with different variants for different pages, required careful planning.

Content Organization

Structuring the blog data and helper functions in a maintainable way was crucial. Ended up with a clean separation between data, types, and utilities.

What I Learned

Modern CSS is Powerful

TailwindCSS combined with modern CSS features like CSS custom properties made styling incredibly efficient and maintainable.

Component Reusability Matters

Building components like the site header with different variants saved tons of code duplication and made updates much easier.

Performance from the Start

Using Next.js Image components, proper caching headers, and optimized fonts made a huge difference in load times.

User Experience Details

Small touches like hover states, loading indicators, and proper error handling make the difference between a good site and a great one.

What's Next

I'm planning to add:

• Dark mode toggle (because who doesn't love dark mode?)
• More interactive animations
• Project case studies with detailed breakdowns
• Maybe an AI chatbot to answer questions about my work

Thoughts on the Journey

Building this portfolio reminded me why I love web development. Every problem has multiple solutions, and the satisfaction of seeing everything come together is incredible.

The best part? This isn't just a portfolio - it's a testament to continuous learning and improvement. Every feature I added taught me something new about React, Next.js, or modern web development practices.

Thanks for checking it out! Feel free to explore the code on GitHub or reach out if you have any questions about the implementation.

— Melvin