diff --git a/404.html b/404.html
index 3c59fc9a..a68a0fca 100644
--- a/404.html
+++ b/404.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,13 +228,12 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <h2 class="heading--main text-center">Oops! Content not found.</h2>
+        <main id="content">
+            <h2 class="heading--main text-center">Oops! Content not found.</h2>
 
 <p class="text-center">Go back to <a href="/">home page</a>.</p>
 
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -274,10 +272,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -332,7 +327,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -342,14 +337,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/about/index.html b/about/index.html
index ef176208..5ef1a8fe 100644
--- a/about/index.html
+++ b/about/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,9 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <article class="bio prose"><h1 class="heading--main">About Me</h1>
-<p>Hi, I am Helen Chong (they/she). I am a front-end web developer with 8 years of working experience as a graphic designer. I specialise in front-end web development.</p>
+        <main id="content">
+            
+<header class="main__header">
+    
+
+    <h1 class="heading--main">About</h1>
+
+    
+</header>
+
+<div class="container">
+    
+		<div class="prose">
+			<p>Hi, I am Helen Chong (they/she). I am a front-end web developer with 8 years of working experience as a graphic designer. I specialise in front-end web development.</p>
 <p>I intend to transfer my graphic design experience into web design and web development expertise, as I love to code and build sites and apps to solve problems. I have a particular interest on responsive, accessible, inclusive and scalable design to create the best user experience.</p>
 <h2>My Certificates:</h2>
 <ul>
@@ -241,9 +251,30 @@ <h2>My Certificates:</h2>
 <li>Chingu Voyage #46 <a href="/assets/documents/Chingu-Voyage46-Completion-Cert.pdf">Certificate of Completion</a> (PDF file)</li>
 <li><a href="https://cs50.harvard.edu/certificates/8cb0f5a4-4107-4df6-8abc-cfab3a437367">CS50’s Introduction to Computer Science 2024</a> certificate (PDF file)</li>
 </ul>
-</article>
-            </main>
-        </div>
+
+		</div>
+    
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -282,10 +313,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -340,7 +368,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -350,14 +378,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/accessibility/index.html b/accessibility/index.html
index 60f4dbf0..5f0e5b9d 100644
--- a/accessibility/index.html
+++ b/accessibility/index.html
@@ -34,7 +34,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -46,8 +46,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -232,12 +231,21 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-<article class="prose">
-    <h2 class="heading--main">Accessibility</h2>
+        <main id="content">
+            
+<header class="main__header">
+    
+
+    <h1 class="heading--main">Accessibility</h1>
 
-    <p>I take accessibility seriously. I want every visitor to my website to have the best possible experience of browsing my website. Therefore, I strive to design this website to be accessible, including to disabled and neurodivergent people, by aiming to meet <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2.2 Level AA standards</a>.</p>
+    
+</header>
+
+<div class="container">
+    
+		<div class="prose">
+			
+<p>I take accessibility seriously. I want every visitor to my website to have the best possible experience of browsing my website. Therefore, I strive to design this website to be accessible, including to disabled and neurodivergent people, by aiming to meet <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2.2 Level AA standards</a>.</p>
 <p>I use the following tools to test my site for accessibility:</p>
 <ul>
 <li>WebAIM's <a href="https://wave.webaim.org/extension/">WAVE Browser Extension</a></li>
@@ -247,10 +255,30 @@ <h2 class="heading--main">Accessibility</h2>
 <p>Feedbacks and suggestions for improving the accessibility of this site are welcome. You can <a href="mailto:contact@helenchong.dev">contact me via email</a>.</p>
 
 
-    <p>(This accessibility statement was last updated on 28 May 2024)</p>
-</article>
-            </main>
-        </div>
+<p>(This accessibility statement was last updated on 28 May 2024)</p>
+		</div>
+    
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -289,10 +317,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -347,7 +372,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -357,14 +382,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/assets/css/blog.css b/assets/css/blog.css
index 12140cc2..287cf8f8 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -23,5 +23,7 @@
     padding-left: 0;
     padding-top: 0.8em;
     margin-top: 2.5em;
+    display: grid;
+    gap: 0.7em;
     border-top: 0.1em solid var(--clr-slate-600);
 }
diff --git a/assets/css/components.css b/assets/css/components.css
index 4480ea69..827ddc7c 100644
--- a/assets/css/components.css
+++ b/assets/css/components.css
@@ -19,17 +19,14 @@
     outline: 0.2em solid var(--clr-accent-600);
 }
 
-/* Index headings */
-.heading--index {
-    margin-bottom: 2rem;
-    font-size: 2.5rem;
-    text-align: center;
-}
-
 /* Profile Styles */
 .profile {
     display: flex;
     flex-direction: column;
+    justify-self: center;
+    align-items: center;
+    font-size: var(--sz-home-txt);
+    max-width: 64rem;
 }
 
 .profile__image-wrapper {
@@ -86,6 +83,21 @@
     }
 }
 
