Hello everybody, I really feel tremendous comfortable 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 creating web sites acknowledged by Awwwards, FWA, the Latin American Design Awards, the European Design Awards, and extra. Presently, I’m the Co-Founding father of Non-Linear Studio, which I run alongside Quintin Lodge.
Collectively, we run an unbiased studio devoted to crafting digital experiences that join model, design, and know-how. 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 Tasks
Right here’s a choice of initiatives 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 a little bit shameless self-promotion 🙈: our personal Studio portfolio! We lastly launched it final 12 months, and I’m proud to have it as a part of this showcase.
Elva Design Group
Let’s begin with an previous undertaking: 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 have been to your personal studio.”
On the time, we didn’t even have our personal web site, so we poured a whole lot of effort and keenness into this undertaking and we completely beloved the end result. It’s not day-after-day a shopper provides you a lot artistic freedom and says, “Do no matter you assume 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 normal animations, we relied on GSAP. All of this was seamlessly deployed on Netlify.
Curiously, we nonetheless use a really related strategy immediately—however extra on that later.
Till very lately, I used to be the only real developer on the studio, which meant there weren’t many code critiques or any sort of “strict” construction. This freedom allowed me to develop my very own distinctive manner of working and structuring initiatives.
Even now, I’m not 100% certain what the “proper” manner of doing issues is, however I’ve discovered that consistency, group, and robust communication along with your designer can work wonders to your improvement profession.
Built-in Reasoning
The second undertaking is Built-in Reasoning, a YCombinator startup that’s redefining the panorama of combinatorial optimization (and don’t fear in case you’re not aware of that time period).
In sensible phrases, as an alternative of adopting a quantum computing strategy to unravel advanced mathematical issues, Built-in Reasoning is taking a groundbreaking classical computing strategy. They’re creating 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 have been crafted by the gifted Rocco Dipoppa, and we introduced them to life on the net utilizing Lottie to transform them into clean, interactive animations.
This undertaking was carried out 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 just a few updates. As an alternative 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 good friend Robert Borghesi inspired me to deal with Three.js, and because the starting of final 12 months, I’ve been working to refine my abilities in it although maintaining with Robert is certainly a problem!
This has been considered one of my favourite initiatives thus far it had a little bit little bit of every little thing: WebGL, Lottie, scroll animations (thanks, ScrollTrigger and GSAP ❤️).
I’m undecided if this occurs to everybody studying this, however while you’re engaged on a undertaking you really get pleasure from, it’s simple to lose your self within the course of time simply flies while you’re deep into the code!
Atria
Atria has been a valued shopper, entrusting us with varied initiatives through the years. They’re driving a motion for proactive, preventive healthcare, powered by cutting-edge science and know-how.
One of many initiatives they commissioned was their web site in 2023. We launched it efficiently, and so they beloved the consequence. Nevertheless, as their enterprise mannequin developed and matured, the necessity for a brand new website 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 website, nevertheless, 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? Effectively, React appears to dominate the house with frameworks like Subsequent.js, however I strongly consider that React isn’t all the time obligatory for the kind of web sites we construct. (I hope this doesn’t upset anybody please preserve studying! 😅) To elucidate my ideas higher, right here’s a video that completely displays my perspective.
As I used to be saying, whereas React may not 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 quantity of interactivity a sprinkle of additional magic to make all of it come collectively.
The brand new website was constructed fully from scratch, each on the frontend and backend. We’re nonetheless utilizing Sanity for the backend (in case you’re questioning, you’ll be able to 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 critical tone to align with its deal with the healthcare sector. We additionally made updates to the scrolling expertise. Whereas we sometimes use our personal Clean Scroll on most of our initiatives, for this website we opted for Lenis, because it’s extra accessibility-friendly an important consideration for healthcare-related platforms.
Non-Linear Studio
Lastly, let’s speak about our personal web site and portfolio. As I discussed earlier, I’m the Co-founder of Non-Linear Studio, a small unbiased studio (at present we’re 3 💪) devoted to crafting digital experiences.
Creating your personal website is all the time a problem. Time constraints, differing opinions, various tastes among the many workforce, and that nagging query, is that this sufficient? all make the method extra advanced than it appears.
This undertaking really began fairly a while in the past and took a lengthy time to be production-ready. Alongside the best way, I ended up constructing two completely different homepages, and we even revamped our model colours.
Given the prolonged timeline and evolving necessities, the tech stack for this undertaking grew to become a little bit of a mix, reflecting the completely different levels it went via over time 😅.
The backend for this undertaking is in keeping with our normal alternative: 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 initiatives for dealing with animations. For this website, we additionally used our personal SmoothScroll, which dynamically transforms web page sections as they come into sight.
One of the vital attention-grabbing elements of this undertaking was the pixelated impact. Because it’s our personal portfolio, we had the liberty to experiment greater than normal and discover completely different approaches to creating pixelated visuals. We finally discovered a terrific resolution utilizing a displacement map. The displacement map is a texture made out of randomized rectangles, which we import after which distort utilizing noise and random positioning.
The last word purpose of our website is to showcase the work we do and, hopefully, join with firms trying to create one thing distinctive and revolutionary within the digital house. We purpose to encourage them to achieve out and collaborate with us.
Effectively, that’s it! These are all of the initiatives I had in thoughts to share I hope you loved them! When you’ve got any questions or need to know extra, please don’t hesitate to achieve out. You will discover me on social media I’d love to attach!
Background
I began my profession a little bit 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 and marketing companies. Throughout this time, I modified jobs just a few occasions, 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 initiatives greater than my full-time function. This led me to begin 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 hitch 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.
Nevertheless, after a 12 months there, the concept of freelancing began to resurface in my thoughts. Lastly, in 2019, after a 12 months and a half at Bond, I made a decision to totally decide to freelancing.
A couple of 12 months into freelancing, I met Quintin Lodge, my present associate at Non-Linear Studio. Quintin had already based the studio and invited me to collaborate with him on just a few initiatives. After working collectively and with out ever assembly in particular person he requested me to hitch him in working 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. Today, there’s way more data out there about artistic improvement and easy methods to obtain nice animations. However I nonetheless consider that mastering the core foundations is vital.
If I have been to present you any recommendation, it will be this: deal with mastering layouts and grid programs, prioritize studying Vanilla JS over frameworks, and in case you’re into animations, perceive what lerp is and experiment with creating your personal customized easing features.
Most significantly, don’t be afraid to interrupt issues! Have enjoyable, check out completely different UIs even when they’re not “user-friendly.” Testing, experimenting, and making errors is one of the best ways to be taught and develop.
That’s all, people! Have a terrific day!
