🚀 Hamdi Ben Jarrar's Portfolio

✨ About This Project

A modern, high-performance portfolio website built with cutting-edge technologies to showcase my journey as a Full-Stack Developer and Digital Innovation Leader. This portfolio represents not just my work, but my commitment to excellence, performance, and creating meaningful digital experiences.

🎯 Performance Scores

Metric	Desktop	Mobile
🚀 Performance
♿ Accessibility
🎯 Best Practices
🔍 SEO

Powered by Google Lighthouse

🛠️ Built With

Frontend

Animation & Interactions

Backend & APIs

Analytics & Performance

🌟 Key Features

🎨 Design Excellence Modern UI/UX with bold classic aesthetics Smooth Animations using Framer Motion & GSAP Custom Cursor for enhanced interactivity Page Transitions for seamless navigation Responsive Design optimized for all devices	⚡ Performance Optimized 100% Lighthouse Scores across all metrics Next.js Image Optimization with priority loading Optimized Font Loading using next/font Code Splitting for faster page loads SEO Optimized with structured data
🔒 Security First Content Security Policy (CSP) HSTS with preload & includeSubDomains Cross-Origin Policies (COOP, CORP) X-Frame-Options & XSS Protection Secure Headers on all routes	📊 Analytics & Insights Real User Monitoring with Vercel Analytics Performance Tracking with Speed Insights Core Web Vitals monitoring User Behavior insights Conversion Tracking

🚀 Quick Start

Prerequisites

• Node.js 18.x or higher
• npm or yarn package manager

Installation

# Clone the repository
git clone https://github.com/hamdibenjarrar/Portfolio.git

# Navigate to project directory
cd Portfolio

# Install dependencies
npm install

# Create environment file
cp .env.example .env.local

# Start development server
npm run dev

Visit http://localhost:3000 to see the portfolio in action! 🎉

Build for Production

# Create optimized production build
npm run build

# Start production server
npm start

📧 Contact Form Setup

To enable the contact form functionality:

1. Create a .env.local file in the root directory
2. Add your Gmail credentials:

EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-gmail-app-password
EMAIL_TO=recipient@email.com

Getting a Gmail App Password:

1. Go to Google Account Security
2. Enable 2-Step Verification
3. Generate an App Password
4. Use the 16-character password in EMAIL_PASS

📁 Project Structure

Portfolio/
├── 📂 components/       # Reusable React components
│   ├── Hero.tsx        # Landing hero section
│   ├── Skills.tsx      # Skills showcase
│   ├── Navbar.tsx      # Navigation component
│   ├── Footer.tsx      # Footer component
│   └── ui/             # shadcn/ui components
├── 📂 pages/           # Next.js pages
│   ├── index.tsx       # Home page
│   ├── about.tsx       # About page
│   ├── projects.tsx    # Projects showcase
│   ├── contact.tsx     # Contact page
│   └── api/            # API routes
├── 📂 styles/          # Global styles
├── 📂 public/          # Static assets
└── 📄 next.config.js   # Next.js configuration

🎯 Pages Overview

Page	Description	Key Features
🏠 Home	Landing page with hero & skills	Animated intro, skills grid, CTA buttons
👤 About	Professional journey & experience	Timeline, language proficiency, expertise
💼 Projects	Portfolio of work	Interactive cards, live demos, case studies
📬 Contact	Get in touch	Contact form, social links, location info

🌐 Deployment

Deploy to Vercel (Recommended)

Or manually:

# Install Vercel CLI
npm i -g vercel

# Deploy to production
vercel --prod

Custom Domain Setup

1. Add your domain in Vercel Dashboard → Settings → Domains
2. Update DNS records at your registrar:
   • A Record: 76.76.21.21
   • CNAME: cname.vercel-dns.com

📈 Performance Optimizations

• ✅ Image optimization with Next.js Image component
• ✅ Priority loading for LCP images
• ✅ Font optimization with next/font
• ✅ Code splitting and lazy loading
• ✅ Minification and compression
• ✅ Security headers for enhanced protection
• ✅ Reduced unused CSS with Tailwind purge
• ✅ Efficient caching strategies

🤝 Connect With Me

📄 License

This project is open source and available under the MIT License.

---

💡 Building Something Legendary

Made with ❤️ by Hamdi Ben Jarrar