YeabsiraOpen to new work

How it's made.

I wrote this site myself, top to bottom: no theme, no page builder. Here's how each part works, in the order you scroll past it.

  1. The welcome

    A sheet of frosted glass with “hello” carved into it. Glass beads pour in and fill the letters, then a knife cuts the glass and it falls away.

    The beads are the loading bar, and they don't fake it: they follow the page's real milestones, from the page being read to the fonts arriving to the name being drawn. It's all a plain 2D canvas. It plays once a visit, and never when a link takes you straight to a section.

    Made with Canvas 2D.

  2. The liquid name

    See it on the page

    My name fills the first screen. Move across it and it ripples like water. Drag through the letters and they split, drop onto the line below and mend.

    The name is real text first, so it reads at once and search engines see it. When the page is idle, a WebGL layer draws the very same letters in the same places and fades in on top. A small fluid simulation follows your pointer on the graphics card and bends the letters through it. Cut pieces become shapes in a physics engine. If your device can't keep up, it quietly stays plain text.

    Made with WebGL2, GLSL, and matter-js.

  3. The glass phone

    See it on the page

    Scroll and the camera pulls back: the name was the screen of a glass phone all along. It turns, settles, and walks you through what I build.

    It's a 3D model lit like a studio shot, in an iridescent glass material written for it. The first version drew it pixel by pixel in one big shader, which came out blurry and slow, so it became real meshes that the graphics card keeps sharp and cheap. Draw a line through it and it turns to jelly: a soft body solved many times every frame.

    Made with Three.js, GLSL, and GSAP.

  4. The work

    See it on the page

    The same phone carries on down the page. It slides over and becomes a browser for the websites, then comes back as a phone for the apps, showing their real screens.

    It's one device the whole way, handed from the top of the page to the work, not a copy. Each chapter opens on the device's own home screen with the real app icons, and the first project opens out of its icon. Every position is read from the layout each frame, so it holds up when you resize. The floating tool icons are glass tiles with each logo pressed out of the face.

    Made with Three.js and Simple Icons.

  5. The badge

    See it on the page

    A badge on a lanyard. Grab it and give it a swing, or flip it over to my CV.

    A pendulum in plain JavaScript: gravity, a little friction, and your pointer as the hand that swings it. The flip is CSS in 3D. The CV behind it is a page of this site, printed to PDF by a script, so the two never disagree.

    Made with JavaScript and CSS 3D.

  6. Right now

    See it on the page

    Every day of my past year on GitHub as a glass bead, bigger on busier days. The beads near your pointer swell like a magnifier. Beside them, the time and the sky in Addis Ababa.

    The year is read from GitHub when the site is built, so your browser has nothing to fetch and nothing goes stale between builds. The sky is worked out from the clock alone: Ethiopia has one time zone and, so near the equator, the sun rises and sets at almost the same time all year.

    Made with GitHub API.

  7. The toolbox

    See it on the page

    Every tool from the work above falls into glass trays and piles up. Grab one and throw it.

    Each icon is a body in a physics engine, and its size is how many of my projects use it. The trays are named by what the tools make, in plain words, because a pile of logos means little if you don't write code.

    Made with Three.js and matter-js.

  8. The chat

    See it on the page

    A glass phone where I say hi and ask what you're building. Tap an answer or type your own.

    Nothing is sent from this page. Your answer becomes a Telegram chat or an email draft with the message already written, and you send it from your own app. The phone is HTML and CSS in 3D, no WebGL.

    Made with HTML and CSS 3D.

What it stands on

Astro
builds every page ahead of time, so you get plain HTML first
Three.js
the glass phone, the browser and the icons
WebGL2
the liquid name, written by hand without a library
matter-js
falling letters and the toolbox
GSAP
the phone's turns and slides
Lexend
every word, plus a tiny font holding only the letters of ሰላም

Rules it keeps

Motion is optional
Turn on reduced motion and nothing pins or plays; the page simply stacks.
3D waits its turn
The heavy parts load after the page is ready. Without WebGL you get plain HTML and pictures; on a slow device the 3D lowers its resolution and the liquid name turns back into text.
Real screens only
Every screen of my work is a real capture, saved as AVIF at two sizes so phones get the small one.
Ideas go to the lab first
New parts are tried as drafts on pages that never ship. Most get thrown away.

Want to play with the pieces on their own? Go to the playground, or back to the site.