Overview

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.

Features

• Dynamic Content Integration:
  • GitHub API: Automatically fetches and displays repositories with star counts, forks, and language tags.
  • Technical Blog: Seamlessly syncs latest articles from Hashnode and Medium via GQL and RSS.
• Modern Aesthetics: Glassmorphism, mesh gradients, and Framer Motion micro-animations.
• High Performance: Optimized with Next.js 15+ and Turbopack for near-instant loading.
• SEO Ready: Dynamic metadata, OG images, and structured data out of the box.
• Fully Responsive: Beautifully crafted for all screen sizes.
• Theming: Smooth Dark/Light mode transitions.

Tech Stack

• Framework: Next.js 15+ (App Router, Turbopack)
• Library: React 19
• Styling: Tailwind CSS 4.0
• Animations: Framer Motion
• UI Components: Shadcn UI
• Analytics: Vercel Analytics & Speed Insights

Architecture & Benefits

1. Configuration-Driven Design

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.

2. Cutting-Edge Performance

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.

3. Premium Aesthetics

Built with a focus on "Rich Aesthetics," the portfolio features:

• Glassmorphism and subtle mesh gradients.
• Micro-animations for interactive elements.
• Dark Mode by default with seamless toggling.

4. SEO & Accessibility

• Dynamic Metadata: Automated OG tags, Twitter cards, and JSON-LD structured data.
• Semantic HTML: Fully accessible components following ARIA patterns.
• Fast LCP/FID: Optimized for Core Web Vitals.

Getting Started

1. Clone the repository

git clone https://github.com/MasirJafri1/Portfolio-website.git cd Portfolio-website

2. Install dependencies

npm install

3. Environment Variables

Create a .env.local file in the root directory (refer to .env-example):

cp .env-example .env.local

Note: Fill in your specific environment variables for Authentication and Analytics if needed.

4. Run the development server

npm run dev

Open http://localhost:3000 in your browser to see the result.

Project Structure

src/ ├── app/ # Next.js App Router (Pages & API) ├── components/ # Reusable UI components (Shadcn + Custom) ├── config/ # Central configuration (site.config.ts) ├── hooks/ # Custom React hooks ├── lib/ # Utility functions & shared logic └── public/ # Static assets (images, icons)

Customization

To personalize the portfolio:

1. Open src/config/site.config.ts.
2. Update the siteConfig object with your details, social links, and SEO metadata.
3. Replace images in the public/ folder.

Contributing

Contributions are welcome! If you have a suggestion that would make this better, please fork the repo and create a pull request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.