sam.serrien.be
De persoonlijke portfolio van Sam Serrien, oprichter van GeNx, opgebouwd als eerbetoon aan de film Hackers uit 1995. Wie wil, hackt zich via een terminal en het Cookie Monster virus een weg naar de projecten. Wie haast heeft, gaat rechtstreeks naar de portfolio.
Sam Serrien
Design & Development
Een portfolio als filmscène
Een gewone portfolio is een lijst projecten met een foto erbij. Deze site maakt er een korte scène van. Na een terminal in hackertyper stijl en ACCESS GRANTED duikt het Cookie Monster virus uit de film op. Het vraagt om een cookie en eet ondertussen de datamuur van de Gibson baan per baan op, met Pac-Man als hulpje. Wie cookie intypt, voedt het virus en gaat verder.
Daarna worden de sectoren van de Gibson één voor één overgenomen, tot het hele systeem in handen is en de camera in het raster duikt. Daar staan de projecten, de werkplekken en een profiel. Voor wie geen zin heeft in een film: de tweede knop op het startscherm slaat alles over.
- Twee routes: de volledige hacksequentie of rechtstreeks naar de portfolio
- Een eigen canvas engine voor de datamuur die ook op tragere toestellen vlot blijft
- Projecten filteren op bedrijf en op tag, met screenshots in een carrousel
- Een profielfoto die wisselt tussen scènes in de stijl van films uit de jaren 80 en 90
- De Konami code opent vanuit elke scène een verborgen easter egg
- SEO, structured data en llms.txt die automatisch uit de projectlijst gegenereerd worden
Snel, ondanks alle effecten
De datamuur is een kleine canvas engine zonder React. Hij tekent de cijfers één keer en past daarna enkel de stukken aan die opgegeten worden, zodat de scène ook op een oudere laptop of telefoon vloeiend blijft. De rest van de site is React met Vite, Tailwind CSS en Framer Motion.
Alle inhoud staat in één databestand. Daaruit bouwt de site het projectraster, en bij elke build ook een markdown versie van de projecten, de llms.txt voor AI-assistenten en de JSON-LD voor zoekmachines. Een nieuw project toevoegen is zo één wijziging op één plek. De profielfoto's zijn met AI gegenereerde scènes rond één echte selfie.
Impressies
Hack the Gibson
Probeer de volledige sequentie zelf, of ga meteen naar de projecten.
Bezoek sam.serrien.be