Gatsby-plugin-layout is a great way to have a persistent layout component that stays mounted between pages, but what if we also want to pass props from our layout to pages/components and vice-versa? There are a few ways to go about it, but on a recent smaller project I opted for…

Framer Motion is such an intuitive and easy-to-use animation library that I’m honestly a little surprised it doesn’t have built-in tracking for whether a motion component is in the viewport. It can tell us whether a component is present in the React tree or how far we’ve scrolled through an…

In December 2018, Google changed their autoplay policy regarding web audio, requiring the user to interact with the page before any audio is played. There are some exceptions to this based on user preferences (and also some potential workarounds involving the use of iframes), but in the interest of having…

A letter-by-letter text reveal can be a fun way to highlight information you want the user to read, and is easily achievable in React using variants in Framer Motion.

Awwwards First up is a well-known source of inspiration for frontend developers everywhere. Awwwards highlights the best of the best when it comes to web design, and their collections page has inspiration for every type of element you could want on your site. 2. Lapa

While creating my first portfolio I spent a lot of time browsing other developers’ portfolios as a source of inspiration. Here are five I found particularly cool: Lewis Atkins Lewis’s portfolio uses a fun concept for a landing page, allowing you to draw on his face before exploring the rest…

Framer Motion is a great way to add animation to a React project, and Gatsby Link makes linking between pages a breeze. In this article, I’ll show you how I combined the two to create the page transitions I used on my portfolio site. Start by installing Framer Motion and…

Note: this article was adapted from Wrong Akram’s video tutorial. If you find this content helpful be sure to check out his channel. Skew scrolling is an easy way to give your website’s design a quick boost. A demo of the project we’re going to create can be seen here…

Part 2 of a quick reference guide to some basic Sass concepts. Sass comes equipped with built-in modules that contain useful functions. Here are some examples from the sass:color module. fade-out takes a number between 0 and 1 and decreases opacity by that amount: