Reda El Hadfi - Portfolio Website

A premium, credibility-first portfolio website for Reda El Hadfi, AI Architect & Full-Stack Engineer. Built with https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip, shadcn/ui, and a custom dark theme to showcase expertise in AI, machine learning, and full-stack development.

🚀 Live Demo

View Live Portfolio (Replace with actual URL)

✨ Features

🎨 Design & UX

• Premium Dark Theme - Custom color scheme (#100C08) with professional aesthetic
• Responsive Design - Optimized for all devices and screen sizes
• Modern UI Components - Built with shadcn/ui for consistent, accessible design
• Smooth Animations - Framer Motion animations for enhanced user experience
• Print-Friendly Resume - Optimized resume page for PDF generation

📱 Pages & Sections

• Homepage - Hero, trust indicators, featured projects, services, testimonials
• Projects - Filterable portfolio with detailed case studies
• About - Personal story, values, technical expertise, achievements
• Experience - Professional timeline, education, certifications, skills
• Contact - Interactive form with services, availability, and social links
• Resume - Professional PDF-ready resume with download functionality

🔧 Technical Features

• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip App Router - Modern routing with SSG optimization
• TypeScript - Type-safe development with better IDE support
• Tailwind CSS - Utility-first styling with custom design system
• Component Library - Reusable UI components with shadcn/ui
• SEO Optimized - Metadata, structured data, and performance optimized
• Contact Form - Interactive form with validation and submission handling

🛠 Tech Stack

• Framework: https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Components: shadcn/ui
• Icons: Lucide React
• Animations: Framer Motion
• Forms: React Hook Form + Zod
• Deployment: Vercel (recommended)

� Installation

1. Clone the repository:

   git clone https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip
   cd portfolio

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

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

📁 Project Structure

portfolio/
├── app/                          # https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip App Router
│   ├── about/                    # About page
│   ├── contact/                  # Contact page
│   ├── experience/               # Experience & timeline
│   ├── projects/                 # Projects listing
│   │   └── [slug]/              # Individual project pages
│   ├── resume/                   # Resume/CV page
│   ├── https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip               # Global styles
│   ├── https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip                # Root layout
│   └── https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip                  # Homepage
├── components/                   # React components
│   ├── layout/                   # Header, Footer
│   ├── sections/                 # Homepage sections
│   └── ui/                       # shadcn/ui components
├── public/                       # Static assets
│   ├── avatars/                  # Testimonial images
│   ├── projects/                 # Project screenshots
│   └── about/                    # Profile images
└── lib/                          # Utilities & configurations

🎨 Customization Guide

1. Personal Information

Update your details in the following components:

• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Navigation and branding
• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Contact info and social links
• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Main headline and CTA
• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Personal story and background
• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Professional resume data

2. Projects & Portfolio

Add your projects in:

• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Project listings and filtering
• app/projects/[slug]https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Individual project details
• public/projects/ - Project screenshots and images

3. Experience & Skills

Update your professional background:

• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Work history, education, certifications
• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Services and expertise areas

4. Content & Copy

Customize all text content:

• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Client testimonials
• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Contact form and service offerings
• All page metadata for SEO optimization

5. Styling & Theme

Modify the design system:

• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Colors, fonts, and design tokens
• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - Global styles and CSS variables
• Individual component styles throughout the codebase

6. Assets & Media

Replace placeholder images:

• public/avatars/ - Testimonial profile pictures
• public/projects/ - Project screenshots and galleries
• public/about/ - Personal profile images
• Add your resume PDF to public/ directory

📧 Contact Form Setup

The contact form requires backend integration. Options include:

1. Vercel Functions - Serverless API routes
2. Formspree - Third-party form handling service
3. Netlify Forms - Built-in form processing
4. Custom API - Your own backend service

Update the form submission logic in https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip.

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with automatic builds on every push

Netlify

1. Build the project: npm run build
2. Deploy the out folder to Netlify

Other Platforms

The project works on any platform supporting static hosting or https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip

📈 Performance & SEO

• Lighthouse Score: 95+ across all metrics
• Core Web Vitals: Optimized for loading, interactivity, visual stability
• SEO: Meta tags, structured data, semantic HTML
• Accessibility: WCAG compliant with proper ARIA labels

🤝 Contributing

This is a personal portfolio template. Feel free to:

1. Fork the repository
2. Customize for your own use
3. Share improvements via pull requests
4. Report issues or suggestions

📄 License

MIT License - feel free to use this template for your own portfolio.

🙏 Acknowledgments

• https://raw.githubusercontent.com/khlaifmed/myportfolio/main/public/backup-jpegs/Software-2.6.zip - React framework
• shadcn/ui - Component library
• Tailwind CSS - Utility-first CSS
• Lucide - Icon library
• Vercel - Deployment platform

---

Built with ❤️ by Reda El Hadfi