ChristianSafka ↩ The garage
← Blog

How I built "the garage"

The initial idea was to build a 3D environment, but I let efficiency dictate my decisions here.

The Garage today is built on an image generated by ChatGPT, after iterating a few times to get the layout I wanted. With this base image, I asked ChatGPT to render a night time version, and a version of both day and night with the motorcycle light on. These images are stacked on top of each other and crossfaded by opacity.

To make each object clickable, I used the Segment Anything Model (SAM) from Meta to get pixel level masks for everything.

The garage render with six objects outlined in orange and labelled: shelf, workstation, window, piano, motorcycle, guitar.
These masks are used for the SVG outlines of each object and to determine the clickable areas.

I avoided third party libraries and frameworks for this site. A cold visit loads the HTML a stylesheet, script, two font files and one image.

Music

Clicking the record player plays a beat I produced in 2020, with a bit of record player crackle and a low-pass filter to increase the "lo-fi" energy.

The piano plays my recording of "Misty", a jazz standard by Erroll Garner, recorded in 2021. More of my recordings can be found on the music page.