# 10 — Reference Study: marcuslorenzet.com (Oct 2026) Purpose: a written spec of the reference site's UI, layout, motion and typography so the rebuild of `maheshwarkibehan-hub/portfolio-website` matches its language without guessing. Method: manual audit with Chrome DevTools MCP (snapshots, computed styles, scroll captures at 1440×900), a full-page capture, plus a local static clone produced with **uncage** (`github.com/Nightteye/uncage`, MIT) stored in `bg/` for offline reading of the markup, stylesheets and Framer runtime. --- ## 1. Brand system | Token | Reference value | Our value | | --- | --- | --- | | Page background | `rgb(17,16,13)` warm near-black | `#0f0e0c` | | Panel / card | `rgb(20,19,16)` with hairline `rgba(255,255,255,.08)` | `#141310` / `rgba(233,223,201,.10)` | | Primary text | cream `#E9DFC9`-ish (`#E3D9C0` sampled) | `#e9dfc9` | | Muted text | `rgba(233,223,201,.55)` | same | | Hairlines | `rgba(233,223,201,.12)` | same | | Accent | none — strictly monochrome; colour only inside project imagery | none | Type: one grotesque for everything (Google Sans → Plus Jakarta Sans on Google Fonts), plus a mono for micro-labels. No serif, no italics, no colour accents. --- ## 2. Page architecture (top → bottom) 1. **Loader** — full-screen black curtain, three portrait frames flipping in a stack (`entrada1/2/3` Cloudinary), then a wipe. 2. **Top bar** (fixed) — two-line letterspaced wordmark left (`MARCUS` / `L■RENZET`, the square replaces a letter), email address right in cream. 3. **Hero** (100vh) — full-bleed portrait photo, darkened, with three oversized display lines overlapping the face: - line 1 left-aligned, line 2 right-aligned, line 3 left-aligned; - two floating "badge" cards (label + gradient fade, e.g. `15+ YEARS OF EXPERIENCE`, `300+ PROJECTS`) tucked into the gaps; - a short paragraph in the negative space; - a large ↓ arrow bottom-right, `Pixel by pixel` bottom-left, `Scroll` bottom-right. 4. **Bottom nav** (fixed, centred) — glass pill: `PROJECTS ABOUT ARCHIVE` + cream `LET'S TALK` button carrying a small avatar. Follows the viewport, not the page. 5. **What I do** — `position: sticky` section, 3296px tall, viewport-pinned content: `[ WHAT I DO ]` label on the left, a giant paragraph whose words light up one by one as the section scrubs, a smaller line underneath (`trusted by platforms with 1M+ users.`), and project screenshots drifting across the type on different parallax depths. 6. **Featured** — `FEATURED.` in 130px display caps with `[ CASE STUDIES ]` on the right, then three case-study rows: media on the left, giant number + title on the right, a tag line, and a `Next project →` link. Rows are ~732px apart. 7. **Testimonials** — sticky `RESULTS SPEAK LOUDER` in huge display type as a backdrop, with dark glass quote cards (number, quote, avatar, name, role, flag) floating over it. 8. **About** — giant sentence `I'm Marcus, a Product Designer with 15+ years of experience…` that brightens word-by-word, a portrait card on the right, then a second giant statement `Today my focus is clear: websites and dashboards for companies that want design to work as hard as it looks good.` with `[ WHAT I DO BEST ]` and a skills string. 9. **CTA** — `Let's build something together.` with two buttons and drifting project thumbnails around it. 10. **Footer** — giant letterspaced wordmark, `Ready to start?`, copy-to-clipboard email and phone, `SITE` / `follow` link columns, a marquee strap line (`PIXELS ARE SMALL — DETAILS ARE NOT`), and the copyright row. --- ## 3. Motion inventory (what actually moves) | # | Motion | Technique | Reference behaviour | | --- | --- | --- | --- | | 1 | Loader flip | three stacked images, sequential scale/rotate reveal | ~1.2 s, then curtain wipe | | 2 | Hero entrance | staggered opacity + `translateY` per line/badge | lines land in sequence | | 3 | Hero parallax | portrait drifts slower than the scroll | `y` offset ≈ 8 % of scroll | | 4 | Word-by-word reveal | each word's colour/opacity animates as the sticky section scrubs | dim `rgba(255,255,255,.18)` → cream | | 5 | Floating media | absolutely positioned project shots translate on their own depth (0.3–1.0×) | cross the giant paragraph | | 6 | Sticky pinning | `position: sticky; top: 0` containers, page height ≈ 3.5–4× viewport | holds the viewport while content scrubs | | 7 | Case-study rows | big number, title, media, `Next project →` | appear on scroll, media scales 1.04 on hover | | 8 | Testimonial cards | glass cards, staggered vertical offsets, hover lift | 3 cards in sequence, offsets ±140px | | 9 | About reveal | same word-lighting effect on a second giant sentence | + portrait card fades in | | 10 | Marquee | infinite horizontal strap line in the footer | constant, ~22 s per loop | | 11 | Cursor states | links invert to cream blocks; `LET'S TALK` fills cream | hover 200 ms ease | | 12 | Copy to clipboard | email / phone rows flash `Copied!` | 1.6 s reset | Reduced motion: every scroll-linked effect must be disabled under `prefers-reduced-motion: reduce`, leaving static, fully legible layouts. --- ## 4. Implementation rules for our rebuild - One stylesheet (`css/site.css`), one script (`js/site.js`), no framework, no build step. - Scroll work is `requestAnimationFrame`-throttled; all measurements use `getBoundingClientRect()` once per frame and are cached on resize. - Sticky sections use `position: sticky` (no scroll-jacking, no scroll hijacking). - Reveals use `IntersectionObserver`; word lighting is computed from section progress only while the section is in view. - All animation is progressive enhancement: with JS disabled the page is a complete, readable, dark document. - Colour contrast: cream on near-black ≈ 14:1, muted text ≈ 6.5:1 — comfortably AA. - Mobile: the fixed bottom pill collapses to a compact bar; the giant type steps down with `clamp()`; sticky sections reduce to 220 vh. --- ## 5. Tooling note — uncage audit `Nightteye/uncage` (MIT, 39★, last commit Sep 2026) is a local Playwright-based site cloner. Audit before use: - dependencies: `playwright`, `playwright-extra`, `puppeteer-extra-plugin-stealth`, `cheerio`, `sharp`, `purgecss`, `cssnano`, `archiver`, `commander`, `@inquirer/prompts` — all mainstream; - grep for `child_process|eval|webhook|process.env` found only the local preview-server `spawn` and the `bin/uncage.js` launcher — **no exfiltration, no obfuscation, no telemetry**; - outbound URLs in source are limited to the crawled origin, `localhost` and test fixtures; - no install/postinstall scripts besides `esbuild` (tsx dependency); - it runs the target site's own JavaScript in a local browser, so it inherits the target's risk profile — the same as opening the site in a browser. Usage for this rebuild (one page, no deep crawl, robots respected): ``` node /node_modules/tsx/dist/cli.mjs /src/index.ts \ https://www.marcuslorenzet.com -o bg --max-pages 30 --max-depth 1 --timeout 60000 ``` The captured `bg/` folder is **research material only** — the shipped site is our own markup, our own copy, our own assets, with the reference used as a design benchmark only.