+/* Home page sections */
+.section--home {
+    padding: 2em 0;
+    display: grid;
+    place-content: center;
+    font-size: var(--sz-home-txt);
+}
+
+/* Index headings */
+.heading--home {
+    margin-bottom: 2rem;
+    font-size: 2.5rem;
+    text-align: center;
+}
+
 /* Skills Styles */
 .skills__list {
     list-style: none;
diff --git a/assets/css/content.css b/assets/css/content.css
new file mode 100644
index 00000000..82a97d65
--- /dev/null
+++ b/assets/css/content.css
@@ -0,0 +1,76 @@
+main,
+.main__header,
+.container {
+    display: grid;
+}
+
+main {
+    width: 100%;
+}
+
+.container {
+    gap: 1rem;
+}
+
+.main__header {
+    padding: 1rem var(--sz-main-padding);
+    text-align: center;
+}
+
+.prose {
+    font-size: var(--sz-main-txt);
+    color: var(--clr-slate-600);
+    padding: 0 var(--sz-main-padding);
+}
+
+.prose > * + :not([class]) {
+    margin-top: var(--sz-paragraph-margin);
+}
+
+.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
+    margin-top: 2em;
+}
+
+.prose ul:not([class]), .prose ol:not([class]){
+    display: grid;
+    gap: 0.7em;
+}
+
+.prose ul ul, .prose ol ol,
+.prose ul ol, .prose ol ul {
+    margin-top: 0.7em;
+}
+
+.bio {
+    max-width: 65ch;
+}
+
+.right-sidebar {
+    padding: 1.2em clamp(1em, 5%, 1.5em);
+}
+
+.sidebar--sticky {
+    position: sticky;
+    top: 6.5em;
+}
+
+/* Desktop main content layout */
+@media only screen and (min-width: 60rem) {
+    .container {
+        grid-template-areas: 'leftbar article rightbar';
+        grid-template-columns: 1fr min(80ch,60vw) 1fr;
+    }
+
+    .prose {
+        grid-area: article;
+        padding: 0 var(--sz-main-padding) 2em;
+    }
+
+    .left-sidebar {
+        grid-area: leftbar;
+    }
+
+    .right-sidebar {
+        grid-area: rightbar;
+    }
+}
diff --git a/assets/css/general.css b/assets/css/general.css
index 2a36334c..ab57ca23 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -4,7 +4,6 @@ html {
 }
 
 body {
-    font-size: 1.15rem;
     color: var(--clr-txt-default);
     display: flex;
     flex-direction: column;
@@ -18,11 +17,27 @@ h1, h2, h3 {
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
     color: var(--clr-accent-600);
-    margin-bottom: 0.8em;
 }
 
-* + h2, h3, h4, h5, h6 {
-    margin-top: 2em;
+h1 {
+    font-size: var(--sz-h1);
+}
+
+h2 {
+    font-size: var(--sz-h2);
+}
+
+h3 {
+    font-size: var(--sz-h3);
+}
+
+h2:has(+ *[class]),
+h3:has(+ *[class]) {
+    margin-bottom: 0.5em;
+}
+
+h4 {
+    font-size: var(--sz-h4);
 }
 
 code {
@@ -49,11 +64,6 @@ pre > code {
     white-space: pre;
 }
 
-main {
-    display: flex;
-    flex-direction: column;
-}
-
 a {
     color: var(--clr-accent-700);
     font-weight: 700;
diff --git a/assets/css/global.css b/assets/css/global.css
index 6021235c..9f6049fd 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -18,6 +18,15 @@
 
     --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
         0 4px 6px -4px rgb(0 0 0 / 0.2);
+
+    --sz-main-txt: 1.2rem;
+    --sz-home-txt: 1.15rem;
+    --sz-h1: clamp(2rem, 1rem + 5vw, 3rem);
+    --sz-h2: clamp(1.55rem, 1rem + 3vw, 2.15rem);
+    --sz-h3: clamp(1.55rem, 1rem + 3vw, 1.8rem);
+    --sz-h4: clamp(1.4rem, 1rem + 3vw, 1.6rem);
+    --sz-main-padding: clamp(1em, 5%, 1.5em);
+    --sz-paragraph-margin: 1.15em;
 }
 
 /* ------------------- */
diff --git a/assets/css/projects.css b/assets/css/projects.css
index 5382eb20..68c42d33 100644
--- a/assets/css/projects.css
+++ b/assets/css/projects.css
@@ -1,9 +1,5 @@
 /* Project Styles */
 
-.projects {
-    margin: 2rem auto 4rem auto;
-}
-
 .project__heading {
     padding: 1rem 0;
     font-size: 2.5rem;
diff --git a/assets/css/prose.css b/assets/css/prose.css
deleted file mode 100644
index 342ef214..00000000
--- a/assets/css/prose.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/* Main Heading Style */
-.heading--main {
-    padding: 1rem 0;
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: var(--clr-accent-600);
-}
-
-/* Prose Styles */
-.prose {
-    font-size: 1.125rem;
-    color: var(--clr-slate-600);
-}
-
-.prose h3 {
-    font-size: 1.5rem;
-    margin: 1.7em 0 0.7em;
-}
-
-.prose ul {
-    margin-bottom: 1rem;
-    display: grid;
-    gap: 0.3em;
-}
-
-.prose ul > li {
-    position: relative;
-    padding-left: 1em;
-}
-
-.prose p {
-    margin-bottom: 1.25rem;
-}
-
-/* About Styles */
-
-.bio {
-    margin: 0 auto 4rem auto;
-    max-width: 65ch;
-}
diff --git a/assets/css/utility.css b/assets/css/utility.css
index 834f44a8..c35fdd09 100644
--- a/assets/css/utility.css
+++ b/assets/css/utility.css
@@ -1,19 +1,22 @@
 /* Utility Classes */
 
-.container {
-    max-width: 64rem;
-    margin: 0 auto;
-    padding: 0 1.5rem;
-}
-
-.content {
-    flex: 1 0 auto;
+/* Main Heading Style */
+.heading--main {
+    padding: 1rem 0;
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--clr-accent-600);
 }
 
 .text-center {
     text-align: center;
 }
 
+.grid-center {
+    display: grid;
+    place-content: center;
+}
+
 .text-bold {
     font-weight: bold;
 }
diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html
index a499170a..b48d0474 100644
--- a/blog/categories/100-days-of-code/index.html
+++ b/blog/categories/100-days-of-code/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;100 days of code&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "100 days of code"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "100 days of code"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
index e8b204ef..27291150 100644
--- a/blog/categories/about-this-blog/index.html
+++ b/blog/categories/about-this-blog/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;about this blog&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">2 Posts Filed Under "about this blog"</h2>
 
 
@@ -333,8 +271,52 @@ <h2 class="heading--main">2 Posts Filed Under "about this blog"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -373,10 +355,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -431,7 +410,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -441,14 +420,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html
index 1ed02abe..99a8d565 100644
--- a/blog/categories/about-this-website/index.html
+++ b/blog/categories/about-this-website/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;about this website&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">3 Posts Filed Under "about this website"</h2>
 
 
@@ -343,8 +281,52 @@ <h2 class="heading--main">3 Posts Filed Under "about this website"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -383,10 +365,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -441,7 +420,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -451,14 +430,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
index 416bf1f4..496f9572 100644
--- a/blog/categories/cassette-beasts/index.html
+++ b/blog/categories/cassette-beasts/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;cassette beasts&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "cassette beasts"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "cassette beasts"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html
index d11f1634..226bdcc5 100644
--- a/blog/categories/cbpickaxe/index.html
+++ b/blog/categories/cbpickaxe/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;cbpickaxe&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "cbpickaxe"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "cbpickaxe"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html
index 796178cc..ca3bd5c2 100644
--- a/blog/categories/chingu/index.html
+++ b/blog/categories/chingu/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;chingu&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">2 Posts Filed Under "chingu"</h2>
 
 
@@ -333,8 +271,52 @@ <h2 class="heading--main">2 Posts Filed Under "chingu"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -373,10 +355,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -431,7 +410,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -441,14 +420,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/cs50/index.html b/blog/categories/cs50/index.html
index 989133b7..72f56e13 100644
--- a/blog/categories/cs50/index.html
+++ b/blog/categories/cs50/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;cs50&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">4 Posts Filed Under "cs50"</h2>
 
 
@@ -353,8 +291,52 @@ <h2 class="heading--main">4 Posts Filed Under "cs50"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -393,10 +375,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -451,7 +430,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -461,14 +440,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/cs50x/index.html b/blog/categories/cs50x/index.html
index 1054c4ed..c7216674 100644
--- a/blog/categories/cs50x/index.html
+++ b/blog/categories/cs50x/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;cs50x&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">4 Posts Filed Under "cs50x"</h2>
 
 
@@ -353,8 +291,52 @@ <h2 class="heading--main">4 Posts Filed Under "cs50x"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -393,10 +375,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -451,7 +430,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -461,14 +440,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/css/index.html b/blog/categories/css/index.html
index 079519ee..8aabebc3 100644
--- a/blog/categories/css/index.html
+++ b/blog/categories/css/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;css&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "css"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "css"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/eleventy/index.html b/blog/categories/eleventy/index.html
index 82776bae..dce31362 100644
--- a/blog/categories/eleventy/index.html
+++ b/blog/categories/eleventy/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;eleventy&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "eleventy"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "eleventy"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/flask/index.html b/blog/categories/flask/index.html
index da42b51c..94316cc4 100644
--- a/blog/categories/flask/index.html
+++ b/blog/categories/flask/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;flask&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">2 Posts Filed Under "flask"</h2>
 
 
@@ -333,8 +271,52 @@ <h2 class="heading--main">2 Posts Filed Under "flask"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -373,10 +355,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -431,7 +410,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -441,14 +420,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/freecodecamp/index.html b/blog/categories/freecodecamp/index.html
index 46c01751..250ba722 100644
--- a/blog/categories/freecodecamp/index.html
+++ b/blog/categories/freecodecamp/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;freecodecamp&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "freecodecamp"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "freecodecamp"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/github-pages/index.html b/blog/categories/github-pages/index.html
index 247707c6..1f9d291c 100644
--- a/blog/categories/github-pages/index.html
+++ b/blog/categories/github-pages/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;github pages&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "github pages"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "github pages"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html
index 19fd2489..912a2ec8 100644
--- a/blog/categories/github/index.html
+++ b/blog/categories/github/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;github&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "github"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "github"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/html/index.html b/blog/categories/html/index.html
index 1df4faa4..99a04d18 100644
--- a/blog/categories/html/index.html
+++ b/blog/categories/html/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;html&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "html"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "html"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/index.html b/blog/categories/index.html
index a3ff648f..249d384e 100644
--- a/blog/categories/index.html
+++ b/blog/categories/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,83 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                aria-current="page"
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+        <main id="content">
+            
+<header class="main__header">
+    
 
+    <h1 class="heading--main">Blog Post Categories</h1>
 
-<h2 class="heading--main">Blog Post Categories</h2>
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <ul>
 
 	
@@ -395,8 +331,52 @@ <h2 class="heading--main">Blog Post Categories</h2>
 </ul>
 
 <p>See all blog posts in the <a href="/blog/posts/">archive</a>.</p>
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    aria-current="page"
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -435,10 +415,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -493,7 +470,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -503,14 +480,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/javascript/index.html b/blog/categories/javascript/index.html
index 32298bc1..e313d11b 100644
--- a/blog/categories/javascript/index.html
+++ b/blog/categories/javascript/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;javascript&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "javascript"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "javascript"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/javascriptmas/index.html b/blog/categories/javascriptmas/index.html
index f9602723..0a4c261b 100644
--- a/blog/categories/javascriptmas/index.html
+++ b/blog/categories/javascriptmas/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;javascriptmas&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "javascriptmas"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "javascriptmas"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html
index 5aaaadc0..f29fa4c5 100644
--- a/blog/categories/python/index.html
+++ b/blog/categories/python/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;python&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">3 Posts Filed Under "python"</h2>
 
 
@@ -343,8 +281,52 @@ <h2 class="heading--main">3 Posts Filed Under "python"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -383,10 +365,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -441,7 +420,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -451,14 +430,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/react/index.html b/blog/categories/react/index.html
index 85befef1..b0a62c21 100644
--- a/blog/categories/react/index.html
+++ b/blog/categories/react/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;react&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">1 Posts Filed Under "react"</h2>
 
 
@@ -323,8 +261,52 @@ <h2 class="heading--main">1 Posts Filed Under "react"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -363,10 +345,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -421,7 +400,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -431,14 +410,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/scrimba/index.html b/blog/categories/scrimba/index.html
index 242aff51..b31b7247 100644
--- a/blog/categories/scrimba/index.html
+++ b/blog/categories/scrimba/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;scrimba&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">2 Posts Filed Under "scrimba"</h2>
 
 
@@ -333,8 +271,52 @@ <h2 class="heading--main">2 Posts Filed Under "scrimba"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -373,10 +355,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -431,7 +410,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -441,14 +420,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/categories/sql/index.html b/blog/categories/sql/index.html
index d5431945..0a3e3071 100644
--- a/blog/categories/sql/index.html
+++ b/blog/categories/sql/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,81 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+        <main id="content">
+            
+<header class="main__header">
+    
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+    <h1 class="heading--main">Blog Post Category: &quot;sql&quot;</h1>
 
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <h2 class="heading--main">3 Posts Filed Under "sql"</h2>
 
 
@@ -343,8 +281,52 @@ <h2 class="heading--main">3 Posts Filed Under "sql"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -383,10 +365,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -441,7 +420,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -451,14 +430,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/index.html b/blog/index.html
index c57ab8b6..1169d279 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,90 +228,25 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a aria-current="page" href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+        <main id="content">
+            
+<header class="main__header">
+    
 
+    <h1 class="heading--main">Blog</h1>
 
-<h1 class="heading--main">Helen Codes</h1>
+    
+</header>
 
-<section class="prose">
-    <p>Welcome to my tech and coding blog!</p>
+<div class="container">
+    
+		<div class="prose">
+			
+<p>Welcome to my tech and coding blog!</p>
 
-    <p>I created this blog to document my coding journey and talk about various tech topics.</p>
+<p>I created this blog to document my coding journey and talk about various tech topics.</p>
 
-    <p>Enjoy!</p>
-</section>
+<p>Enjoy!</p>
 
 <h2>Latest Posts:</h2>
 
@@ -352,8 +286,52 @@ <h2>Latest Posts:</h2>
 
 <p>See all blog posts in the <a href="/blog/posts/">archive</a>.</p>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a aria-current="page" href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -392,10 +370,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -450,7 +425,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -460,14 +435,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/1/index.html b/blog/posts/1/index.html
index e6777ba3..e7ebee16 100644
--- a/blog/posts/1/index.html
+++ b/blog/posts/1/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,83 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+        <main id="content">
+            
+<header class="main__header">
+    
 
+    <h1 class="heading--main">Blog Archive</h1>
 
-<h2 class="heading--main">Blog Archive</h2>
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <ul class="blog__postlist">
     
         <li>
@@ -359,8 +295,52 @@ <h2 class="heading--main">Blog Archive</h2>
         Next
     
 </p>
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -399,10 +379,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -457,7 +434,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -467,14 +444,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
index 20decf16..3ca3add7 100644
--- a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
+++ b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,107 +228,96 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">Welcome to Helen Codes</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 21 August 2023 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/about-this-blog">about this blog</a>
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
+            </p>
+            <p>🍿  1 min. read</p>
+        </div>
+    
+</header>
 
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
+<div class="container">
+    
+        <article class="prose">
+            <p>My name is Helen Chong. I am a self-taught developer with 8 years of working experience as a graphic designer.</p>
+<p>I created this blog to document my coding learnings and talk about various tech topics.</p>
+<p>You can check out <a href="https://helenclx.github.io">my portfolio website</a>.</p>
+<p>Enjoy!</p>
 
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
 
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
+            
+                    <ul class="blog__post--nextprev"><li>Next Post: <a href="/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/">Built A TickyBot Clone for Chingu&#39;s Solo Projects</a></li>
+                    </ul>
+            
+        </article>
+    
 
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
 
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+    
+</div>
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
     }
 
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
     }
 </style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">Welcome to Helen Codes</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 21 August 2023 by Helen Chong</p>
-    
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/about-this-blog">about this blog</a>
-        
-    </p>
-    <p>🍿  1 min. read</p>
-</section>
-
-<article class="prose">
-    <p>My name is Helen Chong. I am a self-taught developer with 8 years of working experience as a graphic designer.</p>
-<p>I created this blog to document my coding learnings and talk about various tech topics.</p>
-<p>You can check out <a href="https://helenclx.github.io">my portfolio website</a>.</p>
-<p>Enjoy!</p>
-
-</article>
-        <ul class="blog__post--nextprev"><li>Next Post: <a href="/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/">Built A TickyBot Clone for Chingu&#39;s Solo Projects</a></li>
-        </ul>
-
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -368,10 +356,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -426,7 +411,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -436,14 +421,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
index e7997eb4..473b144f 100644
--- a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
+++ b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,108 +228,97 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">Built A TickyBot Clone for Chingu&#39;s Solo Projects</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 24 August 2023 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/chingu">chingu</a>
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
+            </p>
+            <p>🍿  1 min. read</p>
+        </div>
+    
+</header>
 
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
+<div class="container">
+    
+        <article class="prose">
+            <p>On 11 August 2023, I decided to join <a href="https://www.chingu.io/">Chingu</a> after discovering its existence through the <a href="https://www.chingu.io/">Scrimba Podcast</a>, specifically <a href="https://scrimba.com/podcast/are-you-a-new-developer-follow-this-one-tip-with-scrimba-student-danny/">Episode 127</a>. I have learned coding since December 2022, and one of the challenges aspiring self-taught developers face is gaining practical experience that can prepare them for developer jobs, so when I discovered Chingu, I thought it could be an opportunity for me to gain experience in working in group developer projects, thus I registered on the platform and joined the Chingu community on Discord.</p>
+<p>The first step needed to start participating in Chingu's projects is to submit a solo project for approval. I chose to build a <a href="https://github.com/chingu-voyages/soloproject-tier1-tickybot-clone">TickyBot Clone</a> using HTML, CSS and vanilla JavaScript. On 21 August, I finished coding <a href="https://github.com/helenclx/TickyBot-Clone">my TickyBot Clone</a> and submitted the project to Chingu. On the next day, my solo project was approved by Chingu, to my great delight.</p>
+<p><img src="https://raw.githubusercontent.com/helenclx/TickyBot-Clone/main/screenshot-tickybot-clone.png" alt="Screenshot of my TickyBot clone"></p>
+<p>You can view my TickyBot Clone's <a href="http://helenchong.dev/TickyBot-Clone/">live site</a> and <a href="https://github.com/helenclx/TickyBot-Clone">GitHub repository</a>.</p>
+<p>My next step was to sign up for the next Chingu Voyage. I am looking forward to learning to work in a group developer project. Wish me luck!</p>
 
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
 
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-08-21-Welcome-to-Helen-Codes/">Welcome to Helen Codes</a></li><li>Next Post: <a href="/blog/posts/2023-09-10-CS50x-Week-7-Completed/">CS50x Week 7 Completed</a></li>
+                    </ul>
+            
+        </article>
+    
 
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
 
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+    
+</div>
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
     }
 
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
     }
 </style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">Built A TickyBot Clone for Chingu&#39;s Solo Projects</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 24 August 2023 by Helen Chong</p>
