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.
Glassmorphism
Click to view live preview
Preview notes
Preview snapshots
The kind of moments this template should create.
Desktop preview
Frosted hero
Screen 02
Work cards
Focused spotlight on hero and selected work
Screen 03
Contact layer
Atmospheric depth without overwhelming the content
Content guidance
What to put into this layout.
Tip 01
Keep copy minimal and let the presentation carry some emotion.
Tip 02
Use one accent color family to avoid visual noise.
Tip 03
Reserve motion for emphasis so the page feels expensive, not busy.
Why this works
The reasoning behind the style.
Glassmorphism feels high-fidelity when the layout stays clean and the visual layers are controlled. It signals polish and technical sophistication without needing dense content.
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.
Selected work
This layout benefits from a focused selected work section with clear, editable content blocks in the starter kit.
Experience
This layout benefits from a focused experience section with clear, editable content blocks in the starter kit.
Testimonials
This layout benefits from a focused testimonials 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…
Frontend developers at AI or SaaS companies who want the portfolio to feel like a product they built
Those with a strong visual product sense who want the container to match the quality of the work
Senior engineers working on polished consumer apps who want the portfolio to reflect that caliber
Developers building personal brands in tech-forward spaces — AI, design tools, dev infrastructure
When to skip this
This might not be the right fit if…
Beginners who need straightforward component customization without backdrop-filter complexity
Developers targeting traditional enterprise or government roles where this aesthetic reads as overdesigned
Anyone whose work is primarily backend, infrastructure, or data where no visual interface exists
Portfolios that need to load fast on older hardware — backdrop-filter is GPU-intensive and degrades on budget devices
Color palette
The exact colors to use.
Primary
#6366f1
Main actions & headings
Secondary
#1f2940
Surface & background tones
Accent
#818cf8
Highlights & emphasis
Background
#0f172a
Page base color
Text
#f1f5f9
Body copy color
Muted
#94a3b8
Labels & metadata
Typography
Font recommendations.
Headings
Plus Jakarta Sans
Display + hero text
Body
Inter
Paragraphs & descriptions
Mono
JetBrains Mono
Code & metadata
Animation details
Motion language.
Hero
blurIn
Entrance effect
Hover
glow
Interactive feedback
Page
fade
Transition style
Classification
Template metadata.
Style
modern
Difficulty
intermediate
Audience
senior
Use cases
Personal brand, Storytelling
Features
What's included.
Technical notes
Implementation details.
- Next.js App Router
- Tailwind CSS
- Backdrop filter
- GPU motion
Layout & spacing
How the grid is built.
Dark base at hsl(222 47% 11%) with layered translucent surfaces using backdrop-filter: blur(20px) and a semi-transparent white border. Sections float visually over the background using a combination of box-shadow, border-opacity, and background: rgba(255,255,255,0.05). The layout uses a centered max-width of 1100px with generous 80px vertical padding between sections to let the depth effects breathe.
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.
Set your brand's primary color as the --accent-hue CSS variable (a single HSL hue number) and every glow effect, gradient, and highlight updates automatically across the entire page.
Adjust --blur-strength from 20px down to 8px for a subtler, less dramatic glass effect — useful if the content is dense and needs to be easier to read.
Disable particle effects entirely by removing the canvas element — the layout works with full visual quality without them, and it significantly reduces CPU usage on mobile.
Switch the gradient direction from purple-to-blue to any two complementary hues by editing the two color stops in the --gradient-from and --gradient-to variables.
SEO
Search & social readiness.
Dark-mode pages require an explicit og:image with a solid colored background for legible social previews — a pre-sized 1200×630 template is included. Meta color-scheme is set to 'dark' so browsers style their chrome accordingly. All decorative gradient and particle elements are aria-hidden so screen readers see only the content layer.
Accessibility
Built for everyone.
Glass surfaces can cause contrast issues — this template enforces a minimum 4.5:1 ratio for all body text and 3:1 for large headings over blurred backgrounds, verified with a dark overlay insurance layer. Focus indicators use a bright indigo ring (3px, 0px offset) that is clearly visible against all dark background variants. All decorative blob and particle elements are aria-hidden.
Performance
Load profile.
backdrop-filter is GPU-accelerated in all modern browsers and does not trigger layout or paint recalculation. Particle effects are canvas-based, throttled to 60fps on desktop and 30fps on mobile via matchMedia detection. Entrance animations use the Web Animations API on transform and opacity only — no layout-triggering properties are animated at any point.
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.
Retrofuturism
creativeCinematic, nostalgic, and high-concept.
Best for standout personal brands with a strong visual voice.
View →Bento Grid
modernStructured, product-minded, and project-first.
Best for job seekers with 3 to 5 strong case studies.
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
- Layered translucent surfaces
- Controlled shadow and blur tokens
- Dark background treatment
- JS-powered micro-interaction hooks
Download status
This template has a real ZIP starter kit attached. The primary button downloads an editable Next.js, Tailwind, and Motion project.