Give me a challenge, I’ll craft the solution - from GenAI builds to complex backends, I build, break, and perfect it.

github

projects

hashnode

Masir Jafri  • Peerlist

<h3>Overview</h3><p>This is a high-performance, aesthetically pleasing developer portfolio built with the latest web technologies. Designed for developers who want to showcase their work with a premium feel, seamless animations, and top-tier SEO.</p><h3>Features</h3><ul><li><strong>Dynamic Content Integration:</strong><ul><li><strong>GitHub API:</strong> Automatically fetches and displays repositories with star counts, forks, and language tags.</li><li><strong>Technical Blog:</strong> Seamlessly syncs latest articles from <strong>Hashnode</strong> and <strong>Medium</strong> via GQL and RSS.</li></ul></li><li><strong>Modern Aesthetics:</strong> Glassmorphism, mesh gradients, and Framer Motion micro-animations.</li><li><strong>High Performance:</strong> Optimized with Next.js 15+ and Turbopack for near-instant loading.</li><li><strong>SEO Ready:</strong> Dynamic metadata, OG images, and structured data out of the box.</li><li><strong>Fully Responsive:</strong> Beautifully crafted for all screen sizes.</li><li><strong>Theming:</strong> Smooth Dark/Light mode transitions.</li></ul><h3>Tech Stack</h3><ul><li><strong>Framework:</strong> <a href="https://nextjs.org/" rel="nofollow">Next.js 15+</a> (App Router, Turbopack)</li><li><strong>Library:</strong> <a href="https://react.dev/" rel="nofollow">React 19</a></li><li><strong>Styling:</strong> <a href="https://tailwindcss.com/" rel="nofollow">Tailwind CSS 4.0</a></li><li><strong>Animations:</strong> <a href="https://www.framer.com/motion/" rel="nofollow">Framer Motion</a></li><li><strong>UI Components:</strong> <a href="https://ui.shadcn.com/" rel="nofollow">Shadcn UI</a></li><li><strong>Analytics:</strong> Vercel Analytics &amp; Speed Insights</li></ul><h3>Architecture &amp; Benefits</h3><h3>1. Configuration-Driven Design</h3><p>Most of the site's content (SEO, social links, navigation, etc.) is managed via a central site.config.ts. This makes rebranding and updating your info incredibly easy without touching the core logic.</p><h3>2. Cutting-Edge Performance</h3><p>Leveraging Next.js 15+ and Turbopack, the project ensures lightning-fast build times and near-instant page transitions. It uses React Server Components (RSC) to minimize client-side JavaScript.</p><h3>3. Premium Aesthetics</h3><p>Built with a focus on "Rich Aesthetics," the portfolio features:</p><ul><li><strong>Glassmorphism</strong> and subtle mesh gradients.</li><li><strong>Micro-animations</strong> for interactive elements.</li><li><strong>Dark Mode by default</strong> with seamless toggling.</li></ul><h3>4. SEO &amp; Accessibility</h3><ul><li><strong>Dynamic Metadata:</strong> Automated OG tags, Twitter cards, and JSON-LD structured data.</li><li><strong>Semantic HTML:</strong> Fully accessible components following ARIA patterns.</li><li><strong>Fast LCP/FID:</strong> Optimized for Core Web Vitals.</li></ul><h3>Getting Started</h3><h3>1. Clone the repository</h3>git clone https://github.com/MasirJafri1/Portfolio-website.git
cd Portfolio-website<h3>2. Install dependencies</h3>npm install<h3>3. Environment Variables</h3><p>Create a .env.local file in the root directory (refer to .env-example):</p>cp .env-example .env.local<p><em>Note: Fill in your specific environment variables for Authentication and Analytics if needed.</em></p><h3>4. Run the development server</h3>npm run dev<p>Open <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a> in your browser to see the result.</p><h3>Project Structure</h3>src/
├── app/ # Next.js App Router (Pages &amp; API)
├── components/ # Reusable UI components (Shadcn + Custom)
├── config/ # Central configuration (site.config.ts)
├── hooks/ # Custom React hooks
├── lib/ # Utility functions &amp; shared logic
└── public/ # Static assets (images, icons)<h3>Customization</h3><p>To personalize the portfolio:</p><ol><li>Open src/config/site.config.ts.</li><li>Update the siteConfig object with your details, social links, and SEO metadata.</li><li>Replace images in the public/ folder.</li></ol><h3>Contributing</h3><p>Contributions are welcome! If you have a suggestion that would make this better, please fork the repo and create a pull request.</p><ol><li>Fork the Project</li><li>Create your Feature Branch (git checkout -b feature/AmazingFeature)</li><li>Commit your Changes (git commit -m 'Add some AmazingFeature')</li><li>Push to the Branch (git push origin feature/AmazingFeature)</li><li>Open a Pull Request</li></ol><h3>License</h3><p>Distributed under the MIT License. See LICENSE for more information.</p>