Foliokit
Live preview
See the template before you commit to it.
The decision layer in action — inspect the actual starter experience in-browser before choosing to download.
Bento Grid
Click to view live preview
Preview notes
Preview snapshots
The kind of moments this template should create.
Desktop preview
Overview dashboard
Screen 02
Featured projects
Project-first information density
Screen 03
Skill and links
Clean scanning on both desktop and mobile
Content guidance
What to put into this layout.
Tip 01
Use concise labels so the grid stays elegant.
Tip 02
Give each featured project a clear role or outcome.
Tip 03
Balance metrics with personality so the layout does not feel too sterile.
Why this works
The reasoning behind the style.
Bento layouts help users scan a lot of information quickly. They are strong when a portfolio needs to show multiple projects, achievements, and skills in a compact and polished way.
Inspired by
Recommended sections
How this template is structured.
Hero
This layout benefits from a focused hero section with clear, editable content blocks in the starter kit.
Stats
This layout benefits from a focused stats section with clear, editable content blocks in the starter kit.
Projects
This layout benefits from a focused projects section with clear, editable content blocks in the starter kit.
About
This layout benefits from a focused about section with clear, editable content blocks in the starter kit.
Contact
This layout benefits from a focused contact section with clear, editable content blocks in the starter kit.
Who thrives here
This template is ideal for you if…
Developers with 3–5 solid case studies who want each project to get its own spotlight
Those applying to product-focused companies where structured thinking is as important as output
Internship and junior applicants with strong project depth and quantifiable metrics
Anyone who wants a portfolio that works equally well as a dashboard and a resume replacement
When to skip this
This might not be the right fit if…
Developers with fewer than 2 finished projects — the grid will feel sparse and the layout will expose the gap
Those wanting long-form essay-style project write-ups — the card format rewards brevity
Anyone with a highly linear, narrative career story that flows better as prose than modules
Developers whose work is primarily internal tooling with no visual output to show
Color palette
The exact colors to use.
Primary
#302216
Main actions & headings
Secondary
#f5e7c8
Surface & background tones
Accent
#8b6914
Highlights & emphasis
Background
#faf8f0
Page base color
Text
#302216
Body copy color
Muted
#6b5a4a
Labels & metadata
Typography
Font recommendations.
Headings
Space Grotesk
Display + hero text
Body
Inter
Paragraphs & descriptions
Mono
JetBrains Mono
Code & metadata
Animation details
Motion language.
Hero
fadeUp
Entrance effect
Hover
lift
Interactive feedback
Page
stagger
Transition style
Classification
Template metadata.
Style
modern
Difficulty
beginner
Audience
junior
Use cases
Getting hired, Freelance
Features
What's included.
Technical notes
Implementation details.
- Next.js App Router
- Tailwind CSS
- Framer Motion
- Grid-aware
Layout & spacing
How the grid is built.
CSS Grid with named areas and responsive breakpoints at 640px and 1024px. Cards use a uniform 1.5rem gap system. The hero card always spans the full width on mobile — stat cards stack vertically until 640px where they go 3-across. Project cards use a 1.2fr + 0.8fr asymmetric split for visual interest. No JavaScript required for any layout behavior.
Customization roadmap
Where to start editing.
The four highest-impact edits to make this template feel genuinely yours, in the order we recommend doing them.
Edit the three stat values directly in the data file (products shipped, years building, users reached) — they are typically the first numbers a recruiter reads and should be real.
Reorder bento cards by changing their grid-area names in the CSS — no JSX restructuring or component logic changes required.
Add a fourth stat card by duplicating the existing card component and assigning the next grid-area name — the grid absorbs it automatically.
Remove the About section entirely if your project cards are strong enough to carry the page — the layout works cleanly as a pure project showcase without it.
SEO
Search & social readiness.
Each project card is an article element with its own h3 heading nested under the page's single h1. The hero section uses structured data for the Person entity with name, jobTitle, and url. The page title and meta description slots are clearly labeled in the HTML head with character-count guidance.
Accessibility
Built for everyone.
Card focus states use outline-offset so the rounded corners don't clip the focus indicator. All metric numbers include an aria-label with full context (e.g. '12 products shipped' not just '12'). Color contrast across all card variants — including the warm amber accent on cream — passes WCAG AA. Card order in the DOM matches the intended reading sequence.
Performance
Load profile.
The modular bento system allows for extremely efficient React reconciliation. Counter animations are rAF-based and fully respect prefers-reduced-motion by snapping to the final value instantly. The library footprint is minimal, keeping the total JS bundle lean.
Compare with
If this doesn't feel right, one of these might.
These directions share some of the same goals but take a different approach. Compare them before deciding.
Minimalist
minimalQuiet, sharp, and confidence-through-clarity.
Best for job seekers and experienced developers who want timeless clarity.
View →Glassmorphism
modernPolished, futuristic, and premium when used with restraint.
Best for personal brand portfolios and AI-adjacent builders.
View →Version
1.0.0
Files
12
Updated
2026-04-15
Style class
modern
Starter kit
Built for fast local customization.
Each template ships as a ZIP containing a fully-configured Next.js starter project. Built with Tailwind CSS and Framer Motion, it provides a deep, production-ready foundation that stays editable while following modern React best practices.
This kit includes
- Reusable card grid system
- Responsive project highlight blocks
- Simple content slots for stats and links
- Clear CSS organization for layout edits
Download status
This template has a real ZIP starter kit attached. The primary button downloads an editable Next.js, Tailwind, and Motion project.