Glimpse — Framer Portfolio System
Shreyansh Shrivastava
01 — INTRODUCTION
Glimpse®
A motion-driven portfolio system for modern creatives.
A self-initiated Framer product exploring how editorial composition, expressive motion, CMS architecture and responsive systems can come together in one portfolio experience.
Glimpse's homepage brings the visual language, bento composition and motion system together.
02 — THE IDEA
More than a portfolio template.
Most portfolio templates are built around a collection of pages. I wanted to explore something more cohesive — a system that could present work, publish ideas, communicate services and build a personal identity while still feeling like one experience.
A portfolio shouldn't just contain the work. It should shape how the work is experienced.
One visual language carried across the complete portfolio system.
03 — DESIGN DIRECTION
Designed to feel considered.
Glimpse takes a cinematic, editorial approach to portfolio design — using large typography, restrained color, generous negative space and warm photographic highlights to create depth without competing with the work.
Editorial
Typography, spacing and hierarchy create an intentionally quiet foundation.
Cinematic
Grayscale imagery and warm photographic highlights introduce atmosphere and depth.
Structured
Bento layouts, rounded cards and thin dividers give the system a consistent visual framework.
Expressive
Motion and interaction add personality without becoming the visual focus.
The visual language is built around typography, imagery, structure and restrained motion.
04 — BENTO SYSTEM
One grid. Many expressions.
The bento grid became the structural language of Glimpse. Instead of treating every section as an isolated block, I designed a flexible set of cards that could change in scale, content and emphasis while maintaining consistent spacing and hierarchy.
The homepage uses different card sizes to establish hierarchy across content types.
Built around content hierarchy.
Featured content can command attention while supporting information occupies smaller spaces without feeling disconnected from the overall system.
The same compositional language extends into the Selected Work experience.
A system, not a fixed composition.
The grid provides a consistent foundation while leaving enough flexibility for different projects, imagery and content lengths.
05 — MOTION
Motion is part of the interface.
Motion wasn't treated as a finishing layer. It became part of how Glimpse reveals information, provides feedback and creates continuity between sections.
Appear
Content enters progressively to establish hierarchy as the page comes into view.
Scroll
Scroll-based movement creates continuity between sections and adds depth to the experience.
Text
Typography becomes part of the transition language rather than remaining completely static.
Hover
Interactive states provide feedback as users explore cards and navigation.
Ticker
Continuous movement adds another layer of expression to the homepage Services experience.
A real walkthrough of Glimpse — exploring the homepage, About and theme switching.
06 — CMS ARCHITECTURE
Built to grow with the portfolio.
A portfolio shouldn't become harder to maintain as the amount of work grows. Glimpse uses Framer CMS to separate content from presentation, allowing projects and articles to be added without rebuilding their layouts.
Projects
Selected Work is powered by CMS content, with each project flowing into its own dynamic case-study page.
Journal
The Journal follows the same principle, with CMS-driven articles and category filtering built into the publishing experience.
CMS-powered content keeps the portfolio expandable without breaking its visual system.
07 — JOURNAL
A portfolio that can keep evolving.
The Journal extends Glimpse beyond finished projects, giving creatives a dedicated space for ideas, writing and ongoing work while keeping the same visual language as the portfolio.
Browse. Filter. Read.
Articles can be organized through CMS categories and filtered directly from the Journal, while each article receives its own dynamic page.
08 — RESPONSIVE + THEMES
One system. Different conditions.
The visual language had to remain recognizable as the context changed — from desktop to mobile, and from dark to light.
Light + Dark
Light and Dark Mode
Both themes use the same underlying hierarchy while changing the visual atmosphere.
Desktop → Tablet → Mobile
Responsive Across Breakpoints
Layouts recompose across screen sizes rather than simply shrinking, preserving hierarchy and usability throughout the experience.
09 — FRAMER IMPLEMENTATION
Designed to be built.
Glimpse was designed and implemented directly in Framer, allowing the visual system, interactions, CMS and responsive behavior to evolve as one connected product.
Reusable Components
Repeated patterns are built as reusable pieces rather than recreated page by page.
Custom Code Components
Custom Framer components extend the native system where specific interaction or presentation behavior is needed.
Shy Testimonials
Glimpse also incorporates Shy Testimonials, a custom Framer component developed as part of the system.
Shy Testimonials Used In Glimpse
10 — THE DETAILS
The details are part of the product.
Site Search : Content remains discoverable as the portfolio grows.
Custom 404 : The error state is treated as part of the experience.
SEO-ready structure : Semantic structure, metadata, indexing controls, social metadata, alt text and internal linking.
Framer infrastructure : Automatic sitemap and robots infrastructure through Framer.
11 — SELECTED WORK
Work shouldn't stop at the thumbnail.
Selected Work introduces the project. The dynamic case-study experience gives each piece enough room to tell its story.
Overview → Challenge → Solution → Visuals → Results
A CMS-driven project can move from a compact work card into a full editorial case-study experience.
12 — THE FINAL SYSTEM
A portfolio system, not just a template.
Glimpse evolved into a complete system for presenting work, publishing ideas and building a creative presence.
The bento composition, motion language, CMS architecture, responsive layouts, themes and Framer implementation were designed to work together rather than exist as isolated features.
One system across the complete Glimpse experience.
13 — BUILT FOR
Built for different kinds of creatives.
Product designers — Present detailed case studies with a strong editorial layer.
Web designers — Showcase visual work through a flexible portfolio system
Creative developers — Combine projects, experiments and technical work in one place.
Independent creatives — Bring work, writing and personal identity together.
Studios & small teams — Adapt the system around an existing creative direction.
Until the next Glimpse.
Explore the live experience and see how the system moves, adapts and works together.
Like this project
Posted Sep 18, 2026
A motion-driven Framer portfolio system exploring editorial design, expressive interactions, CMS architecture, and responsive experiences.
Likes
2
Views
2
Timeline
Sep 2, 2026 - Sep 16, 2026
