DEV Community

Suteerth Subramaniam
Suteerth Subramaniam

Posted on

3

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs