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.
Neobrutalism
Click to view live preview
Preview notes
Preview snapshots
The kind of moments this template should create.
Desktop preview
Hero punch
Screen 02
Project grid
Chunky UI blocks with fast visual rhythm
Screen 03
Sticky contact CTA
Short-copy sections that keep editing approachable
Content guidance
What to put into this layout.
Tip 01
Keep your introduction sharp and one-screen readable.
Tip 02
Use no more than three featured projects to preserve impact.
Tip 03
Treat the contact section like a clear call-to-action, not an afterthought.
Why this works
The reasoning behind the style.
Neobrutalism creates instant personality. It works best when the content is sharp and the developer wants to look energetic, opinionated, and ready to be noticed.
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.
Skills
This layout benefits from a focused skills 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…
Bootcamp grads who need to stand out immediately in a crowded applicant pool
Junior developers applying to growth-stage startups that value energy and personality
Designers who code and want a personality-first presence that screams opinion
Anyone whose best asset right now is enthusiasm, clarity, and drive rather than years of experience
When to skip this
This might not be the right fit if…
Developers targeting enterprise companies or conservative industries where restraint signals professionalism
People whose personal brand is already quiet, precise, and minimal
Senior engineers who want the work to speak without the wrapper shouting
Anyone building a portfolio they expect to use unchanged for 5+ years
Color palette
The exact colors to use.
Primary
#ff7a59
Main actions & headings
Secondary
#29170f
Surface & background tones
Accent
#ffb296
Highlights & emphasis
Background
#faf8f5
Page base color
Text
#29170f
Body copy color
Muted
#8b7355
Labels & metadata
Typography
Font recommendations.
Headings
Archivo Black
Display + hero text
Body
DM Sans
Paragraphs & descriptions
Mono
JetBrains Mono
Code & metadata
Animation details
Motion language.
Hero
slideUp
Entrance effect
Hover
scale
Interactive feedback
Page
none
Transition style
Classification
Template metadata.
Style
bold
Difficulty
beginner
Audience
junior
Use cases
Getting hired, Personal brand
Features
What's included.
Technical notes
Implementation details.
- Next.js App Router
- Tailwind CSS
- Framer Motion
- Responsive blocks
Layout & spacing
How the grid is built.
Single-page scroll with a full-viewport hero that uses oversized heading type (clamp between 4rem and 8rem). Project cards use CSS Grid auto-fill columns with a 280px minimum, creating a natural 1→2→3 column reflow. Chunky border-radius (20px on cards) and a consistent 3px border weight give the layout cohesion without custom illustration assets.
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.
Change the hero background color to your brand color — everything cascades from one --color-hero CSS variable, and the contrast-aware text flips automatically.
Switch the background to pure black for a punchy dark-mode variant in under 5 minutes — the border colors and card surfaces update from the same variable tree.
Nudge the border-width variable from 2px to 3px for a chunkier, more aggressive feel — or down to 1px for a more refined take on the same direction.
Replace the placeholder project titles with your actual work names in the data file immediately — the template's personality multiplies when the content is real rather than lorem ipsum.
SEO
Search & social readiness.
A bold H1 is pre-configured for maximum click-through rate in search snippets. The social preview card uses the hero color as the OG background so shares on LinkedIn and Twitter are immediately recognizable. Schema.org Person markup with jobTitle and url properties is included in the head template.
Accessibility
Built for everyone.
High contrast orange on dark brown clears WCAG AA at 7:1. Focus styles deliberately inherit the heavy border treatment, making keyboard navigation naturally prominent — it looks like a feature rather than an afterthought. All touch targets meet the 44×44px WCAG 2.5.5 minimum across every interactive element.
Performance
Load profile.
Optimized for high-energy interactions without the bulk. Framer Motion variants are shared across components to reduce bundle size. Initial page load is under 1.2s on 4G, with interaction-to-next-paint scores well within the 'Good' threshold.
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.
Bento Grid
modernStructured, product-minded, and project-first.
Best for job seekers with 3 to 5 strong case studies.
View →Human Scribble
creativeSketchy, personal, and full of character.
Best for indie hackers and devs building in public.
View →Version
1.0.0
Files
12
Updated
2026-04-15
Style class
bold
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
- Single-page structure with bold callouts
- Project cards with quick-scan hierarchy
- Editable color and spacing tokens
- Lightweight interaction scripts
Download status
This template has a real ZIP starter kit attached. The primary button downloads an editable Next.js, Tailwind, and Motion project.