Desktop of Samuel

react(4)

Portfolio Day 2023

Work In Progress

Portfolio Day 2023

Today is Portfolio Day and I want to share a recap of my personal website updates for the past year! Even though my work has mostly stay the same, my website has underwent small and incremental changes over the year. A few years ago, I created the UX Career Kit to assist designers in early career. I recently updated the list and added new resources to make it even more helpful. I have also integrated it into my website under the Resources section. Please feel free to share your thoughts and comm

How to Create a Scroll Tracking Table of Content in Gatsby?

Work In Progress

How to Create a Scroll Tracking Table of Content in Gatsby?

Have you visited some documentation and tutorial sites, that allow you to see which section are you reading on the side? If you want to improve the readability of your Gatsby website. In this article, I will share my process in creating an interactive table of content component that can respond to your scrolling. Let's take a look at the requirement: 1. Reader will be able to navigate section of content easily 2. Reader will be able to know their reading progress We will be using a package cal

Creating Gatsby v2 Website With Multiple Post Types

Work In Progress

Creating Gatsby v2 Website With Multiple Post Types

This is an update to my previous article Building Gatsby With Multiple Post Type, as I have rebuilt my whole site using GatsbyJS v2. I switched from Gatsby default starter to Gatsby Advanced Starter which save me some time setting up foundation of the website. (e.g. Tags, Category, SEO etc) But please note that this starter contains no UI or any style, you will need to build it on our own. If you are a designer with some front-end development experience, this is the place. I want setup my websit

Building Gatsby With Multiple Post Type

Work In Progress

Building Gatsby With Multiple Post Type

{/* <Alert status="info"><AlertIcon /><AlertDescription>This article was written using Gatsby v1.0. <a href="/gatsby-website-with-multiple-post-types/">Read my new article</a> for Gatsby v2.0.</AlertDescription></Alert> */} As a designer with no prior experience in React, starting Gatsby with a starter template is the easiest way. After that, adding bits and pieces by following online tutorials and Github threads are the parts that you learn, as you understand how to adapt others' code and revi