modernizing bureau grafik
about three years ago i built a portfolio website, bureau grafik, for a friend of mine. i was learning html+css and wanted to try my hands on building a real website for a real client. my client had clear design goals and i suggested trying a neo-brutalist vibe with the design, they happily agreed.
bureau grafik is a branding and graphic design studio with a quirky, brutalist web presence. horizontal project strip, garamond italics, a marquee footer. the site hadn’t been touched in three years. i brought it up to current standards without killing its character. everything runs on plain html/css/js on vercel.
the homepage is a sideways-scrolling work gallery. it used to hijack the mouse wheel. now scrolling is fully native, with brutalist ticker buttons that snap to each project and hide at the strip ends.
tapping any project image opens a minimal lightbox. full-resolution webp, dark veil, heavy frost, one close button. no captions, no chrome.
the nav pins on scroll and compacts. smaller logo, tighter padding, a two-layer backdrop with full-strength blur underneath and a feathered cream veil dissolving into the page.
per-page theming survived the rebuild. the green contact room with its yellow nav, and the blue/red about panels with newly readable mobile typography.
on mobile, the chunky hamburger is gone. a letterspaced menu/close toggle opens a blurred full-screen menu with even rhythm and proper tap targets.
project credits were cramped and small. now they’re fluid-sized and centered. one rule change restyled all fourteen project pages at once.
under the hood: about 50mb lighter via webp with color profiles preserved, unique seo titles and open graph tags, prefers-reduced-motion respected throughout, report-only csp and security headers on deploy.
same site. just better.