Screenshot of Joseph San

Joseph San

joseph-san.com

A 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 Portfolio Creative Engineer Portfolio niche

Design tokens

page
themeColor
text
secondaryDark
softWhiteAlpha
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