13 Tecchart — Portfolio Website

13 Tecchart - Portfolio Website

Summary

Built a horizontal-scroll portfolio for an interactive studio. Despite the constraints of SSR (SEO) and heavy video content, the experience stays smooth and cinematic, with a consistent browsing rhythm.

  • Scope: Lead frontend engineer. Owned the interactive implementation, CMS integration, and responsive architecture end-to-end.
  • Stack: Next.js, TypeScript, GSAP ScrollTrigger, Strapi CMS, Plyr, styled-components, Tailwind CSS

Highlights

  • Mapped vertical scroll input to horizontal translation using GSAP ScrollTrigger, creating seamless navigation across portfolio sections
  • Implemented a loading mask strategy that front-loads video initialization, eliminating scattered jank throughout the browsing experience
  • Built and maintained the Strapi CMS backend, giving the client full control over portfolio content without developer intervention

The Challenges

  • Scroll timing precision → calculating when to snap required combining scroll position, velocity, direction, and card dimensions; getting any factor wrong made the interaction feel broken or disconnected
  • Multiple video instances → the site features video throughout, and initializing several Plyr instances simultaneously caused visible frame drops and interaction lag on page load

What I Did

  • Built scroll-to-horizontal mapping with GSAP ScrollTrigger, fine-tuning scrub and ease until movement felt directly connected to user input
  • Implemented snap logic that accounts for scroll intent—fast scrolls skip cards, slow scrolls land precisely
  • Introduced a loading mask on site entry to ensure first-screen videos are ready before revealing interactive content
  • Wrapped Plyr in a custom usePlyr hook with poster fallbacks and deferred initialization
  • Set up Strapi CMS with custom content types for works and about sections, connected to the frontend via REST API with SSR data fetching
  • Maintained the database schema and handled content migrations as requirements evolved

Key Decisions & Trade-offs

  • Leaned on an animation framework instead of rolling our own: ScrollTrigger handles edge cases (resize, orientation changes, scroll restoration) reliably, which justified the learning curve.
  • Separated desktop and mobile flows: interaction models differ enough that splitting reduced complexity and improved control.
  • Loading Assets vs. Interactive Experience: loading large video assets requires a trade-off with interactive experience. Selected a solution that meets the needs within the limited time, and reserved enough time for iterative tuning to refine the experience to the desired level.

Reflections

  • What worked well: Investing in GSAP paid off—it handles subtle edge cases that would have taken weeks to solve manually. Keeping Desktop/Mobile separate felt like duplication but made each version cleaner.
  • What I'd do differently: Would reconsider Next.js for this use case. The SSR benefits were minimal since the content is highly visual, and the hydration complexity added friction without proportional SEO gain.
  • Next time: Evaluate whether a simpler React SPA would deliver the same experience with less architectural overhead.