My Showcase List

December 26, 2019

All sites are getting built with Gatsby, React, JavaScript, CSS, Bootstrap, SASS and/or Styled Components etc. The content is coming from the local markdown files, or external CMS (Content Management System such as Contentful, DatoCMS). Netlify Lambda Functions are being used for dynamic/external API calls such as Stripe payment checkout etc.

My First Gatsby Site

I deployed this blog site on both Netlify and Surge. On Netlify, I purchased a DNS to get a short url like a regular website. While building this site and adding new features, I'm also learning new skills in the meantime.

Here is a summary of the list :

  • Lerned markdown syntax & the practice to write something everyday
  • Added markdown filtering by categories
  • Added separate renderer for code blocks/syntax high lighting
  • Added Navigation with additional pages
  • Added Sticky Navbar which always shows on top while scrolling the content
  • Added Dark Mode with the plugin gatsby-styled-components-dark-mode
  • Changed fonts using npm packages (such as typeface-lato)
  • Added the ripple effects on button hovering
  • Added contact form with a serverless backend Formspree

A Photo Site

Trip's Photos : I built this site with a codebase from a gatsby tutorial for page transitions which tried to recreate those beautiful page transitions in Pentagram website with Gatsby as you navigate from project to project. The tutorial used DatoCMS to manage the remote data content for projects with text and photo fields. I added some animation using react-spring & react-gesture-gallery, modified some layout with styled components, and updated some page transitions.

I had several vacation trips to Taiwan, South Korea, and National Parks in US for 2019. When people wanted to see my trip's photos, I found it hard to show the photos from my iphone in an effective way in a short time. That's the motivation to build this website which can be shared with friends with populated info & photos from an external CMS.

A Tour Site

Tour Site : This site provides the tours exploration. Each tour has information populated in Contenful with images and description. Gatsby provides a contentful plugin which can be used to retrieve data from Contenful via GraphQL. For demonstration, I uploaded some images and information into Contenful for touring national parks, and sight seeing from Vegas, Salt Lake City, and Los Angeles.

Example to query contenful via graphql

export const query = graphql`
  query($slug: String!) {
    tour: contentfulTour(slug: { eq: $slug }) {
      start(formatString: "dddd MMMM Do, YYYY")
      description {
      journey {
      images {
        fluid {

A Coffee Shop Site (in progress)

coffee shop

A Restaurant Site (in progress)

Restaurant Web

A Portfolio Site (in progress)

Portfolio Site