How it began
It actually began a number of years in the past after I received a while to look again in any respect the work I’d been doing over the previous few years. I’ve been very busy because the final time I up to date my portfolio. In these years, I’ve been so happy with the gifted individuals from everywhere in the world I’ve received to jam/collab with and the initiatives I’ve had the wonderful alternative to work on. I needed to get this out to indicate 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 these days on actual initiatives and their portfolios. So, they received 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 creating a brand new portfolio.
Route + Design
Inspiration
Okay, now that everybody has impressed me to start out this factor, it’s now time to encourage them again. This wasn’t solely simply in regards to the individuals/manufacturers I’ve collaborated with, initiatives I’ve labored on and awards we’ve gained, and many others. I needed to have some enjoyable, present some persona a bit of 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 indicate and show what I’ve been serving to junior designers with. The whole lot in my portfolio is sentimental and has some type 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 properly. I really like getting my fingers soiled with the work and the method of shaping the shape to create lovely issues. The fashions aren’t polished, as you may see the marks/cuts/indentations to represent that I’m not completed with my physique of labor. It additionally reveals that I really like these moments of experimenting/enjoying/imperfections when creating. It was so sick working with Théo Favereau and Anoukia Perrey and watching them deliver concepts to life.
Doberman Pinscher (Ruby Roux)
For those that know me, they know my canine is the whole lot to me. I received her to start with 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 properly. I’ve at all times been thought of an underdog. In the event you ask some those who know me, they could inform ya that Clay has that canine in him (their phrases). They may inform you Clay at all times has your again (defend the pack) it doesn’t matter what. My Roux is by my aspect 24/7 and undoubtedly that CD at all times trying over my shoulder, haha!
✌️with the Oura Ring
I’ve been freelancing/contracting my entire profession however it wasn’t till my time with Oura that I actually felt like I received this freelancing/contracting factor. From there, I went on to work with so many wonderful gifted individuals from everywhere in 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 at all times been part of me coming from the Queen Metropolis (Charlotte). However that crown was there for me regardless of the place I went subsequent. It was there after I moved to the Bay and once more after 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 good friend 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 many others), my Boanyard is an area for me to play/experiment/fail/succeed/study/develop. It might 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 examine, issues that helped me develop that by no means noticed the sunshine or it might be an area the place concepts get resurrected to one thing new. Boanyard isn’t only a play off my title however it’s additionally an area of recollections, enjoyable, and development.
Blackletter + Calligraphy
My father would write me these lovely messages in Vietnamese script and calligraphy in English lots of mornings after 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 at all times impressed me and it’s very particular to me, from making music myself to creating artwork for it. So, seeing Blackletter in music has at all times 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 types served as the inspiration for a refined but expressive animation idea. We started by deconstructing every letter into its core shapes, fastidiously stripping the terminals to create clear, animatable types.
Subsequent, every form is animated individually with refined 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 encircling WebGL parts.
<!--
SVG Letter: B
-->
<path class="form" d="M60.53 322.049H61.74H61.7L118.48 261.769V119.439H117.31L66.37 173.489V258.269C66.37 286.269 66.37 315.439 60.54 322.049H60.53Z" fill="currentcolor"/>
<path class="form" d="M243.31 350.969C243.31 259.199 191.69 237.099 127.53 237.099V236.319C147.6 234.429 177.64 214.459 189.61 204.439H192.23C243.56 204.989 287.36 251.419 287.36 304.379L243.31 350.969Z" fill="currentcolor"/>
<g class="form">
<path d="M155.01 336.939C116.14 329.889 76.63 322.729 62.26 322.439H60.8L16.86 369.879C9.30999 378.039 3.64999 388.779 1.48999 399.009H3.41999C7.83999 383.959 23.12 369.879 46.81 369.869C59.45 369.869 91.43 376.579 123.42 383.289C155.41 389.999 187.39 396.709 200.03 396.709L243.47 350.749C231.14 350.749 193.38 343.899 155 336.939H155.01Z" fill="currentcolor"/>
<!-- terminal 1 -->
<path masks="url(#bay-mask-1)" d="M0.530029 407.6C0.530029 421.21 7.53003 433.27 25.42 438.71L25.81 437.93C9.87003 432.88 2.09003 423.16 2.09003 407.99C2.09003 405.03 2.55003 402 3.43003 399.01H1.50003C0.880029 401.94 0.540029 404.83 0.540029 407.6H0.530029Z" fill="currentcolor"/>
<!-- masks 1 -->
<masks class="masks" id="bay-mask-1"><path d="M2.51998 397.76C-1.28002 416.46 5.32998 432.74 26.05 438.47" stroke="white" stroke-width="3" stroke-miterlimit="10"/></masks>
</g>
<g class="form">
<path d="M248.58 123.829C248.59 81.0495 212.03 68.2195 166.14 67.4395H75.92L27.7 119.549C19.33 128.579 14.15 138.769 12.86 149.349H14.6C17.36 133.939 31.56 120.189 55.92 119.569L56 119.549H128.36L128.55 119.569C193.89 120.079 214.36 132.149 214.36 156.499C214.36 176.329 206.58 189.169 190.25 203.169C189.96 203.419 189.65 203.679 189.33 203.949H191.07L191.03 203.939C222.92 182.549 248.58 154.159 248.58 123.829Z" fill="currentcolor"/>
<!-- terminal 2 -->
<path class="masks" masks="url(#bay-mask-2)" d="M12.53 154.55C12.53 168.16 19.53 180.22 37.42 185.66L37.81 184.88C21.87 179.82 14.09 170.1 14.09 154.94C14.09 153.07 14.27 151.2 14.6 149.35H12.86C12.65 151.07 12.53 152.81 12.53 154.55Z" fill="currentcolor"/>
<!-- masks 2 -->
<masks id="bay-mask-2"><path d="M13.58 148.609C11.49 166.979 19.44 179.679 37.81 185.359" stroke="white" stroke-width="3" stroke-miterlimit="10"/></masks>
</g>/**
* Calligraphy animations
*/
calligraphyTl
// reveal shapes
.fromTo(form, {
scale: 0,
rotate: -20,
transformOrigin: 'middle',
}, {
scale: 1,
rotate: 0,
ease: 'expo.out',
})
// draw masks traces
.fromTo(masks, {
drawSVG: '0% 0%',
}, {
length: 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 positioning. You’ll see them in diagonal cuts, web page transitions, buttons and refined interactive touches. Delivered to life with SVG clip paths, these geometric types present a easy however efficient solution to layer content material and tie the entire design collectively.
Scroll-based Timeline Animations
The remaining pages have been delivered to life utilizing GSAP timeline animations, intricately tied to ScrollTrigger for clean, scroll-synced playback. SplitText animations added dynamic typographic movement, whereas sticky parts and refined 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 prime of that, detect-gpu to regulate the rendering primarily based on the consumer’s machine, so the expertise is performant on low-performance units whereas nonetheless trying even higher on a high-end machine
Rendering & Visible Route
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 straight inside WebGL.
No baking right here — the entire concept 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 atmosphere map to herald these lifelike reflections and mushy lighting you’d usually count on from a static render. This manner the whole lot stayed versatile, and we might tweak issues stay as an alternative 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 group might tweak issues stay. The whole lot was adjustable, colours, lights, supplies, transforms, and many others. And since configs might be exported and imported, we might cross presets backwards and forwards with out touching code. It become a very nice workflow. Quicker iteration, far more inventive management, and no backwards and forwards.
Backend for frontend
by Ruud Luijten
We constructed a strong basis utilizing Vue/Nuxt and created a backend-for-frontend API layer that streamlined information utilization throughout the frontend app. The BFF API layer acted as an middleman between exterior companies and the frontend, aggregating and normalizing information earlier than it reached the shopper elements. This strategy lowered complexity within the UI, minimized redundant requests, and ensured a extra constant information circulate throughout totally 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 carried out Storyblok, a headless CMS that empowered non-technical group 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 improvement and content material operations.
Internet hosting
We hosted the positioning on Vercel, profiting from its seamless integration with trendy frontend frameworks and its quick world CDN to ship belongings effectively. This internet hosting alternative allowed for automated deployments, preview environments, and instantaneous 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 challenge was a real collaboration from day one and even now as we communicate. I at all times needed everybody to do their factor on the challenge 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 solution to make it occur. I’m so grateful for everybody on this wonderful group and serving to me deliver 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.
