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.
Organic Layout
Click to view live preview
Preview notes
Preview snapshots
The kind of moments this template should create.
Desktop preview
Floating hero
Screen 02
Selected work collage
Less rigid structure without sacrificing readability
Screen 03
Process notes
A visual tone that feels custom rather than templated
Content guidance
What to put into this layout.
Tip 01
Use varied content lengths to keep the composition lively.
Tip 02
Lean on imagery, process notes, and small personal cues.
Tip 03
Keep spacing intentional so the freeform layout still feels controlled.
Why this works
The reasoning behind the style.
Organic layouts feel personal because the page rhythm is less mechanical. They help portfolios feel custom-made, which is ideal for creators selling originality as much as skill.
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.
Process
This layout benefits from a focused process 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…
Multidisciplinary creatives who work across design, code, and content — and whose portfolio needs to reflect that range
Designers who code and want the portfolio itself to be a creative statement rather than a functional container
Developers with strong visual taste and eclectic project portfolios that don't fit neatly into cards
Artists-turned-programmers who want their technical work to feel as expressive as their artistic work
When to skip this
This might not be the right fit if…
Developers who need clear, strict information hierarchy — the freeform rhythm works against fast scanning
Anyone targeting highly traditional employers (finance, law, enterprise) where unconventional layouts raise eyebrows
Portfolios that are primarily text-based with no visual work — the layout needs imagery to come alive
Developers who want to customize quickly without CSS positioning knowledge
Color palette
The exact colors to use.
Primary
#22311e
Main actions & headings
Secondary
#dcebd7
Surface & background tones
Accent
#4a6741
Highlights & emphasis
Background
#f6f9f3
Page base color
Text
#22311e
Body copy color
Muted
#5c6b55
Labels & metadata
Typography
Font recommendations.
Headings
Fraunces
Display + hero text
Body
Satoshi
Paragraphs & descriptions
Mono
JetBrains Mono
Code & metadata
Animation details
Motion language.
Hero
drift
Entrance effect
Hover
gentle
Interactive feedback
Page
flow
Transition style
Classification
Template metadata.
Style
creative
Difficulty
intermediate
Audience
freelance
Use cases
Personal brand, Storytelling
Features
What's included.
Technical notes
Implementation details.
- Next.js App Router
- Tailwind CSS
- Framer Motion
- Handcrafted feel
Layout & spacing
How the grid is built.
Intentionally breaks the 12-column grid convention. Uses CSS Grid with named areas and a deliberate offset rhythm — alternating left-heavy and right-heavy panels create a 'breathing' page that never feels like it was assembled by a template engine. Images use CSS shape-outside for text wrap effects. No two sections share the same column structure, which is the defining visual signature of the layout.
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.
The asymmetry comes from a single CSS variable — --offset-amount — set to 3rem by default. Change it to 0 for a more structured layout or increase it for stronger visual tension.
Swap the earthy green palette to dusty blue or terracotta by changing just 4 CSS color variables: --color-bg, --color-text, --color-accent, and --color-surface.
Add a Process section with 2–3 images and short captions to show creative thinking — this section type performs best in this layout because the asymmetric placement makes each image feel intentional.
Use real project photography or high-quality mockups — this template exposes the absence of imagery more than any other direction and rewards investment in visual assets.
SEO
Search & social readiness.
Semantic HTML5 landmark elements ensure full crawlability despite the non-standard visual layout. Image alt text is templated with descriptive placeholder copy that guides the user toward specific, useful alt text rather than file names. OG image output is pre-sized at the canonical 1200×630 with a safe zone guide in the HTML comments.
Accessibility
Built for everyone.
The asymmetric layout maintains correct logical DOM order separate from visual presentation using CSS grid placement — source order matches reading order. focus order follows the DOM sequence, not the visual one. All decorative shapes, floating blobs, and texture overlays are aria-hidden and pointer-events: none so they never interfere with keyboard navigation.
Performance
Load profile.
All motion effects use CSS transform only — no top/left/width animation that triggers layout recalculation. Background textures are inline SVG with no external HTTP requests. CSS blend modes are used sparingly on hero elements and fall back gracefully to standard display on browsers with lower graphics capability.
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.
Human Scribble
creativeSketchy, personal, and full of character.
Best for indie hackers and devs building in public.
View →Editorial
editorialClear, thoughtful, and credibility-driven.
Best for developers applying to product teams and design-heavy roles.
View →Version
1.0.0
Files
12
Updated
2026-04-15
Style class
creative
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
- Next.js project foundation
- Tailwind CSS styling system
- Framer Motion interaction core
- Production-ready visual polish
- Fully configured ZIP project folder
Download status
This template has a real ZIP starter kit attached. The primary button downloads an editable Next.js, Tailwind, and Motion project.