Folio is a cinematic bento grid landing page built for recent graphic design graduates. It uses a scroll-jacked hero, a choreographed tile activation sequence, and a warm Atelier Studio palette to turn your portfolio into a self-presenting experience. Every project tile opens its own doorway, so your work does the talking before a recruiter even asks.
by Rocket studio
Loading preview…
Quick summary
Folio is a single-page portfolio landing page for recent design graduates. It pairs a scroll-jacked hero entrance with a bento grid that activates project tiles one by one as the visitor scrolls. The result feels less like a portfolio site and more like walking into a working studio at the right moment.
Who this template is for
This template is built for designers who are ready to be hired. It suits people who have real project work to show and want a presentation that matches the ambition behind it.
Recent graphic design graduates entering the job market for the first time
Junior designers looking to replace a generic PDF portfolio with a living, scrollable experience
Creative students whose work spans branding, editorial, and motion and who need one page to hold all of it
What problem this template solves
Most graduate portfolios look the same. A recruiter scanning fifty links before lunch needs a reason to stop. Flat grid layouts with thumbnail images do not create that reason.
The scroll-jacked header grabs attention in the first two seconds and holds it through the reveal
The cinematic tile sequence builds momentum so the visitor stays through the final and strongest project
The built-in contact flow removes friction at the moment of interest, replacing form clutter with a single open question
What you get with this template
You get a fully designed, single-page portfolio landing page with a coherent visual identity and a precisely choreographed scroll experience. Every section has a clear job to do.
A scroll-jacked hero where one bento tile expands to a full-bleed project image as the visitor's scroll locks
A bento grid body where each project tile activates in sequence with color blooms, page flips, or silent auto-play
A terminal contact section with name, studio, and one open-ended field, no résumé upload required
Feature list
Theme
Atelier Studio
Creative direction
Cinematic Sequence
Color system
Cloud Canvas
Style
Bento Grid
Direction
Click-Through
Page Sections
Scroll-jacked Hero Entrance
Choreographed Tile Activation
Climactic Final Project Row
Per-tile Click-through Design
Minimal Contact Section
Cloud Canvas Visual Identity
Related questions
Can I use this template without motion design work to show?
How many projects does the bento grid support?
Does the contact page include backend form handling?
Can I replace the terracotta accent color with my own?
Is this template only for recent graduates?
This landing page is built around a small set of carefully designed features. Each one serves the central goal: making your work impossible to ignore.
Scroll-Jacked Hero Entrance
The viewport locks when the visitor begins to scroll. A single project thumbnail from the center of the bento grid expands to fill the entire screen. Your name and positioning statement appear letter by letter as the image settles. Then the scroll releases and the rest of the page begins.
Choreographed Bento Grid Sequence
Each tile in the grid starts dormant and muted. As the visitor scrolls, tiles activate one by one. A branding project blooms its color palette. An editorial spread flips its pages. A motion piece plays silently. The pace starts slow, then accelerates toward the final row.
Climactic Final Project Row
The last row of the grid holds your strongest piece. It sits wider than every tile above it, alone in its row, demanding a full stop. The pacing of the sequence is built to arrive here with momentum already gathered.
Per-Tile Click-Through System
Every activated bento tile becomes a doorway. On hover, a frosted glass overlay appears inside the tile with the text "See the Full Project" in terracotta. The visitor clicks the tile itself, not a separate button, to enter the project detail.
Minimal Contact Section
After the final project row, a terminal call to action reads "Let's Make Something." It leads to a simple contact page with three fields: name, studio name, and one open-ended question asking what the visitor is working on. No résumé upload, no cover letter field.
Atelier Studio Visual Identity
The entire page uses a four-color Cloud Canvas palette: warm paper white, graphite pencil, soft cloud gray, and a single terracotta accent reserved for hover states and the call to action. Typography is hand-set serif for the name and positioning statement, keeping the page matte, tactile, and quiet so the work reads loud.
Page sections overview
Section
Purpose
Scroll-Jacked Hero
Locks scroll, expands tile to full-bleed, reveals name and positioning statement
Bento Grid Body
Displays all projects as dormant tiles that activate in choreographed scroll sequence
Branding Project Tile
Blooms full color palette across the cell on activation
Editorial Spread Tile
Flips through pages of the spread as the tile activates
Motion Project Tile
Auto-plays the piece silently when the tile activates
Final Project Row
Wider solo tile holding the strongest work, positioned as the visual climax
Terminal call to action
"Let's Make Something" button leading to the contact page
Contact Page
Three-field form: name, studio, and one open-ended question
Design & branding system
The palette is called Cloud Canvas. It was chosen to feel like a fresh notebook opened on a drafting table: matte, deliberate, and quiet enough to let the work lead.
Warm paper white (#F5F0EB) forms the page background, graphite pencil (#3A3A3A) handles all body text, and soft cloud gray (#D6D1CB) defines tile borders and inactive states
Kiln-fired terracotta (#C4654A) appears only on hover states and the call-to-action button, making every interactive moment feel intentional
The name and positioning statement use a hand-set serif typeface, while the rest of the page stays typographically restrained to keep visual hierarchy clear
Mobile & speed optimization
The bento grid layout is designed to reflow cleanly on smaller screens. The scroll-jacked hero and tile activation sequence are built to work within the constraints of mobile viewports.
On mobile, the grid collapses to a single-column layout so each project tile reads at full width without cropping
The scroll-lock hero sequence is preserved on touch devices so the entrance moment lands with the same impact as on desktop
Tiles that auto-play motion content do so silently, which avoids autoplay restrictions on mobile browsers and keeps the experience consistent
How this template helps you convert
This landing page is designed to turn a passive scroll into an active conversation. The structure moves the visitor from curiosity to contact without interruption.
The scroll-jacked hero creates an immediate impression that separates this portfolio from flat grid alternatives and keeps the visitor on the page long enough to reach the work
The cinematic tile sequence rewards continued scrolling by revealing more with each trigger, building the kind of interest that makes a recruiter want to reach out rather than move on
The frictionless contact section removes every barrier at the moment of peak interest, so a creative director or studio founder can go from "I want to talk to this person" to a sent message in under a minute
Other information about this template
Folio is part of a template collection built around intersection themes that pair a specific visual style with a defined audience context. This template sits at the intersection of the Atelier Studio theme, the Cinematic Sequence creative direction, the Scroll-Jacked Experience header concept, and the Click-Through landing page direction, all matched to the Recent Graduate Portfolio niche inside the Personal and Resume category.
The template style is Bento Grid, meaning the layout uses a mosaic of rectangular cells rather than a traditional row-by-row scroll
The color system is named Cloud Canvas and is designed as a cohesive set: the four values work together and are not intended to be swapped individually without reviewing contrast across the full page
This template is designed as a landing page, meaning it is a single-page experience with one contact sub-page rather than a multi-page site structure
