This site was built using GatsbyJS. Specifically, I used a Gatsby starter called the gatsby-starter-blog, which allows you to write blog posts in Markdown. The documentation for Gatsby is really great, and I encourage anyone who is curious to take a look.
I tried to keep styles close to the components using them. There are global stylesheets for styles that are more global in nature (for commonly used elements) and media queries. When it comes to styling, the first place to look for styling is going to be in file for the component in question. The project also includes the use of TypographyJS, but it is used minimally and really only to take advantage of one of its dependencies. In the future I'd like to build a plugin that encapsulates the functionality I wanted out of TypographyJS. Font styling is defined in the global.css file. This site also used SVGs generated by SVG Backgrounds. A plugin was used to allow pre-fetching of the Google Fonts I used in this project.
Blog posts need specific metadata to be parsed correctly. Each post must include the following fields: title, author, date in format 'YYYY-MM-DD' (which will be parsed to a more human-readable date format), a short description, and a slug for the blog post. These are provided according to YAML formatting for section markers, like so:
---
title: 'Some title!'
author: 'Some Author'
date: '2020-04-20'
description: 'A short description!'
slug: 'some-title'
---The author field will automatically default to 'Anthony Pogliano', as this is my blog, but the field and an empty string must still be provided or the blog posts will not be correctly parsed by the renderer. The description field can also be left as an empty string and a description will be generated from the content of the blog. This is not as desirable, however, because the automatically generated description will include any headings, which makes things read kinda funny.
As I built this I was continually looking around at other people's blogs and stealing ideas I liked. While I am sure I won't get every source of inspiration here, I wanted to have a place to give thanks to those whose ideas I ripped off. If you're reading this, please give their sites a visit and see the awesome work they do!
- Rekhchand Sahu has a really wonderful site and I really dug the layout of his "about me" page. I like how minimal his site is, but not "bare". Some of his UI interactions are really nifty.
- Brittany Chiang has a really fantastic site that many people reference when compiling examples of "good" developer sites. I tried imitating her layout, and poked around a good bit in some of her componentry to figure out her approach to certain things, namely mobile navigation.
- Paul Scanlon built a really neat site using Gatsby. I really aspire to the sort of textually-oriented minimalism his site seems to embody. While I can't say that I have (as of yet) borrowed to heavily from any of his designs, I am inspired by the theme, layout, structure, and organization of his site. I hope that once I have a little more to include in mine, it will resemble Paul's site!