defnetuncer98.github.io 🖥️☕✨

My personal portfolio, in two generations — both built with Three.js, by two very different kinds of author:

v2 (current)	defnetuncer98.github.io	🤖 designed & built by AI (Claude)
v1 (2020)	defnetuncer98.github.io/v1.html	🧑‍🎨 handmade by a human — every model placement, bloom pass, and raycast tuned by hand

---

v2 — The Moth Village 🌙

A single-page portfolio whose hero is a live three.js scene inspired by the Moth Village render from A Cube Story: a dark voxel amphitheater, a self-luminous cube, drifting fireflies and moths, amber window lights. The camera follows the mouse, and clicking the world sends a ripple through the pillars.

Below the fold: about, the experience timeline, shipped titles (Color Bus Trip, Knit N Loop, Mayor Match…), and personal projects under Blue Variable — A Cube Story (in development) with its trailer and in-engine captures, Purrfect Fit, and an open-source lab.

Structure

.
├── index.html            # The whole v2 site — HTML, CSS and JS in one file
├── lib/three.module.js   # Three.js r160, vendored (works offline)
├── assets/               # Curated media, all original A Cube Story work
├── serve.mjs             # Dependency-free dev server with HTTP Range support
├── view.cmd              # Windows: double-click to serve + open the site
└── v1.html               # The 2020 portfolio (uses build/ and src/ below)

Running locally

node serve.mjs 8123   # or double-click view.cmd on Windows

Then open http://localhost:8123. A server is required — browsers block ES-module imports from file:// — and it must support HTTP Range requests or the videos will never load (python -m http.server does not; serve.mjs does).

All media is compressed for the web (ffmpeg: H.264 CRF 26–28 for video, WebP for the pitch drafts) — the whole v2 asset set is ~13 MB. Analytics live at defnetuncer98.goatcounter.com via GoatCounter.

---

v1 — The Desk 🦖

Not a webpage with sections and scrollbars, but a fully interactive 3D workspace rendered in the browser. Everything on the desk is clickable: flip through my projects, play some music, grab my resume.

🦖 Fun fact: Hand-crafted in 2020, before AI coding assistants existed — which is exactly why it stays online next to its AI-built successor. 🙂

What's on the Desk

• 🌀 Animated hologram — a glTF character animated with THREE.AnimationMixer, glowing via selective bloom
• 📓 Project notebook — flip through pages of my projects, each playing a live video demo on a VideoTexture:
  • smellycat — a game (playable here)
  • Tomayto-Tomahto
  • rock-or-not
  • vizGoogleFit — try it live
  • mall-e
  • Echost — teaser on YouTube
• 🎵 Music player — an in-scene player with 3D text UI, play/pause and track skipping (Josh Lippi & The Overtimers)
• ☕ Coffee mug — essential equipment
• 🔗 Clickable links — GitHub, LinkedIn, ArtStation, Medium, mail, and my resume (PDF), all opened by clicking 3D objects in the scene

Under the Hood

Technique	How it's used
glTF/GLB models	Table, workspace, hologram, jet, coffee mug loaded with GLTFLoader
HDR environment lighting	RGBELoader + an equirectangular .hdr map for realistic reflections
Selective bloom	EffectComposer with UnrealBloomPass on a dedicated bloom layer — non-bloomed objects are darkened and restored each frame
Raycasting	THREE.Raycaster turns 3D meshes into buttons for navigation and external links
Video textures	Project demos are <video> elements streamed onto in-scene planes
3D typography	Multiple JSON fonts (including custom icon fonts) rendered as text geometry

v1's engine lives in app.js (~1600 lines) with its assets under src/ and build/three.module.js — untouched, exactly as shipped in 2020.

---

Author

Defne Tunçer — Resume · GitHub · Blue Variable · LinkedIn · ArtStation · Medium