Engineering a Brutalist portfolio
Blueprint Portfolio Brutalist (HZ-BP-005) serves as the canonical reference implementation for the Portfolio architecture within HubZero's design system. It addresses the engineering challenge of delivering a high-fidelity commercial website that adheres to strict Brutalist constraints—zero-radius, zero-shadow, and zero-motion—without compromising performance, accessibility, or production readiness.
Architecture and data modeling
The site is built on Next.js 16 App Router using 100% static generation. By modeling all site content as typed TypeScript modules in src/content/, we eliminated the need for a database or CMS. This approach allows for pre-rendering all dynamic routes via generateStaticParams, resulting in a site that is both performant and easily portable for client deployment.
Design system and motion philosophy
Brutalist principles in this blueprint are enforced at the token layer rather than through convention. By collapsing radius and duration tokens to zero, we guarantee that no component can introduce rounded corners or eased transitions. Motion is treated as a deliberate zero: interaction is defined by hard, single-frame inversions using .invert-hover utility classes, ensuring a consistent and snap-responsive interface.
Engineering decisions and tradeoffs
- SVG Engineering Plates: Used as a substitute for photography to maintain a technical-drawing aesthetic and eliminate dependencies on external image assets.
- Honest Contact Form: The enquiry form uses a mailto-link approach to ensure that no user data is stored or transmitted, aligning with our commitment to transparency.
- Token-level enforcement: By setting --radius and --duration values to zero at the theme level, we prevent architectural drift in future component additions.
Conclusion
Building this blueprint demonstrated the efficacy of typed TypeScript modules for maintaining complex content within a static site. The primary lesson learned is that structural enforcement—collapsing tokens at the root—is more reliable than relying on developer convention. This foundation is now a reusable template for any future portfolio project requiring a high-contrast, Brutalist visual language.