This portfolio goes beyond listing skills and experience. It features a fully animated 3D scene, scroll-driven interactions, a custom glitch design system, and a dedicated section with playable mini-games themed around my tech stack — all built from scratch.
Bilingual (🇬🇧 EN / 🇫🇷 FR), responsive across all screen sizes, and designed with a dark cyber-terminal aesthetic.
- 3D Interactive Scene — React Three Fiber avatar at a full dev setup, rotating on scroll via
useFrame+ framer-motion - Glitch Design System — Consistent cyan/magenta RGB-split glitch effect on all interactive elements (navbar, links, buttons)
- Terminal Intro —
$ whoamiprompt with animated role selector and letter-by-letter glitch name effect - Scroll Animations — Reveal animations, scroll-driven 3D model rotation, custom animated mouse indicator
- 4 Playable Mini-Games — Snake (with tech-stack logos as food), TypeRush, Stack Catcher, Commit Breaker — all themed around real portfolio technologies
- Auto-calculated Experience Duration — Ongoing positions update duration automatically without manual edits
- Bilingual — Full EN/FR translation including UI, bio, and game text (game names stay in English)
- Fully Responsive — Mobile, tablet, and desktop — mobile shows optimized Stack Catcher game only
| Layer | Technologies |
|---|---|
| Frontend | React 18, TypeScript, Vite |
| 3D / Canvas | Three.js, React Three Fiber, @react-three/drei |
| Animation | Framer Motion, CSS keyframes |
| Styling | SCSS Modules, CSS custom properties |
| Icons | Font Awesome, Google Material Symbols, Devicons CDN |
| i18n | Custom context-based translation system |
src/
├── components/
│ ├── Avatars/ # 3D model components (Setup, Avatar)
│ ├── Canvas/ # Three.js canvas wrappers
│ ├── Common/ # Shared UI (GlitchName, MouseScroll...)
│ ├── Games/ # Snake, TypeRush, StackCatcher, CommitBreaker
│ └── Sections/ # Page sections (Intro, Experience, Projects, Details)
├── data/ # Experience & project data
├── i18n/ # EN/FR translations
├── styles/ # SCSS — global + per-component
└── context/ # Language context
# Clone the repo
git clone https://github.com/nabilsaiyan/portfolio.git
cd portfolio
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build| # | Section | Description |
|---|---|---|
| 1 | Intro | Terminal prompt, animated name, rotating 3D setup |
| 2 | Experience | Vertical timeline with auto-calculated durations |
| 3 | Projects | Two featured projects with 3D device mockups |
| 4 | Details | Bio, contact, and 4 interactive tech-themed games |
- Email — nabil.amhaouch.dev@gmail.com
- LinkedIn — nabil-amhaouch
- GitHub — nabilsaiyan
Built with React, Three.js & too much caffeine ☕