iamtimsmith.com

This repo is the blog/portfolio website for Software Engineer Tim Smith. It is built using TypeScript, React, Gatsby, and Styled Components.

🚀 Quick start

1. Clone this repo.

   git clone https://github.com/iamtimsmith/portfolio-2021.git

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd portfolio-2021/
   yarn dev

3. Open the source code and start editing!

   • Your site is now running at http://localhost:1125!
   • Your GraphQL Playground is running at http://localhost:1125/___graphql

🧐 What's inside?

A quick look at the files and directories in the src folder.

src/
├── api/
├── components/
├── images/
├── pages/
├── posts/
├── styles/
├── templates/
├── types/
├── utils/
└── modules.d.ts

1. api/: This directory contains any api endpoints which should be used by Netlify like lambdas.

2. components/: This directory will contain all of the reusable components on the site.

3. images/: This folder contains all the images for the website. Images in this directory are processed and optimized by Gatsby.

4. pages/: This is a folder which holds all of the static pages on the site. These can be written as React components or using MDX in a .md file.

5. posts/: This folder contains all of the blog posts for the site. Blog posts are written using MDX in .md files.

6. styles/: This directory contains global styles for the site. It also holds any available themes for the sites.

7. templates/: This folder holds the templates which are used on the site. These are used for things like pages, posts, blog index, search, and tags pages.

8. types/: This folder contains types and interfaces for anything outside components. Types for components are contained within the component.

9. utils/: This folder holds utility functions or tools used around the site.

10. modules.d.ts This is a file which declares libraries not included in @types as modules to prevent errors.

Themes

This site uses themes which can be changed by the user. The variables for each theme can be found in the /styles/themes folder.

• For color swatches, use Smart Swatch
• To check colors for accessibility, use ColorSafe