Building My Portfolio with Next.js and AWS

Why I Built a New Portfolio

I wanted a portfolio that not only showcases my work but also demonstrates my technical skills through its own implementation. Rather than using a template or a no-code builder, I designed and built everything from scratch.

Tech Stack Decisions

Why Next.js?

Next.js provides the best balance of developer experience and production performance for this type of project. The App Router with Server Components means most pages ship zero client-side JavaScript, and ISR (Incremental Static Regeneration) gives me the performance of static sites with the flexibility of dynamic content.

Why AWS?

AWS is the industry standard for cloud infrastructure. By building on AWS services (Amplify, S3, CloudFront, Cognito, SES), I demonstrate real-world cloud skills that translate directly to enterprise environments.

Key Features

Custom CMS

Instead of using a headless CMS, I built a custom admin panel. This gave me full control over the content model and allowed me to implement features like image optimization, markdown editing, and a contact message inbox.

Image Pipeline

Every uploaded image is processed through Sharp to generate multiple WebP variants (thumbnail, medium, large, original). These are stored in S3 and served through CloudFront for global edge caching.

Performance

The site achieves Lighthouse scores above 90 across all categories. Key optimizations include self-hosted fonts, lazy loading, code splitting, and CDN-delivered images.

Lessons Learned

Building this project reinforced the importance of planning before coding. The documentation-first approach meant that by the time I started implementing, I had a clear roadmap for every feature. This reduced rework and kept the architecture consistent throughout.

What's Next

I plan to continue iterating on this portfolio, adding features like an RSS feed, dark mode, and project filtering. The foundation is solid, and the admin CMS makes it easy to keep content fresh.