brunotome-clone

A monochrome portfolio template — bold typography, mix-blend-mode separators, a soft custom cursor, and diagonal big-half reveals.

The structure and motion are inspired by experimental front-end portfolios (notably brunotome.dev). All copy, links, and project slots are placeholders so the template can be customized for your own work.

Stack

• Vanilla HTML, CSS, JavaScript — no build step
• GSAP 3 for animations (loaded from a CDN)
• Space Mono from Google Fonts

Local development

You can open index.html directly in a browser, but the favicon and og_image references resolve from the site root, so a static server is recommended:

npm install
npm run dev

This starts http-server on http://localhost:8080.

Project layout

.
├── index.html         # Entry point and the entire markup
├── src/
│   ├── styles.css     # Design system, layout, motion primitives
│   └── main.js        # GSAP timelines, cursor, marquee, about overlay
├── dark/              # Favicons used when the system is in light mode
├── light/             # Favicons used when the system is in dark mode
├── og_image.jpg       # Open Graph share image (1200×630)
├── ASSETS.md          # Notes on swapping in your own favicons / OG image
├── netlify.toml       # Static deploy config
├── package.json       # Dev server only
└── LICENSE            # MIT

Customizing

• Copy. Edit the .about-wrapper block in index.html. Each line is wrapped in <span class="about-section-line"><div>…</div></span> so the line-by-line reveal animation works.
• Projects. Each project is an <article> with an <a> and an inline <svg> containing the project title as <text>. Replace the title and href. The alternating skew is handled by :nth-child(odd|even).
• Marquee. The repeated <span> text inside the top and bottom separators is duplicated by main.js until it covers two viewports — change the source text and the marquee will refit on next load.
• Type. Swap the @import URL in src/styles.css and the font-family to use a different typeface.
• Color. The palette is two values: #000 background, #fff text. The inversion effects rely on mix-blend-mode: difference, so the design assumes a true-black/true-white palette.

Deploy

The site is fully static. Drop the repo on Netlify, Vercel, GitHub Pages, or any static host. netlify.toml is included for one-click Netlify deploys.

License & attribution

The code in this repo is MIT-licensed — fork it freely.

The structural design pays homage to brunotome.dev. See NOTICE.md for what's reproduced and what isn't, and a short ask: please don't reuse the original site's personal identity (custom type, exact copy, project list) in your own deploy.