Bento Page

A highly configurable, aesthetically pleasing personal page in the style of Bento grids. Built with React, Vite, Tailwind CSS, and designed for Cloudflare Pages.

Features

• Configurable: Fully data-driven via public/config.json.
• Bento Objects:
  • Text Blocks: Titles, subtitles, quotes.
  • Link Blocks: Auto-fetching of OG images and Favicons (via Cloudflare Functions).
  • Social Blocks: Icon-based social links.
  • Photo Blocks: Full-bleed images.
  • Map Blocks: Interactive Leaflet maps (OpenStreetMap).
  • Animated Text: Floating/Marquee text bubbles.
• Responsive: Adapts to Mobile, Tablet, and Desktop.
• Accessible: Semantic HTML, visible focus states, ARIA labels.
• Dark Mode: Sleek dark theme by default.
• Custom Icons: Add a decorative background icon to any block using Lucide icon names.

Configuration

Edit public/config.json to update your profile and grid blocks.

{
  "profile": { ... },
  "blocks": [
    { "type": "text", "size": "large", "icon": "Sparkles", "content": { ... } },
    ...
  ]
}

Block Types

• text: text content.
• link: url card.
• photo: image.
• map: leaflet map.
• social: social icon.
  • Supported platforms: github, twitter, linkedin, instagram, facebook, youtube, email, web.
  • Unsupported platforms: Use "icon": "IconName" (e.g. "icon": "MessageSquare") to use any Lucide icon.
• animText: animated text bubbles.
• time: current local time with day/night theme. Config: timezone (e.g., "America/New_York"), label.
• music: display a favorite track. Config: query (auto-fetch from iTunes) OR title, artist, cover, url.
• movie: display a movie you're watching. Config: query (auto-fetch) OR title, year, cover, url.
• book: display a book you're reading. Config: query (auto-fetch) OR title, author, cover, url.
• techStack: grid of tools. Config: title, tools (array of {name, icon}).
• github: fetching GitHub stats. Config: username OR username + repo.
• newsletter: email subscription form. Config: title, placeholder, buttonText.
• project: status card for a project. Config: title, description, status ("Live", "Beta", "Building"), repo, url.
• calendar: link to booking page with date visual. Config: url.
• video: autoplay loop video. Config: url (mp4 link), poster (optional image).
• divider: horizontal separator.

Sizes

• small: 1x1
• medium: 2x1
• large: 2x2
• wide: 4x1
• tall: 1x2
• full: 4x2
• square-sm: 1x1
• square-md: 2x2 (responsive)
• square-lg: 3x3 (responsive)
• square-xl: 4x4 (responsive)

Development

1. Clone the repository:

   git clone https://github.com/halans/bento-page.git
   cd bento-page

2. Install dependencies:

   npm install

3. Run development server (UI only, no link previews):

   npm run dev

4. Recommended: Run with Wrangler (supports Link Previews & Cloudflare Functions):

   npm run pages:dev

Deployment

Option 1: Via Cloudflare Dashboard (Git Integration)

1. Connect your repository to Cloudflare Pages.
2. Build command: npm run build
3. Build output directory: dist
4. Cloudflare will automatically detect the functions/ directory.

Option 2: Via Wrangler CLI

You can deploy directly from your terminal:

npm run deploy

This command builds the project and uploads the dist folder to Cloudflare Pages.

Tech Stack

• Framework: React + Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• Maps: React Leaflet
• Animations: Framer Motion
• SEO: React Helmet Async