A sleek and customizable portfolio engine inspired by bento.me. Create beautiful portfolio layouts with a flexible block system and admin interface.
- 🎨 Bento Grid Layout - Elegant portfolio with customizable block sizes
- 📱 Responsive Design - Works perfectly on desktop and mobile
- 🎬 Smooth Animations - Framer Motion powered animations with scroll triggers
- 🔧 Secure Admin Panel - Protected editing with authentication
- 🧩 Extensible Blocks - 10+ block types with plugin architecture
- 📸 File Upload - Secure image handling with optimization
- Install dependencies:
npm install- Run development server:
npm run dev- Visit your portfolio: http://localhost:3000
- Access admin panel: http://localhost:3000/admin
Control your portfolio's visual experience with built-in animations:
- Page Transitions - Fade, slide, or scale between pages
- Block Animations - FadeUp, scaleIn, slideIn, bounce effects
- Scroll Triggers - Blocks animate into view as you scroll
- Live Controls - Adjust timing, easing, and effects in admin panel
- 📝 Note - Text content and memos
- 🔗 Link - External links with descriptions
- 📷 Photo - Images with secure upload
- 🎥 Video - Video content and embeds
- 🎵 Music - Music tracks and audio
- 🕐 Clock - Live time with timezone
- 🗺️ Map - Location with address
- 👤 Social - Social media links
- � Git Activity - GitHub contribution graphs and stats
- �📋 Header - Section organization
- Small (1×1) - Icons, social links
- Medium (1×2) - Photos, content
- Large (2×2) - Featured content
- Wide (2×1) - Links, horizontal layout
- Extra Wide (4×1) - Spanning headers, banners
- Tall (1×3) - Lists, vertical content
Essential Environment Variables:
# Required for admin access
NEXTAUTH_SECRET=your-secret-key
NEXT_PUBLIC_ENABLE_ADMIN=true
# Admin password
# Use encoded format due to Next.js parsing issues with $ characters
ADMIN_PASSWORD_HASH_ENCODED=
# Optional: Google Maps for location blocks
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your-api-key
# GitHub Contributions Configuration (for Git Activity block)
# Allowed GitHub usernames
# This prevents abuse of your API endpoint by limiting which users' data can be fetched
ALLOWED_GITHUB_USERS=yourgithubusernameGitHub Contributions Block
- Whitelist Protection: Only specified usernames can fetch contribution data, preventing your API from being used as a proxy to scrape any GitHub user's data
- Server-side Caching: 5-hour cache
- Rate Limiting: 20 requests per hour per IP prevents abuse and spam
- Graceful Degradation: Automatically serves cached data if rate limited or API unavailable
- Minimal Memory: ~60KB total memory usage for single-user portfolio setup
Important: To change the admin password, see .env.example for hash generation instructions.
Security by Default:
- Admin panel disabled in production unless explicitly enabled
- All write operations require authentication
- Automatic file cleanup and security monitoring
Automatic Cleanup Upload:
- Safe Detection: Files must be BOTH unused (not referenced anywhere) AND old (30+ days)
- Background Process: Runs weekly for maintenance
- Manual Control: Use
GET/POST /api/admin/cleanupfor manual management
See Block Development Guide for creating custom blocks.