Ahmed-Portfolio — Next.js 作品集模板

SHA-256: 27af9b9a150863b12ad96e9aee73bd04528686235c83b801aa9bb40589c6c417

2026-10-13T06:59:21.014Z

# ⚡ Ahmed Mahmoud | Full-Stack Engineer Portfolio

![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)
![Next.js](https://img.shields.io/badge/Next.js-black?style=for-the-badge&logo=next.js&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
![Framer Motion](https://img.shields.io/badge/Framer_Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white)

> A high-performance, cyberpunk-themed personal portfolio website built with Next.js 14, TypeScript, and Tailwind CSS. Features advanced 3D animations, a custom design system, and a seamless light/dark mode.

---

## 🚀 Live Demo

**[View Live Demo](https://ahmed-portfolio-sepia.vercel.app/)**

---

## 🛠️ Tech Stack

This project is built using the following technologies:

- **Framework:** [Next.js 14](https://nextjs.org/) (App Router)
- **Language:** [TypeScript](https://www.typescriptlang.org/)
- **Styling:** [Tailwind CSS](https://tailwindcss.com/)
- **Animations:** [Framer Motion](https://www.framer.com/motion/)
- **Icons:** [Lucide React](https://lucide.dev/) & [React Icons](https://react-icons.github.io/react-icons/)
- **Forms:** [Web3Forms](https://web3forms.com/)
- **Theming:** [next-themes](https://github.com/pacocoursey/next-themes)

---

## ✨ Features

- **🎨 Cyberpunk Aesthetic:** A unique, dark-themed design with neon cyan accents.
- **🌗 Light/Dark Mode:** Full theme support with smooth transitions.
- **⚡ High Performance:** Optimized with Next.js best practices and lazy loading.
- **📱 Fully Responsive:** Looks great on mobile, tablet, and desktop.
- **📧 Contact Form:** Functional contact form powered by Web3Forms.
- **📄 Resume Download:** Easy access to download the resume.
- **🎬 Advanced Animations:**
  - 3D Avatar Tilt
  - Scroll Progress Bar
  - Staggered Tech Stack Grid
  - Project Card Hover Effects
  - Page Load Animations

---

## 📸 Screenshots

| Hero Section | Projects Section |
| :---: | :---: |
| ![Hero Section](/src/screenshots/hero-section.jpg) | ![Projects Section](/src/screenshots/projects-section.jpg) |

| Tech Stack | Contact Section |
| :---: | :---: |
| ![Tech Stack](/src/screenshots/tech-stack.jpg) | ![Contact Section](/src/screenshots/contact-section.jpg) | 

---

## 📦 Install & Run

Follow these steps to run the project locally:

1.  **Clone the repository:**

    ```bash
    git clone https://github.com/your-username/portfolio.git
    cd portfolio
    ```

2.  **Install dependencies:**

    ```bash
    npm install
    # or
    yarn install
    # or
    pnpm install
    ```

3.  **Run the development server:**

    ```bash
    npm run dev
    ```

4.  **Open your browser:**
    Navigate to [http://localhost:3000](http://localhost:3000) to see the application.

---

## 🚀 Deployment

This project is optimized for deployment on **Vercel**.

1.  Push your code to a GitHub repository.
2.  Import the project into Vercel.
3.  Vercel will automatically detect the Next.js settings.
4.  Click **Deploy**.

For more details, check out the [Next.js Deployment Documentation](https://nextjs.org/docs/deployment).

---

## 📬 Contact

Feel free to reach out!

- **Email:** [[email protected]](mailto:[email protected])
- **LinkedIn:** [Ahmed Mahmoud](https://www.linkedin.com/in/ahmadmahmoud98)
- **GitHub:** [AhmedMahmoudEG](https://github.com/AhmedMahmoudEG/)

---

Made with ❤️ by Ahmed Mahmoud.