-    
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/chingu">chingu</a>
-        
-    </p>
-    <p>🍿  1 min. read</p>
-</section>
-
-<article class="prose">
-    <p>On 11 August 2023, I decided to join <a href="https://www.chingu.io/">Chingu</a> after discovering its existence through the <a href="https://www.chingu.io/">Scrimba Podcast</a>, specifically <a href="https://scrimba.com/podcast/are-you-a-new-developer-follow-this-one-tip-with-scrimba-student-danny/">Episode 127</a>. I have learned coding since December 2022, and one of the challenges aspiring self-taught developers face is gaining practical experience that can prepare them for developer jobs, so when I discovered Chingu, I thought it could be an opportunity for me to gain experience in working in group developer projects, thus I registered on the platform and joined the Chingu community on Discord.</p>
-<p>The first step needed to start participating in Chingu's projects is to submit a solo project for approval. I chose to build a <a href="https://github.com/chingu-voyages/soloproject-tier1-tickybot-clone">TickyBot Clone</a> using HTML, CSS and vanilla JavaScript. On 21 August, I finished coding <a href="https://github.com/helenclx/TickyBot-Clone">my TickyBot Clone</a> and submitted the project to Chingu. On the next day, my solo project was approved by Chingu, to my great delight.</p>
-<p><img src="https://raw.githubusercontent.com/helenclx/TickyBot-Clone/main/screenshot-tickybot-clone.png" alt="Screenshot of my TickyBot clone"></p>
-<p>You can view my TickyBot Clone's <a href="http://helenchong.dev/TickyBot-Clone/">live site</a> and <a href="https://github.com/helenclx/TickyBot-Clone">GitHub repository</a>.</p>
-<p>My next step was to sign up for the next Chingu Voyage. I am looking forward to learning to work in a group developer project. Wish me luck!</p>
-
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-08-21-Welcome-to-Helen-Codes/">Welcome to Helen Codes</a></li><li>Next Post: <a href="/blog/posts/2023-09-10-CS50x-Week-7-Completed/">CS50x Week 7 Completed</a></li>
-        </ul>
-
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -369,10 +357,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -427,7 +412,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -437,14 +422,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
index 498dc66c..43f5b355 100644
--- a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
+++ b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,111 +228,100 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">CS50x Week 7 Completed</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 10 September 2023 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/cs50">cs50</a>, 
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
+                    <a href="/blog/categories/cs50x">cs50x</a>, 
+                
+                    <a href="/blog/categories/sql">sql</a>
+                
+            </p>
+            <p>🍿  1 min. read</p>
+        </div>
+    
+</header>
 
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
+<div class="container">
+    
+        <article class="prose">
+            <p>On 8 September 2023, I completed <a href="https://cs50.harvard.edu/x/2023/weeks/7/">Week 7</a> of <a href="https://cs50.harvard.edu/x/2023/">CS50’s Introduction to Computer Science</a> (CS50x) course, by submitting the required assignments, <a href="https://cs50.harvard.edu/x/2023/labs/7/">Lab 7</a> and <a href="https://cs50.harvard.edu/x/2023/psets/7/">Problem Set 7</a>.</p>
+<p>Week 7 of the CS50x course revolved around SQL. Since I was focusing on learning about front-end web development, this was the first time I learned SQL and relational database. At first, I was worried about tackling this week's assignments due to my lack of familiarity to SQL.</p>
+<p>However, it turned out SQL and working on databases was more fun than I expected. I had a good time in writing out the SQL queries to solve this week's assigned problems. In particular, I found my new favourite assignment from CS50x in the <a href="https://cs50.harvard.edu/x/2023/psets/7/fiftyville/">Fiftyville</a> problem, which involved using SQL to solve a mystery of a theft of the CS50 Duck. I had a great deal of fun with the Fiftyville problem from start to finish, from writing my SQL queries and comments about my thought process in solving the mysteries, to narrowing down the suspects and eventually identifying the thief and their accomplice. Kudos to those who designed this fun and challenging assignment!</p>
+<p>Now that I am done with Week 7 of CS50x, I am ready to move on to next week, which will be about HTML, CSS and JavaScript — the languages I had spent the past eight months in learning and practicing through various courses outside CS50. CS50x Week 8 here I come!</p>
 
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
 
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/">Built A TickyBot Clone for Chingu&#39;s Solo Projects</a></li><li>Next Post: <a href="/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/">CS50x Week 8 Assignments Completed</a></li>
+                    </ul>
+            
+        </article>
+    
 
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
 
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+    
+</div>
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
     }
 
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
     }
 </style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">CS50x Week 7 Completed</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 10 September 2023 by Helen Chong</p>
-    
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/cs50">cs50</a>, 
-        
-            <a href="/blog/categories/cs50x">cs50x</a>, 
-        
-            <a href="/blog/categories/sql">sql</a>
-        
-    </p>
-    <p>🍿  1 min. read</p>
-</section>
-
-<article class="prose">
-    <p>On 8 September 2023, I completed <a href="https://cs50.harvard.edu/x/2023/weeks/7/">Week 7</a> of <a href="https://cs50.harvard.edu/x/2023/">CS50’s Introduction to Computer Science</a> (CS50x) course, by submitting the required assignments, <a href="https://cs50.harvard.edu/x/2023/labs/7/">Lab 7</a> and <a href="https://cs50.harvard.edu/x/2023/psets/7/">Problem Set 7</a>.</p>
-<p>Week 7 of the CS50x course revolved around SQL. Since I was focusing on learning about front-end web development, this was the first time I learned SQL and relational database. At first, I was worried about tackling this week's assignments due to my lack of familiarity to SQL.</p>
-<p>However, it turned out SQL and working on databases was more fun than I expected. I had a good time in writing out the SQL queries to solve this week's assigned problems. In particular, I found my new favourite assignment from CS50x in the <a href="https://cs50.harvard.edu/x/2023/psets/7/fiftyville/">Fiftyville</a> problem, which involved using SQL to solve a mystery of a theft of the CS50 Duck. I had a great deal of fun with the Fiftyville problem from start to finish, from writing my SQL queries and comments about my thought process in solving the mysteries, to narrowing down the suspects and eventually identifying the thief and their accomplice. Kudos to those who designed this fun and challenging assignment!</p>
-<p>Now that I am done with Week 7 of CS50x, I am ready to move on to next week, which will be about HTML, CSS and JavaScript — the languages I had spent the past eight months in learning and practicing through various courses outside CS50. CS50x Week 8 here I come!</p>
-
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/">Built A TickyBot Clone for Chingu&#39;s Solo Projects</a></li><li>Next Post: <a href="/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/">CS50x Week 8 Assignments Completed</a></li>
-        </ul>
-
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -372,10 +360,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -430,7 +415,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -440,14 +425,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
index 4ac3aadb..59d4cdb1 100644
--- a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
+++ b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,114 +228,103 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">CS50x Week 8 Assignments Completed</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 26 September 2023 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/cs50">cs50</a>, 
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
+                    <a href="/blog/categories/cs50x">cs50x</a>, 
+                
+                    <a href="/blog/categories/html">html</a>, 
+                
+                    <a href="/blog/categories/css">css</a>, 
+                
+                    <a href="/blog/categories/javascript">javascript</a>
+                
+            </p>
+            <p>🍿  1 min. read</p>
+        </div>
+    
+</header>
 
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
+<div class="container">
+    
+        <article class="prose">
+            <p>At last, I completed and submitted <a href="https://cs50.harvard.edu/x/2023/weeks/8/">Week 8</a> assignments of the CS50's Introduction to Computer Science (CS50x) course, including <a href="https://cs50.harvard.edu/x/2023/labs/8/">Lab 8</a> and <a href="https://cs50.harvard.edu/x/2023/psets/8/">Problem Set 8</a>.</p>
+<p>The eighth week of the CS50x is about HTML, CSS, JavaScript and how the internet works. I already have a good foundation in HTML, CSS and JavaScript since I started taking front-end web development courses on other platforms like freeCodeCamp and Scrimba since December 2022. Even then, I learned new things about how the internet works from the CS50x course.</p>
+<p>As for the assignments, I already completed and submitted Lab 8 on September 13, but it took almost two weeks after submitting Lab 8 for me to finally finish Problem Set 8, because I was struggling to come out of ideas about what to put on my pages to meet CS50x's requirement. I was relieved when I finally finished Problem Set 8.</p>
 
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
 
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-09-10-CS50x-Week-7-Completed/">CS50x Week 7 Completed</a></li><li>Next Post: <a href="/blog/posts/2023-11-13-My-First-PR-in-Python/">cbpickaxe and My First (Merged) Pull Request in Python</a></li>
+                    </ul>
+            
+        </article>
+    
 
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
 
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+    
+</div>
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
     }
 
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
     }
 </style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">CS50x Week 8 Assignments Completed</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 26 September 2023 by Helen Chong</p>
