🌟 Aladdin Mohamed Al-Haddad - Portfolio

A stunning, modern portfolio website showcasing frontend development expertise with beautiful animations and Yemen-inspired design elements.

✨ Features

🎨 Design & User Experience

• inspired color palette with warm, professional colors
• Dark/Light theme toggle with system preference detection
• Responsive design optimized for all devices
• Smooth animations powered by Framer Motion
• Custom particle background with floating geometric shapes
• Bilingual support (Arabic & English elements)

🚀 Technical Excellence

• Next.js 15 with App Router and TypeScript
• Tailwind CSS v4 with custom design system
• Framer Motion for complex animations
• SEO optimized with comprehensive metadata
• Performance focused with 60fps animations
• Accessibility compliant with WCAG guidelines

🌟 Interactive Elements

• Typewriter effect cycling through professional roles
• Scroll-spy navigation with active section indicators
• Particle animation system with geometric shapes
• Micro-interactions throughout the interface
• Smooth scroll behavior between sections
• Mobile-first hamburger menu with slide animations

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• Animations: Framer Motion
• Icons: Lucide React
• Fonts: Inter + JetBrains Mono
• Development: ESLint, Prettier

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

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

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

Build for Production

npm run build
npm start

📁 Project Structure

portfolio/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── layout.tsx       # Root layout with metadata
│   │   ├── page.tsx         # Main page
│   │   └── globals.css      # Global styles
│   ├── components/
│   │   ├── ui/              # Reusable UI components
│   │   │   ├── button.tsx
│   │   │   ├── theme-toggle.tsx
│   │   │   └── animated-background.tsx
│   │   └── sections/        # Page sections
│   │       ├── header.tsx
│   │       └── hero.tsx
│   └── lib/
│       ├── utils.ts         # Utility functions
│       └── theme-provider.tsx
├── public/                  # Static assets
├── tailwind.config.ts       # Tailwind configuration
└── package.json

🎨 Design System

Color Palette

The design uses a Yemen-inspired color palette:

• Primary: Warm oranges (#ed7c4a - #401a10)
• Secondary: Professional blues (#0ea5e9 - #082f49)
• Accent: Golden yellows (#eab308 - #422006)
• Neutral: Modern grays (#fafafa - #0a0a0a)

Typography

• Headings: Inter (clean, modern)
• Code: JetBrains Mono (technical elements)

Animations

• Particle System: Floating geometric shapes
• Typewriter Effect: Dynamic role cycling
• Micro-interactions: Hover states and transitions
• Scroll Animations: Smooth section reveals

🌐 Deployment

Netlify (Recommended)

The project is optimized for Netlify deployment with automatic configuration:

1. Quick Deploy

   # Run the deployment script
   ./scripts/deploy.sh
   
   # Or build manually
   npm run build

2. Git Integration

   git add .
   git commit -m "feat: prepare for deployment"
   git push origin main

   Then connect your repository to Netlify for automatic deployments.

3. Manual Deploy

   • Build the project: npm run build
   • Drag the out folder to Netlify dashboard

Configuration Files

• netlify.toml - Netlify build settings and redirects
• next.config.ts - Next.js static export configuration
• DEPLOYMENT.md - Comprehensive deployment guide

Other Platforms

• Vercel: Push to GitHub and connect repository
• GitHub Pages: Use GitHub Actions for deployment
• AWS S3: Upload the out folder to S3 bucket

📝 Customization

Personal Information

Update the following files with your information:

1. Hero Section (src/components/sections/hero.tsx)

   • Name and roles
   • Description and company
   • Social media links

2. Navigation (src/components/sections/header.tsx)

   • Social media URLs
   • Contact email

3. Metadata (src/app/layout.tsx)

   • SEO information
   • Open Graph data

Content Sections

Add your content to the placeholder sections:

• About: Personal story and skills
• Projects: Portfolio showcase
• Experience: Professional timeline
• Contact: Contact form and information

🎯 Performance

• Lighthouse Score: 95+ on all metrics
• Core Web Vitals: Optimized for LCP, FID, and CLS
• Bundle Size: Optimized with code splitting
• Animations: 60fps with hardware acceleration

🔧 Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Code Quality

• TypeScript: Strict type checking
• ESLint: Code quality rules
• Prettier: Code formatting

📄 License

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

🤝 Contributing

Contributions, issues, and feature requests are welcome!

📞 Contact

Aladdin Mohamed Al-Haddad

• Email: [email protected]
• LinkedIn: linkedin.com/in/aladdin
• GitHub: github.com/aladdin

---

⭐ Star this repository if you found it helpful!