Bokoko Creative Portfolio and Project Showcase

Overview

This portfolio is a sophisticated example of a "brutalist-light" aesthetic, combining a minimalist grid with high-end interactive elements like a Three.js background and video-based hover previews. It is an excellent reference for developers and designers who want to create a high-impact creative showcase that balances clean typography with dynamic multimedia content.

Design System

• Color Palette & Visual Hierarchy: The system uses a restricted palette—predominantly white and lavender/periwinkle accents. High contrast is achieved through bold purple backgrounds for buttons and labels (e.g., #5432d3). Dividers are thin, light purple lines that maintain a lightweight feel while clearly demarcating content blocks.
• Typography: The site uses monospaced and sans-serif fonts to evoke a technical, developer-centric vibe. Titles are set in a large, clean sans-serif, while metadata and labels use smaller monospaced fonts to signify utility.
• Page Structure: The layout follows a linear vertical progression of categories: a large heading introduces the section (e.g., "Works"), followed by sub-headers like (design & dev), which then lead into a repetitive card-based list of projects.
• Reusable Components:
  • Project Cards: A three-column grid layout within each list item containing the title, a description block with a stylized URL badge, and a large multimedia preview area.
  • URL Badges: Rectangular, high-contrast labels used for external links.
  • Video Thumbnails: Interactive containers with a _thumbnailBody class that layer a low-resolution image fallback beneath an autoplaying, muted MP4 video.
• Interaction & Motion: The site utilizes swup for seamless page transitions and a persistent Three.js canvas in the _glWrapper for a fluid, generative background. Mouse hover states on project cards trigger the video playback and potentially subtle transformations.
• Implementation Clues: The HTML reveals a modular CSS structure using CSS Modules (indicated by hashed class names like _card_1cjiu_1). It uses data-js attributes for JavaScript targeting, suggesting an organized, vanilla-plus or lightweight reactive framework approach.

Use Cases

• Who should clone this: Creative developers, motion designers, and digital agencies looking for a portfolio that emphasizes "proof of work" through video rather than just static screenshots.
• Effective Remixes:
  • E-commerce: Adapt the project cards into product listings where the video thumbnail shows the product in use.
  • Resource Libraries: Use the clean, labeled list structure to organize whitepapers or case studies.
• Remix Directions: Replace the Three.js background with a simpler CSS gradient for faster performance, or swap the lavender accents for a high-energy neon palette to change the site's mood from "calm/creative" to "tech/startup."
• Clone Scope: The project card component (_card_1cjiu_1) and the video thumbnail logic are the highest-value elements to clone for immediate impact in any layout.