The GitHub Repository
If you'd rather not read about the site and would prefer to take a look at the source code, the GitHub repo for this project is at https://github.com/IHSten/ihsten-personal-site. Feel free to take a look and fork as desired. It should provide a pretty good portfolio/blog framework running on Angular and Contentful.
The explanation behind all the... white.
As a web developer, you don't need a personal site. It helps to have one, to show that you're actually capable of doing some of the things that you're capable of on your resumé, but if you're just putting together a portfolio page and maybe a blog, you're really just showing off your design skills. One important thing to note about me is,
I have no design skills.
Give me a page layout to follow with a general idea of functionality, dimensions, and provided icons and I can do it, but, as you've probably guessed by the design of this site, give me free reign over a page that's purely to provide content and you'll probably end up with something minimalistic but functional. Specifically, on this site, I wanted the user to feel like they were either reading a newspaper or a cli terminal. Something that on first glance looks completely plain, but has a bit more depth and intricacy to it on further examination. I hope I succeeded, but for those starting to develop a headache, I am planning on adding a dark mode soon.
Technologies Used
I knew for a portfolio website I could have gotten away with a static HTML/CSS page for the homepage. All it is is an image, some text, and a few CSS animations. That being said I spent some time using Angular at Tangam Systems Inc. and enjoyed working with it significantly more than React, so I decided to use it minimally for the homepage but allow myself the ability to expand later on into a fancier portfolio site or blog (like you're reading now).
When I decided I wanted to make a blog, my original plan was to go with a PostgreSQL server hosted on Heroku or something similar in order to serve up articles stored in a database. At the time, I figured I could write the articles in Markdown, and write or find some markdown renderer component for Angular. Once the articles were written I could automatically upload them to the PostgreSQL server, where they would then be queried by the blog automatically. This would limit my media availability in the articles, but I wouldn't be reliant on any cloud services, something which bothers me at times for critical/information-sensitive applications.
Fortunately, my blog is not a critical application, and I wanted it to be as maintenance free as possible. In comes Contentful CMS which I am now using for article hosting and publishing. I had a number of content management system choices to go with, including Strapi, ButterCMS, and more, but chose Contentful for its generous free plan and industry use (Although I may experiment with Strapi in the future due to its ability to self-host). They're not associated with the site in any way beyond me using their free plan to serve articles, but I did find the process very streamlined and easy to get started with.
Between Angular and Contentful, there's not a whole lot much more to talk about regarding the technologies used for the site. Angular serves up the frontend, Contentful stores and serves articles as required.
The Environmental Variable Hack
If you take a look at the source code for this site, you'll notice something strange regarding the environmental variable setup. I opted to not go for some kind of env.js file and service and instead created two files in src/scripts which populate Angular's src/environments files on startup. These scripts simply pull the environmental variables from, well, the environment the server is running on, and populate Angular's environment before the server is started. This allows me to publish the code on GitHub without ever having to worry about leaking my Contentful tokens, and this can be easily expanded into the future in case I add more third-party functionality to the site.
Future Plans
For now, I'm happy with the state the site is in. I'm able to easily add new articles, including retroactively adding articles from older dates for older projects. There's a list of small changes I'll probably make shortly after publishing this article, but if you're interested in seeing those, feel free to go to the GitHub repository and check any commits that catch your interest. For now, thanks for reading.