Pixel is a bold brutalist landing page template built for user interface and user experience designers who want their portfolio to command attention. It pairs a scroll-jacked name header, a masonry project gallery, and a segmented lead-capture modal into one striking one-page layout. Obsidian black and molten gold make every scroll feel intentional.
by Rocket studio
Loading preview…
Quick summary
Pixel is a one-page portfolio landing page for user interface and user experience designers. It uses a Bold Brutalist visual theme, an Obsidian and Gold color system, and a masonry gallery layout to create an experience that feels more like a curated exhibition than a standard portfolio page. The scroll-jacked header, staggered tile loading, and persistent call-to-action make every visit feel earned.
Who this template is for
This template is built for working designers who need their portfolio to do serious persuasive work. It speaks directly to the visitors who matter most and gives them a reason to stop scrolling.
User interface and user experience designers building a one-page portfolio to attract recruiters, founders, and creative directors
Freelance designers who want a high-impact landing page without a multi-page site structure
Mid-to-senior level designers whose work speaks for itself and needs a frame worthy of it
What problem this template solves
Most designer portfolios look the same. Grid of thumbnails, a bio paragraph, a contact form. They are forgettable by design. Pixel solves the problem of blending in when standing out is the only outcome that matters.
Visitors leave portfolios quickly when nothing surprises them early; the scroll-jacked header locks attention before the gallery even loads
Recruiters who have reviewed hundreds of portfolios need a reason to pause; staggered tile loading and gold hover states create visual momentum that rewards scrolling
Designers struggle to segment interest from inbound leads; the modal captures first name, email, and intent in a single lightweight interaction
What you get with this template
Pixel delivers a complete one-page portfolio layout with every major section, interaction pattern, and content structure already in place. You bring the work; the template provides the stage.
A scroll-jacked hero header where the designer's name renders in enormous ultra-bold grotesque type and project screenshots bleed through the letterforms on scroll
A masonry project gallery with staggered tile loading, gold hover borders, and single-sentence context labels on each tile
Theme
Bold Brutalist
Creative direction
Gallery Walk
Color system
Obsidian & Gold
Style
Masonry/Pinterest
Direction
Content/Resource
Page Sections
Scroll-jacked Name Hero Header
Exhibition-style Masonry Gallery
Gold-only Hover Interaction System
Brutalist Metric Dividers
Timed Floating Call-to-action Button
Segmented Lead-capture Modal
Related questions
Can I use this template without any coding experience?
How does the lead-capture modal work?
When does the floating call-to-action button appear?
Can I add my own project images and case study content?
Is this template suitable for a mid-career designer or only senior-level work?
A persistent floating call-to-action button, a lead-capture modal with a three-option radio field, and a footer booking link for a portfolio walkthrough
Feature list
This template is built around deliberate design decisions, not decorative ones. Each feature below maps directly to something a visitor will see, feel, or respond to.
Scroll-Jacked Name Header
The viewport locks on entry and the designer's name fills the screen in ultra-bold grotesque type at roughly 400 pixels tall. As the visitor scrolls, project screenshots bleed through the letterforms like windows into the work. The lock holds for three full scroll-lengths before releasing into the gallery below.
Masonry Project Gallery
Tiles are arranged in a masonry grid that mimics a physical exhibition walk. Some tiles are tall and narrow like posters; others are wide and cinematic. Early work sits packed tight while recent work breathes with generous whitespace, implying growth without stating it.
Gold Hover Interaction System
Gold never appears at rest in this template. It activates only on hover, on active links, and on the designer's name. Hovering a project tile triggers a gold border and reveals a single sentence of project context, rewarding the visitor for engaging rather than just scanning.
Brutalist Full-Width Dividers
Between project clusters, full-width dividers display a single metric or quote in monospaced type. These text breaks punctuate the gallery like wall labels in a museum, reinforcing credibility with hard numbers and direct attribution.
Persistent Floating Call-to-Action
A "Download My Case Study Kit" button in gold on obsidian is pinned to the bottom-right corner. It only appears after the visitor has scrolled past the third project row, ensuring the ask arrives after the evidence rather than before it.
Segmented Lead-Capture Modal
Clicking the floating button opens a minimal modal with three fields: first name, email, and a single radio selector with the options "Hiring," "Collaborating," or "Just Browsing." This lets the designer segment follow-up communication by intent from the first interaction.
Page sections overview
Section
Purpose
Scroll-Jacked Header
Locks viewport and renders the designer's name in oversized gold type with project screenshots bleeding through letterforms
Masonry Project Gallery
Displays project tiles in a staggered, exhibition-style grid with hover states and single-sentence context labels
Brutalist Metric Dividers
Separates project clusters with full-width monospaced text blocks showing metrics or direct quotes
Floating call to action Button
Persistent bottom-right button that appears after the third project row and opens the lead-capture modal
Lead-Capture Modal
Collects first name, email, and visit intent through a minimal three-option radio selector
Footer Booking Section
Frames a calendar booking link as an invitation for visitors who want the full story behind the work
Design & branding system
The visual identity is built on restraint and contrast. Every color has a specific role, and nothing decorative is added without purpose.
The four-color palette uses deep volcanic black (#0B0B0F) for the background, exposed concrete gray (#3A3A3C) for card surfaces and dividers, molten gold (#D4A843) exclusively for hover states, active links, and the designer's name, and chalk white (#E8E6E1) for body text
Typography uses an ultra-bold grotesque typeface for display headings and monospaced type for divider callouts and metric blocks, reinforcing the raw industrial character of the brutalist theme
Gold is a reward, not decoration; it appears only when the visitor engages with an element, creating a consistent interaction language across the entire page
Mobile & speed optimization
The template is designed to translate its bold visual language across screen sizes without losing its structure or impact.
The masonry grid adapts to narrower viewports so tiles remain readable and properly spaced on smaller screens
The scroll-jacked header behavior and floating call-to-action button are structured to work within a single-column mobile layout without losing their functional purpose
How this template helps you convert
Pixel is structured around a deliberate sequence: show the work first, earn trust through evidence, then make the ask. Every layout decision reinforces that order.
The scroll-jacked header creates an immediate first impression that is difficult to leave quickly, buying time for the gallery to load and engage the visitor
The floating call-to-action button appears only after the visitor has seen at least three rows of project work, so the request for contact details is backed by visible proof
The footer booking link offers a lower-commitment path for visitors who are interested but not yet ready to share their email, capturing a second conversion point without pressure
Other information about this template
Pixel is a fully self-contained one-page portfolio landing page. It is well suited for designers who want a single URL to share with recruiters, post on job applications, or include in a professional bio.
The template ships with placeholder project tiles, sample metric dividers, and a pre-structured modal so you can replace content without rebuilding layout logic
The footer calendly-style booking section is framed as a portfolio walkthrough invitation, which reduces the perceived friction of a direct sales or outreach call
The Bold Brutalist theme makes Pixel a strong fit for designers working in product, brand, or digital experience disciplines where a distinctive visual voice is itself a credential
This template is built as a standalone landing page and does not require a multi-page site structure to function effectively
