**Building a Modern Developer Portfolio with Next.js and Hashnode** In the fast-paced world of tech, a strong developer portfolio isn’t just a showcase of your work—it’s your personal brand. To stand out, I built a portfolio that combines **Next.js**, **Hashnode Headless CMS**, **Tailwind CSS v4**, **Shadcn UI**, and **clean architecture principles**, offering a dynamic, scalable, and visually appealing experience. 👉 **Live Website**: [sm-y.dev](https://sm-y.dev/) 👉 **Source Code**: [GitHub Repository](https://github.com/smyaseen/smy) This portfolio isn’t your ordinary static site. It’s a content-rich platform featuring **light and dark mode with eye-friendly colors**, dynamic updates, **Hashnode’s view counter**, newsletter subscriptions, and a smooth developer workflow. It’s also fully **mobile-friendly**, ensuring an excellent experience across devices. Plus, it’s open for contributions—check the [README.md](https://github.com/smyaseen/smy#readme) to get involved! --- ### **What You’ll Learn** 1. **Integrating Next.js with Hashnode’s Headless CMS** for seamless blogging and portfolio management. 2. **Styling with Tailwind CSS v4** and building components with **Shadcn UI** for a modern and cohesive design system. 3. **Applying clean architecture principles** for scalability and maintainability. 4. Building features like **light and dark mode**, **tags**, **search functionality**, **Hashnode’s view counter**, and **newsletter subscriptions**. 5. Incorporating **Husky** for pre-commit hooks to run tests and validate commit messages for a robust workflow. 6. Creating a fully **mobile-friendly design** for optimal responsiveness. 7. Why this setup makes for a **modern, developer-friendly portfolio**. 8. How you can contribute to and expand this project! --- ### **Why This Matters** Your portfolio isn’t just a website—it’s the first impression you make on potential clients, collaborators, or employers. By combining **Next.js’s performance**, **Hashnode’s content editor and analytics**, and modern tools like **Tailwind CSS v4**, **Shadcn UI**, and **Husky**, this portfolio offers: * A **professional platform** to showcase your projects and blogs. * Easy **content updates** that reflect instantly without touching the code. * A visually stunning **user experience** with eye-friendly light and dark modes. * A **developer-friendly workflow** with pre-commit checks and testing automation. * Mobile responsiveness for an **optimized experience on all devices**. --- ### **Key Features of This Portfolio** Here’s what makes this portfolio modern and practical: * **Light and Dark Mode**: The site offers both light and dark themes, designed with cool, eye-friendly colors that make browsing pleasant, even during long sessions. * **Projects as Blog Series**: Each project is documented as a series of blog posts, offering detailed insights into its development journey. It leverages Hashnode's Series feature, where I've put all projects in the "projects" series. This helps me easily manage and separate them from blogs. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739104429143/8a0704aa-c17b-4833-8a54-c225478aeb8a.png align="center") * **Tags for Categorization**: Tags make it simple for users to explore related blogs and projects by topic. * **Search Functionality**: A fast, intuitive search bar allows visitors to find specific content easily. * **Newsletter Subscription**: Visitors can subscribe to stay updated with the latest blogs and projects. * **Hashnode View Counter**: Integrated with **Hashnode’s analytics**, each blog post displays its view count, giving visitors insight into the popularity of the content. * **Mobile-Friendly Design**: The portfolio is fully responsive, ensuring a smooth browsing experience on desktops, tablets, and smartphones. * **Dynamic Content Updates**: Using **Hashnode’s Blog Editor**, I can effortlessly add or edit blogs and projects, and the changes are reflected instantly on the site. * **Modern UI with Tailwind CSS v4 and Shadcn UI**: Styled with the latest **Tailwind CSS v4**, the portfolio features updated utility classes and modern design patterns. Components built with **Shadcn UI** ensure consistency, responsiveness, and a sleek, professional look. * **Husky for Pre-Commit Hooks**: I’ve integrated **Husky** to enforce pre-commit checks. This ensures that commit messages follow the required format, tests are run, and the codebase remains stable and consistent. It’s a critical addition to maintain code quality in collaborative or solo projects. * **Clean Architecture**: The project is structured for scalability and long-term maintainability, ensuring that future updates or refactors are straightforward. --- ### **Why This is a Modern Portfolio** This portfolio is more than just a personal website—it’s a dynamic and engaging platform tailored to today’s developer needs: 1. **Integrated Content Management**: By leveraging Hashnode Headless CMS, I can focus on content creation while ensuring seamless integration with the site. 2. **Developer Storytelling**: Projects as blog series allow me to narrate my journey, challenges, and solutions for each project, adding depth and personality to my portfolio. 3. **Enhanced Visual Experience**: The light and dark modes, styled with **Tailwind CSS v4**, ensure that the site looks sleek while being easy on the eyes. 4. **Future-Ready Design**: Clean architecture ensures the portfolio can grow with me, whether I’m adding new features, content, or scaling it for higher traffic. 5. **Developer-Friendly Workflow**: With **Husky** automating pre-commit hooks, I’ve ensured that every commit meets the project’s quality standards, making it a joy to collaborate or expand upon. 6. **Mobile Optimization**: A fully responsive design ensures users can access the portfolio seamlessly across all devices, from desktops to smartphones. --- ### **What’s Next?** While this portfolio already packs a punch, there’s always room for improvement. Here’s what I plan to work on next: * **Refactoring and Performance Optimization**: Clean up the codebase and optimize for faster load times and better performance. * **UI/UX Enhancements**: Add animations, improve responsiveness, and further refine the design using **Tailwind CSS v4** and **Shadcn UI** components. * **Like and Comment Features**: Leverage Hashnode’s like and comment capabilities to enable more user interaction with blogs. --- ### **Open for Contributions** This project is open-source, and contributions are highly welcome! If you’d like to add new features, fix bugs, or improve the design, feel free to fork the repository and submit a pull request. 👉 **How to Contribute**: Check the [README.md](https://github.com/smyaseen/smy#readme) for detailed steps on setting up the project locally and making contributions. --- ### **Takeaways** Here’s why this blog matters to you: * Learn to build a **Next.js portfolio integrated with Hashnode Headless CMS**. * Discover the importance of **clean architecture** for maintainable, scalable projects. * Explore features like **light and dark mode**, **tags**, **search**, **Hashnode’s view counter**, and **newsletter subscriptions** that can elevate your portfolio. * Understand how to use **Tailwind CSS v4**, **Shadcn UI**, and **Husky** for a professional, robust, and developer-friendly portfolio. * Get involved in an **open-source project** and collaborate to improve it. --- Building this portfolio has been an exciting journey, and I hope it inspires you to create something similar—or even better! Explore the code, contribute your ideas, and share your feedback. Let’s build something amazing together! 🚀