Courtside — Basketball-Themed Framer Portfolio
Shreyansh Shrivastava
Courtside — Basketball-Themed Framer Portfolio System
A premium Framer portfolio template built around one conviction: your portfolio should tell a story, not just display work.
Role: Framer Designer & Developer
Type: Framer Marketplace Template
Tools: Figma, Framer, TypeScript
Live Preview: courtsideportfolio.framer.website
01 — The Idea
Most portfolio templates play it safe.
Most Framer portfolio templates are interchangeable. Clean grid, hero section, project cards, a contact form. They're professional, and they're forgettable. Courtside started from a different question: what if a portfolio had a distinct world, a consistent voice, and a narrative structure that made a visitor feel something rather than just scroll through it?
The answer was a complete thematic system built around basketball — not as a visual gimmick, but as a structural language that runs through every section, every label, every micro-copy moment on the page.
02 — The Concept
A theme that earns its keep.
The basketball metaphor isn't decoration — it's architecture. Every section of Courtside speaks the same language: the career timeline becomes The seasons so far. The work section opens with Each one a different game. Same approach: read the play, find the gap, finish clean. The process section is The playbook. Case studies open with a Scouting Report and close with a Locker Room Reflection. The contact CTA becomes Ready for the next play?
The result is a portfolio that has a point of view. Visitors aren't browsing a list of projects — they're stepping into a world.
03 — Who It's For
Designers who want to be remembered.
Courtside is built for product designers and Framer developers who are tired of portfolios that look like everyone else's. It targets creatives who understand that how they present their work says as much about them as the work itself — and who want a template with the personality to back that up.
Not for: designers who want a minimal, neutral canvas. Courtside has a strong identity by design.
04 — The Design System
Dark, cinematic, and fully committed.
The visual language is dark-mode first with a warm neutral palette — not cold grey but deep, organic tones that feel premium without being austere. Typography pairs a display serif for editorial presence with a clean sans-serif for UI and body copy. Section numbers are styled like game stats. Skills are presented as training percentages. Every typographic decision reinforces the athletic, craft-driven identity.
The design system is consistent across the homepage, both case study inner page variants, the 404 page, and all responsive breakpoints — so the world holds together wherever a visitor lands.
05 — Page Structure & Navigation
One world, multiple rooms.
Courtside ships as a complete portfolio system across six core sections: About, Experience (The seasons so far), Work, Skills (The training court), Process (The playbook), and Contact. Navigation is anchor-linked and smooth-scrolling, keeping the experience fluid on a single page while letting visitors jump directly to what matters.
The experience section uses a scroll-driven timeline layout — each role is a season, with dates, company, and a brief description that reads like a match report rather than a CV entry.
06 — Two Case Study Inner Page Variants
Two formats. One system. Built for different kinds of work.
Courtside ships with two fully distinct case study inner page variants — each with its own layout, pacing, and structure, but both running the same basketball copy system throughout.
Variant A — The Northbeam template is built for deep, process-led case studies. It follows a research-heavy arc across 17 sections: Scouting Report (context), Understanding the Court (research), Reading the Room (insights), Building the Franchise (strategy), Team Roster (personas), Season Journey (user flow), Championship Game (final solution), Halftime Adjustments (before/after), Season Results (outcomes), and Locker Room Reflection (learnings). Sections are spaced for depth, with room for research data, design decisions, and extended reflection. Best for product design and UX-heavy work.
Variant B — The Tempo template is built for visual, outcome-led case studies. It follows a faster, punchier arc across 11 sections: Tip-Off (challenge), Reading the Defense (research + key quote), Court Vision (problem breakdown), Game Plan (strategy), Play Development (timeline), Executing the Play (solution screens), Halftime Adjustments (before/after comparison grid), Final Score (metrics), and Post-Game Analysis (learnings). Designed to lead with impact and numbers. Best for product redesigns, app work, and results-driven storytelling.
Both variants are CMS-connected, so buyers can publish new case studies without touching the design or code.
Variant A: Case Study
Variant B: Redesign Case Study
07 — The 404 Page
Even the error page has game.
The 404 page features a custom basketball animation and copy that stays in character: a missed shot, a redirect back to the main floor. It's a small detail that signals to anyone browsing that this template was built with intention at every level — not just the hero section.
08 — Responsive & Interactions
Built to perform across every device.
Courtside is fully responsive across desktop, tablet, and mobile — with layouts, typography scales, and spacing adjusted at each breakpoint rather than simply reflowed. Interactions include scroll-driven reveals, hover states on project cards and navigation links, smooth anchor transitions, and subtle motion throughout.
The interaction philosophy matches the template's identity: athletic, precise, nothing wasted.
09 — What Ships Inside
Everything a designer needs, nothing they don't.
Courtside ships as a complete, ready-to-customise Framer template:
Homepage with 6 fully structured sections
2 case study inner page variants — Northbeam (process-led, 17 sections) and Tempo (outcome-led, 11 sections)
Custom 404 page with basketball animation
CMS integration for projects and case studies
Full responsive behaviour across all breakpoints
Reusable component structure throughout
Consistent basketball copy system across all pages and sections
Dark-mode design system with defined colour, type, and spacing tokens
10 — The Outcome
A portfolio that plays its own game.
Courtside is available on the Framer Marketplace — built for designers who want a portfolio that stands apart. One that has a world, a voice, and a narrative structure that makes the work feel inevitable rather than just competent.
"Most portfolio templates focus on aesthetics. Courtside was designed to focus on memory."
Like this project
Posted Sep 22, 2026
A premium Framer portfolio template built around one conviction: your portfolio should tell a story, not just display work.
Likes
0
Views
1
Timeline
Jul 12, 2026 - Aug 2, 2026
