estepanov/second-personal-site

[ARCHIVED] The new and improved personal site.

Hey there!

I bootstrapped this project with Gatsby.js. All my written (and job info) content lives in ~src/content. Github commit data is pulled at build time using a GraphQL query passed to gatsby-source-github-api.

The backend for this site is a TypeScript Serverless project which can be found here https://github.com/estepanov/personal-site-api

🗒️ Tech Stack

• Gatsby
  • Configured with pagination for list pages
  • Uses .md and .mdx files as data sources
  • image processing by gatsby-remark-images
• TypeScript
• ESLint (with custom ESLint rules)
• Markdown (Remark) and MDX rendering
  • frontmatter content descriptions
  • Code syntax highlighting by prism
• CSS-in-JS powered by emotion
• Theme graphing by theme-ui
• GitHub GraphQL API for commit history graph data
  • graph data helpers from d3-scale
• Netlify CMS for content editing and authoring
• SEO related fields managed with react-helmet
• Date and time formating/parsing powered by dayjs
• Environment variables loaded with dotenv
• Forms managed using react-hook-form
  • yup form schema and validation
  • hCaptcha limit spam and bots in forms
• Network requests using axios

Overview

Content

All content used to generate pages at build time lives in ./src/content. Currently there are three types of content conigured:

pages

Pages are generic pages that exist to hold any type of content that is not a blog post, project, or work experience. An example is the Contact page available at /contact. Gatsby builds /contact becuase of ./src/content/contact.mdx.

Projects

Projects are things I have worked on. ./src/content/projects

Blog posts

./src/content/blog

Work experience

./src/content/work

JSX pages

./src/pages/

Components

./src/components/

🚀 Quick start

A nodejs >= 6.0.0 setup with yarn is recommended.

1. Install Gatsby

   Install gatsby-cli package globally on your machine.

   # using NPM
   npm install -g gatsby-cli
   
   # using YARN
   yarn global add gatsby-cli

2. Start developing.

   Move to project's directory.

   cd project-name/

   Start your site.

   # using yarn
   yarn start

   Open source code using your favorite IDE/Text editor and navigate to src/ directory, this is where your application live.