-    
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/cs50">cs50</a>, 
-        
-            <a href="/blog/categories/cs50x">cs50x</a>, 
-        
-            <a href="/blog/categories/html">html</a>, 
-        
-            <a href="/blog/categories/css">css</a>, 
-        
-            <a href="/blog/categories/javascript">javascript</a>
-        
-    </p>
-    <p>🍿  1 min. read</p>
-</section>
-
-<article class="prose">
-    <p>At last, I completed and submitted <a href="https://cs50.harvard.edu/x/2023/weeks/8/">Week 8</a> assignments of the CS50's Introduction to Computer Science (CS50x) course, including <a href="https://cs50.harvard.edu/x/2023/labs/8/">Lab 8</a> and <a href="https://cs50.harvard.edu/x/2023/psets/8/">Problem Set 8</a>.</p>
-<p>The eighth week of the CS50x is about HTML, CSS, JavaScript and how the internet works. I already have a good foundation in HTML, CSS and JavaScript since I started taking front-end web development courses on other platforms like freeCodeCamp and Scrimba since December 2022. Even then, I learned new things about how the internet works from the CS50x course.</p>
-<p>As for the assignments, I already completed and submitted Lab 8 on September 13, but it took almost two weeks after submitting Lab 8 for me to finally finish Problem Set 8, because I was struggling to come out of ideas about what to put on my pages to meet CS50x's requirement. I was relieved when I finally finished Problem Set 8.</p>
-
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-09-10-CS50x-Week-7-Completed/">CS50x Week 7 Completed</a></li><li>Next Post: <a href="/blog/posts/2023-11-13-My-First-PR-in-Python/">cbpickaxe and My First (Merged) Pull Request in Python</a></li>
-        </ul>
-
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -375,10 +363,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -433,7 +418,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -443,14 +428,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
index 9a845b95..6fe59273 100644
--- a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
+++ b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,103 +228,47 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">cbpickaxe and My First (Merged) Pull Request in Python</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 13 November 2023 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/python">python</a>, 
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">cbpickaxe and My First (Merged) Pull Request in Python</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 13 November 2023 by Helen Chong</p>
+                    <a href="/blog/categories/github">github</a>, 
+                
+                    <a href="/blog/categories/cbpickaxe">cbpickaxe</a>, 
+                
+                    <a href="/blog/categories/cassette-beasts">cassette beasts</a>
+                
+            </p>
+            <p>🍿  3 min. read</p>
+        </div>
     
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/python">python</a>, 
-        
-            <a href="/blog/categories/github">github</a>, 
-        
-            <a href="/blog/categories/cbpickaxe">cbpickaxe</a>, 
-        
-            <a href="/blog/categories/cassette-beasts">cassette beasts</a>
-        
-    </p>
-    <p>🍿  3 min. read</p>
-</section>
+</header>
 
-<article class="prose">
-    <p>Recently, on 11 November 2023, I created my first pull request in Python that got merged later. Specifically, the pull request was for <a href="https://github.com/ExcaliburZero/cbpickaxe">cbpickaxe</a>, a Python library and set of scripts for data mining the video game <a href="https://www.cassettebeasts.com/">Cassette Beasts</a>, titled <a href="https://github.com/ExcaliburZero/cbpickaxe/pull/3">&quot;extract_translation Script: Add support for finding strings of IDs that require pronoun identifiers&quot;</a>.</p>
+<div class="container">
+    
+        <article class="prose">
+            <p>Recently, on 11 November 2023, I created my first pull request in Python that got merged later. Specifically, the pull request was for <a href="https://github.com/ExcaliburZero/cbpickaxe">cbpickaxe</a>, a Python library and set of scripts for data mining the video game <a href="https://www.cassettebeasts.com/">Cassette Beasts</a>, titled <a href="https://github.com/ExcaliburZero/cbpickaxe/pull/3">&quot;extract_translation Script: Add support for finding strings of IDs that require pronoun identifiers&quot;</a>.</p>
 <p>While my current focus in my developer journey is front-end web development, I have also been learning Python at the same time, due to the programming language's popularity and the vast amount of resources and tutorials for learning the language. In addition, as an open source enthusiast, I have always wanted to be able to contribute to open source projects, particularly ones that I use.</p>
 <p>Cassette Beasts, the independent monster collecting role-playing game developed by Bytten Studio, has become one of my all-time favourite video games since the first time I played it. My interest in the game drives me to learn as much about the game as possible, which led me to start using cbpickaxe.</p>
 <p>When I started using the <code>extract_translation</code> script to data mine in-game dialogues, I discovered the script's issue of not being able to extract strings with gender identifiers. After discussing the issue with ExcaliburZero, the developer of cbpickaxe, I started investigating the script's code and tried to figure out any solution.</p>
@@ -340,12 +283,57 @@ <h1 class="heading--main">cbpickaxe and My First (Merged) Pull Request in Python
 <p>After testing my code multiple times to ensure it works, I made a pull request on cbpickaxe's GitHub repository. ExcaliburZero approved and merged my pull request, which has become my first merged pull request on Python! This pull request has been included in the release of cbpickaxe starting from <a href="https://github.com/ExcaliburZero/cbpickaxe/releases/tag/v0.1.2">version 0.1.2</a>.</p>
 <p>I am immensely grateful of this opportunity to not only contribute to an open source project that is realated to one of my favourite video games, but also practicing my Python skills.</p>
 
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/">CS50x Week 8 Assignments Completed</a></li><li>Next Post: <a href="/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/">Chingu Voyage 46 Completed</a></li>
+
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/">CS50x Week 8 Assignments Completed</a></li><li>Next Post: <a href="/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/">Chingu Voyage 46 Completed</a></li>
+                    </ul>
+            
+        </article>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
         </ul>
+    </nav>
+</aside>
 
-            </main>
-        </div>
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -384,10 +372,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -442,7 +427,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -452,14 +437,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
index 5c3db30d..2f6b25bc 100644
--- a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
+++ b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,97 +228,41 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">Chingu Voyage 46 Completed</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 25 November 2023 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/chingu">chingu</a>
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">Chingu Voyage 46 Completed</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 25 November 2023 by Helen Chong</p>
+            </p>
+            <p>🍿  1 min. read</p>
+        </div>
     
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/chingu">chingu</a>
-        
-    </p>
-    <p>🍿  1 min. read</p>
-</section>
+</header>
 
-<article class="prose">
-    <p>On 12 November 2023, I, along with two other teammates had officially completed <a href="https://www.chingu.io/">Chingu</a> Voyage 46. I received my <a href="/assets/documents/Chingu-Voyage46-Completion-Cert.pdf">Certificate of Completion</a> (PDF file) from Chingu on 19 November 2023.</p>
+<div class="container">
+    
+        <article class="prose">
+            <p>On 12 November 2023, I, along with two other teammates had officially completed <a href="https://www.chingu.io/">Chingu</a> Voyage 46. I received my <a href="/assets/documents/Chingu-Voyage46-Completion-Cert.pdf">Certificate of Completion</a> (PDF file) from Chingu on 19 November 2023.</p>
 <p>Back in August, I had created a <a href="./2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project">TickyBot clone</a> as my <a href="https://github.com/chingu-voyages/Handbook/blob/main/docs/guides/soloproject/soloproject.md">solo project</a> to submit to Chingu in order to join the next Chingu Voyage, specifically Tier 1, which is for web development beginners. My submission was approved by Chingu, and I was assigned to Tier 1 Team 1.</p>
 <p>We were instructed to build a <a href="https://github.com/chingu-voyages/voyage-project-tier1-recipes">recipe app</a> that allows users to search for recipes by inputting ingredients.</p>
 <p><img src="https://raw.githubusercontent.com/chingu-voyages/v46-tier1-team-01/main/Recipe-Hub-screenshot.png" alt="Screenshot of Recipe Hub"></p>
@@ -327,12 +270,57 @@ <h1 class="heading--main">Chingu Voyage 46 Completed</h1>
 <p>Chingu Voyage was a big help to me for gaining practical experience in working on group projects, and learning both hard and soft skills. Particupating in the Chingu Voyage allowed me to practice not only my HTML, CSS and JavaScript skills, but also my teamwork and communication skills that are needed in group projects.</p>
 <p>Before joining Chingu, I already practice my front-end web development skills with my own projects and Frontend Mentor's challenges, but since those were all solo projects, participating in my first Chingu Voyage, which was Voyage 46, was a new experience for me.</p>
 
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-11-13-My-First-PR-in-Python/">cbpickaxe and My First (Merged) Pull Request in Python</a></li><li>Next Post: <a href="/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/">JavaScriptmas 2023 Challenge Completed — and Won</a></li>
+
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-11-13-My-First-PR-in-Python/">cbpickaxe and My First (Merged) Pull Request in Python</a></li><li>Next Post: <a href="/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/">JavaScriptmas 2023 Challenge Completed — and Won</a></li>
+                    </ul>
+            
+        </article>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
         </ul>
+    </nav>
+</aside>
 
-            </main>
-        </div>
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -371,10 +359,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -429,7 +414,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -439,14 +424,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
index e52a6ab5..0470b41a 100644
--- a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
+++ b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,110 +228,99 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">JavaScriptmas 2023 Challenge Completed — and Won</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 27 December 2023 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/scrimba">scrimba</a>, 
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
+                    <a href="/blog/categories/javascriptmas">javascriptmas</a>
+                
+            </p>
+            <p>🍿  1 min. read</p>
+        </div>
+    
+</header>
 
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
+<div class="container">
+    
+        <article class="prose">
+            <p>Starting from 1 December 2023, I had participated in <a href="https://scrimba.com/">Scrimba</a>'s <a href="https://scrimba.com/learn/javascriptmas">JavaScriptmas</a> challenge. After 24 days, I finally completed the entire challenge! I have compiled a <a href="https://scrimba.com/playlist/pdpB3JZfE">scrim playlist</a> for all my JavaScriptmas solutions on Scrimba.</p>
+<p>In addition, when Scrimba announced the winners of JavaScriptmas in their <a href="https://www.youtube.com/live/Y0tc4DTS0e8">JavaScriptmas PrizeFest</a> livestream on 24 December, it was revealed that <a href="https://www.youtube.com/live/Y0tc4DTS0e8?t=2190">I (under my Twitter handle helen_clx) was one of the 24 winners of a one-year Scrimba Pro plan</a> for <a href="https://scrimba.com/scrim/co79e43dcbacb329c01a1744f?pl=pdpB3JZfE">my solution to the Day 18 challenge</a>: AI alt text generator!</p>
+<p><img src="/assets/images/posts/JavaScriptmas-2023-Challenge-Completed-and-Won/JavaScriptmas-PrizeFest-2023-Day-18-winner.png" alt="Screenshot of JavaScriptmas PrizeFest announcing helen_clx as the Day 18 winner"></p>
+<p>JavaScriptmas has been a great opportunity to practice and sharpen my CSS and JavaScript knowledge and skills. The AI challenges, including Day 18, which I won, were also the first time I learned to incorporate AI in coding projects. Therefore, it was a great surprise that I managed to win for an AI challenge.</p>
+<p>Thank you Scrimba for the Christmas gift! With a one-year Scrimba Pro plan, I will be able to take Scirmba courses that are only available to subscribers.</p>
 
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
 
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/">Chingu Voyage 46 Completed</a></li><li>Next Post: <a href="/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/">Rebuilding My Developer Portfolio with Eleventy</a></li>
+                    </ul>
+            
+        </article>
+    
 
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
 
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+    
+</div>
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
     }
 
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
     }
 </style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">JavaScriptmas 2023 Challenge Completed — and Won</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 27 December 2023 by Helen Chong</p>
-    
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/scrimba">scrimba</a>, 
-        
-            <a href="/blog/categories/javascriptmas">javascriptmas</a>
-        
-    </p>
-    <p>🍿  1 min. read</p>
-</section>
-
-<article class="prose">
-    <p>Starting from 1 December 2023, I had participated in <a href="https://scrimba.com/">Scrimba</a>'s <a href="https://scrimba.com/learn/javascriptmas">JavaScriptmas</a> challenge. After 24 days, I finally completed the entire challenge! I have compiled a <a href="https://scrimba.com/playlist/pdpB3JZfE">scrim playlist</a> for all my JavaScriptmas solutions on Scrimba.</p>
-<p>In addition, when Scrimba announced the winners of JavaScriptmas in their <a href="https://www.youtube.com/live/Y0tc4DTS0e8">JavaScriptmas PrizeFest</a> livestream on 24 December, it was revealed that <a href="https://www.youtube.com/live/Y0tc4DTS0e8?t=2190">I (under my Twitter handle helen_clx) was one of the 24 winners of a one-year Scrimba Pro plan</a> for <a href="https://scrimba.com/scrim/co79e43dcbacb329c01a1744f?pl=pdpB3JZfE">my solution to the Day 18 challenge</a>: AI alt text generator!</p>
-<p><img src="/assets/images/posts/JavaScriptmas-2023-Challenge-Completed-and-Won/JavaScriptmas-PrizeFest-2023-Day-18-winner.png" alt="Screenshot of JavaScriptmas PrizeFest announcing helen_clx as the Day 18 winner"></p>
-<p>JavaScriptmas has been a great opportunity to practice and sharpen my CSS and JavaScript knowledge and skills. The AI challenges, including Day 18, which I won, were also the first time I learned to incorporate AI in coding projects. Therefore, it was a great surprise that I managed to win for an AI challenge.</p>
-<p>Thank you Scrimba for the Christmas gift! With a one-year Scrimba Pro plan, I will be able to take Scirmba courses that are only available to subscribers.</p>
-
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/">Chingu Voyage 46 Completed</a></li><li>Next Post: <a href="/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/">Rebuilding My Developer Portfolio with Eleventy</a></li>
-        </ul>
-
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -371,10 +359,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -429,7 +414,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -439,14 +424,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
index a044e8c7..7bd55541 100644
--- a/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
+++ b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,101 +228,45 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">Rebuilding My Developer Portfolio with Eleventy</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 11 April 2024 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/eleventy">eleventy</a>, 
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">Rebuilding My Developer Portfolio with Eleventy</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 11 April 2024 by Helen Chong</p>
+                    <a href="/blog/categories/about-this-website">about this website</a>, 
+                
+                    <a href="/blog/categories/about-this-blog">about this blog</a>
+                
+            </p>
+            <p>🍿  3 min. read</p>
+        </div>
     
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/eleventy">eleventy</a>, 
-        
-            <a href="/blog/categories/about-this-website">about this website</a>, 
-        
-            <a href="/blog/categories/about-this-blog">about this blog</a>
-        
-    </p>
-    <p>🍿  3 min. read</p>
-</section>
+</header>
 
-<article class="prose">
-    <p>I have been taking courses to learn to code, starting from HTML, CSS and JavaScript, since December 2022. As I honed my front-end web development skills further by building projects, I quickly realised that I needed a portfolio website to showcase myself and my projects. Eventually, I launched my first developer portfolio website in February 2023, based on Kolade Chris tutorial <a href="https://www.freecodecamp.org/news/how-to-build-a-developer-portfolio-website/">&quot;How to Build Your Own Developer Portfolio Website with HTML, CSS, and JavaScript&quot;</a> on freeCodeCamp, and deployed it to GitHub Pages.</p>
+<div class="container">
+    
+        <article class="prose">
+            <p>I have been taking courses to learn to code, starting from HTML, CSS and JavaScript, since December 2022. As I honed my front-end web development skills further by building projects, I quickly realised that I needed a portfolio website to showcase myself and my projects. Eventually, I launched my first developer portfolio website in February 2023, based on Kolade Chris tutorial <a href="https://www.freecodecamp.org/news/how-to-build-a-developer-portfolio-website/">&quot;How to Build Your Own Developer Portfolio Website with HTML, CSS, and JavaScript&quot;</a> on freeCodeCamp, and deployed it to GitHub Pages.</p>
 <p><img src="/assets/images/posts/rebuilding-my-developer-portfolio-with-eleventy/Helen-Chong-portfolio-old.png" alt="First version of Helen Chong's developer portfolio"></p>
 <p>When I <a href="https://twitter.com/helen_clx/status/1621696817795854336">shared the first version of my developer portfolio website on Twitter</a>, my tweet was liked and replied to by both <a href="https://twitter.com/ossia/status/1621729431009071104">Quincy Larson</a>, the founder of freeCodeCamp, and <a href="https://twitter.com/Ksound22/status/1621739428057079808">Kolade Chris</a> themselves, despite me not even tagging freeCodeCamp nor Kolade.</p>
 <p><img src="/assets/images/posts/rebuilding-my-developer-portfolio-with-eleventy/Quincy-Larson-Kolade-Chris-tweet-replies.png" alt="Quincy Larson and Kolade Chris' replies to my tweet"></p>
@@ -337,12 +280,57 @@ <h1 class="heading--main">Rebuilding My Developer Portfolio with Eleventy</h1>
 <p>Using a static site generator to build my own websites has been a great learning experience, from creating layouts, templates, installing plug-ins, to setting up GitHub Actions. I am glad that I have learned a great tool to build and maintain my static website projects in a dynamic, flexible and efficient manner.</p>
 <p>Welcome to Helen Chong's brand new Eleventy portfolio website!🎉</p>
 
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/">JavaScriptmas 2023 Challenge Completed — and Won</a></li><li>Next Post: <a href="/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/">Round 1 of 100 Days of Code Challenge Completed</a></li>
+
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/">JavaScriptmas 2023 Challenge Completed — and Won</a></li><li>Next Post: <a href="/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/">Round 1 of 100 Days of Code Challenge Completed</a></li>
+                    </ul>
+            
+        </article>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
         </ul>
+    </nav>
+</aside>
 
-            </main>
-        </div>
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -381,10 +369,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -439,7 +424,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -449,14 +434,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
index 64a224ec..38bb5943 100644
--- a/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
+++ b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,99 +228,43 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">Round 1 of 100 Days of Code Challenge Completed</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 13 April 2024 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/100-days-of-code">100 days of code</a>, 
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">Round 1 of 100 Days of Code Challenge Completed</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 13 April 2024 by Helen Chong</p>
+                    <a href="/blog/categories/freecodecamp">freecodecamp</a>
+                
+            </p>
+            <p>🍿  2 min. read</p>
+        </div>
     
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/100-days-of-code">100 days of code</a>, 
-        
-            <a href="/blog/categories/freecodecamp">freecodecamp</a>
-        
-    </p>
-    <p>🍿  2 min. read</p>
-</section>
+</header>
 
-<article class="prose">
-    <p>On 3 January 2024, I started the <a href="https://www.100daysofcode.com/">#100DaysOfCode</a> challenge for the first time. Came 11 April 2024, I finally completed my first round of the challenge!</p>
+<div class="container">
+    
+        <article class="prose">
+            <p>On 3 January 2024, I started the <a href="https://www.100daysofcode.com/">#100DaysOfCode</a> challenge for the first time. Came 11 April 2024, I finally completed my first round of the challenge!</p>
 <p>I had heard of the 100 Days of Code challenge after I started my journey to learn to code. However, I did not participate in it until reading freeCodeCamp's article <a href="https://www.freecodecamp.org/news/100daysofcode-challenge-2024-discord/">&quot;#100DaysOfCode Challenge for 2024 – Discord Edition&quot;</a>. This was also how I found out about the <a href="https://www.freecodecamp.org/news/the-crazy-history-of-the-100daysofcode-challenge-and-why-you-should-try-it-for-2018-6c89a76e298d/">history of the challenge</a>, and the fact that the challenge was created by a freeCodeCamp alumni, which I found interesting as an aspiring developer to start to properly learn to code with freeCodeCamp.</p>
 <p>By the time 2024 came around, I had been taking coding courses for more than a year, so I figured the 100 Days of Code challenge would be a good motivator for me to continue my coding journey every day.</p>
 <p>It helped that there were still coding courses for me to take. At the time, freeCodeCamp just recently upgraded their <a href="https://www.freecodecamp.org/news/learn-javascript-with-new-data-structures-and-algorithms-certification-projects/">JavaScript</a> and <a href="https://www.freecodecamp.org/news/python-curriculum-upgrade/">Python</a> curriculum to be project-based. I already earned the <a href="https://www.freecodecamp.org/certification/helenclx/javascript-algorithms-and-data-structures">Legacy JavaScript Algorithms and Data Structures Certification</a>, but since I prefer to learn to code by building projects, I decided to take freeCodeCamp's upgraded curriculum, and eventually earned the <a href="https://www.freecodecamp.org/certification/helenclx/javascript-algorithms-and-data-structures-v8">new freeCodeCamp JavaScript certification</a> on 16 March 2024 as well.</p>
@@ -331,12 +274,57 @@ <h1 class="heading--main">Round 1 of 100 Days of Code Challenge Completed</h1>
 <p>The #100DaysOfCode challenge has been a wonderful journey. I am glad I managed to motivate myself to code every day. Through various courses and projects, I have honed my front-end development skills a lot.</p>
 <p>Thank you to everyone who has supported me throughout my 100 Days of Code journey, and has interacted with my posts on Twitter, Mastodon, Bluesky and the freeCodeCamp Discord serve, by replying to, liking or reposting.</p>
 
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/">Rebuilding My Developer Portfolio with Eleventy</a></li><li>Next Post: <a href="/blog/posts/2024-04-15-cs50x-week-9-completed/">CS50x Week 9 Completed</a></li>
+
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/">Rebuilding My Developer Portfolio with Eleventy</a></li><li>Next Post: <a href="/blog/posts/2024-04-15-cs50x-week-9-completed/">CS50x Week 9 Completed</a></li>
+                    </ul>
+            
+        </article>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
         </ul>
