### ✦ Overview

esawi.dev is my personal engineering portfolio and digital garden. Rather than building a static résumé page, I designed it as an immersive, highly interactive experience that demonstrates full-stack craftsmanship, 3D physics, and zero-flash vector architecture.

---

### 🚀 Key Highlights & Interactive Features

1. 3D Interactive Hero Canvas: Powered by `@react-three/fiber` & `@react-three/drei` with lazy-loading so it never blocks First Contentful Paint (LCP).

2. Flashlight / Spotlight Cursor Reveal: A custom masked spotlight in the About section that dynamically reveals hand-drawn illustration layers under your cursor.

3. Integrated Developer Diary: A dedicated terminal-inspired mini-site (`/diary`) featuring raw daily engineering logs, principle reminders, and technical milestones.

4. Zero-Flash Dual-Mode Vector Engine: Custom-engineered CSS theme switching and automated dark-mode SVG generation (`*-dark.svg`) that eliminates hydration mismatches, client-side re-render delays, and filter blur.

5. Interactive Custom Cursors & Audio System: Context-aware custom cursor physics and ambient soundtrack toggles.

---

### 🛠️ Tech Stack

- Framework: Next.js 16 (Turbopack / App Router)

- Frontend: React 19, TypeScript, Tailwind CSS v4

- 3D & Motion: Three.js, React Three Fiber, Framer Motion

- Architecture: Dual-theme CSS design tokens, dynamic vector rendering

- Analytics & SEO: Vercel Analytics, Schema.org JSON-LD, Dynamic OG Generation

---

### 💡 What I Learned

Building this portfolio pushed me to bridge high-end visual design with production-grade engineering performance. From keeping Three.js bundle sizes optimized to crafting seamless dark/light vector adaptations, every detail was built with intention.

Feedback and suggestions are always welcome!