From fdd80eadcc2f147d0198d94b7b908764778184a2 Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Mon, 29 Apr 2024 14:18:55 -0500 Subject: format line wrapping and fix escaped characters --- content/blog/2020-12-27-website-redesign.md | 153 +++++++++++++--------------- 1 file changed, 72 insertions(+), 81 deletions(-) (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 index 9224348..cb34ca0 100644 --- a/content/blog/2020-12-27-website-redesign.md +++ b/content/blog/2020-12-27-website-redesign.md @@ -7,98 +7,89 @@ 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). +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. +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 +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. +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 -`