Samuel Bello — Product Designer Portfolio
A motion-rich, case-study-driven portfolio for a product designer — built with Nuxt 3 and GSAP to present fintech, HR, and digital interface work through scroll-driven animations, pinned sections, and a curated gallery. Static SPA with media on Cloudinary.
Samuel needed a bespoke portfolio focused on storytelling — not a generic template — while showcasing dense case-study imagery, embedded walkthroughs, and scroll-heavy motion without sacrificing load performance on slower connections.
Built a Nuxt 3 SPA (ssr: false) with GSAP scroll animations, pinned case study cards, clip-path transitions, and custom route transitions
Modular SCSS design system and reusable Vue components — Hero, ProjectCard, AboutDrawer, DigitalInterfaces
Integrated Cloudinary via @nuxt/image — lazy loading, base64 placeholders, and optimized delivery for images, video, and GIFs
Scroll-driven UX: ScrollTrigger pinning, Split-Type text reveals, expandable About drawer, and responsive matchMedia breakpoints
Homepage experience: animated hero, featured case studies, and masonry-style digital interfaces gallery
Case study templates covering payroll, inclusive payments, HR, and fintech work — role, platform, process, and embedded media
Configured SEO metadata, Open Graph, Twitter cards, and a custom animated preloader for first-load polish
One-click email copy, smooth page transitions, and static JAMstack deployment with hardcoded content — no custom backend
Client-side Nuxt 3 SPA with file-based routing for home, individual case studies (Building Payroll, Inclusive Payments, HR Platform, Financial Platform, Super App for Delivery), and a dedicated interfaces gallery. Content and copy live in Vue components; all media is served from Cloudinary through @nuxt/image with lazy loading and placeholders. GSAP and ScrollTrigger power the preloader, hero text reveals, pinned case-study cards, parallax-style image motion, and mobile/desktop-specific animation via matchMedia — with lightweight composables for global UI state and no API layer beyond a Nuxt server config stub.
Shipped a production-ready static portfolio at thesamuelbello.com — motion-rich case study storytelling, a curated interface gallery, and snappy media delivery despite an image-heavy, animation-driven experience.