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.
Retrofuturism
Click to view live preview
Preview notes
Preview snapshots
The kind of moments this template should create.
Desktop preview
Cinematic hero
Screen 02
Experiment gallery
High-contrast presentation for standout projects
Screen 03
Immersive footer
A portfolio that feels like a directed experience
Content guidance
What to put into this layout.
Tip 01
Use this style only if your work can support the drama.
Tip 02
Keep the number of featured projects tight and intentional.
Tip 03
Use copy that sounds confident and specific, not vague and cinematic.
Why this works
The reasoning behind the style.
Retrofuturism creates a strong world around the work. It is most effective when the developer already has a confident visual identity and wants the portfolio to feel cinematic.
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.
Featured work
This layout benefits from a focused featured work section with clear, editable content blocks in the starter kit.
Experiments
This layout benefits from a focused experiments 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…
Senior frontend engineers with a strong aesthetic point of view who want the portfolio itself to be a statement of craft
Creative technologists working at the intersection of art, music, and code
Developers who build experimental interfaces and want the portfolio to feel like one
Anyone building a personal brand in the creative technology space — generative art, interactive media, spatial computing
When to skip this
This might not be the right fit if…
Entry-level job seekers — the drama requires enough work to fill the spotlight, and sparse projects will be noticed immediately
Developers targeting conservative industries where this aesthetic reads as gimmicky rather than skilled
Anyone whose primary goal is beginner-accessible editing — customizing shader effects and particle systems requires real CSS and JS confidence
Portfolios where fast load time is critical — the atmospheric effects add meaningful weight that must be justified by the impression they create
Color palette
The exact colors to use.
Primary
#a855f7
Main actions & headings
Secondary
#231f40
Surface & background tones
Accent
#d8b4fe
Highlights & emphasis
Background
#0f0a1a
Page base color
Text
#e9d5ff
Body copy color
Muted
#a78bfa
Labels & metadata
Typography
Font recommendations.
Headings
Orbitron
Display + hero text
Body
Space Mono
Paragraphs & descriptions
Mono
Fira Code
Code & metadata
Animation details
Motion language.
Hero
glitch
Entrance effect
Hover
scanline
Interactive feedback
Page
cinematic
Transition style
Classification
Template metadata.
Style
creative
Difficulty
advanced
Audience
agency
Use cases
Personal brand, Storytelling
Features
What's included.
Technical notes
Implementation details.
- Next.js App Router
- Tailwind CSS
- Glitch shaders
- GPU optimized
Layout & spacing
How the grid is built.
Dark canvas at hsl(248 40% 8%) with layered grid lines created as CSS background-image using repeating-linear-gradient at 1px thickness on an 8px cell system. Hero uses a centered layout with a radial gradient glow emanating from the heading using a ::before pseudo-element. Project cards use a deliberate scanline overlay applied as a CSS ::after pseudo-element — this creates the CRT texture effect without any image assets. Border-radius is kept at 4px maximum, breaking the modern convention as a visual signature.
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.
Swap the purple glow to any hue by changing a single --glow-hue CSS variable (a number from 0–360). The radial gradient, border accents, and particle color all derive from this single value.
Reduce the particle count from 80 to 20 for a more subtle atmospheric effect without fully losing the depth — useful if the particles compete with project content for attention.
Remove the scanline overlay entirely by deleting the ::after rule on .project-card — the cards read more cleanly without it and the overall aesthetic holds.
This template has the highest ROI from real visual project assets — invest in actual interface screenshots, interaction recordings, or generative art exports rather than placeholder images.
SEO
Search & social readiness.
Dark-mode canonical pages need solid OG images — a pre-configured Figma template for generating 1200×630 social cards in Orbitron on dark background is referenced in the HTML comments. The page title uses a separator character (·) that renders correctly in browser tab ellipsis and Google search snippets. All schema.org markup is included for the Person entity with workExample links.
Accessibility
Built for everyone.
The dramatic visuals are built on a contrast foundation of pure white text (hsl(0 0% 98%)) on the darkest possible backgrounds, delivering a 15:1 contrast ratio that far exceeds WCAG AAA. The scanline effect and particle systems are purely decorative CSS and canvas elements — both are aria-hidden and pointer-events: none so they are completely invisible to assistive technologies.
Performance
Load profile.
Canvas particle systems are throttled to 30fps on mobile screens detected via matchMedia. Glitch animations are pure CSS keyframe animations on the transform and clip-path properties — no JavaScript runtime required for effects. WebGL shader variants are opt-in modules that are not loaded by default. The core page experience without effects loads in under 2 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.
Glassmorphism
modernPolished, futuristic, and premium when used with restraint.
Best for personal brand portfolios and AI-adjacent builders.
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
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
- Atmospheric color and lighting system
- Layered hero composition
- Strong project spotlight modules
- Interaction hooks for dramatic transitions
Download status
This template has a real ZIP starter kit attached. The primary button downloads an editable Next.js, Tailwind, and Motion project.