Collaborating with Gabriel on his new portfolio has been an enriching experience. He came up with a sleek design concept that incorporated animation ideas and maintained a flexible approach. This allowed for extensive experimentation during the development phase, resulting in the best possible outcomes. The website’s core consists of a two-page “loop,” transitioning from a main gallery on the homepage to detailed project views. The goal was to ensure seamless animations and vibrant transitions when moving from the dark-themed homepage to the brighter case studies. The primary focus of this portfolio was to effectively showcase the content.
I prefer working with vanilla JavaScript and simple tools whenever feasible, and this project provided the perfect opportunity to use my favorite stack. I utilized Astro for static page generation, Taxi for creating a single-page-app-like experience with smooth transitions, and Gsap Tweens for animation effects. Twgl offered WebGL helpers, while Lenis managed scrolling. Content was delivered through Sanity, with the exception of case study videos hosted on Cloudflare and streamed using Hls. The website was statically generated and deployed on Vercel, both via CI/CD and from Sanity to rebuild when content updates.
The CMS structure was straightforward, with collections for work, pages like /about, and a group for generic data such as contact information. While the website was relatively simple in this instance, this configuration ensured that the content could outlive the website, allowing for potential future enhancements. The official integration for Astro/Sanity came midway through the project, enhancing their interaction. The Vercel Deploy plugin was leveraged to enable easy deployment when needed.
In terms of code structure, the repository contained folders for public assets, CMS setup, source files, JavaScript modules, WebGL components, and more. Astro was used at a minimal capacity with .astro files for static site generation. The JavaScript code was consolidated into a single entry point (app.js), which initialized all main components of the application.
The animation framework relied on two primary JavaScript classes: Observer and Track. The Observer, built using the IntersectionObserver API, triggered actions when DOM nodes became visible or hidden. The Track class, which extended the Observer, calculated values based on scroll and resize events, functioning as a bespoke ScrollTrigger. These classes were instrumental in creating animations on the website.
The preloader on the website was more of a stylistic feature than a functional one, adding visual appeal to the loading process. It consisted of a text block displaying changing numbers animated across the screen. This animation was controlled by a setInterval function to simulate a loading effect.
Overall, working on Gabriel’s portfolio was a rewarding experience that allowed for creativity and innovation in web development.
Source link
