July Fund Bento Grid Portfolio

Overview

This investment fund portfolio utilizes a sophisticated Bento Grid layout that replaces traditional lists with interactive, card-based storytelling. It is a premier reference for builders wanting to showcase diverse content types—ranging from weather widgets and team bios to news updates—within a unified, high-end aesthetic that feels both playful and professional.

Design System

• Color Palette & Visual Hierarchy: The design uses a muted, earthy foundation primarily consisting of rgb(240, 231, 228) (warm off-white) and rgb(67, 62, 60) (deep charcoal). High-contrast accents are provided by a vibrant "success green" (rgb(86, 210, 112)) and soft lavender (rgb(201, 199, 255)) used exclusively for categorical tagging.
• Typography: Features a striking contrast between a large, elegant serif font for the main "July Fund" heading and a clean, lightweight sans-serif for body text and metadata. The hierarchy is established through extreme scale shifts rather than weight alone.
• Page Structure: The layout leads with a massive full-width hero card containing the primary mission statement, followed by a multi-column bento grid (card-column) below. Each "column-item" is vertically stacked, creating an asymmetrical but balanced mosaic.
• Reusable Components:
  • Tilting Cards: The tilting-card component uses 3D perspective to respond to cursor movement.
  • Category Tags: The tag and perspective classes create pill-shaped labels with depth.
  • Flip Buttons: LinkedIn buttons feature a "flip" text animation (flip-texts) on hover.
  • Stacked Image Gallery: News cards feature layered, rounded images with subtle drop shadows.
• Interaction & Motion: The site relies heavily on "Perspective 3D" transforms (transform: translate3d). There are specific animation triggers like tilt-from-top and perspective wrappers that suggest a focus on depth and spatial UI.
• Implementation Clues: The HTML confirms a Svelte framework implementation (id="svelte", svelte- scoped classes). It uses CSS custom properties for animation speeds (--animation-speed: 0.7s) and inline styles for dynamic 3D rotation calculations.

Use Cases

• Who should clone this: Venture capital firms, high-end creative agencies, and individual portfolio owners who need to display a mix of qualitative (bios, news) and quantitative (live data, locations) information.
• Effective Remixes:
  • SaaS Dashboards: Adapt the bento grid to show live server status, user count, and recent updates.
  • Personal Branding: Use the "Founder" card template for team pages or speaker profiles.
  • Event Sites: Modularize the grid to show schedule, map, and speaker information in a non-linear format.
• Suggested Scope: Developers should prioritize cloning the tilting-card logic and the CSS grid structure first. For a quick win, the "Intro Card" design can be reused as a minimalist landing section for any brand-focused site.