Bento Grid Portfolio

An Apple-inspired bento grid layout showcasing portfolio pieces in a visually dynamic, asymmetric grid.

Preview of Bento Grid Portfolio
Works with:ClaudeChatGPTv0CursorBolt
bento-gridportfoliomoderngrid-layoutasymmetric

Prompt

Create a bento grid portfolio website inspired by Apple's design language. The layout uses asymmetric grid cells of varying sizes to create visual hierarchy and interest.


Design Requirements

  • Layout: CSS Grid with varying cell sizes — some cells span 2 columns, some 2 rows, creating an asymmetric bento-box pattern
  • Background: Dark (#09090b) with slightly lighter cards (#18181b)
  • Cards: Rounded corners (16px), subtle border (1px rgba white 5%), hover glow effect
  • Color Palette: Near-black base, subtle gray cards, single accent color (#3b82f6) for highlights
  • Typography: System font stack or Inter, clean and minimal, white text

  • Grid Structure (Desktop)

    ```

    | Large Hero (2x2) | Small Card |

    | | Small Card |

    | Medium (2x1) | Tall (1x2) |

    | Small | Small | |

    ```


    Sections to Include

  • Hero Bento Cell — Large 2x2 cell with name, title, and animated background
  • About Cell — Medium cell with photo and short bio
  • Project Cells — 4-6 project cards with preview images, hover reveals title + description
  • Skills Cell — Grid of skill icons/tags inside a bento cell
  • Contact Cell — Email CTA with animated gradient border
  • Social Links Cell — Small cell with icon links to GitHub, LinkedIn, Twitter

  • Technical Details

  • CSS Grid with grid-template-columns: repeat(4, 1fr) and explicit row/column spanning
  • Gap: 16px
  • Hover: cards slightly scale up, show subtle glow shadow
  • Mobile: stack to single column, all cells become full-width
  • Optional: subtle parallax on hero cell
  • Related Prompts