← back to posts
                   ,»»»»»»»»»»≡»≡≡»»≡«≡≡≡╔╔╔╔╔╔╔╔╔╔╔╔╔╔,
                   !░░│¡░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒╠
                   !░!)φ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒╠╠░░▒╠
                   ]░░╟╣▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██▒]░▒╠
                   ]░░╟╣▓╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╣▓▓▓▓▓▓▓█▒]▒▒╡
                   ]░░╟╣▓╬╬╬╬╬╬╬╬╬╬╬╬╬╬╣╣╣▓▓▓▓▓▓▓▓▓▒▐▒▒╡
                   ]░░╟╣▓╬╬╬╬╬╬╬╬╬╬╬╬╬╣╣▓▓▓▓▓▓▓▓▓▓█▒▐▒▒╡
                   ]░░╟╣▓╣╬╬╬╬╬╣╬╣╣╣╣╣▓▓▓▓▓▓▓▓▓▓▓██▒▐▒╠╡
                   [░░╟╣▓▓▓╣╣╣╣╣▓╣▓▓▓▓▓▓▓▓▓▓▓▓▓▓███▒▐▒╠╡
                   [░░╟╣▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓████▒▐▒╠╡
                   ]░░╟╣█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█████▒▐▒╠╡
                   [░░╟╣█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓████████⌐▐╠╠╡
                   [░░╚╙└└└└└└└╙╙╙╙╙╙╙╙╙╙╙╙╙╙╙╙╙╙╙╙ ▐╠╠╡
                   [░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒╠▒▒╡
                   [░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒░▒▒▒▒▒▒▒╡
                   [░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒╠╡
                   Γ░░ΓΓΓΓ░╚╚╚░╚╚╚╚╚╚▀▀▀▀▀▀▀▀▀▀▀▀▀▀╬╠╠╠Γ
                   [░░░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒╠╠╡
                   φ░░░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒╠╠╠╠╡
                   ▐░░░░░░░░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒╠╠╠Γ
                   ]╠╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬⌐
              _____]╚╠╣╣╣╣╣▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓⌐____
       _ⁿƒⁿ╙]M░ƒ∩░%∩░╔∩░╔∩⌐≤░░╦ƒ░MƒƒM5²MδƒMΘφM░j∩>⌐%^^(φƒ╕░ƒ╕░ƒp░░Q░
       .7DDφ≥▒5≥▒φ≥▒δUΓφ7Γê≤Üê5Üφ5Üδ≤Üê5▒φ╠▒φ╠⌂Då░5╠░_▐"S║"S║"▒║""Å░"ⁿⁿ-.,
. ≈╚╚╚╚δ╚╚δδδ╚╚╚╚╚╚╚╚╚╚╚╚╚╚╚╚╚╚╚╚╚╚W╚╚⌐╚╚W╚╚⌐╚╚Ü.-W╚╚╚╚╚ë╚╚ë╚╚Θ░      __`-
     =Q░░░░░░░░░░░░░░░░░░░░░░▒▒░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒╝

Saint Drostan Whiskey Club

My latest project is live at stdrostanswhiskey.com.

This is a simple site built to serve as the club's home on the web, with event info and an about page. For me was an excuse to play around with Three.js and 3D rendering on the web — the landing page features an interactive whiskey-bottle scene with discoverability built into clicking the objects (the bust, the tv, the whiskey glass, and paper on the desk). Selecting an object moves the camera to preset positions and overlays relevant text. I particularly like using the old crt tv to display upcoming event flyers and the etched logo on the whiskey glass (it's still not perfect but it took a bit of trial and error in blender before it started looking nice).

The site is built with Next.js (App Router), React, Tailwind, and Three.js via @react-three/fiber, @react-three/drei, and @react-three/postprocessing.

Saint Drostan Whiskey Club landing page
Saint Drostan Whiskey Club CRT TV overlay
Saint Drostan Whiskey Club home on mobile
Saint Drostan Whiskey Club bust overlay on mobile
the site on mobile

Model Attributions

The 3D scene uses a few excellent models from other artists: