Sometimes projects take longer than we anticipate. We asked Sanity community member, Félix Péault, to share his nearly year-long journey creating his portfolio site, Flayks.
I'm Félix Péault, an Art Director and Digital Designer who fell into coding as well. I'm originally from Paris, France but I lived in Australia, Los Angeles, Berlin and I recently moved to the South of France where the sun shines and life is a little bit more chill.
Besides designing I also can't live without good and eclectic music, getting outside - preferably on my rainbow bike, capturing photos of unique landscapes, villages, or houses around.
After over a decade of freelancing, it felt time to recreate and build a fresh portfolio that represents my current design style and vision. In the past, portfolios were more of a solo mission to me, but as my ambitions have grown it felt like a good opportunity to collaborate with friends to achieve more complex animated effects and develop the front-end. In this case, working with Shelby Kay on the development and Julien Espagnon for making the shaders.
I've been inspired by bold colors, cool psychedelic gradients, and shapes, breaking the "design grid" and staying away from the minimalist trends, also the way that animations and motion design can enhance a website and bring it to life.
I believe it shouldn't! I started thinking about that redesign back in late 2020, then I had the opportunity to work on some big and exciting projects while working on it in-between, hence the 9 month due date of making this new portfolio. I wanted to truly define a strong branding and identity to present my latest work and profile.
The main blockages were the animations on the site, especially the WebGL canvases. With Julien, we created custom gradients for the background of the site. We are not total experts in this field so finding good colors, movements and performance was quite tricky. It took some time but with perseverance, we've got there!
The site is built with Svelte and SvelteKit and is hosted on Vercel. The combination of the two is really seamless and stress-free, which is very nice as it lets the focus be on the functionalities, eg. fewer dramas about deploying or building issues. The styling is made with SCSS in a mobile-first approach following the Atomic Design methodology (which I use throughout the design phase). Most of the animations are using Anime.js with a custom Svelte function based on IntersectionObserver, and page transitions using the native Svelte transitions.
I discovered Svelte back in early 2020 and it completely blew my mind by its accessibility and simplicity, as well as the compiler approach versus virtual DOM. Although I haven't been the biggest fan of Sapper, I saw that SvelteKit was in development so I jumped on it eyes-closed as it was being developed. It is more or less an equivalent of Next.js but for Svelte, with easy routing, SSR, and amazing performances just to name a few. This also explains a little bit why the site took so long as well, as SvelteKit is still in beta I was waiting for it to get stable enough to be able to release my site - maybe I like to live with a dash of danger.
I've previously worked with other headless CMS such as Prismic, Directus, or Cockpit, then I saw that Sanity was more and more mentioned in blog posts, tweets, etc. To be fair, the first two attempts put me off as it is not the standard point-and-click way to build a back-office. But out of curiosity, I dug into more in-depth videos about how to get started with Sanity and it made much more sense about how customizable and flexible the tool is, also how fair the pricing is compared to other solutions. Not sure if I could go back now!
The hardest part of the site - aside from the WebGL shaders - was finding a balance between nice animations and rhythm in the pages, as well as not overloading pages with content.
Being a designer and just handing over designs to a developer might not be the most seamless process when you have something very specific in mind. My curiosity pushes me to understand how things function and to make them afterward. That's probably why I like to develop most of my web projects when I can or collaborate with like-minded and talented developers.
I find it to be tremendously important for digital designers to have knowledge about front-end development as it empowers your design in knowing what is feasible during the design phase. It also makes communication with developers much easier regarding the responsive, animations, and interactions for instance. But it's a two-way street so finding developers that value design is also important.
Check out Flayks.com as a showcase project on the Exchange.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。