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.
Editorial
Click to view live preview
Preview notes
Preview snapshots
The kind of moments this template should create.
Desktop preview
Intro statement
Screen 02
Case-study feature
Space for thoughtful project context
Screen 03
Essay-style about
Credibility through clarity rather than decoration
Content guidance
What to put into this layout.
Tip 01
Write like a person, not like a resume.
Tip 02
Use your best project story as the emotional anchor of the page.
Tip 03
Avoid overfilling the layout with badges that interrupt the reading flow.
Why this works
The reasoning behind the style.
Editorial layouts turn clarity into credibility. They are strongest when a developer wants their thinking, process, and point of view to be as visible as the visual style.
Inspired by
Recommended sections
How this template is structured.
Intro
This layout benefits from a focused intro section with clear, editable content blocks in the starter kit.
Featured writing
This layout benefits from a focused featured writing 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 applying to product design or PM-adjacent roles where written communication is evaluated
Career changers who want their thinking, reasoning, and process visible alongside their projects
Senior engineers who write publicly — on Substack, a blog, or in open-source documentation
Those with strong written case studies who want the portfolio to function as a genuine portfolio of thought
When to skip this
This might not be the right fit if…
Anyone whose primary strength is visual work with little supporting writing — the layout exposes the absence of text
Portfolios that need to make an instant punch — readers have to invest time to appreciate this direction
Developers in fast-paced outbound job searches who need immediate visual differentiation over depth
Those who find writing a chore — this template rewards regular updates and fresh editorial voice
Color palette
The exact colors to use.
Primary
#2f2a24
Main actions & headings
Secondary
#f0ede6
Surface & background tones
Accent
#57534e
Highlights & emphasis
Background
#fafaf9
Page base color
Text
#2f2a24
Body copy color
Muted
#78716c
Labels & metadata
Typography
Font recommendations.
Headings
Newsreader
Display + hero text
Body
Source Serif 4
Paragraphs & descriptions
Mono
IBM Plex Mono
Code & metadata
Animation details
Motion language.
Hero
none
Entrance effect
Hover
underline
Interactive feedback
Page
none
Transition style
Classification
Template metadata.
Style
editorial
Difficulty
intermediate
Audience
senior
Use cases
Getting hired, Storytelling
Features
What's included.
Technical notes
Implementation details.
- Next.js App Router
- Tailwind CSS
- Serif typography
- Prose optimized
Layout & spacing
How the grid is built.
Inspired by broadsheet newspaper design — a single typographic column with 66ch max-width for body text, generous leading at line-height 1.8, and optical margin alignment on headings using slightly negative left margin. Projects are treated as long-form essays: each has a chapter-like intro paragraph before the content detail, and the project title is set at display scale (3rem+) to emphasize its editorial weight.
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.
Your best project headline is the single most important line on the page — invest 80% of your editing time making it specific, confident, and outcome-focused rather than generic.
Add a short 'Currently' section below the hero (one or two lines on what you're working on right now) for instant personality without disrupting the editorial rhythm.
Change the cream background to white for a crisper newsroom feel, or to off-black (hsl(30 10% 12%)) for an editorial dark mode that still feels considered rather than gimmicky.
Use pull quotes styled with a custom blockquote treatment to break up long project descriptions and lift the best sentence in each case study to display prominence.
SEO
Search & social readiness.
Article elements use proper schema.org Article markup for blog-style content. An estimated reading time meta tag is pre-wired to the article length. Canonical URLs are set to prevent duplicate content if you publish the same essays on your portfolio and also on Medium or Substack.
Accessibility
Built for everyone.
Serif body text at 18px passes WCAG AA with ample contrast on the warm off-white background. Paragraph spacing (1.5em between paragraphs) aids readability for users with dyslexia or attention difficulties. The layout reads correctly in linear DOM order with no CSS-reordering tricks. A skip-to-content link is included in the head of the template.
Performance
Load profile.
The editorial rhythm is preserved with static generation. Zero runtime JavaScript required for the reading experience unless you add interactive elements. Optimized typography loading ensures zero Layout Shift (CLS) when fonts finish downloading.
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 →Organic Layout
creativeFreeform, human, and less template-looking.
Best for multidisciplinary creatives and storytellers.
View →Version
1.0.0
Files
12
Updated
2026-04-15
Style class
editorial
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
- Typography-first rhythm system
- Long-form content-friendly layout
- Article-style project sections
- Clean spacing and hierarchy defaults
Download status
This template has a real ZIP starter kit attached. The primary button downloads an editable Next.js, Tailwind, and Motion project.