FOLIO V2—

ROLEEverything

STACKNext.js 15, TypeScript, Lenis, CSS

YEAR2026

You're looking at it. A type-first portfolio with smooth scroll, grain, page wipes and exactly one dependency that isn't React or Next.

     ::     : :::.::.::-.--:-:::--=---:+--------=--=+=
... :... .:.::... :....-:::-:-::-:--:-:=:+=+==+-+====-
 . . . .  ::...-::-:-.::-=:.-==::::--====-=-=+=++=-**+
:: : .:.:.:.-:::..:--:::--::-::=---====--+-===*-++-=*+
      :.:..:::-.:-::--:---::=:-:-++===+-==+++=*-+=**=+
  .:. :.:..-:....:.--=:-=-=-----=-=+-=+==++*+=++*=*+**
.:.....:....::.--:=:=-::-=:====+==-+-++-++*=*==+*=**=+
:...:.:-...------=::::=-=-+=:=++=-=+==+=+===+***++**=+
: ..-:-.-.:.:=-::=-:=--=:=+=-+--+-++=*=-*=++**+*++#+#+
:-. --::---==.:::=-===:+:--+--+====-====+=++=+**=++#**
..:--..:=--=:--::=:-::-=-==++++-===-**===*=+*#=+***#*+
..:--:=.:==-=--=:=+=+-==+=-+-+*=+===*=**=++#=*+#+*#**+
-.:-::::--:-:----=+=--+=+==+-*=++==+**+****#*+##*##+*%
:--:--:----=::=-+---==--+-=++=+=+=++=+#+***+##*#*#*###
.:::-::==---==-+==-+=--==+==-+==*+++*=*=+##++##*+#%#**
::-=::--==-===:+=--=-+=***==+=+=++*+*+**+*+*+%**+*#*#*
:-=:-=-==-:++=++=--++++*=++*+=+*=*#**##*++**%+%##*###*
:-====::=+:--=+-+++=++=+***+#**+**=**#+*##*%#%**##%%%#
-===-=++-=-++==+=+*==**+++*+=+#+++#++*#**#*%#**%*##*@%
=-=-==+=++===+*+=*===+=*+=+**+*#+#+*+***###%%##%*#%%#%
=::--=+-++=++**+++=+*+=+=*+#**#+######*#%*###%@@%%%#%@
-=++=-=-=+==*=*++==******#+**+**###%*###**%#%%@##@%#%@
-=-++=+**-+==++***+***=#++**#*+#********#%%%%###%#@@@@
=-+==++==*+++++=+==+*=*++*##*#*%#*%%###%#%%@@*@%@#@##@
+=++-*=+==+*+++#+#+*##***#+%+*#**#%%%*#%#@#@@#%@%#%@@%
--==++=++*=+#*##+***+*##+***#*#**%*#%#@#@%%%%%@@%@#@@%

[ drop a render → /public/ascii ]

[FIG.1]P06 — HERO FRAME

Every page is statically generated. The three fonts are self-hosted variable files with size-adjusted fallbacks, so there is no layout shift and no third-party font request.

The film grain is a single inline SVG turbulence texture; the page transitions are one absolutely-positioned panel and two timeouts. No animation library, no 3D, no canvas — the whole interactive layer is a few small hand-rolled components.

The ASCII art is generated at build time by deterministic functions, or rendered by asciigen (P01) and dropped into /public/ascii. The site eats its own dog food.

 . .  :... :.:. ::: ....----:-:::==:-:-:-=----+=====-+
         .   .- .:.-..:-::-:.=:-=:=::==-+==:=-=+=+=+=+
  :.  .. ..: .. .-..:..--.-.--:--:=-:+=-==++-=++==+*==
 :: .: : ::.:- -:-:.:-.::=-:--::::===--++=--=+=*+==*=+
:::...:.:.:::-..:.--.-=:-:=--===:=+--+-+=-+-++**-=++*+
:..: - .:--.:-.:::::.-==-=::-=+====-==---+==+===*++=+*
:..:. ..:.-:.-::=:-=---=--:===+-++=+-=*+=**=+++*+++***
. .-- ::.::-.-:-:=-=-:--:=---=-++-+---==*+=*++*+++****
 ......:.---:=:-::=:=-:--=---=--==+-==+=*+*=++**+*#+++
