Read on Twitter
I thought I'd do a little technical thread about this as it wasn’t built from scratch but on top of great technologies and open source libraries 
Let’s go! #webdev https://twitter.com/raphaelameaume/status/1329413648167604224
Let’s go! #webdev https://twitter.com/raphaelameaume/status/1329413648167604224
The site is built using the static site generator @eleven_ty which was a breeze to use!
Thanks to @Netlify I was able to deploy updates with just a single push to a specific git branch. Such a relief when you don't know much about devops 
Each page has its own CSS file which is inlined in production mode and loaded on demand so you don’t load styles you don’t need to see. My current stack can build Sass with multiple entries points so I just had to create one file per page 
Javascript is bundled, tree-shaked and chunked with esbuild. It’s so fast it doesn’t make sense and I don’t want to use another bundler ever again. It takes 400ms to build the whole site. https://esbuild.github.io/
The client-side routing is handled with a custom library called "lemonade-router" and inspired by Barba.js. It handles dynamic imports so it loads only the javascript you need for each page. It’s still a work in progress but it’s on Github here https://github.com/raphaelameaume/lemonade-router
The site is animated with my library « lemonade-spring » https://github.com/raphaelameaume/lemonade-spring .
I also wrote a custom tween engine not released yet, not as smart as GSAP but similar in its API and just 150 LoC. Still needs a bit of work and proper documentation though
I also wrote a custom tween engine not released yet, not as smart as GSAP but similar in its API and just 150 LoC. Still needs a bit of work and proper documentation though
I like to animate interruptible animations (like mouse interactions) with springs now as it feels a bit more realistic. I use ease-based animations for the rest. Springs also add a fun shaky feeling
Smooth scroll is also custom made (sorry @LocomotiveMTL). It uses a simple trick to keep the native scrollbar and related behaviour. A bit hacky but it doesn't completely break the keyboard navigation either 
You can also navigate the site with the keyboard as I handled styles for the pseudo class :focus-visible thanks to a polyfill. So you can find outline:0 in my styles but it stills shows focus!
The favicon supports the (prefers-color-scheme) media query thanks to this clever guide by @baker_______ https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df
The site has basic support for the Reduced Motion media query but I think there’s room for improvements here as a lot of things are still animated.
I use a lot of CSS variables which is the best thing that happened to CSS in a while.
It's really great for responsive but I use them extensively for animations as it allows you to compose transform easily and they can be set through Javascript!
Here’s an example:
It's really great for responsive but I use them extensively for animations as it allows you to compose transform easily and they can be set through Javascript!
Here’s an example:
The logo animations were made by @philippenveu and exported for Lottie. I recently discovered the .lottie extension but the compression gain on animations files wasn’t enough to justify the added weight of the parser. Might want to take a look though! https://dotlottie.io/
I used OGL for the webgl part which is like a lower-level and lightweight Three.JS. If you have experience with three you should take a look, it's amazing https://github.com/oframe/ogl/
And I think that’s it (and that sums up why I love working on the web 
)!
Have a great day
)!Have a great day
