Joseph San
joseph-san.comA creative-engineer portfolio that opens with a "[PLEASE WAIT] Loading 3D experience" black-screen pre-roll, then reveals a kinetic typography H1 over a 3D scene — the reference for portfolios that gate the site behind a deliberate loader as a craft signal.
Design tokens
- display
- PPNeueMontreal
- body
- PPNeueMontreal
- mono
- ModernEraMono
- system
- ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Do / Don't
Reference it for
- Deliberate [PLEASE WAIT] loading screen in ModernEraMono mono micro-type
- Honest "Loading 3D experience" label rather than hiding load behind a spinner
- Pure-CSS spinner via --animate-spin: spin 1s linear infinite
- pulseText keyframe for flicker/CRT text effects on headings
- flicker-line class semantic for headings that should glitch-pulse
- random-hover class semantic for character-scramble link hovers
- Near-black rgb(7, 22, 26) theme-color (cooler than #000, warmer than pure #141414)
- White-only chromatic palette — no accent colour at all on the static shell
Do not copy
- The Joseph Santamaria name / "Architect of immersive dimensions" headline
- The PPNeueMontreal / ModernEraMono pairing (PPNeueMontreal is commercial Pangram Pangram — fine to licence; ModernEraMono is commercial Klim — both require active licences)
- The "Loading 3D experience" exact loader copy — substitute the actual experience name
- The [PLEASE WAIT] bracketed-mono voice if the brand voice is anything other than engineer-aesthetic
- The entire 3D-canvas-as-homepage gate unless the brand actually has WebGL content to load
- The random-hover character-scramble effect unless engineering-aesthetic is on-brand (reads as derivative on most product sites)
- The CRT flicker-line heading animation unless the brand has a retro-tech identity
Signature moves
honest 3D-experience preloader gate
the site gates behind a deliberate black-screen pre-roll showing an honest "Loading 3D experience" label in mono micro-type with a pure-CSS spinner (--animate-spin: spin 1s linear infinite), instead of hiding load behind a generic spinner
four-corner chrome with canvas hero
chrome is anchored to three corners (button top-centre, footer bottom-centre, hero living inside the canvas) on a 1440px-ideal/1920px-capped stage, with em-based padding (py-[0.5em]) so buttons scale with type
Related references
Almacantar
nicheReal Estate
an architecture-led property developer reduced to its barest, most confident form, full-bleed aerial London video on near-black, a single Albertus serif word-pair ("PLACES / PEOPLE"), almost no chrome, and a quiet fade-and-rise motion that lets the buildings carry everything.
Alternative Aesthetics
nicheDesign Portfolio
The reference for solo illustrator portfolios on Webflow — hand-drawn "Stay Strange" hero typography, monochrome black/white canvas, and a 4-column thumbnail grid that lets the artwork carry the entire visual voice.
Fine Thought
nicheDesign Portfolio
A solo creative-technologist portfolio styled as a code editor — a "fine-thought.js" filename tab, line-number gutters, a monospace face for 95% of text, and ASCII-art "guide" glyphs forming the entire visual texture of the page.
First Frame
nicheFilm Production
Paris production and post-production studio whose own site is the canonical example of full-bleed black + IBM Plex Mono micro-type + reel-as-hero — the cinematic-craft posture for a portfolio-led service business.