-::::..--:--:.=:-==-=:===-++-=++++-+-=+*==***=*=***++#
:-..---::-=====:==:==+--+-=+--++=+=*-+++++++=***##+***
.--:.:-=::=:==:==-=-==--==+-==-++=+*=*++***++*+#+#*++*
-.=-=--:==-::-=:--::=+-===+=+-*+==**+=*=+=+**#**+##+*%
:.-..=-==::-:-=-+-:-++===+++==*=+**+=+*#+=*++#+*###*+%
:--:::==-=-+==--=+===-+==++*=+**+*+=****+**#+*#+#**#**
::-:==--==+=-++=-==+=+=**+=*+++*++##=#++#*+##%##**#%**
-:-=-==-=-=--=--=+--++*=++=*=++=*#*+*+##*#+*#***###%%#
--:::-=-=+++-=+++=+-++*+*+*+=+*++*++*#**%#%%#**###%@*#
----===-=-=+=+==+++=-+=**+####+*++*+++##**##*%#%#%#%%#
:-====-=-=+=+=*+=*++=*++*#+#+++*#+#+*++*####%%***#%#%%
:--=+-=++-+*+*+=**=**+*+#**++*****+*+%##%***#%####*%##
-+=--==+==*=*=*++=+#*+=*+*#***+*#*#%*+##*%**%*#*#%@@#%
+++=+++++==+*=+==+++*=*+++##*#++#*#*#%*%#@##@#%@%@#@%%
==+-=-+-++==****===#**+#++*****#*+#*#%*#@##%%%@@#%#@%@
=+++=+*++=**+****+#*##**+**##*#*%##%*#%@%%%%##@@@%%@#@
=+++=+=+*=++*+=*=#+*#+#**##*%*%***%%%##%*%@#%%%@%%%%@%

[ drop a render → /public/ascii ]

[FIG.2]DETAIL — 01

  ... . .. ....-.:-: :.::::-:.--:::==-==----+-==+-=+=-
   . :..  .::  :::::..:::----:-:=::=-==-:---+-++-+*=++
..     ..:  :...--:.::.---.::--::-==:=====----++=+=*+=
:. :  ::.-... :.:-:--:--.:::-:-===-=:=-+-++=-+=+*++**=
 ......: ..:: -::-.--:--==----------+=+==+++-=+=+-*==+
.  .::.. .:::...-=::::=-=:::==--=:==---+=====+==++*+*+
:....:-..::::-::::::--:-=::::+--=--+=+=====-+=+=+*++**
:.:-::::-..-:-.-:-::=-=-----:=:++---++=+=+*++=*+=+#+#+
...::.-:..--:.=::::=:------===--==+-++=-+=+*+*+*+*###+
...:.-.::-:----:=---=-:++--++==-+-==**=+==*=*==*#*+##*
..:-:::-:=---:=-:::=-=-=+-==-==========++===*=##+*++*+
.:--:-.-:=--=-=---===+==++++==++=++=+==+==+*#+*+#*+*+%
.::--=--=::=-=-=:-====-===+====*=++*=****#*#***#+###**
.:=:---::=--:-=:=-===-++++=*=+*+*=*+#*==++**##*#%+***%
-.--::--:===--:+---++=+=+++=+=++**=**=*+++**#*+#+#%%#*
:=--=====-====-++--+-==*+=++*=*+*+=**+#+#*++##*+***%*%
--=--=-:-=====---=+-+==++=*=**+**+**+*#*#+*#*+#%#*##%%
---:--::-+-+=-=====+=*==++=******+++*#++*+**%%**#**%@*
=---=+:-:-=++-=-=+=*=++++*=*++***+*#+****#*###*#**#%##
=-=======++--+*====+**=+*+=+#*##**#*+*+#*+*#%#%###@##%
=+=:-==-+-++===***+***++++#+*##**##+#*%###%%##%#@#@*##
==--=+=+==+-**+==+=**=++#+**#*##+*#*##%%*%%%*#%%@%#%##
==-=+---=*=+**=*+=*+++***++*+++#*+###%##%*%%%@@@%@@#%@
++==++=-==*==**=#+*++##+*++#**#%%*#**%*%##**@%#@##%#@%
-+==+=+**==++==+++*++###+*++***##*#*%*###%@#%#%##%@@%@
=-==+==+*+*+#**=+*#+*++%##*#+#***%%#*%#%%@%#%%@#@@@%%%

[ drop a render → /public/ascii ]

[FIG.3]DETAIL — 02