Next MDX Portfolio
Creating a developer portfolio is a rite of passage for many in the tech industry—a way to showcase your skills, projects, and growth as a developer. I recently embarked on this journey, building a robust and modern portfolio website that not only reflects my technical abilities but also serves as a dynamic platform for sharing knowledge and connecting with the tech community. The result is a sleek, fully-featured site built with NextJs and MDX, combining the power of TailwindCSS and shadcn/ui to deliver a responsive, aesthetically pleasing experience.
Source code
Enter your Github username and email to access the source code.
Tech Stack:
For this project, I chose a tech stack that balances flexibility, performance, and modern web standards:
- NextJs: As a powerful React framework, NextJs provides the foundation for my portfolio, allowing for fast rendering, SEO optimization, and seamless navigation between pages.
- MDX: I leveraged MDX for content management, enabling me to write blog posts using Markdown while embedding React components directly within my posts. This approach gives me the flexibility to create rich, interactive content without leaving the Markdown environment.
- TailwindCSS: For styling, I opted for TailwindCSS, a utility-first CSS framework that allows me to design directly within my markup. Tailwind’s flexibility made it easy to implement a consistent design across both light and dark themes.
- shadcn/ui: To enhance the user interface, I utilized the shadcn/ui library, which provided a set of pre-designed, customizable components. This allowed me to maintain a cohesive visual language across the site while focusing on functionality.
- Resend: For handling communication, I integrated Resend for the contact page and newsletter functionality. This includes sending emails through the contact form, adding subscribers to Resend audiences, and utilizing Resend's broadcast feature to manage and distribute newsletter emails.
Features:
Light and Dark Themes: One of the key features of my portfolio is the ability to toggle between light and dark themes. This was implemented using TailwindCSS, ensuring a seamless transition and consistent user experience across both themes.
MDX-Powered Blog: The blog section of my portfolio is powered by MDX, allowing me to publish posts that are not only content-rich but also interactive. By embedding React components directly into the Markdown, I can create posts that include live code examples, charts, and other dynamic elements, enhancing the reader's experience.
Contact Page with Resend Integration: The contact page is designed to facilitate easy communication, with a form that sends messages directly to my inbox using Resend. This ensures that any inquiries are received promptly and securely.
Newsletter Subscription: I implemented a newsletter subscription form that allows visitors to sign up for updates. Subscribers are automatically added to a Resend audience, and I use Resend's broadcast feature to manage and send out newsletters, keeping my audience informed about new posts and projects.
Challenges and Solutions:
One of the primary challenges I faced during this project was ensuring the smooth integration of MDX with NextJs, especially when embedding interactive React components within blog posts. To overcome this, I leveraged NextJs's dynamic imports and carefully structured my MDX files to maintain performance and usability.
Another challenge was implementing the light and dark theme toggle in a way that felt natural and unobtrusive. TailwindCSS made this process easier by providing a utility-first approach, allowing me to implement theme-specific classes and ensure that the design remained consistent across different themes.
Future Improvements:
Looking forward, there are a few areas where I plan to expand and improve upon this project:
- Advanced Analytics: Integrating more sophisticated analytics to better understand user behavior and engagement with the content.
- Enhanced MDX Features: Expanding the use of MDX to include more custom shortcodes and components, enabling even richer content experiences.
- Interactive Portfolio Section: Adding more interactive elements to the portfolio section, such as project demos or live code snippets, to give visitors a deeper insight into my work.
Conclusion:
Building my developer portfolio has been an enriching experience that allowed me to combine my technical skills with creative design. The use of modern tools like NextJs, MDX, TailwindCSS, and Resend has enabled me to create a platform that is not only functional but also scalable and easy to maintain. As I continue to grow and evolve as a developer, I look forward to enhancing this site and using it as a hub for sharing knowledge, showcasing my work, and connecting with others in the tech community.
Resources
Here are the resources mentioned in this note: