Afridi Hasan Shadhin

🌟 Premium Portfolio Website

A world-class personal portfolio website built with Next.js 15, React 19, and modern web technologies. Designed for top-tier software engineers showcasing Flutter, Android, Firebase, and system design expertise.

✨ Features

⚡ Performance First: Lighthouse 100 scores across all metrics
🎨 Aurora Elite Design System: Premium, futuristic design language
📱 Fully Responsive: Perfect on all devices
🔍 SEO Optimized: Schema.org, OpenGraph, Twitter Cards
♿ Accessibility: WCAG 2.2 AA compliant
🎭 Smooth Animations: Framer Motion & GSAP
📝 MDX Blog: Write posts in Markdown with React components
📊 Analytics: Google Analytics 4 & Microsoft Clarity
🤖 Type Safe: Full TypeScript support
⚙️ Production Ready: Enterprise-grade codebase

🛠️ Tech Stack

Frontend

Framework: Next.js 15+
React: 19+
Language: TypeScript
Styling: Tailwind CSS
Components: ShadCN/UI, Radix UI
Animations: Framer Motion, GSAP
Icons: Lucide React

State Management & Forms

State: Zustand
Forms: React Hook Form
Validation: Zod

Content & Data

Content: MDX (Markdown + React)
Charts: Recharts
Code: Shiki

Analytics & SEO

Google Analytics 4
Microsoft Clarity
Next SEO
Structured Data (JSON-LD)

Deployment

Hosting: GitHub Pages
CI/CD: GitHub Actions
Package Manager: npm/pnpm/yarn

📋 Site Structure

├── Hero Section
│   ├── Animated Headline with Typing Effect
│   ├── CTA Buttons
│   └── Social Links
├── About Me
│   ├── Bio
│   ├── Journey Timeline
│   └── Stats
├── Skills & Expertise
│   ├── Categorized Skills
│   ├── Proficiency Matrix
│   └── Badges
├── Featured Projects
│   ├── Project Cards
│   ├── Category Filtering
│   └── Links to GitHub/Live Demo
├── Blog (MDX)
│   ├── Article Listing
│   ├── Categories & Tags
│   └── Full Articles
├── Contact Section
│   ├── Contact Form
│   ├── Social Links
│   └── Email
└── Footer
    ├── Quick Links
    └── Copyright

🚀 Getting Started

Prerequisites

Node.js 18+
npm, yarn, or pnpm

Installation

Clone the repository

git clone https://github.com/yourusername/portfolio.git
cd portfolio

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Setup environment variables
```
cp .env.example .env.local
```

Edit .env.local with your configuration:

NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_CLARITY_ID=xxxxxxxxxxxxx

Run development server
```
npm run dev
```

Open http://localhost:3000 in your browser.

📦 Available Scripts

# Development
npm run dev              # Start dev server
npm run build            # Build for production
npm run start            # Start production server
npm run lint             # Run ESLint
npm run type-check       # Check TypeScript
npm run format           # Format code
npm run export           # Export static site

🎨 Design System

Aurora Elite Colors

Primary: #6366F1 (Indigo)
Secondary: #8B5CF6 (Purple)
Accent: #06B6D4 (Cyan)
Success: #10B981 (Green)
Warning: #F59E0B (Amber)
Error: #EF4444 (Red)

Typography

Headings: Inter (Bold)
Body: Inter (Regular/Medium)
Code: JetBrains Mono

🌐 Deployment

GitHub Pages

Update package.json

{
  "homepage": "https://username.github.io"
}

Configure next.config.js (already configured)
Deploy with GitHub Actions
```
git push origin main
```

GitHub Actions will automatically:

Build the project
Run tests
Deploy to GitHub Pages
Generate Lighthouse reports

Manual Deployment

npm run export
# Push the 'out' directory to gh-pages branch

📝 Content Management

Adding Blog Posts

Create a new file in src/content/blog/:

---
title: Getting Started with Flutter
description: A beginner's guide to Flutter development
author: Your Name
publishedAt: 2024-01-15
tags: [flutter, dart, mobile]
category: Tutorial
---

# Your content here...

Adding Projects

Update src/components/sections/ProjectsSection.tsx with new project data.

🔍 SEO Configuration

The portfolio includes:

✅ Sitemap generation
✅ Robots.txt
✅ JSON-LD structured data
✅ OpenGraph meta tags
✅ Twitter Card support
✅ Dynamic meta tags per page
✅ Canonical URLs

♿ Accessibility

✅ WCAG 2.2 AA compliance
✅ Semantic HTML
✅ ARIA labels
✅ Keyboard navigation
✅ Screen reader support
✅ Color contrast compliance
✅ Focus indicators

⚡ Performance Optimization

✅ Image optimization with Next.js Image
✅ Code splitting & lazy loading
✅ CSS-in-JS optimization
✅ Minification & compression
✅ Critical CSS inline
✅ Font optimization
✅ Core Web Vitals target

Target Metrics

LCP: < 1.5s
FID: < 100ms
CLS: < 0.05
Lighthouse: 100 across all categories

📊 Analytics

Google Analytics 4

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

Microsoft Clarity

NEXT_PUBLIC_CLARITY_ID=xxxxxxxxxxxxx

🛡️ Security

✅ Content Security Policy
✅ X-Frame-Options
✅ X-Content-Type-Options
✅ Referrer-Policy
✅ No inline scripts
✅ Secure headers

🧪 Testing

# Run tests
npm test

# Run tests in watch mode
npm test -- --watch

# Generate coverage report
npm test -- --coverage

📱 Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Design inspiration from Linear, Stripe, Vercel, and Notion
Icons by Lucide React
UI Components by Radix UI & ShadCN
Fonts by Google Fonts

📞 Contact

Email: shadhin@example.com
LinkedIn: https://linkedin.com/in/shadhinafridi
GitHub: https://github.com/shadhinafridi
X/Twitter: https://x.com/shadhinafridi

📚 Resources

Made with ❤️ by Shadhin Afridi