This site makes use of the GitHub GraphQL API for loading the repository list and information, an MDX-based blog, and other Gatsby plugins/features to create a clean, full-featured personal portfolio.

This site is my personal space On The Line™. I showcase my projects, share life experiences, and shed light on things I find interesting - whether it be new photos I've taken, or a helpful new tool I've found. My written content is personal in nature and does not necessarily reflect the views of my employer, my University (Geaux Tigers), or anyone I've collaborated with on projects and products.

Gatsby, React and Vercel have a lot of advanced features available to help developers design a modern, high-performance static site. Below is a list of features that this site makes use of.

gatsby-plugin-mdx makes it easy to create a blog using MDX files as posts, and supports most remark plugins for additional features.

In addition to written posts, using gatsby-remark-images makes it simple to showcase a photography portfolio with a blog-like presentation.

Sharing links are populated with rich open graph data built from page titles and descriptions, along with open graph images genereated on-demand using @vercel/og. Information about this site's deployment for open graph image generation can be found here.

gatsby-plugin-sitemap generates an XML sitemap based on page information. According to Google, the most important field in the sitemap is the lastmod field. In gatsby-node.ts, we generate the information required to populate the lastmod field using simple-git, along with data for the priority and changefreq fields, even though these may not be used by Google crawlers.

gatsby-plugin-image is used to display blurred placeholder while lazily loading images, and generating multiple image sizes for different displays.

The vercel.json file was added to customize the response headers, such as:

• cache-control headers set according to gatsby guidance
• Strict-Transport-Security headers for HSTS Preload functionality
• Security headers such as X-XSS-Protection, X-Frame-Options etc.

Fonts are hosted with the site and preloaded in gatsby-ssr.tsx to increase performance.

Reading time estimates are generated for each blog post using the reading-time package in gatsby-node.ts.

GitHub profile data is made available on the /code page using gatsby-source-graphql to access the GitHub GraphQL API.

Feel free to review the code and reuse what you feel is appropriate. However, please respect that the files in the following directories are © Stephen Vondenstein. As they contain copyrighted photos and posts, you may not reuse anything therein without my written permission:

• content/
• src/images/

All other directories and files are MIT Licensed (where applicable).

NOTE: I would love it if this code inspires your own portfolio, helps you solve a problem or implement a feature, but I would greatly appreciate if you did not make exact clones of this site.