+    </nav>
+</aside>
 
-            </main>
-        </div>
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -375,10 +363,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -433,7 +418,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -443,14 +428,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2024-04-15-cs50x-week-9-completed/index.html b/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
index 88f7edd0..0508b83a 100644
--- a/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
+++ b/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,105 +228,49 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">CS50x Week 9 Completed</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 15 April 2024 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/cs50">cs50</a>, 
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">CS50x Week 9 Completed</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 15 April 2024 by Helen Chong</p>
+                    <a href="/blog/categories/cs50x">cs50x</a>, 
+                
+                    <a href="/blog/categories/python">python</a>, 
+                
+                    <a href="/blog/categories/flask">flask</a>, 
+                
+                    <a href="/blog/categories/sql">sql</a>
+                
+            </p>
+            <p>🍿  3 min. read</p>
+        </div>
     
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/cs50">cs50</a>, 
-        
-            <a href="/blog/categories/cs50x">cs50x</a>, 
-        
-            <a href="/blog/categories/python">python</a>, 
-        
-            <a href="/blog/categories/flask">flask</a>, 
-        
-            <a href="/blog/categories/sql">sql</a>
-        
-    </p>
-    <p>🍿  3 min. read</p>
-</section>
+</header>
 
-<article class="prose">
-    <p>At last, on 5 March 2024, I completed <a href="https://cs50.harvard.edu/x/2024/weeks/9/">Week 9</a> of the CS50's Introduction to Computer Science (CS50x) course, by submitting my solutions to <a href="https://cs50.harvard.edu/x/2024/psets/9/">Problem Set 9</a> . In other words, I have finished all assignments for the CS50x course, with the only thing left for me to do to complete the course is building and submitting my own <a href="https://cs50.harvard.edu/x/2024/project/">final project</a>.</p>
+<div class="container">
+    
+        <article class="prose">
+            <p>At last, on 5 March 2024, I completed <a href="https://cs50.harvard.edu/x/2024/weeks/9/">Week 9</a> of the CS50's Introduction to Computer Science (CS50x) course, by submitting my solutions to <a href="https://cs50.harvard.edu/x/2024/psets/9/">Problem Set 9</a> . In other words, I have finished all assignments for the CS50x course, with the only thing left for me to do to complete the course is building and submitting my own <a href="https://cs50.harvard.edu/x/2024/project/">final project</a>.</p>
 <p>Problem Set 9 consisted of two problems, <a href="https://cs50.harvard.edu/x/2024/psets/9/birthdays/">Birthdays</a> and <a href="https://cs50.harvard.edu/x/2024/psets/9/finance/">Finance</a>, which required Python, Flask and SQL to solve. I did and submitted my solution to the Birthdays problem on 6 January 2024. At the time, I already took a break from the CS50x course for a few months to pursue other front-end web development courses. It was rather challenging to go back to CS50x and do its assignments after taking a break from the course for a while. My SQL and Flask knowledge got rusty due to rarely using them.</p>
 <p>On 2 March 2024, I began tackling the Finance problem. As the final assignment for the course before the final project, Finance was by far the largest assignment of CS50x. As I expected, this project challenged me to apply everything I learned from the CS50x course. I needed to refer to my solutions to the previous problems to refresh my skills of Python, Flask and SQL. Thankfully, I had a good start; on my first day doing the Finance problem, I successfully implemented the Register and Quote features.</p>
 <p>The next day, I started implementing the feature to buy stocks by setting up and testing input elements. After a lot of research and trial and errors, I learned to use <code>try...except</code> to display an error message on the web page if an incorrect input is entered. I also learned to make use of the phpLiteAdmin installed in the CS50 Codespace to work on the project’s database and get the SQL commands I want to use, and modify the database in a graphical user interface.</p>
@@ -344,12 +287,57 @@ <h1 class="heading--main">CS50x Week 9 Completed</h1>
 <div id="AYkO59_Ojb4" class="eleventy-plugin-youtube-embed" style="position:relative;width:100%;padding-top: 56.25%;"><iframe style="position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;" width="100%" height="100%" frameborder="0" title="Embedded YouTube video" src="https://www.youtube-nocookie.com/embed/AYkO59_Ojb4" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 <p>Working on this assignment allowed me to practice and learn SQL, Python and Flask a lot. By finishing Week 9 of the CS50x, I reached another milestone.</p>
 
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/">Round 1 of 100 Days of Code Challenge Completed</a></li><li>Next Post: <a href="/blog/posts/2024-04-22-now-page-for-my-website/">Now Page for My Website</a></li>
+
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/">Round 1 of 100 Days of Code Challenge Completed</a></li><li>Next Post: <a href="/blog/posts/2024-04-22-now-page-for-my-website/">Now Page for My Website</a></li>
+                    </ul>
+            
+        </article>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
         </ul>
+    </nav>
+</aside>
 
-            </main>
-        </div>
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -388,10 +376,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -446,7 +431,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -456,14 +441,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2024-04-22-now-page-for-my-website/index.html b/blog/posts/2024-04-22-now-page-for-my-website/index.html
index ed8fc1dd..b01300da 100644
--- a/blog/posts/2024-04-22-now-page-for-my-website/index.html
+++ b/blog/posts/2024-04-22-now-page-for-my-website/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,107 +228,96 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">Now Page for My Website</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 22 April 2024 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/about-this-website">about this website</a>
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
+            </p>
+            <p>🍿  1 min. read</p>
+        </div>
+    
+</header>
 
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
+<div class="container">
+    
+        <article class="prose">
+            <p>On 21 April 2024, I have added a <a href="/now">now page</a> to this website.</p>
+<p>The idea of adding a &quot;now page&quot; was inspired by the website <a href="https://nownownow.com/">nownownow.com</a>, which <a href="https://nownownow.com/about">defines</a> a now page as a page that tells you what this person is focused on at this point in their life. In addition, I also have <a href="https://nownownow.com/p/D9En">my own profile on nownownow.com</a>.</p>
+<p>As an aspiring web developer, a now page on my developer portfolio website serves as a means to inform the public about my current priorities and projects.</p>
+<p>My /now page can be updated at any time, so feel free to check the page out when you visit this website!</p>
 
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
 
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-04-15-cs50x-week-9-completed/">CS50x Week 9 Completed</a></li><li>Next Post: <a href="/blog/posts/2024-05-27-cs50x-course-completed/">CS50x Course Completed</a></li>
+                    </ul>
+            
+        </article>
+    
 
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
 
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
+    
+</div>
 
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
     }
 
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
     }
 </style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">Now Page for My Website</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 22 April 2024 by Helen Chong</p>
-    
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/about-this-website">about this website</a>
-        
-    </p>
-    <p>🍿  1 min. read</p>
-</section>
-
-<article class="prose">
-    <p>On 21 April 2024, I have added a <a href="/now">now page</a> to this website.</p>
-<p>The idea of adding a &quot;now page&quot; was inspired by the website <a href="https://nownownow.com/">nownownow.com</a>, which <a href="https://nownownow.com/about">defines</a> a now page as a page that tells you what this person is focused on at this point in their life. In addition, I also have <a href="https://nownownow.com/p/D9En">my own profile on nownownow.com</a>.</p>
-<p>As an aspiring web developer, a now page on my developer portfolio website serves as a means to inform the public about my current priorities and projects.</p>
-<p>My /now page can be updated at any time, so feel free to check the page out when you visit this website!</p>
-
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-04-15-cs50x-week-9-completed/">CS50x Week 9 Completed</a></li><li>Next Post: <a href="/blog/posts/2024-05-27-cs50x-course-completed/">CS50x Course Completed</a></li>
-        </ul>
-
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -368,10 +356,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -426,7 +411,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -436,14 +421,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2024-05-27-cs50x-course-completed/index.html b/blog/posts/2024-05-27-cs50x-course-completed/index.html
index fb5c5164..30019ea4 100644
--- a/blog/posts/2024-05-27-cs50x-course-completed/index.html
+++ b/blog/posts/2024-05-27-cs50x-course-completed/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,105 +228,49 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">CS50x Course Completed</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 27 May 2024 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/cs50">cs50</a>, 
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">CS50x Course Completed</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 27 May 2024 by Helen Chong</p>
+                    <a href="/blog/categories/cs50x">cs50x</a>, 
+                
+                    <a href="/blog/categories/python">python</a>, 
+                
+                    <a href="/blog/categories/flask">flask</a>, 
+                
+                    <a href="/blog/categories/sql">sql</a>
+                
+            </p>
+            <p>🍿  3 min. read</p>
+        </div>
     
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/cs50">cs50</a>, 
-        
-            <a href="/blog/categories/cs50x">cs50x</a>, 
-        
-            <a href="/blog/categories/python">python</a>, 
-        
-            <a href="/blog/categories/flask">flask</a>, 
-        
-            <a href="/blog/categories/sql">sql</a>
-        
-    </p>
-    <p>🍿  3 min. read</p>
-</section>
+</header>
 
-<article class="prose">
-    <p>On 23 May 2024, at long last, I completed <a href="https://cs50.harvard.edu/x/2024/">CS50’s Introduction to Computer Science</a>, also known as CS50x, course!</p>
+<div class="container">
+    
+        <article class="prose">
+            <p>On 23 May 2024, at long last, I completed <a href="https://cs50.harvard.edu/x/2024/">CS50’s Introduction to Computer Science</a>, also known as CS50x, course!</p>
 <p>After finishing <a href="/blog/posts/2024-04-15-cs50x-week-9-completed">Week 9 of CS50x</a>, I began to brainstorm ideas for the <a href="https://cs50.harvard.edu/x/2024/project/">final project</a>, in terms of both project type and which language or tech stack to build. Eventually, I chose to build a blogging application with Flask, SQL and Bootstrap, and name the project CS50 Flask Blog.</p>
 <p>You can watch a demonstration of CS50 Flask Blog in this video:</p>
 <div id="eH8Tq57KzXs" class="eleventy-plugin-youtube-embed" style="position:relative;width:100%;padding-top: 56.25%;"><iframe style="position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;" width="100%" height="100%" frameborder="0" title="Embedded YouTube video" src="https://www.youtube-nocookie.com/embed/eH8Tq57KzXs" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
@@ -351,12 +294,57 @@ <h1 class="heading--main">CS50x Course Completed</h1>
 <p><img src="/assets/images/posts/cs50x-course-completed/CS50x-certificate.png" alt="Helen Chong's CS50x certificate"></p>
 <p>Taking the CS50x course had been a great opportunity for me to learn about computer science, how to learn different programming languages and practice problem-solving skills with its problem sets. I am continuing to focus on front-end web development, but I hope I could carry what I learned from CS50x in my developer journey.</p>
 
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-04-22-now-page-for-my-website/">Now Page for My Website</a></li><li>Next Post: <a href="/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/">Custom Domain Name for My Developer Website</a></li>
+
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-04-22-now-page-for-my-website/">Now Page for My Website</a></li><li>Next Post: <a href="/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/">Custom Domain Name for My Developer Website</a></li>
+                    </ul>
+            
+        </article>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
         </ul>
