From 2be43cc479dfd4cfb621f14381330c708291e324 Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Sun, 28 Jul 2024 19:46:20 -0500 Subject: conversion from Zola to Weblorg --- content/blog/2020-12-27-website-redesign.md | 94 ----------------------------- 1 file changed, 94 deletions(-) delete mode 100644 content/blog/2020-12-27-website-redesign.md (limited to 'content/blog/2020-12-27-website-redesign.md') diff --git a/content/blog/2020-12-27-website-redesign.md b/content/blog/2020-12-27-website-redesign.md deleted file mode 100644 index 5df3d35..0000000 --- a/content/blog/2020-12-27-website-redesign.md +++ /dev/null @@ -1,94 +0,0 @@ -+++ -date = 2020-12-27 -title = "Redesigning My Website: The 5 KB Result" -description = "" -draft = false -+++ - -# A Brief History - -As a form of continuous learning and entertainment, I've been running a handful -of websites since 2016 when I took my first programming courses in college. I -maintain one main website, the place I consider the official website to -represent me. Under this site, I have a handful of subdirectories and -subdomains. - -One of the parts I've enjoyed the most about web development is the aspect of -designing an identity for a web page and working to find exciting ways to -display the site's content. Inevitably, this means I've changed the designs for -my websites more times than I could possibly count. Since I don't really host -anything on my main webpage that's vital, it allows me the freedom to change -things as inspiration strikes. - -Historically, I've relied on core utilities for spacing, components, and layouts -from [Bootstrap](https://getbootstrap.com) and added custom CSS for fonts, -accents, colors, and other items. I also tend to create sites with no border -radius on items, visible borders, and content that takes up the entire screen -(using whitespace inside components instead of whitespace around my components). - -# The Redesign Process - -About a week ago, I found myself wishing for a new design yet again. The prior -design was largely inspired by IBM's [Carbon Design -System](https://www.carbondesignsystem.com) and relied on jQuery, Bootstrap, -along with some compressed [.webp](https://en.wikipedia.org/wiki/WebP) images. - -To anyone who knows my preferences toward web design - and even in my personal -life - it should be no surprise that I immediately started looking for -inspiration on minimalism. While there are some decent minimalistic designs on -sites like -[Dribbble](https://dribbble.com/search/shots/popular/web-design?q=minimalism), -people seem to mostly discuss [brutalist web -design](https://brutalist-web.design) when you ask about minimalism. While -brutalist web design doesn't have to be minimal, it often is. - -I suppose, in a way, I did create a brutalist website since my HTML is semantic -and accessible, hyperlinks are colored and underlined, and all native browser -functions like scrolling and the back button work as expected. However, I didn't -think about brutalism while designing these sites. - -The new design followed a simple design process. I walked through the screens on -my blog and asked myself: "Is this element necessary for a user?" This allowed -me to first start by removing all javascript, which had the sole purpose of -allowing users to open a collapsed navbar on mobile. Replacing the collapsible -navbar allowed me to remove both jQuery and Bootstrap's javascript. - -Next, I removed things like author names (since I'm literally the only person -who will ever write on this site), multiple ways to click on a blog post card, -blog post descriptions, and the scroll-to-top button. It also helped to move all -categories to a single page, rather than have each category on its own page. - -The final big piece to finish the -"[KonMari](https://en.wikipedia.org/wiki/Marie_Kondo#KonMari_method)"-like part -of my process was to remove Bootstrap CSS in its entirety. However, this meant -pulling out a few very useful classes, such as `.img-fluid` and the default font -stacks to keep in my custom CSS. - -After removing all the unnecessary pieces, I was finally able to reorganize my -content and add a very small amount of custom CSS to make everything pretty. -This took a brief amount of time, effectively just consisting of me converting -`
` tags into things like `