Forem

Suteerth Subramaniam
Suteerth Subramaniam

Posted on

Building a Modern Portfolio with Next.js, MDX, and AWS

๐Ÿ‘‰ Check out my portfolio website here or here and let me know what you think! (yes I have two domains ;D)

A personal portfolio is more than just a websiteโ€”it's a digital reflection of your journey, achievements, and expertise. With that in mind, I set out to create a modern, high-performance portfolio that not only serves as a showcase but also as a platform for blogging, documenting experiences, and sharing insights.


Why Next.js and MDX?

๐Ÿ”น Performance Meets Flexibility

I chose Next.js for its powerful features like server-side rendering (SSR), static site generation (SSG), and dynamic routingโ€”all essential for building a fast and scalable portfolio. Additionally, MDX (Markdown for JSX) allows me to write blog posts in Markdown while seamlessly integrating React components, making content more interactive and engaging.


Project Overview

Tech Stack

๐Ÿ“Œ Framework: Next.js

๐Ÿ“Œ Content Management: MDX

๐Ÿ“Œ Styling: Sass + PostCSS

๐Ÿ“Œ Syntax Highlighting: Prism.js

๐Ÿ“Œ Deployment: Vercel

๐Ÿ“Œ Email & Rate Limits: AWS (SES, Lambda, API Gateway, DynamoDB)


Custom Architecture on AWS

As an AWS Certified Solutions Architect Associate, I designed a self-sufficient architecture to handle:

โœ… Rate limiting

โœ… Email notifications

โœ… Scalability needs

This showcases my cloud expertise and ability to build production-ready solutions.


Features

โœจ Dynamic Routing: Navigate seamlessly through different sections like About, Academia, Blog, and Beyond Resume.

โœจ MDX Integration: Write blog posts in Markdown while embedding React components, enabling interactive and rich content.

โœจ Customizable Themes: Built using Sass and PostCSS, allowing for easy styling and adaptability.

โœจ High-Performance Rendering: Optimized for speed with Static Site Generation (SSG) and Incremental Static Regeneration (ISR).

โœจ Syntax Highlighting for Code Snippets: Using Prism.js, my blog supports syntax highlighting for technical posts.


Custom Email Service using AWS

๐Ÿ“ฉ Sending emails from my custom domain using AWS SES.

๐Ÿ“ AWS Lambda (written in Golang) processes the email requests.

๐ŸŒ API Gateway handles endpoints with DynamoDB-backed rate limiting.

This ensures a scalable, efficient, and cost-effective email system for my portfolio.


Beyond Tech: Who Am I?

๐Ÿ’ก FinTech & Cloud Enthusiastโ€”Passionate about building scalable, efficient, and customer-centric solutions.

๐Ÿ‹๏ธ Advanced Powerlifter & Fitness Enthusiastโ€”Applying resilience, discipline, and continuous growth in all aspects of life.

๐Ÿ”„ Multipotentialiteโ€”Constantly exploring and learning across domains.


Letโ€™s Connect!

๐Ÿ’ฌ Drop a comment belowโ€”letโ€™s talk tech, cloud, or career growth!

๐Ÿ”— Connect with me on LinkedIn

๐Ÿš€ Onwards and upwards!

Top comments (0)