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 }) {
name
price
country
days
start(formatString: "dddd MMMM Do, YYYY")
description {
description
}
journey {
day
info
}
images {
fluid {
...GatsbyContentfulFluid
}
}
}
}
`