The latest articles on Forem by Baraa Alshaer (@blshaer). https://forem.com/blshaer https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3690972%2F51c98bf2-c77d-4d98-8e7e-45c19fb907ff.jpg https://forem.com/blshaer en Baraa Alshaer Sat, 10 Jan 2026 13:41:25 +0000 https://forem.com/blshaer/open-source-developer-portfolio-3952 https://forem.com/blshaer/open-source-developer-portfolio-3952 <h2> A Clean, Production-Ready Next.js Portfolio (Open Source) </h2> <p>If you’re building a developer portfolio with <strong>Next.js</strong> and want a <strong>real, production-ready reference</strong>, I open-sourced mine to help.</p> <p>It’s designed to be clean, scalable, and easy to customize—without over-engineering.</p> <h3> ✨ Highlights </h3> <ul> <li>Built with <strong>Next.js (App Router)</strong>, <strong>TypeScript</strong>, and <strong>Tailwind CSS</strong> </li> <li>Fully responsive and performance-focused</li> <li> <strong>Static export</strong> — deploy anywhere, no backend required</li> <li>Dark / light mode based on system preferences</li> <li>Contact form powered by <strong>EmailJS</strong> </li> <li>Scalable, <strong>data-driven</strong> structure for projects and experience</li> </ul> <h3> 🤔 Why this might be useful </h3> <ul> <li>Practical example of a modern Next.js portfolio architecture</li> <li>Simple to replace personal data, projects, and experience</li> <li>Clean separation between <strong>features</strong>, <strong>shared UI</strong>, and <strong>layouts</strong> </li> <li>Accessible UI with smooth animations using <strong>Radix UI</strong> and <strong>Framer Motion</strong> </li> </ul> <h3> 🔗 Repository </h3> <p><a href="https://github.com/blshaer/blshaer-website" rel="noopener noreferrer">https://github.com/blshaer/blshaer-website</a></p> <h3> 👤 GitHub </h3> <p><a href="https://github.com/blshaer" rel="noopener noreferrer">https://github.com/blshaer</a></p> <p>If this helps you build or improve your portfolio, a ⭐ on the repo or a<br><br> <a href="https://github.com/blshaer" rel="noopener noreferrer">follow on GitHub</a> is appreciated.</p> opensource portfolio webapp typescript