Omar Wageh | Professional Portfolio

A modern, immersive, and interactive portfolio website built for Omar Wageh, a Full Stack Developer and IT Student. This project showcases a blend of creative design (UI/UX) and robust engineering using React 19, Three.js, and Tailwind CSS.

---

🚀 Overview

This portfolio goes beyond static text. It features a dynamic 3D particle system that reacts to mouse movements, a glassmorphism design language, and smooth scroll animations. It serves as a central hub to display skills, projects, and contact information in a visually engaging way.

✨ Key Features

• 🎨 Immersive 3D Background: A custom interactive particle network built with Three.js that responds to cursor movement and creates a depth effect.
• 💎 Glassmorphism UI: Modern, translucent components with backdrop blurs and subtle borders.
• 📱 Fully Responsive: Optimized for all devices, from large desktop screens to mobile phones, featuring a custom full-screen mobile menu.
• ⚡ Smooth Animations: Custom CSS keyframes and Intersection Observers for reveal-on-scroll effects.
• ♾️ Infinite Skills Marquee: A seamless auto-scrolling loop showcasing the technical stack.
• 🛠️ Modular Architecture: Clean React code structure separated into logical components and constants for easy maintenance.

🛠️ Tech Stack

The project leverages the latest web technologies:

Category	Technologies
Core
Styling
Graphics
Icons

📂 Project Structure

├── components/          # Reusable UI components
│   ├── Background3D.tsx # The Three.js logic
│   ├── Navbar.tsx       # Responsive navigation
│   ├── Hero.tsx         # Main landing section
│   ├── About.tsx        # Personal bio & stats
│   ├── Skills.tsx       # Infinite scrolling list
│   └── ...
├── constants.tsx        # Centralized data (Text, Links, Configs)
├── hooks/               # Custom React Hooks (e.g., useIntersectionObserver)
├── types.ts             # TypeScript interfaces
├── App.tsx              # Main application layout
└── index.html           # Entry point & Tailwind config

🚀 Getting Started

To run this project locally on your machine:

1. Clone the repository

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

2. Install Dependencies

   npm install

3. Run the Development Server

   npm start

4. Open in Browser Navigate to http://localhost:3000 to view the app.

✏️ Customization

You can easily update the content without touching the logic components.

• Personal Info & Links: Edit constants.tsx.
• Projects: Add or remove objects in the PROJECTS array in constants.tsx.
• Colors/Theme: Modified via tailwind.config script inside index.html.

📬 Contact

Omar Wageh - Full Stack Developer

---

• Designed & Developed by a r s i n e k © 2025