emircyn.com
A bilingual portfolio with scroll animation and a WebGL gallery.
My personal site, with a dark-room setting, a red navigation thread and a curved project gallery. Built in English and Turkish.
The challenge
Show my interface work through motion while keeping the site fast and usable without JavaScript.
My role
I designed and built the visuals, animations, WebGL gallery, bilingual content model and Worker.
Architecture
Where each part runs. Red follows the example flow.
- L1 Interface Runs on: Browser
Static HTML and inline CSS. Animation starts after first paint; the gallery pauses off screen or in hidden tabs.
- Astro 5
- GSAP ScrollTrigger
- Lenis
- WebGL
- View Transitions
- L2 Server Runs on: Cloudflare Workers
Serves static files and redirects HTTP and www to canonical HTTPS.
- Cloudflare Workers
- Static assets
Step by step: A first visit
- L2 · Server The Worker serves HTML with inline styles.
- L1 · Interface Preloaded images and fonts support the first paint.
- L1 · Interface Animation starts during browser idle time after page load.
- L1 · Interface Supported devices enable WebGL; rendering pauses off screen.
Key decisions
- 01
Static layout
Content and links work without JavaScript. Motion respects the reduced-motion preference.
- 02
Deferred animation
Animation starts after first paint. Recorded Lighthouse performance: 100 desktop, 91 throttled mobile.
- 03
Native gallery
WebGL adds visual effects over a native scroll-snap track with touch, keyboard navigation and real links.
- 04
Grain texture
A pre-rendered grain tile replaced filters that crashed software-rendered Chromium.
