Portfolio Website

<div align="center">

<img src="https://raw.githubusercontent.com/mostafanagedy/portfolio-v2/main/public/images/mostafa-logo.png" alt="Mostafa Nagdy Logo" width="80" height="80" />

# Mostafa Nagdy — Developer Portfolio v2

<p align="center">

<strong>A modern, high-performance personal developer portfolio built with Next.js 15, React 19, and TypeScript.</strong>

</p>

<p align="center">

<a href="https://portoflio-lime.vercel.app"><strong>View Live Demo »</strong></a>

</p>

<!-- Badges -->

<p align="center">

<img src="https://img.shields.io/badge/Next.js-15.1-black?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js" />

<img src="https://img.shields.io/badge/React-19.0-61DAFB?style=for-the-badge&logo=react&logoColor=black" alt="React 19" />

<img src="https://img.shields.io/badge/TypeScript-5.7-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />

<img src="https://img.shields.io/badge/CSS3-Design_Tokens-1572B6?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3" />

<img src="https://img.shields.io/badge/License-MIT-green?style=for-the-badge" alt="License" />

</p>

</div>

🌟 Overview

Welcome to the repository of Mostafa Nagdy's personal developer portfolio (Version 2). Designed from the ground up to deliver a clean, fast, and cinematic user experience, this portfolio showcases full-stack web applications, frontend UI/UX designs, technical competencies, and verified professional channels.

Built on Next.js 15 App Router with React 19, it achieves blazing-fast page load times, 100% static page generation (SSG), seamless client-side page transitions, and a custom-engineered dual-theme engine.

🚀 Key Features

🌗 1. True Dual-Theme System (Dark & Light Mode)

👤 2. Redesigned "About Me" Hero

💼 3. Featured Projects Showcase

📬 4. Contact & Direct Hire Channels

🔍 5. Technical SEO & Rich Structured Data

🛠️ Technology Stack

| Category | Technologies |

| :--- | :--- |

| Framework | Next.js 15 (App Router) |

| Library | React 19 |

| Language | TypeScript 5.7 |

| Styling | Vanilla CSS with Centralized CSS Custom Properties (Design Tokens) |

| Icons | Lucide React & Custom SVG Brand Icons |

| Fonts | Inter & Space Grotesk via next/font/google |

| Deployment | Vercel (Edge Network) |

📂 Project Architecture

portoflio-v2/
├── public/                     # Static assets & photography
│   ├── favicon.svg             # Vector site favicon
│   └── images/                 # Theme portraits, project covers & logos
│       ├── profile-standing-dark.jpg   # Dark mode portrait
│       ├── profile-standing-light.jpg  # Light mode portrait
│       ├── mostafa-nagdy.webp          # Official headshot
│       └── ...
├── src/
│   ├── app/                    # Next.js App Router (Pages & Metadata)
│   │   ├── layout.tsx          # Root Layout, anti-flicker script & SEO Schema
│   │   ├── page.tsx            # Home Page View
│   │   ├── about/              # About Me View (/about)
│   │   ├── skills/             # Skills Matrix View (/skills)
│   │   ├── projects/           # Featured Projects View (/projects)
│   │   ├── experience/         # Experience Timeline View (/experience)
│   │   ├── contact/            # Contact & Hire View (/contact)
│   │   ├── not-found.tsx       # Custom 404 View
│   │   ├── robots.ts           # Dynamic robots.txt
│   │   └── sitemap.ts          # Dynamic sitemap.xml
│   ├── components/             # Reusable UI components & modular CSS
│   │   ├── About.tsx           # Redesigned 2-column about section
│   │   ├── Contact.tsx         # Contact form & social channels
│   │   ├── FeaturedProjects.tsx# 16:9 cards & category filter engine
│   │   ├── Navbar.tsx          # Sticky navigation & dual-theme switch
│   │   ├── Footer.tsx          # Slim footer with motto
│   │   └── ...
│   ├── data/                   # Centralized data sources
│   │   ├── projects.ts         # Portfolio projects dataset
│   │   ├── skills.ts           # Categorized skill tree & proficiency
│   │   └── socialLinks.ts      # Social channels, handles & platforms
│   ├── layouts/
│   │   └── MainLayout.tsx      # Theme provider, ambient overlays & shell
│   └── index.css               # Global CSS design tokens (Dark & Light)
├── package.json
└── README.md

💻 Getting Started Locally

Prerequisites

Installation

1. Clone the repository:

   git clone https://github.com/mostafanagedy/portfolio-v2.git
   cd portfolio-v2

2. Install dependencies:

   npm install

3. Start the local development server:

   npm run dev

4. Open in browser:

Navigate to http://localhost:3000 to view the application.

Building for Production

To create an optimized production build:

npm run build

To preview the production build locally:

npm run start

🌐 Connect with Me

📄 License

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

<div align="center">

_{Built with ❤️ by Mostafa Nagdy — Turning ideas into real world applications.}

</div>