Skip to content

Fast, modern portfolio and blog powered by Gatsby

License

Notifications You must be signed in to change notification settings

vondenstein/portfolio

Repository files navigation

Vondenstein

vondenstein.com

📸 💻 🎸

Fast, modern portfolio and blog powered by Gatsby

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.

❓ About This Project

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.

💡 Features

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.

MDX Blog

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

Photography Portfolio

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

Open Graph Data

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.

Compliant XML Sitemap

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.

Responsive Images

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

Vercel Headers

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.

Font Preloading

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

Reading Time Estimates

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

GitHub Integration

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

📝 License

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.