How it began
It actually began just a few years in the past once I acquired a while to look again in any respect the work I’d been doing over the previous few years. I’ve been very busy for the reason that final time I up to date my portfolio. In these years, I’ve been so happy with the proficient folks from all around the world I’ve acquired to jam/collab with and the tasks I’ve had the wonderful alternative to work on. I needed to get this out to point out what I’ve been as much as however there’s extra than simply the work.
I’ve been working/serving to design college students and junior designers currently on actual tasks and their portfolios. So, they acquired me hyped to do my very own, haha! I additionally needed to collaborate with some new dope 3D + Movement Designers and Builders. This all actually impressed me to bark up that tree of constructing a brand new portfolio.
Path + Design
Inspiration
Okay, now that everybody has impressed me to begin this factor, it’s now time to encourage them again. This wasn’t solely simply in regards to the folks/manufacturers I’ve collaborated with, tasks I’ve labored on and awards we’ve received, and so on. I needed to have some enjoyable, present some character somewhat extra, get again to a few of my roots and a few issues that encourage me. I needed to study some new issues and overcome some new challenges. I needed to point out and show what I’ve been serving to junior designers with. The whole lot in my portfolio is sentimental and has some form of that means to my journey/expertise.
Clay Materials
The fabric is not only clay due to my title, haha. Ceramics have been my favourite again at school. It’s enjoyable and therapeutic for me now, as nicely. I really like getting my fingers soiled with the work and the method of shaping the shape to create stunning issues. The fashions will not be polished, as you may see the marks/cuts/indentations to represent that I’m not completed with my physique of labor. It additionally exhibits that I really like these moments of experimenting/taking part in/imperfections when creating. It was so sick working with Théo Favereau and Anoukia Perrey and watching them carry concepts to life.
Doberman Pinscher (Ruby Roux)
For those who know me, they know my canine is all the pieces to me. I acquired her at first of the pandemic (2020). She helped me so much once we transitioned from the workplace to distant. However “canine” has extra that means for me as nicely. I’ve all the time been thought-about an underdog. If you happen to ask some those who know me, they could inform ya that Clay has that canine in him (their phrases). They could inform you Clay all the time has your again (defend the pack) it doesn’t matter what. My Roux is by my facet 24/7 and undoubtedly that CD all the time trying over my shoulder, haha!
✌️with the Oura Ring
I’ve been freelancing/contracting my complete profession but it surely wasn’t till my time with Oura that I actually felt like I acquired this freelancing/contracting factor. From there, I went on to work with so many wonderful proficient folks from all around the world.
Freelance/contract solely: AKQA, Apple, Barbarian, Beats by Dre, Cricut, Exo Ape, Flagship, Gucci, IBM, Nike, Oddcommon, R/GA, Rally, Purple Antler, Samsung, Vimeo and so many extra.
Crown
The crown has all the time been part of me coming from the Queen Metropolis (Charlotte). However that crown was there for me irrespective of the place I went subsequent. It was there once I moved to the Bay and once more once I arrived at Crown Heights in Brooklyn. It’s an emblem of the place I’m from and the place I’m going.
Boanyard
Jane, a design pal again at school mentioned sooner or later “it is best to use Boanyard” haha. No matter you need to name it (Archive, grave, sandbox, playground, and so on), my Boanyard is an area for me to play/experiment/fail/succeed/study/develop. It may very well be a set of labor that may not make the reduce for the shopper, work that was for a pitch or shopper work that doesn’t get a case research, issues that helped me develop that by no means noticed the sunshine or it may very well be an area the place concepts get resurrected to one thing new. Boanyard isn’t only a play off my title but it surely’s additionally an area of reminiscences, enjoyable, and development.
Blackletter + Calligraphy
My father would write me these stunning messages in Vietnamese script and calligraphy in English a number of mornings once I was a toddler. Seeing these marks with ink and paper caught with me and has a particular place in my coronary heart. Music has all the time impressed me and it’s very particular to me, from making music myself to creating artwork for it. So, seeing Blackletter in music has all the time impressed me. I really like calligraphy and hand-lettering. I suck at it haha however I like to do it anyway.
Frontend
by Rob Smittenaar
Calligraphic Sort Animation
The Emeritus font is a blackletter typeface impressed by conventional Blackletter and Fraktur designs. Its calligraphic kinds served as the muse for a delicate but expressive animation idea. We started by deconstructing every letter into its core shapes, fastidiously stripping the terminals to create clear, animatable kinds.
Subsequent, every form is animated individually with delicate rotations and scaling. Utilizing GSAP’s drawSVG, we animate the masks paths related to the letter’s terminal paths, revealing them in an natural manner. The result’s a playful but elegant animation of the header and footer copy, including a dynamic rhythm to the house and about pages whereas complementing the encompassing WebGL components.
/**
* Calligraphy animations
*/
calligraphyTl
// reveal shapes
.fromTo(form, {
scale: 0,
rotate: -20,
transformOrigin: 'heart',
}, {
scale: 1,
rotate: 0,
ease: 'expo.out',
})
// draw masks strains
.fromTo(masks, {
drawSVG: '0% 0%',
}, {
period: 4,
drawSVG: '0% 100%',
ease: 'none',
}, '-=2')
// conceal shapes
.to(form, {
scale: 0,
rotate: 20,
ease: 'expo.in',
});Clip Path Animations
Diamond-shaped motifs create a constant visible thread throughout the location. You’ll see them in diagonal cuts, web page transitions, buttons and delicate interactive touches. Delivered to life with SVG clip paths, these geometric kinds present a easy however efficient strategy to layer content material and tie the entire design collectively.
Scroll-based Timeline Animations
The remaining pages have been dropped at life utilizing GSAP timeline animations, intricately tied to ScrollTrigger for clean, scroll-synced playback. SplitText animations added dynamic typographic movement, whereas sticky components and delicate parallax (mouse) results launched depth and layering.
WebGL
by Thomas Van Glabeke
Setup & System
Each WebGL scene runs on one single canvas that we transfer throughout sections utilizing observers. As an alternative of making a brand new renderer for each scene, this strategy retains issues light-weight and seamless.
The stack was easy: Three.js for the core, pmndrs/postprocessing for put up processing, and n8ao for the ambient occlusion cross.
On high of that, detect-gpu to regulate the rendering primarily based on the consumer’s system, so the expertise is performant on low-performance gadgets whereas nonetheless trying even higher on a high-end machine
Rendering & Visible Path
For as soon as, I didn’t write any customized shaders 😄. The whole lot is utilizing Three.js’ superior bodily materials. The problem was to get as shut as attainable to the Octane renders we had from the 3D designers as reference, after which I attempted to get as shut as attainable immediately inside WebGL.
No baking right here — the entire thought was to maintain it real-time and dynamic so we might modify lights on the fly. We used lights within the scene to form the temper, after which added an surroundings map to herald these real looking reflections and comfortable lighting you’d usually count on from a static render. This fashion all the pieces stayed versatile, and we might tweak issues reside as a substitute of being locked into baked textures.
Collaboration & Iteration
As a result of every scene wanted its personal temper, we used the Tweakpane GUI so the design workforce might tweak issues reside. The whole lot was adjustable, colours, lights, supplies, transforms, and so on. And since configs may very well be exported and imported, we might cross presets backwards and forwards with out touching code. It was a very nice workflow. Sooner iteration, far more inventive management, and no backwards and forwards.
Backend for frontend
by Ruud Luijten
We constructed a sturdy basis utilizing Vue/Nuxt and created a backend-for-frontend API layer that streamlined knowledge utilization throughout the frontend app. The BFF API layer acted as an middleman between exterior companies and the frontend, aggregating and normalizing knowledge earlier than it reached the shopper elements. This strategy diminished complexity within the UI, minimized redundant requests, and ensured a extra constant knowledge move throughout completely different pages, in the end leading to a smoother consumer expertise and a cleaner, extra scalable codebase.
Content material Administration
For content material administration, we applied Storyblok, a headless CMS that empowered non-technical workforce members to handle and replace content material with out touching the codebase. Storyblok’s visible editor and component-based construction labored completely with our Vue/Nuxt setup, enabling dynamic content material supply and speedy iteration whereas sustaining a clear separation between growth and content material operations.
Internet hosting
We hosted the location on Vercel, making the most of its seamless integration with fashionable frontend frameworks and its quick world CDN to ship property effectively. This internet hosting selection allowed for automated deployments, preview environments, and immediate rollbacks, which streamlined our launch course of and improved reliability.
Collaboration
by Clay Boan
Now again to eager to collaborate with some new superior 3D + Movement Designers and Builders. This mission was a real collaboration from day one and even now as we converse. I all the time needed everybody to do their factor on the mission and have some enjoyable with it. I liked how everybody introduced concepts, and to see them work their magic was so superior. Positive we had some challenges with everybody being very busy with shopper work however we discovered a strategy to make it occur. I’m so grateful for everybody on this wonderful workforce and serving to me carry my portfolio to life.
Once you get a minute, please present some like to Ruud Luijten, Théo Favereau, Rob Smittenaar, Anoukia Perrey, Thomas Van Glabeke.
