This is not the usual About Me → Skills → Projects → Contact template.
It's an interactive, cinematic archive of everything one person builds, explores, writes, renders, and obsesses over — engineering, AI, film, 3D, and fiction, all living inside one experience instead of four separate portfolios.
┌──────────────┐
│ MECHATRONICS │
└──────┬───────┘
│
▼
┌───────────────────────┐
│ SYSTEMS │
└─────────┬─────────────┘
/ \
/ \
▼ ▼
┌───────┐ ┌───────┐
│ AI │ │ CODE │
└───┬───┘ └───┬───┘
│ │
└────┬────┘
▼
┌──────────────┐
│ EXPERIMENTS │
└──────┬───────┘
│
┌───────────┼───────────┐
▼ ▼ ▼
🎬 FILM 🧊 3D 📖 WRITING
The interesting part isn't each discipline on its own — it's what happens when they collide.
|
|
|
|
|
|
Designed as an interactive visual experience — not a static résumé.
Core Framework
3D & Motion
Tooling & Deployment
📦 View full dependency list
| Dependency | Purpose |
|---|---|
next |
React framework — routing, SSR, build system |
react / react-dom |
UI rendering |
typescript |
Static typing |
three |
Core WebGL 3D engine |
@react-three/fiber |
React renderer for Three.js |
@react-three/drei |
Helpers/abstractions for R3F |
gsap |
Scroll & timeline animation |
framer-motion |
Declarative UI motion |
@studio-freight/lenis |
Smooth-scroll physics |
tailwindcss |
Utility-first styling |
tailwind-merge / clsx |
Conditional class management |
lucide-react |
Icon set |
@vercel/analytics |
Traffic & performance insights |
src/
│
├── app/ # Next.js App Router
│ ├── layout.tsx
│ ├── page.tsx
│ └── globals.css
│
├── components/
│ ├── 3d/ # Three.js / WebGL canvases
│ │ ├── ArchiveCoreCanvas.tsx
│ │ ├── IntersectionHeroCanvas.tsx
│ │ ├── MonolithHeroCanvas.tsx
│ │ └── UnfinishedArtifactCanvas.tsx
│ │
│ ├── animations/ # Cursor & film-grain FX
│ │ ├── CustomCursor.tsx
│ │ └── FilmGrain.tsx
│ │
│ ├── audio/ # Procedural / ambient audio
│ │ └── SoundEngine.ts
│ │
│ ├── navigation/
│ │ ├── ExhibitionNav.tsx
│ │ └── SystemNavigation.tsx
│ │
│ ├── mobile/
│ │ └── MobilePortfolioShell.tsx
│ │
│ ├── sections/ # Page sections / scenes
│ │ ├── HeroSection.tsx
│ │ ├── AboutMeSection.tsx
│ │ ├── CapabilityMapSection.tsx
│ │ ├── ProjectsSection.tsx
│ │ ├── WorkExhibitionSection.tsx
│ │ ├── PageOSArchiveSection.tsx
│ │ ├── CipherLabSection.tsx
│ │ ├── CreativeCodingSection.tsx
│ │ ├── ConstellationSection.tsx
│ │ ├── DualChannelSection.tsx
│ │ ├── RoomForOneMoreSection.tsx
│ │ ├── ExploreSection.tsx
│ │ ├── EducationSection.tsx
│ │ ├── ProjectModal.tsx
│ │ └── FooterSection.tsx
│ │
│ └── ui/
│ └── GlyphSymbol.tsx
│
├── hooks/
│ └── useIsMobile.ts
│
└── lib/
├── data/ # Content-as-data
│ ├── capabilities.ts
│ ├── cipher.ts
│ ├── explorations.ts
│ └── projects.ts
└── utils.ts
The homepage isn't one monolithic component — it's a collection of independent interactive systems stitched into one continuous experience.
┌─────────────┐
│ NEXT.JS │
│ APP │
└──────┬──────┘
│
┌──────────────────┼──────────────────┐
│ │ │
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ THREE.JS │ │ GSAP │ │ FRAMER │
│ WEBGL │ │ SCROLL │ │ MOTION │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
└──────────────────┼──────────────────┘
▼
┌──────────────────┐
│ EXPERIENCE │
│ ORCHESTRATOR │
└────────┬─────────┘
│
┌─────────────────┼─────────────────┐
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ AUDIO │ │ ARCHIVE │ │ WRITING │
│ ENGINE │ │ (PAGE.OS) │ │ ENGINE │
└──────────┘ └──────────┘ └──────────┘
In short:
- Lenis smooths scroll input into a physics-based, buttery scroll feel.
- GSAP ScrollTrigger ties animation timelines to that scroll position — driving section transitions, reveals, and choreography.
- React Three Fiber / Three.js renders WebGL scenes as declarative React components, layered underneath or inside sections.
- Framer Motion handles smaller UI-level transitions (hover states, modals, page-level fades).
- A custom cursor system listens for context (hovering a link, a 3D object, text, etc.) and morphs accordingly.
- The Sound Engine plays ambient/interaction audio tied to scroll position and user interaction.
useIsMobileand CSS breakpoints swap the desktop experience for a dedicated, lighter-weightMobilePortfolioShell.- All of it respects
prefers-reduced-motion, dropping into simplified, accessible fallbacks when needed.
📚 01 / PAGE.OS — Reading & Knowledge-Discovery Environment
Where literature meets exploration.
A reading platform where books aren't isolated documents — they're things you can discover, connect, collect, and explore, blending open/public-domain literature and artwork into one archive.
Features: Book discovery · Personal library · Bookmarks · Reading statistics · Classic/Lounge reader modes · Infinite discovery · Open artwork exploration · Ambient reading audio
Stack: Next.js · React · TypeScript · Tailwind CSS · Firebase · PDF.js
🎧 02 / ANE — Audio Narrative Engine
What if an audiobook understood what was happening?
An experimental ML project exploring context-aware narrative audio — instead of a flat TEXT → VOICE pipeline, it classifies scene, emotion, and dialogue to drive a responsive audio environment.
Explores: NLP · Scene classification · Narrative understanding · Local inference · ML pipelines · Procedural sound
Stack: Python · PyTorch · MiniLM · FastAPI · Pydantic · Ollama
🎬 03 / RESIDUAL — Film, Direction & Visual Storytelling
A filmmaking identity built around light + space + texture + silence + time = atmosphere — storytelling that doesn't explain everything, where absence of information is often the information.
Tools: DaVinci Resolve · Blender · Sound design · Composition · Motion/editing
🚪 04 / THE FIFTH EXIT — Psychological Horror
Five exits, five rooms, one person, and architecture that refuses to behave. An experimental psychological-horror concept exploring liminal spaces, dissociation, identity, and impossible architecture — where the environment becomes part of the story.
📖 05 / A Room for One More — Psychological Horror Manuscript
What happens when the place you're living in knows something about you that you don't?
A manuscript following Ira Elowen Mireille through grief → isolation → memory → paranoia → identity, presented as an interactive archival reading experience.
🧊 06 / 3D — Blender, Procedural Geometry & Spatial Experiments
A visual laboratory for procedural geometry, Geometry Nodes, architectural forms, lighting, and atmospheric spatial composition — chasing one question: how do you make something digital feel physically heavy?
🔐 07 / Cipher — An Experimental Glyph System
A custom geometric alphabet — not built to replace cryptography, but to explore language → symbol → geometry → encoding → visual language. Includes an interactive Cipher Lab for live text-to-glyph translation.
🧬 08 / Creative Coding — The Sketchbook
Particle systems, vector fields, procedural geometry, mathematical curves, generative typography, and WebGL motion studies. Some become projects. Some become dead ends. Both are useful.
| Principle | Meaning |
|---|---|
| 01 · Make It Mean Something | An animation should communicate something. A 3D object should have a reason to exist. |
| 02 · Different Work, Different Language | A neural model shouldn't look like a horror manuscript. A film shouldn't look like a dashboard. |
| 03 · Interaction Over Decoration | If interaction communicates an idea better than a paragraph, use interaction. If not — write the paragraph, make the film, or open Blender. |
Immersion shouldn't come at the cost of usability:
- ✅
prefers-reduced-motionsupport - ✅ Full keyboard interaction
- ✅ Touch-optimized interaction
- ✅ Dedicated mobile-specific layouts
- ✅ Non-3D graceful fallbacks
- ✅ Accessible interactive controls
╭──────────────────────────────────────────────╮
│ │
│ PAGE.OS ● BUILDING │
│ ANE ● EXPLORING │
│ RESIDUAL ● ACTIVE │
│ THE FIFTH EXIT ● DEVELOPING │
│ A ROOM FOR ONE MORE ● WRITING │
│ 3D ● EXPERIMENTING │
│ CIPHER ● EXPERIMENTAL │
│ │
╰──────────────────────────────────────────────╯
- More original media (film, writing, audio)
- Deeper case studies per project
- Expanded 3D experiments
- New creative-coding sketches
- Continued PAGE.OS feature expansion
- Ongoing accessibility & performance passes
The roadmap is intentionally unstable — projects evolve, ideas mutate, and some things come back months later wearing a completely different shape.
This is a personal portfolio, but feedback, bug reports, and suggestions are always welcome.
- Fork the repo
- Create a feature branch (
git checkout -b feature/something-cool) - Commit your changes (
git commit -m "Add something cool") - Push to the branch (
git push origin feature/something-cool) - Open a Pull Request
