Bento-Grid-Portfolio

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