Clone the repository

<div align="center">

  <h1>✨ Ali Haggag | Full-Stack Portfolio</h1>
  
  <p>
    A high-performance, pixel-perfect personal portfolio built with <b>Next.js 15</b>.
    Features a modern dark mode UI, seamless <b>PWA</b> support, and an integrated <b>Google Gemini AI</b> assistant to answer recruiter questions in real-time.
  </p>

  <p>
    <img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white" />
    <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" />
    <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" />
    <img src="https://img.shields.io/badge/Google%20Gemini-8E75B2?style=for-the-badge&logo=googlebard&logoColor=white" />
  </p>

  <br />

  <img src="/main-preview.png" alt="Project Preview" width="100%" style="border-radius: 10px;" />

</div>

<br />

## 🚀 Live Demo
[Click here to visit my portfolio](https://ali-haggag-portfolio.vercel.app/)

---

## 🔥 Key Features

### 🤖 AI Intelligence
* **Powered by Gemini Pro:** Direct integration with Google's latest LLM to act as a personal assistant representing my resume and skills.
* **Smart Context:** Maintains conversation history to provide fluid and accurate responses to visitors.

### 🎨 UI/UX Design
* **Cinematic Dark Mode:** A custom "Midnight Obsidian" theme optimized for readability and premium feel.
* **Responsive Layout:** Perfectly optimized for both desktop and mobile viewing.
* **Smooth Animations:** Integrated with Framer Motion and modern CSS keyframes for dynamic interactions.

### 🛠️ Engineering Concepts
* **Progressive Web App (PWA):** Fully installable on mobile devices with custom splash screens and offline capabilities.
* **Performance First:** Utilizing Next.js App Router and Turbopack for lightning-fast loading and optimal SEO.
* **Clean Architecture:** Modular component structure with strictly typed TypeScript interfaces.

---

## 🛠️ Tech Stack

| Component | Technology |
| :--- | :--- |
| **Frontend Framework** | Next.js 15 (App Router) |
| **Language** | TypeScript |
| **Styling & UI** | Tailwind CSS & Magic UI |
| **AI Integration** | Google Generative AI SDK |
| **Deployment** | Vercel |

---

## 🚀 Getting Started

Follow these steps to run the portfolio locally:

### 1. Clone & Install
```bash
# Clone the repository
git clone [https://github.com/Ali-Haggag7/portfolio.git](https://github.com/Ali-Haggag7/portfolio.git)
cd portfolio

# Install dependencies
npm install

```
### 2. Setup Configuration
```bash
# Create a .env.local file in the root directory and add your Google Gemini API key:
GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here

```
### 3. Run the App
```bash
npm run dev

```

Open http://localhost:3000 to view it in the browser.

## 📸 Interface Previews

| **Desktop View** | **Mobile PWA View** |
| :---: | :---: |
| <img src="/desktop-view.png" width="100%" /> | <img src="/mobile-view.png" width="100%" /> |

---

<div align="center">
<br />
<p>Made with ❤️ by <b>Ali Haggag</b></p>

<a href="https://www.linkedin.com/in/ali-haggag7/">
<img src="https://img.shields.io/badge/Connect-LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" />
</a>
<a href="mailto:ali.haggag2005@gmail.com">
<img src="https://img.shields.io/badge/Contact-Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white" />
</a>
<a href="https://github.com/Ali-Haggag7">
<img src="https://img.shields.io/badge/Portfolio-GitHub-181717?style=for-the-badge&logo=github&logoColor=white" />
</a>
</div>