All work

This Portfolio: Fog City & Room 404

My own portfolio, two ways in: a scroll through a fog city drawn live in the browser, where every section is its own scene, and Room 404, a building to walk through room by room in 3D. One source of content, and a readable page for every search engine.

Visit aliaydi.com

Started
September 2023
Timeline
Ongoing since September 2023
Complexity
High
Type
Web App, SEO

This is the site you are on: my portfolio, and the one project I build for no one but myself, so it is where I try things first. It offers two ways through the same body of work, chosen at the door: the classic site, a scroll through a city in the fog, and Room 404, a building to walk through in 3D. Both read the same content, and both are mine end to end, from the first sketch to the deploy.

At a glance

  • Two experiences, one body of work: a scroll-driven site and a walkable 3D building, chosen on arrival.
  • A living backdrop: the fog city is drawn live in the browser, and every section is its own scene within it.
  • Sound for the interface: quiet cues for every action, a wind for the arrival and a music loop, all behind one switch.
  • One source of content: projects, experience, studies and certificates are edited in a headless CMS and read by both experiences.
  • Readable everywhere: a page for every route that search engines and language models can read without running scripts, and a calmer version for visitors who prefer reduced motion.
  • Built for phones as well as desktops, with its own pacing for touch.

The idea

A portfolio usually lists. I wanted mine to be a place: somewhere with its own weather and light, where the work is met rather than scanned. The look comes from my logo, its blue and a rusted orange, set in a misty, mysterious city at night. Blue is the city’s light. Orange is the ember that travels down the page with you and lights whatever is under your hand.

The classic site

Scrolling is the journey. The page moves through the city one act at a time, and each section is a scene of its own:

  • The arrival: the camera runs in through the fog to my name, with the ember as the dot of its i.
  • My philosophy: the motto as three neon signs of lettered glass blocks that roll into place.
My philosophy: “Quiet focus. Precise action. Consistent progress.” as three neon signs of lettered glass blocks, above two quoted paragraphs
  • What I do: five services on a turning wheel, each with its own lit panel.
What I do: a card on a turning wheel, framed and lit, with its panel of text beside it on a circuit trace
  • Selected work: projects queued down the street as windows on circuit boards. When one locks in front, its circuit powers up. After the last one, the camera dashes down the street and turns the corner.
Selected work: a project window on its circuit board, queued down the fog city’s street, with its title, summary and links
  • The journey: work and education on two sides of one line, lit entry by entry as the ember passes.
The journey: work experience and education on two sides of one line, the ember riding the line and lighting the first entry
  • Tech stack: a switchboard of every skill my builds stand on. Pick a project to trace the stack it shipped on, or open any skill to see how deep I go and where I used it.
The tech stack: a switchboard of skills in layers, with this portfolio’s own stack traced and lit
A skill’s file: JavaScript, how deep I go, a short summary and the history of where and how it was used

Room 404

Legend has it the web’s first servers sat in Room 404 at CERN, and that “404 Not Found” is named after it. Nobody has ever found the room. Here it is found: a rusted building at night to walk through room by room, with a hall, a workshop for what I do, a room for the projects, an archive of certificates and awards, and a roof. Every screen, document and plaque inside reads the same content as the classic site.

Room 404, the 3D tour: the main hall at night, with signs to each room, rain on the window and a desk under a hanging lamp
  • Walk by scrolling or with the arrow keys, and look around by dragging.
  • Rain on the windows, lightning over the city, and a soundscape of its own.
  • It adapts to the device it runs on, so the walk stays smooth on a phone.
Room 404’s workshop: the front-end bench, with a monitor, a tablet and a phone showing the site, and sketches pinned to the wall

Content and reach

Everything you read here, on both sides, is edited in Sanity, a headless CMS: a new project or certificate appears in both experiences without touching the code. Each project has its own case study page in the same world.

A case study page in the same world: the CrocoJobs title, its summary and facts, over the fog

Search engines and language models get a readable page for every route, with structured data, sitemaps and share cards, so the site can be found by name.

Tech stack

  • Front end: React, JavaScript, Sass, Framer Motion.
  • 3D and graphics: Three.js with React Three Fiber, WebGL shaders, Blender.
  • Sound: the Web Audio API.
  • Content: Sanity.
  • Search: a static page per route, structured data, sitemaps, IndexNow.
  • Hosting: Netlify, behind Cloudflare.

Outcome

The portfolio is live at aliaydi.com: two portfolios in one, and a place I keep building. Each round adds something I wanted to learn, and the work it shows is still edited in one place.

Gallery