NextJs MDX Portfolio.

This is a portfolio website built with NextJs and MDX. It uses the @next/mdx package to render MDX content in NextJs pages.

✨ Features

• MDX Support 📝: Write content in MDX format.
• Syntax Highlighting 🖍️ : Code blocks are syntax highlighted.
• Custom Components 🗃️: Use custom components in your MDX files.
• Responsive Design 📲: The website is responsive and works on all devices.
• Light & Dark Mode 🌗: The website supports dark mode.
• SEO Optimized 🔍: The website is optimized for search engines.
• Contact + Newsletter 📧: A contact form to get in touch and a newsletter form to subscribe.
• Image Optimization 🖼️: Images are optimized for faster loading.

🧰 Tech Stack

• Next.js ⚛️: A React framework for building static and dynamic websites.
• MDX ✍️: A file format that allows you to write JSX in your Markdown files.
• TailwindCSS 🎨: A utility-first CSS framework for building custom designs.
• Vercel✅: A cloud platform for static sites and serverless functions.
• Resend 📧: A service for sending emails and SMS.
• Shadcn/ui 🧩: Customizable and accessible React UI components built on Radix UI and TailwindCSS.

🧠 Challenges & Solutions

• MDX + React: Embedding React components caused hydration mismatches initially. Using dynamic imports and isolating interactive parts fixed this.
• Theme Toggle: Ensuring smooth, flicker-free theme switching was tricky, but Tailwind’s utilities and state persistence made it manageable.
• Image Optimization: Managing images for different screen sizes was challenging. Using Next.js's built-in image component solved this, ensuring responsive images without manual adjustments.
• SEO: Ensuring SEO best practices with MDX was tricky. Using Next.js's Head component and structured data helped improve SEO.

🔮 What’s Next?

• 📊 Integrate advanced analytics to track engagement
• 🔧 Add more custom MDX components and shortcodes
• 💻 Include interactive portfolio demos and live code examples
• 📧 Enhance the newsletter feature with segmentation and analytics

🚀 Deployment and platforms

• Vercel ▲
• Cloudflare ☁️
• Namecheap 🌐
• Resend ✉️
• ImprovMX 📬

✅ Final Thoughts

• This portfolio is a reflection of my growth and creativity as a developer. Using Next.js, MDX, TailwindCSS, and Resend, I’ve built a site that’s scalable, maintainable, and a joy to work on.

• I hope you found this project interesting and informative. If you have any questions or feedback, feel free to reach out to me.Thanks for reading!