Bento - Free Tailwind Portfolio Template

Bento is a modern, high-vibrancy portfolio template built with Tailwind CSS. Designed for creative professionals, agencies, and designers, this template showcases work with a bold, energetic aesthetic that combines glassmorphism, kinetic gradients, and smooth animations.

Key Features

  • Glassmorphism Effects: Elegant frosted glass cards with backdrop blur
  • Kinetic Gradients: Animated gradient backgrounds that flow dynamically
  • Custom Color System: Extended Tailwind color palette with vibrant accents
  • Typography: Montserrat for headings and Be Vietnam Pro for body text
  • Gradient Text: Eye-catching gradient text effects for headlines
  • Fully Responsive: Seamlessly adapts to all screen sizes (mobile, tablet, desktop)
  • Mobile Navigation: Collapsible hamburger menu for smaller screens
  • Fluid Grids: CSS Grid and Flexbox layouts that adjust to viewport
  • Masonry Gallery: Responsive column-based image gallery
  • Touch-Friendly: Optimized for touch interactions on mobile devices
  • Image Lightbox: Click any portfolio image to view it in an enlarged modal
  • Filterable Portfolio: Dynamic category filtering (All, Web, Branding)
  • Smooth Animations: Scroll-triggered fade-in animations
  • Parallax Effects: Mouse-driven floating shape movements
  • Hover Interactions: Scale, transform, and color transitions on cards and buttons
  • Hero Section: Bold headline with gradient text and call-to-action buttons
  • Skills/Expertise Grid: 4-column service cards with icons
  • Bento Grid: Mixed layout with portrait, status, featured work, and toolkit
  • Timeline/Milestones: Visual journey timeline with icons
  • Portfolio Gallery: Masonry grid with hover overlays and category labels
  • Contact Section: Gradient CTA section with email and social links
  • Footer: Clean footer with social media links

Use Cases

  • Creative Agencies: Showcase design work and brand identity
  • Freelance Designers: Present portfolio and skills to potential clients
  • Design Studios: Display projects and team expertise
  • Creative Professionals: Personal portfolio website with interactive elements

Framework & Libraries

  • Tailwind CSS: Utility-first CSS framework (CDN)
  • Google Fonts: Montserrat & Be Vietnam Pro
  • Material Symbols: Google’s icon library

Custom Features

  • Custom CSS: Glass cards, animations, responsive adjustments
  • Vanilla JavaScript: Lightbox, filtering, mobile menu, scroll animations
  • No Dependencies: Pure HTML/CSS/JS – no jQuery or other libraries

Browser Support

  • Modern browsers (Chrome, Firefox, Safari, Edge)
  • Full responsive support
  • Touch-enabled devices

Customization Guide

Colors

All colors are defined in the Tailwind config. Edit the colors object to match your brand:

javascript

colors: {
  primary: "#630ed4",    // Main brand color
  secondary: "#ae2f34",  // Secondary accent
  // ... customize as needed
}

Typography

Font families and sizes are configured in the theme:

javascript

fontFamily: {
  "headline-lg": ["Montserrat"],
  "body-md": ["Be Vietnam Pro"]
}

Content

Replace placeholder images and text with your own:

  • Update image URLs in src attributes
  • Modify text content in headings, paragraphs, and buttons
  • Update social media links in the footer

Portfolio Items

The masonry gallery uses data-category attributes for filtering:

html

<div class="masonry-item" data-category="branding">
  <!-- portfolio item -->
</div>

Installation

  1. Download the HTML file
  2. Replace placeholder images with your own
  3. Customize colors and content as needed
  4. Deploy to any web hosting service

Credits

  • Design: Original design by DESIGNER.STUDIO
  • Framework: Tailwind CSS
  • Fonts: Google Fonts
  • Icons: Material Symbols

License

Free to use for personal and commercial projects. Attribution required.

Get started today and showcase your creative work with this modern, responsive, and feature-rich portfolio template!

Bento - Free Tailwind Portfolio Template
Download Now View Demo