+    </nav>
+</aside>
 
-            </main>
-        </div>
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -395,10 +383,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -453,7 +438,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -463,14 +448,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
index 8b4736a1..88775df5 100644
--- a/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
+++ b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,97 +228,41 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">Custom Domain Name for My Developer Website</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 29 May 2024 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/about-this-website">about this website</a>
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">Custom Domain Name for My Developer Website</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 29 May 2024 by Helen Chong</p>
+            </p>
+            <p>🍿  2 min. read</p>
+        </div>
     
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/about-this-website">about this website</a>
-        
-    </p>
-    <p>🍿  2 min. read</p>
-</section>
+</header>
 
-<article class="prose">
-    <p>This website — my developer portfolio and blog website — now has a custom domain: <a href="https://helenchong.dev/">helenchong.dev</a>!</p>
+<div class="container">
+    
+        <article class="prose">
+            <p>This website — my developer portfolio and blog website — now has a custom domain: <a href="https://helenchong.dev/">helenchong.dev</a>!</p>
 <p>As an aspiring developer, I have been putting effort in building, updating and maintaining my portfolio website, and later starting a blog on this site as well to write about coding and tech. The only thing missing for my website is a custom domain name to give the site and myself a unique identity on the web, so I have been considering buying a custom domain name for this website.</p>
 <p>After doing research and comparing various domain name registrars, I settled for Porkbun for their very competitive prices for domain names, and registered an account there. Through searching for available domain names by using my own name, I found out that <code>helenchong.com</code> has been taken, so I ended up purchasing <code>helenchong.dev</code> as my domain name, since the <code>.dev</code> top-level domain (TLD) name is intended for developers, and its renewal price on Porkbun is close to the <code>.com</code> TLD.</p>
 <p>helenchong.dev is also the very first domain name I ever owned, so configuring DNS to point a domain name to my website was also a new experience. Fortunately, my developer website is hosted on GitHub Pages, thus I could refer to GitHub's documentation on <a href="https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site">configuring a custom domain name for a GitHub Pages site</a> for how to do it.</p>
@@ -328,12 +271,57 @@ <h1 class="heading--main">Custom Domain Name for My Developer Website</h1>
 <p>Another benefit of using a custom domain name for my GitHub user site is that all my other projects that are hosted on GitHub pages also share the same custom domain. For example, the live site of my <a href="https://github.com/helenclx/Tenzies-Game">React Tenzies Game</a> can now be viewed at <a href="https://helenchong.dev/Tenzies-Game/">https://helenchong.dev/Tenzies-Game/</a>.</p>
 <p>Welcome to helenchong.dev! 🥳</p>
 
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-05-27-cs50x-course-completed/">CS50x Course Completed</a></li><li>Next Post: <a href="/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/">Finally Deployed My Scrimba React Solo Projects to GitHub Pages</a></li>
+
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-05-27-cs50x-course-completed/">CS50x Course Completed</a></li><li>Next Post: <a href="/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/">Finally Deployed My Scrimba React Solo Projects to GitHub Pages</a></li>
+                    </ul>
+            
+        </article>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
         </ul>
+    </nav>
+</aside>
 
-            </main>
-        </div>
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -372,10 +360,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -430,7 +415,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -440,14 +425,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
index f9548f6d..310746a7 100644
--- a/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
+++ b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,101 +228,45 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
+<header class="main__header">
+    
+        <ul class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ul>
+    
 
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
+    <h1 class="heading--main">Finally Deployed My Scrimba React Solo Projects to GitHub Pages</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 3 June 2024 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
                 
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
+                    <a href="/blog/categories/scrimba">scrimba</a>, 
                 
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
-
-<p><a href="/blog/posts/"><i class="fa-solid fa-arrow-left"></i> Back to posts</a></p>
-
-<h1 class="heading--main">Finally Deployed My Scrimba React Solo Projects to GitHub Pages</h1>
-
-<section class="blog__post--info">
-	<p><span class="text-bold">Posted:</span> 3 June 2024 by Helen Chong</p>
+                    <a href="/blog/categories/react">react</a>, 
+                
+                    <a href="/blog/categories/github-pages">github pages</a>
+                
+            </p>
+            <p>🍿  5 min. read</p>
+        </div>
     
-	<p><span class="text-bold">Categories:</span>
-        
-            <a href="/blog/categories/scrimba">scrimba</a>, 
-        
-            <a href="/blog/categories/react">react</a>, 
-        
-            <a href="/blog/categories/github-pages">github pages</a>
-        
-    </p>
-    <p>🍿  5 min. read</p>
-</section>
+</header>
 
-<article class="prose">
-    <p>I had completed <a href="https://scrimba.com/learn/learnreact">Scrimba's Learn React course</a> and its solo projects back in July 2023, even before <a href="../2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won">winning a one-year Scrimba Pro plan from JavaScriptmas 2023</a> for free, since the course, including the instructions and Figma files for the solo projects, is also available on freeCodeCamp's YouTube channel.</p>
+<div class="container">
+    
+        <article class="prose">
+            <p>I had completed <a href="https://scrimba.com/learn/learnreact">Scrimba's Learn React course</a> and its solo projects back in July 2023, even before <a href="../2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won">winning a one-year Scrimba Pro plan from JavaScriptmas 2023</a> for free, since the course, including the instructions and Figma files for the solo projects, is also available on freeCodeCamp's YouTube channel.</p>
 <p>However, I always struggled to figure out how to deploy React project from a GitHub repository's subfolders or subdirectories, and frustrated by the lack of guides for that. Scrimba's course does teach about using GitHub, but they often recommend deploying projects from their course to Netlify by doing it manually on <a href="https://app.netlify.com/drop">Netlify Drop</a>. To be fair, Netlify Drop is great for beginner developers, especially when they are new to source control such as Git. However, when I finished Scirmba's Learn React course, I already had a handful of projects deployed to GitHub Pages. Later, I even managed to deploy my React Tenzies Game, which was based on the tutorial from the Learn React course, to GitHub Pages by creating a <a href="https://github.com/helenclx/Tenzies-Game">dedicated repository for my Tenzies Game</a> and searching for a guide for how to deploy a React project to GitHub Pages.</p>
 <p>Unfortunately, I could not find any guide for how to deploy React projects from multiple subfolders or subdirectories of a repository, and I did not have enough experience with using GitHub actions to feel comfortable trying to figure it out myself, so I had to manually deploy my Scrimba React solo projects to Netlify by using Netlify Drop, which I do not find ideal because I had to repeat the process every time I made a change to those projects.</p>
 <p>Lately, as I have been busy with maintaining and improving my projects hosted on GitHub, I suddenly thought of trying to search for ways to deploy React projects to GitHub Pages from the repository's subdirectories again. That was when I, at long last, found a guide that helped me to solve my months-long dilemma once and for all: <a href="https://dev.to/devloker/deploy-a-react-projects-that-are-inside-a-subdirectories-to-github-pages-using-github-actions-cicd-3n9l">&quot;Deploy a react projects that are inside a subdirectories to GitHub Pages using GitHub Actions (CI/CD)&quot; by DEVLOKER</a>. It is worth noting that the guide was posted only recently on 11 April 2024. The guide also uses Vite for React projects, which was perfect for me since Vite is also what I use to create React projects, including the ones from Scrimba courses. The guide's Vite configuration file is in TypeScript format (<code>vite.config.ts</code>), but it totally works with JavaScript format (<code>vite.config.js</code>) too.</p>
@@ -412,12 +355,57 @@ <h1 class="heading--main">Finally Deployed My Scrimba React Solo Projects to Git
 <p>Here is the final code of my GitHub action TAML file to deploy my Scrimba React solo projects in <a href="https://github.com/helenclx/Scrimba-React-Solo-Projects/blob/main/.github/workflows/gh-pages.yml">my Scrimba React solo projects repository</a>.</p>
 <p>Now that I have successfully deployed my Scrimba React solo projects to GitHub Pages, I can finally delete those projects from Netlify and free up more monthly bandwidth for my other projects that I actually want to deploy to Netlify.</p>
 
-</article>
-        <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/">Custom Domain Name for My Developer Website</a></li>
+
+            
+                    <ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/">Custom Domain Name for My Developer Website</a></li>
+                    </ul>
+            
+        </article>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
         </ul>
+    </nav>
+</aside>
 
-            </main>
-        </div>
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -456,10 +444,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -514,7 +499,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -524,14 +509,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/blog/posts/index.html b/blog/posts/index.html
index 75bb7e3b..03b624fe 100644
--- a/blog/posts/index.html
+++ b/blog/posts/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,83 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-
-<nav class="blog__nav">
-    <h2 class="blog__nav--title">Blog Navigation:</h3>
-    <ul class="blog__nav--links">
-        <li><a  href="/blog/">Index</a></li>
-        
-            <li><a
-                
-                href="/blog/categories/">
-                    Categories
-            </a></li>
-            <li><a
-                aria-current="page"
-                href="/blog/posts/">
-                    Archive
-            </a></li>
-        <li><a href="/blog/feed.xml">RSS</a></li>
-    </ul>
-</nav>
-
-<style>
-    .blog__nav,
-    .blog__nav--links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .blog__nav {
-        flex-direction: column;
-        gap: 0.5em;
-        padding-bottom: 1em;
-        align-self: center;
-        font-weight: 600;
-    }
-
-    .blog__nav--title,
-    .blog__nav--links {
-        margin: 0;
-        padding: 0;
-        font-size: 1.1rem;
-    }
-
-    .blog__nav--links {
-        list-style: none;
-        gap: 0.7em;
-    }
-
-    .blog__nav--links li {
-        text-align: center;
-        align-self: center;
-    }
-
-    .blog__nav--links li:not(:last-child)::after {
-        content: '|';
-        padding-left: 0.6em;
-    }
-
-    .blog__nav--links [aria-current="page"] {
-        text-decoration: none;
-        color: var(--clr-link-hover);
-    }
-
-    @media (min-width: 640px) {
-        .blog__nav {
-            flex-direction: row;
-            gap: 1.5em;
-        }
-    }
-</style>
+        <main id="content">
+            
+<header class="main__header">
+    
 
+    <h1 class="heading--main">Blog Archive</h1>
 
-<h2 class="heading--main">Blog Archive</h2>
+    
+</header>
 
+<div class="container">
+    
+		<div class="prose">
+			
 <ul class="blog__postlist">
     
         <li>
@@ -419,8 +355,52 @@ <h2 class="heading--main">Blog Archive</h2>
         <a href=" /blog/posts/1/">Next</a>
     
 </p>
