A modern, animated personal portfolio built with Next.js, Tailwind CSS, and Framer Motion to showcase projects, skills, and experience with a cinematic space‑themed design.
This portfolio is designed to feel like an interactive experience rather than a static webpage.
It highlights my work as a:
- 🎮 Game Developer
- 💻 Software Engineer
- 🤖 Embedded Systems & IoT Developer
The focus is on performance, smooth animations, and mobile‑first design.
Framework
- Next.js (App Router)
- React
Styling
- Tailwind CSS
- Glassmorphism UI & gradients
Animations
- Framer Motion
- React Intersection Observer
Media & Assets
- WebM background videos
- SVG graphics
- Responsive images
- Animated black‑hole background video
- Résumé modal viewer + download
- Fully responsive layout
- Fullscreen mobile navigation menu
- Optimized video and media scaling
- No horizontal overflow
- Animated video halo around profile image
- Smooth entrance animations
- Responsive layout for all devices
- In‑page PDF viewer modal
- One‑click download
- Blur backdrop overlay
- Section scroll navigation
- Animated components on viewport entry
SpacePortfolio/
│
├── app/
│ ├── components/
│ │ ├── main/ # Sections (Hero, About, Skills, Projects, Contact, etc.)
│ │ ├── sub/ # Reusable components
│ │ └── Navbar.tsx
│ │
│ ├── utils/
│ │ └── motion.ts # Animation helpers
│ │
│ └── page.tsx
│
├── public/
│ ├── videos/
│ ├── images/
│ └── AE_Resume.pdf
│
└── styles/
1️⃣ Clone the repository
git clone https://github.com/AE707/SpacePortfolio.git2️⃣ Navigate into the project
cd SpacePortfolio
3️⃣ Install dependencies
npm install
4️⃣ Start the development server
npm run dev
Then open in your browser: http://localhost:3000
This project is optimized for deployment on Vercel.
Push the project to GitHub
Import the repo in Vercel
GitHub: https://github.com/AE707
LinkedIn: https://www.linkedin.com/in/alaaelghoul
Email: AE7_07@outlook.com
If you like this project, consider giving it a ⭐ on GitHub — it helps a lot!