Folio - Cinematic Graduate Landing Page Template

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

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

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.

1. 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
2. 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
3. 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

Show more