-            </main>
-        </div>
+		</div>
+    
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky">
+        <h2 class="blog__nav--title">Blog Navigation</h3>
+        <ul class="blog__nav--links">
+            <li><a  href="/blog/">Index</a></li>
+            
+                <li><a
+                    
+                    href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a
+                    aria-current="page"
+                    href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -459,10 +439,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -517,7 +494,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -527,14 +504,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/contact/index.html b/contact/index.html
index 1edfd2ad..b3bc58ea 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,9 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-<h1 class="heading--main text-center">Want to get in touch?</h1>
+        <main id="content">
+            
+<header class="main__header">
+    
+
+    <h1 class="heading--main">Want to get in touch?</h1>
+
+    
+</header>
+
+<div class="container">
+    
+		<div class="prose">
+			
 <p class="contact__sub-heading text-center">I am always open to new opportunities and projects. </p>
 
 <form class="form" name="contact" action="https://formspree.io/f/xpzeqewn" method="POST">
@@ -249,8 +259,29 @@ <h1 class="heading--main text-center">Want to get in touch?</h1>
     </div>
         <button class="form__button" type="submit">Let's talk</button>
 </form>
-            </main>
-        </div>
+		</div>
+    
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -289,10 +320,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -347,7 +375,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -357,14 +385,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/index.html b/index.html
index 5f82aa52..6e5ac84a 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -46,8 +46,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -232,8 +231,8 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
+        <main id="content">
+            
 <h1 class="visually-hidden">Home Page</h1>
 <section class="profile">
     <div class="profile__image-wrapper">
@@ -246,97 +245,97 @@ <h1 class="visually-hidden">Home Page</h1>
         <p class="profile__text">I am always open to new opportunities and projects, so do not hesitate to <a class="profile__link" href="/contact">get in touch</a>.<p>
     </div>
 </section>
-<section class="skills">
-    <h2 class="heading--index">My Skills</h2>
+<section class="section--home">
+    <h2 class="heading--home">My Skills</h2>
     <ul class="skills__list">
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/html.svg" alt="HTML logo">
 	    </div>
-	    <h3 class="skills__title">HTML</h3>
+	    <p class="skills__title">HTML</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/css.svg" alt="CSS logo">
 	    </div>
-	    <h3 class="skills__title">CSS</h3>
+	    <p class="skills__title">CSS</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/javascript.svg" alt="JavaScript logo">
 	    </div>
-	    <h3 class="skills__title">JavaScript</h3>
+	    <p class="skills__title">JavaScript</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/react.svg" alt="React.js logo">
 	    </div>
-	    <h3 class="skills__title">React.js</h3>
+	    <p class="skills__title">React.js</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/bootstrap.svg" alt="Bootstrap logo">
 	    </div>
-	    <h3 class="skills__title">Bootstrap</h3>
+	    <p class="skills__title">Bootstrap</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/nunjucks.png" alt="Nunjucks logo">
 	    </div>
-	    <h3 class="skills__title">Nunjucks</h3>
+	    <p class="skills__title">Nunjucks</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/python.svg" alt="Python logo">
 	    </div>
-	    <h3 class="skills__title">Python</h3>
+	    <p class="skills__title">Python</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/flask.svg" alt="Flask logo">
 	    </div>
-	    <h3 class="skills__title">Flask</h3>
+	    <p class="skills__title">Flask</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/firebase.svg" alt="Firebase logo">
 	    </div>
-	    <h3 class="skills__title">Firebase</h3>
+	    <p class="skills__title">Firebase</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/git.svg" alt="Git logo">
 	    </div>
-	    <h3 class="skills__title">Git</h3>
+	    <p class="skills__title">Git</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/c-programming.svg" alt="C logo">
 	    </div>
-	    <h3 class="skills__title">C</h3>
+	    <p class="skills__title">C</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/adobe-photoshop.svg" alt="Adobe Photoshop logo">
 	    </div>
-	    <h3 class="skills__title">Adobe Photoshop</h3>
+	    <p class="skills__title">Adobe Photoshop</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/adobe-illustrator.svg" alt="Adobe Illustrator logo">
 	    </div>
-	    <h3 class="skills__title">Adobe Illustrator</h3>
+	    <p class="skills__title">Adobe Illustrator</p>
 	</li>
         <li class="skills__item">
 	    <div class="skills__logo">
 	        <img src="/assets/icons/skills/figma.svg" alt="Figma logo">
 	    </div>
-	    <h3 class="skills__title">Figma</h3>
+	    <p class="skills__title">Figma</p>
 	</li>
     </ul>
 </section>
-<section class="projects">
-    <h2 class="heading--index">Featured Projects</h2>
+<section class="section--home">
+    <h2 class="heading--home">Featured Projects</h2>
     <div class="project-grid">
         
             
@@ -506,8 +505,8 @@ <h3 class="project-card__title">Tenzies Game</h3>
         
     </div>
 </section>
-<section class="webrings">
-    <h2 class="heading--index">Webrings</h2>
+<section class="section--home grid-center">
+    <h2 class="heading--home">Webrings</h2>
     <nav class="a11y-webring-club" aria-labelledby="a11y-webring-club">
         <h3 id="a11y-webring-club">a11y-webring.club</h3>
         <p>This site is a member of the <a rel="external" href="https://a11y-webring.club/">a11y-webring.club</a>.</p>
@@ -518,8 +517,12 @@ <h3 id="a11y-webring-club">a11y-webring.club</h3>
         </ul>
     </nav>
 </section>
-            </main>
-        </div>
+<section class="section--home grid-center">
+    <h2 class="heading--home">Badges</h2>
+    <div id="wcb" class="carbonbadge"></div>
+    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
+</section>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -558,10 +561,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -616,7 +616,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -626,14 +626,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/now/index.html b/now/index.html
index b01ec840..c6cef261 100644
--- a/now/index.html
+++ b/now/index.html
@@ -34,7 +34,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -46,8 +46,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -232,9 +231,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <article class="prose"><h1 class="heading--main">Now</h1>
-<p><em>This page was last updated on 1 June 2024.</em></p>
+        <main id="content">
+            
+<header class="main__header">
+    
+
+    <h1 class="heading--main">Now</h1>
+
+    
+</header>
+
+<div class="container">
+    
+		<div class="prose">
+			<p><em>This page was last updated on 1 June 2024.</em></p>
 <p>This is my <a href="https://nownownow.com/about">/now page</a>, which highlights what I am doing and focusing on at the moment. You can find more pages like this at <a href="https://nownownow.com/2024-05-29-custom-domain-name-helenchong-dev">nownownow.com</a>.</p>
 <p>You can also view <a href="https://nownownow.com/p/D9En">my profile on nownownow.com</a>.</p>
 <h2>My Current Progress in My Courses</h2>
@@ -251,10 +261,30 @@ <h2>Other Things I Have Been Doing Recently</h2>
 <ul>
 <li>Learning about purchasing and configuring custom domains since <a href="/blog/posts/2024-05-29-custom-domain-name-helenchong-dev">I finally have one now</a>.</li>
 </ul>
-</article>
 
-            </main>
-        </div>
+		</div>
+    
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -293,10 +323,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -351,7 +378,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -361,14 +388,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html
index 3097d161..86e9d6a9 100644
--- a/projects/frontend-mentor/index.html
+++ b/projects/frontend-mentor/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,8 +228,8 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
+        <main id="content">
+            <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
 
 <article class="project">
     <h1 class="project__heading">Frontend Mentor Challenge Solutions</h1>
@@ -261,8 +260,7 @@ <h2>Lessons Learned</h2>
 
     </div>
 </article>
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -301,10 +299,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -359,7 +354,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -369,14 +364,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/projects/index.html b/projects/index.html
index d64533dc..66241d65 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,9 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                
-<h1 class="heading--main">Featured Projects</h1>
+        <main id="content">
+            
+<header class="main__header">
+    
+
+    <h1 class="heading--main">Featured Projects</h1>
+
+    
+</header>
+
+<div class="container">
+    
+		<div class="prose">
+			
 <div class="project-list">
     
         
@@ -390,8 +400,29 @@ <h2 class="project-card__title">Tenzies Game</h3>
 </article>
     
 </div>
-            </main>
-        </div>
+		</div>
+    
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -430,10 +461,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -488,7 +516,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -498,14 +526,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/projects/quizzical/index.html b/projects/quizzical/index.html
index 4abd701c..1c245c11 100644
--- a/projects/quizzical/index.html
+++ b/projects/quizzical/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,8 +228,8 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
+        <main id="content">
+            <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
 
 <article class="project">
     <h1 class="project__heading">Quizzical</h1>
@@ -260,8 +259,7 @@ <h2>Technologies Used</h2>
 Non blandit massa enim nec. Tempor commodo ullamcorper a lacus vestibulum sed. Et netus et malesuada fames ac turpis egestas integer eget. In ante metus dictum at tempor commodo. Eu scelerisque felis imperdiet proin fermentum leo. -->
     </div>
 </article>
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -300,10 +298,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -358,7 +353,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -368,14 +363,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/projects/recipe-hub/index.html b/projects/recipe-hub/index.html
index 7bea8e5f..8de6d078 100644
--- a/projects/recipe-hub/index.html
+++ b/projects/recipe-hub/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,8 +228,8 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
+        <main id="content">
+            <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
 
 <article class="project">
     <h1 class="project__heading">Recipe Hub</h1>
@@ -258,8 +257,7 @@ <h3>Lessons Learned</h3>
 
     </div>
 </article>
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -298,10 +296,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -356,7 +351,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -366,14 +361,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/projects/scrimba/index.html b/projects/scrimba/index.html
index 2f2db8af..45b84425 100644
--- a/projects/scrimba/index.html
+++ b/projects/scrimba/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,8 +228,8 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
+        <main id="content">
+            <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
 
 <article class="project">
     <h1 class="project__heading">Scrimba Frontend Path Solo Projects</h1>
@@ -260,8 +259,7 @@ <h2>Technologies Used</h2>
 Non blandit massa enim nec. Tempor commodo ullamcorper a lacus vestibulum sed. Et netus et malesuada fames ac turpis egestas integer eget. In ante metus dictum at tempor commodo. Eu scelerisque felis imperdiet proin fermentum leo. -->
     </div>
 </article>
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -300,10 +298,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -358,7 +353,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -368,14 +363,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
diff --git a/projects/tenzies/index.html b/projects/tenzies/index.html
index 4bb4fb62..46d45104 100644
--- a/projects/tenzies/index.html
+++ b/projects/tenzies/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
         
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
         
         <link href="mailto:contact@helenchong.dev" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -229,8 +228,8 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
+        <main id="content">
+            <p><a href="/projects/"><i class="fa-solid fa-arrow-left"></i> Back to projects</a></p>
 
 <article class="project">
     <h1 class="project__heading">Tenzies Game</h1>
@@ -258,8 +257,7 @@ <h2>Lessons Learned</h2>
 
     </div>
 </article>
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -298,10 +296,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -356,7 +351,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -366,14 +361,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>
