Hello everybody, I really feel tremendous completely happy to be right here. It’s been about ten years since I began studying this journal. And I’m really honoured to share my experiences with you.
My identify is Mario, a Guatemalan developer based mostly in Tallinn, Estonia. I focus on creating bespoke digital experiences, and over the previous decade, I’ve had the privilege of growing web sites acknowledged by Awwwards, FWA, the Latin American Design Awards, the European Design Awards, and extra. At present, I’m the Co-Founding father of Non-Linear Studio, which I run alongside Quintin Lodge.
Collectively, we run an impartial studio devoted to crafting digital experiences that join model, design, and expertise. For the previous three years, we’ve labored collectively to construct a studio the place every shopper’s distinctive wants information our strategy. Naturally, the experiences we create are simply as distinctive because the shoppers we serve.
Chosen Initiatives
Right here’s a collection of tasks I’m excited to share some are model new, others are older favorites, and one has been revamped and is about to launch very quickly. Plus, I couldn’t resist together with somewhat shameless self-promotion 🙈: our personal Studio portfolio! We lastly launched it final yr, and I’m proud to have it as a part of this showcase.
Elva Design Group
Let’s begin with an previous challenge: Elva, accomplished in 2022. Elva is a Design Group that makes a speciality of creating branded e-commerce experiences, specializing in digital technique, UX, UI, and movement. They approached us in 2022 with a easy but thrilling pitch: “Please create a cool web site, as if it had been in your personal studio.”
On the time, we didn’t even have our personal web site, so we poured numerous effort and fervour into this challenge and we completely cherished the end result. It’s not daily a shopper offers you a lot inventive freedom and says, “Do no matter you suppose is cool,” so we seized the chance and made it one thing particular.
Again in 2022, our improvement stack consisted of Sanity for the backend and 11ty for the frontend. For transitions, we used Canine Studio’s Freeway, whereas OGL powered the WebGL options. For common animations, we relied on GSAP. All of this was seamlessly deployed on Netlify.
Apparently, we nonetheless use a really comparable strategy at this time—however extra on that later.
Till very just lately, I used to be the only real developer on the studio, which meant there weren’t many code critiques or any form of “strict” construction. This freedom allowed me to develop my very own distinctive approach of working and structuring tasks.
Even now, I’m not 100% positive what the “proper” approach of doing issues is, however I’ve discovered that consistency, group, and robust communication together with your designer can work wonders in your improvement profession.
Built-in Reasoning
The second challenge is Built-in Reasoning, a YCombinator startup that’s redefining the panorama of combinatorial optimization (and don’t fear for those who’re not acquainted with that time period).
In sensible phrases, as a substitute of adopting a quantum computing strategy to unravel complicated mathematical issues, Built-in Reasoning is taking a groundbreaking classical computing strategy. They’re growing customized {hardware} and software program to sort out these challenges. 🤯🤯🤯
How does one illustrate the complexities of the issues Built-in Reasoning is tackling? Our strategy was to make use of geometric line artwork mixed with timeless, elegant typography to create an expertise that sparks curiosity and displays the mathematical roots of the NP-Full issues they purpose to unravel.
The illustrations and a number of the animations had been crafted by the gifted Rocco Dipoppa, and we introduced them to life on the internet utilizing Lottie to transform them into clean, interactive animations.
This challenge was finished in early 2024, and it prompted some small however significant changes to our tech stack. As I discussed earlier, our stack stays largely the identical, however with a couple of updates. As a substitute of utilizing Freeway for web page transitions, we opted for Taxi.js from Unseen Studio.
We additionally transitioned from OGL to Three.js for WebGL. My pal Robert Borghesi inspired me to deal with Three.js, and because the starting of final yr, I’ve been working to refine my abilities in it although maintaining with Robert is certainly a problem!
This has been one in every of my favourite tasks up to now it had somewhat little bit of every little thing: WebGL, Lottie, scroll animations (thanks, ScrollTrigger and GSAP ❤️).
I’m unsure if this occurs to everybody studying this, however if you’re engaged on a challenge you really get pleasure from, it’s simple to lose your self within the course of time simply flies if you’re deep into the code!
Atria
Atria has been a valued shopper, entrusting us with varied tasks over time. They’re driving a motion for proactive, preventive healthcare, powered by cutting-edge science and expertise.
One of many tasks they commissioned was their web site in 2023. We launched it efficiently, and so they cherished the consequence. Nonetheless, as their enterprise mannequin developed and matured, the necessity for a brand new web site arose. This up to date model is about to launch very quickly, and we’re trying ahead to seeing it go stay! (And also you’ll have the ability to take a look at a number of the animations and a preview of the positioning. 👀)
On the primary model of the Atria web site, we used the identical stack as Elva it was our “default” stack again in 2022/2023. For the brand new Atria web site, nonetheless, we’ve launched our newest stack improve. Essentially the most important change is the adoption of Astro. Our base template is now powered by Astro, and we’re actually enthusiastic about this shift.
Why the transfer to Astro? Nicely, React appears to dominate the area with frameworks like Subsequent.js, however I strongly consider that React isn’t at all times essential for the kind of web sites we construct. (I hope this doesn’t upset anybody please hold studying! 😅) To clarify my ideas higher, right here’s a video that completely displays my perspective.
As I used to be saying, whereas React won’t be important, we generally want a contact of dynamic performance. That’s the place Astro shines: it focuses on constructing static web sites however permits for simply the correct amount of interactivity a sprinkle of additional magic to make all of it come collectively.
The brand new web site was constructed solely from scratch, each on the frontend and backend. We’re nonetheless utilizing Sanity for the backend (in case you’re questioning, you may take a look at our “default” Sanity setup right here).
This revamp has shifted away from a number of the “enjoyable” components of the earlier model, reflecting a extra mature and severe tone to align with its deal with the healthcare sector. We additionally made updates to the scrolling expertise. Whereas we sometimes use our personal Easy Scroll on most of our tasks, for this web site we opted for Lenis, because it’s extra accessibility-friendly a vital consideration for healthcare-related platforms.
Non-Linear Studio
Lastly, let’s discuss our personal web site and portfolio. As I discussed earlier, I’m the Co-founder of Non-Linear Studio, a small impartial studio (at present we’re 3 💪) devoted to crafting digital experiences.
Creating your individual web site is at all times a problem. Time constraints, differing opinions, various tastes among the many group, and that nagging query, is that this sufficient? all make the method extra complicated than it appears.
This challenge really began fairly a while in the past and took a lengthy time to be production-ready. Alongside the way in which, I ended up constructing two totally different homepages, and we even revamped our model colours.
Given the prolonged timeline and evolving necessities, the tech stack for this challenge grew to become a little bit of a mix, reflecting the totally different phases it went by means of over time 😅.
The backend for this challenge is in step with our traditional selection: Sanity. For the frontend, we used 11ty, and Three.js powered the WebGL animations. For web page transitions, we relied on Taxi.js, whereas GSAP is a continuing throughout all our tasks for dealing with animations. For this web site, we additionally used our personal SmoothScroll, which dynamically transforms web page sections as they come into sight.
Probably the most attention-grabbing elements of this challenge was the pixelated impact. Because it’s our personal portfolio, we had the liberty to experiment greater than traditional and discover totally different approaches to creating pixelated visuals. We in the end discovered an incredible answer utilizing a displacement map. The displacement map is a texture constructed from randomized rectangles, which we import after which distort utilizing noise and random positioning.
The last word aim of our web site is to showcase the work we do and, hopefully, join with corporations seeking to create one thing distinctive and modern within the digital area. We purpose to encourage them to succeed in out and collaborate with us.
Nicely, that’s it! These are all of the tasks I had in thoughts to share I hope you loved them! In case you have any questions or wish to know extra, please don’t hesitate to succeed in out. You’ll find me on social media I’d love to attach!
Background
I began my profession somewhat over 13 years in the past in Valencia, Spain, at a small branding studio, the place I primarily labored with WordPress. After a few years, I moved to Tallinn, Estonia, to work in bigger advertising companies. Throughout this time, I modified jobs a couple of instances, largely to safe higher alternatives and a better wage.
About 5 years into my profession, I started taking over freelance work alongside my common job. I rapidly realized that I loved my freelance tasks greater than my full-time function. This led me to start out planning a transition to full-time freelancing, although the concept felt a bit scary.
Simply as I used to be about to take the leap, I acquired an thrilling provide to affix Bond, a Finnish studio whose work I like. I made a decision to postpone my plans for freelancing and took the chance. My time at Bond was rewarding, I discovered a lot about design and typography, and I really loved the expertise.
Nonetheless, after a yr there, the concept of freelancing began to resurface in my thoughts. Lastly, in 2019, after a yr and a half at Bond, I made a decision to completely decide to freelancing.
A few yr into freelancing, I met Quintin Lodge, my present accomplice at Non-Linear Studio. Quintin had already based the studio and invited me to collaborate with him on a couple of tasks. After working collectively and with out ever assembly in particular person he requested me to affix him in operating the studio as companions (yep, he’s that superior!).
And that’s how my journey into Non-Linear Studio began.
Ultimate Phrases
Frontend improvement has modified quite a bit over the previous 10 years. As of late, there’s way more info obtainable about inventive improvement and the right way to obtain nice animations. However I nonetheless consider that mastering the core foundations is vital.
If I had been to present you any recommendation, it will be this: deal with mastering layouts and grid methods, prioritize studying Vanilla JS over frameworks, and for those who’re into animations, perceive what lerp is and experiment with creating your individual customized easing capabilities.
Most significantly, don’t be afraid to interrupt issues! Have enjoyable, check out totally different UIs even when they’re not “user-friendly.” Testing, experimenting, and making errors is the easiest way to study and develop.
That’s all, of us! Have an incredible day!
