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.
Live Site
❓ 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-controlheaders set according to gatsby guidanceStrict-Transport-Securityheaders for HSTS Preload functionality- Security headers such as
X-XSS-Protection,X-Frame-Optionsetc.
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.