Bentofolio — Bento Grid Developer Portfolio

# Bentofolio

Bentofolio is a dark, editorial-style developer portfolio built with Next.js 16, Tailwind CSS v4, and GSAP ScrollTrigger. Designed for design engineers, creative developers, and frontend professionals who want a portfolio that feels as crafted as their work.

---

## Pages Included

### Homepage

- Cinematic 3D hero with perspective text reveal

- Dual-direction infinite marquee

- 12-column asymmetric bento grid for blog posts

- Interactive WebGL 3D tech sphere

- FAQ accordion

- Giant footer CTA

### About

- Magazine-style layout with text-stroke hero

- Portrait with drop cap bio

- Numbered skills bento grid

- Vertical timeline

- Fun-facts cards

### Blog Archive

- Category filter pills

- 3-column post grid

- Animated entrance

### Blog Post

- Parallax hero image

- Staggered title reveal

- Author bar

- Clean reading column

### Contact

- Split hero typography

- Bento contact cards (email, availability, response time)

- Social links with per-platform color glow

- Project inquiry CTA

---

## Key Features

- Dark/light theme toggle with localStorage persistence and zero-flash loading

- Smooth scroll-triggered animations (staggered reveals, parallax, 3D rotations)

- WebGL 3D interactive sphere with drag-to-rotate

- Fully responsive with fluid typography clamp())

- Mobile hamburger menu with React Portal

- SEO-ready (Open Graph, Twitter cards, sitemap.xml, robots.txt, meta tags)

- Central config file lib/site-config.ts) for personalization

- Accessible (single h1 per page, aria-hidden decorations, proper heading hierarchy)

- Optimized images (AVIF/WebP, priority + lazy loading)

---

## Tech Stack

- Next.js 16 (App Router)

- React 19

- TypeScript

- Tailwind CSS v4

- GSAP + ScrollTrigger

- WebGL2 (custom 3D sphere)

- gl-matrix (3D math)

- Framer Motion (optional micro-interactions)

---

## Design Details

- Fonts: Space Grotesk (headings), DM Sans (body)

- Colors:

- Base: #08070b (deep black)

- Accent: #c4f541 (lime green)

- Additional accents: red, orange, blue, purple

- Grain texture overlay

- Code-editor aesthetic with // comment labels

- Text-stroke headings

- Gradient text effects

- Glow hover states

- Shimmer animations

- Floating elements

- Ping dots

---

## Getting Started

1. Unzip the project and install dependencies:

```bash

npm install