This site makes use of the GitHub GraphQL API for loading the repository list and information, an MDX-based blog, and Astro 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, university, or anyone I've collaborated with on projects and products.
This site is built with Astro and deployed on Vercel. Below is an incomplete list of features that this site makes use of.
- MDX blog & photo log - Written content and photography are both powered by MDX via Astro's content collections, with support for image captions, reading time estimates, and code highlighting via Shiki
- GitHub integration - Pinned repositories and profile data are pulled from the GitHub GraphQL API at build time and displayed on the
/codepage. - 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.
- XML sitemap - @astrojs/sitemap generates an XML sitemap for each page. According to Google, the most important field in the sitemap is the
lastmodfield - so we populate it using git commit dates, along with calculatedpriorityandchangefreqvalues, even though these may not be used by Google crawlers. - Responsive images - Astro's built-in image pipeline generates optimized, multi-density srcsets so that different displays are served appropriately sized images.
- Security & caching headers - The vercel.json file customizes response headers, including
Strict-Transport-Securityfor HSTS Preload functionality, security headers such asX-XSS-ProtectionandX-Frame-Options, and aggressivecache-controlheaders for static assets. - Self-hosted fonts - Fonts are hosted with the site and preloaded to increase performance.
All code is MIT Licensed (where applicable), so feel free to reuse what you find helpful. However, the files in content/, src/images/, and public/icons/icon-* are © Stephen Vondenstein - as they contain copyrighted photos and posts, you may not reuse anything therein without my written permission.
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.