Shreyansh Shrivastava
Product UI/UX Designer
New to Contra
Shreyansh is building their profile!
Courtside — A Storytelling Portfolio System
Overview
Most portfolio templates focus on aesthetics.
Courtside was designed to focus on memory.
Courtside is a premium portfolio system built in Framer that uses basketball-inspired narrative elements to guide visitors through experience, projects, process, and case studies in a more engaging and memorable way.
Instead of treating basketball as a visual theme, I used it as a storytelling device throughout the experience. Sections like The Seasons So Far, The Playbook, and Shot Missed create a consistent narrative that helps visitors understand not only the work itself, but the journey behind it.
The result is a portfolio system designed to be memorable, immersive, and highly customizable while maintaining a premium editorial aesthetic.
The Challenge
Most portfolio templates look polished but often feel interchangeable.
The challenge was creating a portfolio experience that remained professional while introducing a strong narrative concept without becoming overly thematic or gimmicky.
The goal was not to create a basketball website.
The goal was to create a portfolio that visitors would remember.
The Solution
I designed a storytelling-first portfolio system that combines editorial layouts, immersive interactions, and narrative-driven structure.
Key sections include:
• Hero experience with cinematic visuals and interactive basketball elements
• The Seasons So Far — a career timeline inspired by a player's journey
• Featured project showcase designed for product and UX work
• The Playbook — a process section built around strategy and execution
• Premium testimonial and contact experiences
• 0→1 Product Design Case Study framework
• Product Redesign Case Study framework
• Branded 404 experience titled "Shot Missed"
Every section contributes to a single narrative system rather than functioning as isolated website blocks.
Design Approach
The visual language was built around four principles:
• Storytelling over decoration
• Editorial layouts over conventional portfolio structures
• High contrast visual hierarchy
• Consistent narrative from homepage to case study
The basketball theme acts as a storytelling framework throughout the experience while preserving a premium and professional presentation suitable for designers and creative professionals.
My Role
• Product Strategy
• UX Design
• UI Design
• Visual Design
• Design Systems
• Framer Development
• Interaction Design
• Motion & Animation
• Template Packaging
• Marketplace Positioning
Deliverables
• Homepage
• The Seasons So Far Experience Timeline
• The Playbook Process Framework
• Featured Projects Showcase
• 0→1 Product Design Case Study
• Product Redesign Case Study
• Custom 404 Page
• Responsive Framer Implementation
Outcome
Courtside was successfully launched as a commercial Framer product positioned around storytelling rather than conventional portfolio structures.
The project demonstrates product thinking, narrative design, interaction design, visual systems, and Framer development within a single commercial product.
More importantly, it explores a simple idea:
Most portfolios show work.
Courtside tells the story behind it.
0
20
A premium dark-mode Framer portfolio template featuring a complete UX case study system, redesign case study layouts, responsive pages, reusable components, and modern interactions. Built specifically for UI/UX designers, product designers, freelancers, and design students.
What's Included
✓ Portfolio Homepage ✓ UX Case Study Template ✓ Redesign Case Study Template
✓ Responsive Desktop, Tablet & Mobile Layouts ✓ Reusable Components ✓ Custom 404 Page
✓ Organized Design System ✓ Smooth Animations & Interactions ✓ Easy Framer Customization
Perfect For
• UI/UX Designers
• Product Designers
• Freelance Designers
• Design Students
• Creative Professionals
• Framer Creators
Why First Impression?
Most portfolio templates help you showcase your projects.
First Impression helps you showcase your thinking.
Designed specifically for modern UI/UX portfolios, it includes dedicated case study templates that allow you to present research, design decisions, outcomes, redesigns, and project impact in a structured and professional way.
Whether you're applying for jobs, attracting freelance clients, or building your personal brand, First Impression gives you everything you need to create a memorable online presence.
Key Features
• Premium dark-mode aesthetic
• Conversion-focused portfolio structure
• UX case study framework
• Redesign case study framework
• Mobile responsive layouts
• Framer-native components
• Fast loading and optimized structure
• No coding required
• Easy customization
License
For personal and commercial use.
Support
If you need help customizing the template, support documentation and guidance are included.
0
32