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.
Human Scribble
Click to view live preview
Preview notes
Preview snapshots
The kind of moments this template should create.
Desktop preview
Sketch intro
Screen 02
Annotated projects
Annotations that create momentum and charm
Screen 03
Now page snippets
A clear structure underneath the playful layer
Content guidance
What to put into this layout.
Tip 01
Let a little roughness stay visible so it feels human.
Tip 02
Show current interests and experiments, not only polished work.
Tip 03
Keep the scribble accents consistent so they read as style, not clutter.
Why this works
The reasoning behind the style.
Human Scribble reduces polish anxiety and increases warmth. It works when the goal is to feel approachable, curious, and unmistakably personal rather than corporate.
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.
Projects
This layout benefits from a focused projects section with clear, editable content blocks in the starter kit.
Now page
This layout benefits from a focused now page section with clear, editable content blocks in the starter kit.
Notes
This layout benefits from a focused notes 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…
Indie hackers and solo builders who ship products publicly and want the portfolio to feel like an extension of that energy
Developers who are active on Twitter/X or Threads and want a portfolio that matches their public personality
Makers with a strong personal voice who want visitors to feel like they know you before they email you
Founders who code — the warmth and approachability is particularly effective for community-driven builders
When to skip this
This might not be the right fit if…
Developers targeting Fortune 500 companies where the informal aesthetic may be read as unprofessional
Anyone whose personal brand is already polished and precise — this direction is hard to reconcile with a minimal identity
Those who want the technical skills and project quality to be the first impression rather than personality
Developers who don't write publicly or have a Now page — the template needs regular content updates to feel alive
Color palette
The exact colors to use.
Primary
#332317
Main actions & headings
Secondary
#f8dcae
Surface & background tones
Accent
#7a5a36
Highlights & emphasis
Background
#fdf8eb
Page base color
Text
#332317
Body copy color
Muted
#8b7355
Labels & metadata
Typography
Font recommendations.
Headings
Caveat
Display + hero text
Body
Nunito
Paragraphs & descriptions
Mono
JetBrains Mono
Code & metadata
Animation details
Motion language.
Hero
sketch
Entrance effect
Hover
bounce
Interactive feedback
Page
none
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
- SVG markers
Layout & spacing
How the grid is built.
Structured informally — content blocks carry deliberate slight rotations of ±1–2 degrees using CSS transform: rotate() for a handmade feel without chaos. Annotations use absolutely positioned spans set in the Caveat typeface. The overall layout is single-column at all breakpoints with unusually generous negative space (120px+ vertical gaps) to let the scribble accent elements breathe and not compete with the content.
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.
Write your hero section in first person and past tense — 'I built X to solve Y' not 'A platform for Z'. This is the most impactful single edit you can make and takes 5 minutes.
Add a 'Currently building' line directly under your name on the first screen — this single hook is often what makes a visitor stay and scroll rather than bounce.
Change the warm amber palette to any color you like by updating 3 CSS variables: --color-paper, --color-ink, and --color-accent. The scribble SVG paths inherit from ink.
Your Now page is the living heart of this template — update it at least monthly to show you're active. Stale Now pages signal abandonment more than a missing portfolio section.
SEO
Search & social readiness.
Personal brand pages benefit most from explicit Person schema with sameAs links to all public social profiles. The OG title should be your full name — not a tagline, not a role — because name recognition is the most valuable first impression for this template type. Update the meta description alongside your Now page content monthly so search snippets stay fresh.
Accessibility
Built for everyone.
All text rotation is kept below 2 degrees to avoid readability issues for users with visual processing difficulties. Users with prefers-reduced-motion enabled get an immediate fallback to zero rotation — verified in the CSS with a media query that removes all transform effects globally. High contrast mode has been tested and the layout remains fully functional with the rotations removed.
Performance
Load profile.
Inline SVG markers and scribbles mean zero extra HTTP requests for aesthetic assets. Motion effects are handled by Framer Motion's hardware-accelerated engine. The full page including handwriting fonts loads in under 1.5 seconds on 4G.
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.
Organic Layout
creativeFreeform, human, and less template-looking.
Best for multidisciplinary creatives and storytellers.
View →Neobrutalism
boldLoud, confident, and impossible to ignore.
Best for junior developers who want to look bold and memorable.
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
- Hand-drawn motif treatment
- Loose layout accents without chaos
- Playful annotation styles
- Simple scripting for hover and note reveals
Download status
This template has a real ZIP starter kit attached. The primary button downloads an editable Next.js, Tailwind, and Motion project.