/* Portfolio — filterable bento grid of typographic case covers + case-detail modal. The star section. No stock imagery: covers are bold typographic color blocks. */ (function () { const { Btn, INK, hardShadow, COVERS, TileImg } = window.BUBrutal; const { ArrowUpRight, X, ArrowRight, Check } = window.BUIcons; const wrap = { maxWidth: 1320, margin: '0 auto', padding: '0 28px' }; // span = bento footprint: [colSpan, rowSpan] const PROJECTS = [ { id: 1, slug: 'sw1', name: 'Lume Skincare', cat: 'Packaging', cover: 'orange', span: [2, 2], metric: '+312% conversion', blurb: 'Complete packaging redesign for a 7-figure skincare seller.', brief: 'Lume was blending into a crowded shelf. We rebuilt the packaging system from the box out — a confident, warm identity engineered for the unboxing moment and the Amazon thumbnail alike.', deliv: ['Primary & secondary packaging', 'Unboxing insert suite', 'Listing hero + lifestyle set'], result: '+312% listing conversion in 60 days' }, { id: 2, slug: 'sw2', name: 'Northwind Coffee', cat: 'Branding', cover: 'blue', span: [1, 1], metric: 'Full identity', blurb: 'Logo, color and a complete brand system.', brief: 'A specialty roaster needed an identity as bold as their beans. We delivered a flexible system that scales from bag to billboard.', deliv: ['Logo & wordmark', 'Color + type system', 'Bag & label templates'], result: 'Rolled out across 14 SKUs' }, { id: 3, slug: 'sw3', name: 'Vitalis Supplements', cat: 'A+ Content', cover: 'ink', span: [1, 1], metric: '+32% CVR', blurb: 'A+ content that boosted conversion by 32%.', brief: 'We turned a flat product page into a story-driven A+ experience — benefit-first modules, compliant claims, and trust cues that close the sale.', deliv: ['Premium A+ modules', 'Brand story section', 'Comparison chart'], result: '+32% conversion rate' }, { id: 4, slug: 'sw4', name: 'Olea Studio', cat: 'Branding', cover: 'mint', span: [1, 1], metric: 'Web + brand', blurb: 'Brand identity and web design.', brief: 'A wellness studio wanted calm authority. We built a serene, premium identity and a site that converts browsers into bookings.', deliv: ['Visual identity', 'Web design', 'Social templates'], result: 'Bounce rate cut in half' }, { id: 5, slug: 'sw5', name: 'PACKET', cat: 'Photography', cover: 'lavender', span: [1, 1], metric: 'Photo suite', blurb: 'Lifestyle and studio product photography.', brief: 'A full product photography suite — clean studio cutouts plus aspirational lifestyle scenes ready for every channel.', deliv: ['Studio hero shots', 'Lifestyle scenes', 'Retouch & delivery'], result: '40+ assets across 6 SKUs' }, { id: 6, slug: 'sw6', name: 'Górka Goods', cat: 'Packaging', cover: 'gradient', span: [2, 1], metric: '12 SKUs', blurb: 'Cohesive packaging across a 12-product line.', brief: 'Twelve products, one unmistakable family. We designed a flexible packaging system that keeps every SKU on-brand while letting each stand on its own.', deliv: ['Master packaging system', '12 SKU adaptations', 'Print-ready dielines'], result: 'Cohesive line, faster launches' }, { id: 7, slug: 'sw7', name: 'Vista Wellness', cat: 'Amazon', cover: 'cream', span: [1, 1], metric: 'Storefront', blurb: 'Custom Amazon storefront design.', brief: 'A branded storefront that showcases the full catalog and turns one-time buyers into repeat customers.', deliv: ['Storefront layout', 'Category pages', 'Promotional tiles'], result: 'Premium presence on Amazon' }, { id: 8, slug: 'sw8', name: 'Forma Labs', cat: 'A+ Content', cover: 'orange', span: [1, 1], metric: 'Rebrand', blurb: 'Full brand refresh with strategic direction.', brief: 'A complete rebrand grounded in strategy — repositioning Forma as the premium choice in a value-driven category.', deliv: ['Brand strategy', 'Identity refresh', 'Launch assets'], result: 'Repositioned as category premium' }, ]; const FILTERS = ['All', 'Packaging', 'Branding', 'A+ Content', 'Amazon', 'Photography']; // Extra covers for the auto-scrolling reel — short typographic showcase cards. const REEL = [ { slug: 'rr1', name: 'Lume Skincare', cat: 'Packaging', cover: 'orange' }, { slug: 'rr2', name: 'Northwind Coffee', cat: 'Branding', cover: 'blue' }, { slug: 'rr3', name: 'Vitalis', cat: 'A+ Content', cover: 'ink' }, { slug: 'rr4', name: 'Olea Studio', cat: 'Branding', cover: 'mint' }, { slug: 'rr5', name: 'PACKET', cat: 'Photography', cover: 'lavender' }, { slug: 'rr6', name: 'Górka Goods', cat: 'Packaging', cover: 'gradient' }, { slug: 'rr7', name: 'Vista Wellness', cat: 'Amazon', cover: 'cream' }, { slug: 'rr8', name: 'Forma Labs', cat: 'Rebrand', cover: 'orange' }, ]; function ReelCard({ p, onOpen }) { const c = COVERS[p.cover]; const lightText = c.color !== INK; return ( ); } function Reel({ onOpen }) { const [paused, setPaused] = React.useState(false); const run = REEL.concat(REEL); return (

Design that engages every sense.

A rolling reel of recent work

setPaused(true)} onMouseLeave={() => setPaused(false)}>
{run.map((p, i) => )}
); } function Cover({ p, big }) { const c = COVERS[p.cover]; const lightText = c.color !== INK; return (
{p.cat}
{p.name}
{p.metric}
); } function Tile({ p, onOpen }) { const big = p.span[0] === 2 && p.span[1] === 2; return ( ); } function Detail({ p, onClose, onStart }) { if (!p) return null; const c = COVERS[p.cover]; const lightText = c.color !== INK; return (
e.stopPropagation()} style={{ width: 760, maxWidth: '100%', maxHeight: '90vh', overflow: 'auto', background: 'var(--bu-cream)', border: `2px solid ${INK}`, borderRadius: 8, boxShadow: hardShadow(8, 8) }}>
{p.cat}
{p.name}

{p.brief}

Deliverables
    {p.deliv.map((d) => (
  • {d}
    • ))}
Result
{p.result}
{ onClose(); onStart(); }} iconRight={}>Start a project like this
); } function Portfolio({ onStart }) { const [active, setActive] = React.useState(null); const shown = PROJECTS; return (
Selected work

Brands we
unpacked.

Real projects for real sellers. Click any tile for the full case breakdown.

{/* bento grid */}
{shown.map((p) => )}
}>Start your project
{ const i = parseInt(p.slug.replace('rr', ''), 10) - 1; const proj = PROJECTS[i] || PROJECTS[0]; setActive({ ...proj, slug: p.slug }); }} /> setActive(null)} onStart={onStart} />
); } window.BUPortfolio = Portfolio; })();