Skip to content
Sanity
Get started
  • Sanity Studio - Flexible editing environment
  • Content Lake - Real-time database
  • Developer experience - Tooling you love
  • Structured content - The philosophy behind Sanity
  • Review changes - View edits & rollback instantly
  • Image pipeline - On-demand transformations
  • E-commerce - Better shopping experiences
  • Marketing sites - Control your story
  • Products & services - Innovate and automate
  • Mobile apps - Content backend for every OS
  • Aether - Unique digital shopping experience
  • Morning Brew - Omnichannel media distribution
  • InVision - Delivering exceptional customer experiences
  • DataStax - Personalization for global audience
  • React
  • Gatsby
  • Next
  • Nuxt
  • Eleventy
  • Netlify
  • Vercel
  • Algolia
  • Documentation
  • Reference
  • Guides
  • Resource library
  • Headless CMS
  • Tools & plugins
  • Project showcase
  • Schemas & snippets
  • Agency partners
  • Technology partners
  • Get support
  • Share your work
  • 5 Disadvantages Of Wordpress That Are Holding You Back
EnterprisePricing
Contact salesLog inGet started
Updated September 15th 2021

Community Interview: Flayks portfolio project

Félix Péault, talks about creating his portfolio site, Flayks with Sanity and Svelte, inspiration, design, and collaboration.

Lo Etheridge

Developer Relations and Strategic Community DEI Efforts at Sanity.io

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.

Meet Félix Péault

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.

Question #1 - Tell us about the journey to make flayks.com? Who do you make it with? What were your inspirations/motivations for creating the site?

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.

Question #2 - Typically, portfolio websites do not take a year to make, did you and your colleagues experience setbacks or blockers? If so, what were they and how did you overcome them?

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!

Question #3 - Can you talk about the tech used for the site? Why did you decide to use Sanity and SvelteKit?

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!

Question #4 - What was the most difficult part about building flayks.com

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.

Question #5 - What do you like or love about being a front-end developer?

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.

Platform

Structured ContentDeveloper experienceContent LakeSanity StudioSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

Documentation
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
Resource library
  • Agency partners
  • Technology partners
  • Blog Template
  • Personal Website Template
  • Developer Portfolio Templates
  • All Templates
Case Studies
  • Headless CMS
  • What is an API CMS
  • Static Sites 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • What is a DXP?
  • Typescript 101
  • Content as a Service
  • Ecommerce SEO
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServiceAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023