diff --git a/about/index.html b/about/index.html
index 5ef1a8fe..4da23cac 100644
--- a/about/index.html
+++ b/about/index.html
@@ -232,6 +232,11 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
+    <ul class="breadcrumbs">
+        
+    </ul>
+
+
 
     <h1 class="heading--main">About</h1>
 
@@ -240,8 +245,8 @@ <h1 class="heading--main">About</h1>
 
 <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>
+    <article 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>
@@ -252,28 +257,13 @@ <h2>My Certificates:</h2>
 <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>
 
-		</div>
-    
+
+        
+    </article>
 
     
 </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">
diff --git a/accessibility/index.html b/accessibility/index.html
index 5f0e5b9d..7d79f533 100644
--- a/accessibility/index.html
+++ b/accessibility/index.html
@@ -236,6 +236,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Accessibility</h1>
 
     
@@ -243,8 +244,8 @@ <h1 class="heading--main">Accessibility</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <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>
@@ -256,28 +257,13 @@ <h1 class="heading--main">Accessibility</h1>
 
 
 <p>(This accessibility statement was last updated on 28 May 2024)</p>
-		</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">
diff --git a/assets/css/blog.css b/assets/css/blog.css
index 287cf8f8..e464fa2c 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -15,6 +15,7 @@
 
 .blog__post--info {
     gap: 0.3em;
+    font-size: var(--sz-home-txt);
     margin-bottom: 2em;
 }
 
diff --git a/assets/css/components.css b/assets/css/components.css
index 827ddc7c..145e7edc 100644
--- a/assets/css/components.css
+++ b/assets/css/components.css
@@ -130,3 +130,20 @@
     color: var(--clr-slate-600);
     text-align: center;
 }
+
+/* Breadcumbs */
+.breadcrumbs {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 0.5em;
+    flex-wrap: wrap;
+    justify-content: center;
+    font-size: var(--sz-home-txt);
+}
+
+.breadcrumbs li::after {
+    content: '➔';
+    padding-left: 0.3em;
+}
diff --git a/assets/css/content.css b/assets/css/content.css
index 82a97d65..17b33f54 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -46,12 +46,12 @@ main {
 }
 
 .right-sidebar {
-    padding: 1.2em clamp(1em, 5%, 1.5em);
+    padding: 0 clamp(1em, 5%, 1.5em);
 }
 
 .sidebar--sticky {
     position: sticky;
-    top: 6.5em;
+    top: 7em;
 }
 
 /* Desktop main content layout */
diff --git a/assets/css/general.css b/assets/css/general.css
index ab57ca23..0e299104 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -31,11 +31,6 @@ h3 {
     font-size: var(--sz-h3);
 }
 
-h2:has(+ *[class]),
-h3:has(+ *[class]) {
-    margin-bottom: 0.5em;
-}
-
 h4 {
     font-size: var(--sz-h4);
 }
diff --git a/assets/css/projects.css b/assets/css/projects.css
index 68c42d33..f5bd9fbb 100644
--- a/assets/css/projects.css
+++ b/assets/css/projects.css
@@ -121,8 +121,13 @@
     margin: 0 auto 4rem auto;
 }
 
+.project--page {
+    display: grid;
+    place-content: center;
+}
+
 .project {
-    margin-bottom: 4rem;
+    max-width: 60rem;
 }
 
 .project__image-wrapper {
diff --git a/assets/css/socials.css b/assets/css/socials.css
index 62cf03e8..baaaea2c 100644
--- a/assets/css/socials.css
+++ b/assets/css/socials.css
@@ -24,6 +24,6 @@
 }
 
 .socials__icon {
-    font-size: 2rem;
+    font-size: 1.8rem;
     color: var(--clr-accent-700);
 }
diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html
index b48d0474..bf4f2091 100644
--- a/blog/categories/100-days-of-code/index.html
+++ b/blog/categories/100-days-of-code/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;100 days of code&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;100 days of code&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "100 days of code"</h2>
 
 
@@ -261,8 +262,9 @@ <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>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
index 27291150..898cb241 100644
--- a/blog/categories/about-this-blog/index.html
+++ b/blog/categories/about-this-blog/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;about this blog&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;about this blog&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">2 Posts Filed Under "about this blog"</h2>
 
 
@@ -271,8 +272,9 @@ <h2 class="heading--main">2 Posts Filed Under "about this blog"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -300,22 +302,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html
index 99a8d565..2f258e1d 100644
--- a/blog/categories/about-this-website/index.html
+++ b/blog/categories/about-this-website/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;about this website&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;about this website&quot;</h1
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">3 Posts Filed Under "about this website"</h2>
 
 
@@ -281,8 +282,9 @@ <h2 class="heading--main">3 Posts Filed Under "about this website"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -310,22 +312,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
index 496f9572..3c350152 100644
--- a/blog/categories/cassette-beasts/index.html
+++ b/blog/categories/cassette-beasts/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;cassette beasts&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;cassette beasts&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "cassette beasts"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "cassette beasts"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html
index 226bdcc5..0fb0ab65 100644
--- a/blog/categories/cbpickaxe/index.html
+++ b/blog/categories/cbpickaxe/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;cbpickaxe&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;cbpickaxe&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "cbpickaxe"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "cbpickaxe"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html
index ca3bd5c2..6175bc00 100644
--- a/blog/categories/chingu/index.html
+++ b/blog/categories/chingu/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;chingu&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;chingu&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">2 Posts Filed Under "chingu"</h2>
 
 
@@ -271,8 +272,9 @@ <h2 class="heading--main">2 Posts Filed Under "chingu"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -300,22 +302,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/cs50/index.html b/blog/categories/cs50/index.html
index 72f56e13..9b7df7fd 100644
--- a/blog/categories/cs50/index.html
+++ b/blog/categories/cs50/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;cs50&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;cs50&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">4 Posts Filed Under "cs50"</h2>
 
 
@@ -291,8 +292,9 @@ <h2 class="heading--main">4 Posts Filed Under "cs50"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -320,22 +322,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/cs50x/index.html b/blog/categories/cs50x/index.html
index c7216674..c075c3ff 100644
--- a/blog/categories/cs50x/index.html
+++ b/blog/categories/cs50x/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;cs50x&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;cs50x&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">4 Posts Filed Under "cs50x"</h2>
 
 
@@ -291,8 +292,9 @@ <h2 class="heading--main">4 Posts Filed Under "cs50x"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -320,22 +322,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/css/index.html b/blog/categories/css/index.html
index 8aabebc3..c0bda658 100644
--- a/blog/categories/css/index.html
+++ b/blog/categories/css/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;css&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;css&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "css"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "css"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/eleventy/index.html b/blog/categories/eleventy/index.html
index dce31362..61db107c 100644
--- a/blog/categories/eleventy/index.html
+++ b/blog/categories/eleventy/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;eleventy&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;eleventy&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "eleventy"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "eleventy"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/flask/index.html b/blog/categories/flask/index.html
index 94316cc4..52d142f5 100644
--- a/blog/categories/flask/index.html
+++ b/blog/categories/flask/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;flask&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;flask&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">2 Posts Filed Under "flask"</h2>
 
 
@@ -271,8 +272,9 @@ <h2 class="heading--main">2 Posts Filed Under "flask"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -300,22 +302,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/freecodecamp/index.html b/blog/categories/freecodecamp/index.html
index 250ba722..60e2e7c1 100644
--- a/blog/categories/freecodecamp/index.html
+++ b/blog/categories/freecodecamp/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;freecodecamp&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;freecodecamp&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "freecodecamp"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "freecodecamp"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/github-pages/index.html b/blog/categories/github-pages/index.html
index 1f9d291c..b13ca2d1 100644
--- a/blog/categories/github-pages/index.html
+++ b/blog/categories/github-pages/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;github pages&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;github pages&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "github pages"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "github pages"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html
index 912a2ec8..f0f12026 100644
--- a/blog/categories/github/index.html
+++ b/blog/categories/github/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;github&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;github&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "github"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "github"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/html/index.html b/blog/categories/html/index.html
index 99a04d18..98c5e929 100644
--- a/blog/categories/html/index.html
+++ b/blog/categories/html/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;html&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;html&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "html"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "html"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/index.html b/blog/categories/index.html
index 249d384e..24c7ba2b 100644
--- a/blog/categories/index.html
+++ b/blog/categories/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Categories</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Categories</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <ul>
 
 	
@@ -331,8 +332,9 @@ <h1 class="heading--main">Blog Post Categories</h1>
 </ul>
 
 <p>See all blog posts in the <a href="/blog/posts/">archive</a>.</p>
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -360,22 +362,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/javascript/index.html b/blog/categories/javascript/index.html
index e313d11b..3200d630 100644
--- a/blog/categories/javascript/index.html
+++ b/blog/categories/javascript/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;javascript&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;javascript&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "javascript"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "javascript"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/javascriptmas/index.html b/blog/categories/javascriptmas/index.html
index 0a4c261b..283d39d0 100644
--- a/blog/categories/javascriptmas/index.html
+++ b/blog/categories/javascriptmas/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;javascriptmas&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;javascriptmas&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "javascriptmas"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "javascriptmas"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html
index f29fa4c5..97a4d13d 100644
--- a/blog/categories/python/index.html
+++ b/blog/categories/python/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;python&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;python&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">3 Posts Filed Under "python"</h2>
 
 
@@ -281,8 +282,9 @@ <h2 class="heading--main">3 Posts Filed Under "python"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -310,22 +312,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/react/index.html b/blog/categories/react/index.html
index b0a62c21..7d6e3590 100644
--- a/blog/categories/react/index.html
+++ b/blog/categories/react/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;react&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;react&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "react"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "react"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/scrimba/index.html b/blog/categories/scrimba/index.html
index b31b7247..7db97090 100644
--- a/blog/categories/scrimba/index.html
+++ b/blog/categories/scrimba/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;scrimba&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;scrimba&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">2 Posts Filed Under "scrimba"</h2>
 
 
@@ -271,8 +272,9 @@ <h2 class="heading--main">2 Posts Filed Under "scrimba"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -300,22 +302,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/categories/sql/index.html b/blog/categories/sql/index.html
index 0a3e3071..12285e80 100644
--- a/blog/categories/sql/index.html
+++ b/blog/categories/sql/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Post Category: &quot;sql&quot;</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Post Category: &quot;sql&quot;</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">3 Posts Filed Under "sql"</h2>
 
 
@@ -281,8 +282,9 @@ <h2 class="heading--main">3 Posts Filed Under "sql"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -310,22 +312,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/index.html b/blog/index.html
index 1169d279..b96125e4 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <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>
@@ -286,8 +287,9 @@ <h2>Latest Posts:</h2>
 
 <p>See all blog posts in the <a href="/blog/posts/">archive</a>.</p>
 
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -315,22 +317,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/posts/1/index.html b/blog/posts/1/index.html
index e7ebee16..f9c16141 100644
--- a/blog/posts/1/index.html
+++ b/blog/posts/1/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Archive</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Archive</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <ul class="blog__postlist">
     
         <li>
@@ -295,8 +296,9 @@ <h1 class="heading--main">Blog Archive</h1>
         Next
     
 </p>
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -324,22 +326,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 3ca3add7..5ef1a36c 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">Welcome to Helen Codes</h1>
 
@@ -261,19 +262,18 @@ <h1 class="heading--main">Welcome to Helen Codes</h1>
 
 <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>
+    <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -301,22 +301,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 473b144f..9b598e05 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">Built A TickyBot Clone for Chingu&#39;s Solo Projects</h1>
 
@@ -261,20 +262,19 @@ <h1 class="heading--main">Built A TickyBot Clone for Chingu&#39;s Solo Projects<
 
 <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>
+    <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -302,22 +302,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 43f5b355..0c8c5a8d 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">CS50x Week 7 Completed</h1>
 
@@ -265,19 +266,18 @@ <h1 class="heading--main">CS50x Week 7 Completed</h1>
 
 <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>
+    <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -305,22 +305,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 59d4cdb1..b9da2a83 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">CS50x Week 8 Assignments Completed</h1>
 
@@ -269,18 +270,17 @@ <h1 class="heading--main">CS50x Week 8 Assignments Completed</h1>
 
 <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>
+    <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -308,22 +308,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 6fe59273..2c2c2aba 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">cbpickaxe and My First (Merged) Pull Request in Python</h1>
 
@@ -267,8 +268,8 @@ <h1 class="heading--main">cbpickaxe and My First (Merged) Pull Request in Python
 
 <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>
+    <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>
@@ -284,12 +285,11 @@ <h1 class="heading--main">cbpickaxe and My First (Merged) Pull Request in Python
 <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -317,22 +317,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 2f6b25bc..6de17ffe 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">Chingu Voyage 46 Completed</h1>
 
@@ -261,8 +262,8 @@ <h1 class="heading--main">Chingu Voyage 46 Completed</h1>
 
 <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>
+    <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>
@@ -271,12 +272,11 @@ <h1 class="heading--main">Chingu Voyage 46 Completed</h1>
 <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -304,22 +304,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 0470b41a..18547d3a 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">JavaScriptmas 2023 Challenge Completed — and Won</h1>
 
@@ -263,20 +264,19 @@ <h1 class="heading--main">JavaScriptmas 2023 Challenge Completed — and Won</h1
 
 <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>
+    <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -304,22 +304,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 7bd55541..bf753aa0 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">Rebuilding My Developer Portfolio with Eleventy</h1>
 
@@ -265,8 +266,8 @@ <h1 class="heading--main">Rebuilding My Developer Portfolio with Eleventy</h1>
 
 <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>
+    <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>
@@ -281,12 +282,11 @@ <h1 class="heading--main">Rebuilding My Developer Portfolio with Eleventy</h1>
 <p>Welcome to Helen Chong's brand new Eleventy portfolio website!🎉</p>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -314,22 +314,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 38bb5943..12caefbd 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">Round 1 of 100 Days of Code Challenge Completed</h1>
 
@@ -263,8 +264,8 @@ <h1 class="heading--main">Round 1 of 100 Days of Code Challenge Completed</h1>
 
 <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>
+    <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>
@@ -275,12 +276,11 @@ <h1 class="heading--main">Round 1 of 100 Days of Code Challenge Completed</h1>
 <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -308,22 +308,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 0508b83a..7a8dd0a5 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">CS50x Week 9 Completed</h1>
 
@@ -269,8 +270,8 @@ <h1 class="heading--main">CS50x Week 9 Completed</h1>
 
 <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>
+    <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>
@@ -288,12 +289,11 @@ <h1 class="heading--main">CS50x Week 9 Completed</h1>
 <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -321,22 +321,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 b01300da..ad315b13 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">Now Page for My Website</h1>
 
@@ -261,19 +262,18 @@ <h1 class="heading--main">Now Page for My Website</h1>
 
 <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>
+    <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -301,22 +301,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 30019ea4..7613032f 100644
--- a/blog/posts/2024-05-27-cs50x-course-completed/index.html
+++ b/blog/posts/2024-05-27-cs50x-course-completed/index.html
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">CS50x Course Completed</h1>
 
@@ -269,8 +270,8 @@ <h1 class="heading--main">CS50x Course Completed</h1>
 
 <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>
+    <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>
@@ -295,12 +296,11 @@ <h1 class="heading--main">CS50x Course Completed</h1>
 <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -328,22 +328,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 88775df5..0d7bc617 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">Custom Domain Name for My Developer Website</h1>
 
@@ -261,8 +262,8 @@ <h1 class="heading--main">Custom Domain Name for My Developer Website</h1>
 
 <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>
+    <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>
@@ -272,12 +273,11 @@ <h1 class="heading--main">Custom Domain Name for My Developer Website</h1>
 <p>Welcome to helenchong.dev! 🥳</p>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -305,22 +305,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
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 310746a7..e0fe2e39 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
@@ -232,16 +232,17 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
-        <ul class="breadcrumbs">
-            
-            <li>
-                <a href="/blog/">Blog</a>
-            </li>
-            <li>
-                <a href="/blog/posts/">Archive</a>
-            </li>
-        </ul>
-    
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a href="/blog/posts/">Archive</a>
+        </li>
+    </ul>
+
+
 
     <h1 class="heading--main">Finally Deployed My Scrimba React Solo Projects to GitHub Pages</h1>
 
@@ -265,8 +266,8 @@ <h1 class="heading--main">Finally Deployed My Scrimba React Solo Projects to Git
 
 <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>
+    <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>
@@ -356,12 +357,11 @@ <h1 class="heading--main">Finally Deployed My Scrimba React Solo Projects to Git
 <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>
 
 
-            
-                    <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>
-    
+        
+                <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>
 
     
         
@@ -389,22 +389,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/blog/posts/index.html b/blog/posts/index.html
index 03b624fe..aba9ed63 100644
--- a/blog/posts/index.html
+++ b/blog/posts/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Blog Archive</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Blog Archive</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <ul class="blog__postlist">
     
         <li>
@@ -355,8 +356,9 @@ <h1 class="heading--main">Blog Archive</h1>
         <a href=" /blog/posts/1/">Next</a>
     
 </p>
-		</div>
-    
+
+        
+    </div>
 
     
         
@@ -384,22 +386,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </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">
diff --git a/contact/index.html b/contact/index.html
index b3bc58ea..3580195a 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Want to get in touch?</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Want to get in touch?</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <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">
@@ -259,28 +260,13 @@ <h1 class="heading--main">Want to get in touch?</h1>
     </div>
         <button class="form__button" type="submit">Let's talk</button>
 </form>
-		</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">
diff --git a/now/index.html b/now/index.html
index c6cef261..4d8ce980 100644
--- a/now/index.html
+++ b/now/index.html
@@ -235,6 +235,11 @@ <h2 class="visually-hidden">Navigation Links:</h2>
             
 <header class="main__header">
     
+    <ul class="breadcrumbs">
+        
+    </ul>
+
+
 
     <h1 class="heading--main">Now</h1>
 
@@ -243,8 +248,8 @@ <h1 class="heading--main">Now</h1>
 
 <div class="container">
     
-		<div class="prose">
-			<p><em>This page was last updated on 1 June 2024.</em></p>
+    <article 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>
@@ -262,28 +267,13 @@ <h2>Other Things I Have Been Doing Recently</h2>
 <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>
 
-		</div>
-    
+
+        
+    </article>
 
     
 </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">
diff --git a/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html
index 86e9d6a9..622b893e 100644
--- a/projects/frontend-mentor/index.html
+++ b/projects/frontend-mentor/index.html
@@ -229,21 +229,33 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script>
         <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>
-    <div class="project__image-wrapper">
-        <picture><source type="image/avif" srcset="/assets/images/lCRPlt-sJS-300.avif 300w, /assets/images/lCRPlt-sJS-800.avif 800w, /assets/images/lCRPlt-sJS-2880.avif 2880w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of a solution to a Frontend Mentor challenge" loading="lazy" decoding="async" src="/assets/images/lCRPlt-sJS-300.jpeg" width="2880" height="1800" srcset="/assets/images/lCRPlt-sJS-300.jpeg 300w, /assets/images/lCRPlt-sJS-800.jpeg 800w, /assets/images/lCRPlt-sJS-2880.jpeg 2880w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
-    </div>
-    <div class="project__content prose">
-        <h2>Project links</h2>
-        <ul>
-            <li><a href="https://helenchong.dev/Frontend-Mentor-Challenges/">Project Site</a></li>
-            <li><a href="https://github.com/helenclx/Frontend-Mentor-Challenges">Project Repository</a></li>
-        </ul>
-
-        <h2>Introduction</h2>
+            <div class="project--page">
+    <header class="main__header">
+        
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/projects/">Projects</a>
+        </li>
+    </ul>
+
+
+
+        <h1 class="heading--main">Frontend Mentor Challenge Solutions</h1>
+    </header>
+
+    <article class="project">
+        <div class="project__image-wrapper">
+            <picture><source type="image/avif" srcset="/assets/images/lCRPlt-sJS-300.avif 300w, /assets/images/lCRPlt-sJS-800.avif 800w, /assets/images/lCRPlt-sJS-2880.avif 2880w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of a solution to a Frontend Mentor challenge" loading="lazy" decoding="async" src="/assets/images/lCRPlt-sJS-300.jpeg" width="2880" height="1800" srcset="/assets/images/lCRPlt-sJS-300.jpeg 300w, /assets/images/lCRPlt-sJS-800.jpeg 800w, /assets/images/lCRPlt-sJS-2880.jpeg 2880w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
+        </div>
+        <div class="project__content prose">
+            <h2>Project links</h2>
+            <ul>
+                <li><a href="https://helenchong.dev/Frontend-Mentor-Challenges/">Project Site</a></li>
+                <li><a href="https://github.com/helenclx/Frontend-Mentor-Challenges">Project Repository</a></li>
+            </ul>
+
+            <h2>Introduction</h2>
 <p>My solutions to the <a href="https://www.frontendmentor.io/challenges">Frontend Mentor challenges</a>.</p>
 <p>You can also view all the challenges I have completed on my <a href="https://www.frontendmentor.io/profile/helenclx">Frontend mentor profile</a>.</p>
 <p>View the Read Me of each of my solution for more information about each soluution.</p>
@@ -258,8 +270,9 @@ <h2>Technologies Used</h2>
 <h2>Lessons Learned</h2>
 <p>Frontend Mentor has been a great platform for me to practice my frontend development skills by building real-world projects.</p>
 
-    </div>
-</article>
+        </div>
+    </article>
+</div>
         </main>
         <footer class="footer container">
     <nav class="socials">
diff --git a/projects/index.html b/projects/index.html
index 66241d65..2565254c 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -233,6 +233,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
     
 
+
     <h1 class="heading--main">Featured Projects</h1>
 
     
@@ -240,8 +241,8 @@ <h1 class="heading--main">Featured Projects</h1>
 
 <div class="container">
     
-		<div class="prose">
-			
+    <div class="prose">
+        
 <div class="project-list">
     
         
@@ -400,28 +401,13 @@ <h2 class="project-card__title">Tenzies Game</h3>
 </article>
     
 </div>
-		</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">
diff --git a/projects/quizzical/index.html b/projects/quizzical/index.html
index 1c245c11..96852fd1 100644
--- a/projects/quizzical/index.html
+++ b/projects/quizzical/index.html
@@ -229,21 +229,33 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script>
         <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>
-    <div class="project__image-wrapper">
-        <picture><source type="image/avif" srcset="/assets/images/SnX5MO5A97-300.avif 300w, /assets/images/SnX5MO5A97-800.avif 800w, /assets/images/SnX5MO5A97-1898.avif 1898w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of the Quizzical project" loading="lazy" decoding="async" src="/assets/images/SnX5MO5A97-300.jpeg" width="1898" height="1086" srcset="/assets/images/SnX5MO5A97-300.jpeg 300w, /assets/images/SnX5MO5A97-800.jpeg 800w, /assets/images/SnX5MO5A97-1898.jpeg 1898w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
-    </div>
-    <div class="project__content prose">
-        <h2>Project links</h2>
-        <ul>
-            <li><a href="https://helenchong.dev/Scrimba-React-Solo-Projects/3-quizzical/">Project Site</a></li>
-            <li><a href="https://github.com/helenclx/Scrimba-React-Solo-Projects/tree/main/3-quizzical">Project Repository</a></li>
-        </ul>
-
-        <h2>Introduction</h2>
+            <div class="project--page">
+    <header class="main__header">
+        
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/projects/">Projects</a>
+        </li>
+    </ul>
+
+
+
+        <h1 class="heading--main">Quizzical</h1>
+    </header>
+
+    <article class="project">
+        <div class="project__image-wrapper">
+            <picture><source type="image/avif" srcset="/assets/images/SnX5MO5A97-300.avif 300w, /assets/images/SnX5MO5A97-800.avif 800w, /assets/images/SnX5MO5A97-1898.avif 1898w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of the Quizzical project" loading="lazy" decoding="async" src="/assets/images/SnX5MO5A97-300.jpeg" width="1898" height="1086" srcset="/assets/images/SnX5MO5A97-300.jpeg 300w, /assets/images/SnX5MO5A97-800.jpeg 800w, /assets/images/SnX5MO5A97-1898.jpeg 1898w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
+        </div>
+        <div class="project__content prose">
+            <h2>Project links</h2>
+            <ul>
+                <li><a href="https://helenchong.dev/Scrimba-React-Solo-Projects/3-quizzical/">Project Site</a></li>
+                <li><a href="https://github.com/helenclx/Scrimba-React-Solo-Projects/tree/main/3-quizzical">Project Repository</a></li>
+            </ul>
+
+            <h2>Introduction</h2>
 <p>Quizzical is one of the solo projects for <a href="https://scrimba.com/learn/learnreact">Scrimba's Learn React course</a>.</p>
 <!-- ## Problem Solved
 
@@ -257,8 +269,9 @@ <h2>Technologies Used</h2>
 ## Lessons Learned
 
 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>
+        </div>
+    </article>
+</div>
         </main>
         <footer class="footer container">
     <nav class="socials">
diff --git a/projects/recipe-hub/index.html b/projects/recipe-hub/index.html
index 8de6d078..538bea1e 100644
--- a/projects/recipe-hub/index.html
+++ b/projects/recipe-hub/index.html
@@ -229,21 +229,33 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script>
         <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>
-    <div class="project__image-wrapper">
-        <picture><source type="image/avif" srcset="/assets/images/mcZ-unTwEJ-300.avif 300w, /assets/images/mcZ-unTwEJ-800.avif 800w, /assets/images/mcZ-unTwEJ-1898.avif 1898w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of Recipe Hub" loading="lazy" decoding="async" src="/assets/images/mcZ-unTwEJ-300.jpeg" width="1898" height="888" srcset="/assets/images/mcZ-unTwEJ-300.jpeg 300w, /assets/images/mcZ-unTwEJ-800.jpeg 800w, /assets/images/mcZ-unTwEJ-1898.jpeg 1898w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
-    </div>
-    <div class="project__content prose">
-        <h2>Project links</h2>
-        <ul>
-            <li><a href="https://chingu-voyages.github.io/v46-tier1-team-01/Food-Recipe/">Project Site</a></li>
-            <li><a href="https://github.com/chingu-voyages/v46-tier1-team-01">Project Repository</a></li>
-        </ul>
-
-        <h2>Introduction</h2>
+            <div class="project--page">
+    <header class="main__header">
+        
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/projects/">Projects</a>
+        </li>
+    </ul>
+
+
+
+        <h1 class="heading--main">Recipe Hub</h1>
+    </header>
+
+    <article class="project">
+        <div class="project__image-wrapper">
+            <picture><source type="image/avif" srcset="/assets/images/mcZ-unTwEJ-300.avif 300w, /assets/images/mcZ-unTwEJ-800.avif 800w, /assets/images/mcZ-unTwEJ-1898.avif 1898w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of Recipe Hub" loading="lazy" decoding="async" src="/assets/images/mcZ-unTwEJ-300.jpeg" width="1898" height="888" srcset="/assets/images/mcZ-unTwEJ-300.jpeg 300w, /assets/images/mcZ-unTwEJ-800.jpeg 800w, /assets/images/mcZ-unTwEJ-1898.jpeg 1898w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
+        </div>
+        <div class="project__content prose">
+            <h2>Project links</h2>
+            <ul>
+                <li><a href="https://chingu-voyages.github.io/v46-tier1-team-01/Food-Recipe/">Project Site</a></li>
+                <li><a href="https://github.com/chingu-voyages/v46-tier1-team-01">Project Repository</a></li>
+            </ul>
+
+            <h2>Introduction</h2>
 <p>Recipe Hub is a team project built by Tier 1 Team 1 from <a href="https://www.chingu.io/">Chingu</a> Voyage 46. I was part of this team along with two other developers.</p>
 <h2>Problem Solved</h2>
 <p>Recipe Hub allows users to search for recipes by by inputting ingredients. The search input is used to fetch recipe data from the <a href="https://rapidapi.com/apidojo/api/tasty">Tasty API</a>.</p>
@@ -255,8 +267,9 @@ <h3>Lessons Learned</h3>
 <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>You can read more about my completion of Chingu Voyage 46 from my blog post: <a href="/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/">Chingu Voyage 46 Completed</a>.</p>
 
-    </div>
-</article>
+        </div>
+    </article>
+</div>
         </main>
         <footer class="footer container">
     <nav class="socials">
diff --git a/projects/scrimba/index.html b/projects/scrimba/index.html
index 45b84425..622c90ca 100644
--- a/projects/scrimba/index.html
+++ b/projects/scrimba/index.html
@@ -229,21 +229,33 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script>
         <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>
-    <div class="project__image-wrapper">
-        <picture><source type="image/avif" srcset="/assets/images/aaQV-4GHdn-300.avif 300w, /assets/images/aaQV-4GHdn-800.avif 800w, /assets/images/aaQV-4GHdn-1920.avif 1920w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of a Scrimba solo project" loading="lazy" decoding="async" src="/assets/images/aaQV-4GHdn-300.jpeg" width="1920" height="878" srcset="/assets/images/aaQV-4GHdn-300.jpeg 300w, /assets/images/aaQV-4GHdn-800.jpeg 800w, /assets/images/aaQV-4GHdn-1920.jpeg 1920w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
-    </div>
-    <div class="project__content prose">
-        <h2>Project links</h2>
-        <ul>
-            
-            <li><a href="https://github.com/helenclx/Scrimba-Frontend-Solo-Projects">Project Repository</a></li>
-        </ul>
-
-        <h2>Introduction</h2>
+            <div class="project--page">
+    <header class="main__header">
+        
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/projects/">Projects</a>
+        </li>
+    </ul>
+
+
+
+        <h1 class="heading--main">Scrimba Frontend Path Solo Projects</h1>
+    </header>
+
+    <article class="project">
+        <div class="project__image-wrapper">
+            <picture><source type="image/avif" srcset="/assets/images/aaQV-4GHdn-300.avif 300w, /assets/images/aaQV-4GHdn-800.avif 800w, /assets/images/aaQV-4GHdn-1920.avif 1920w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of a Scrimba solo project" loading="lazy" decoding="async" src="/assets/images/aaQV-4GHdn-300.jpeg" width="1920" height="878" srcset="/assets/images/aaQV-4GHdn-300.jpeg 300w, /assets/images/aaQV-4GHdn-800.jpeg 800w, /assets/images/aaQV-4GHdn-1920.jpeg 1920w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
+        </div>
+        <div class="project__content prose">
+            <h2>Project links</h2>
+            <ul>
+                
+                <li><a href="https://github.com/helenclx/Scrimba-Frontend-Solo-Projects">Project Repository</a></li>
+            </ul>
+
+            <h2>Introduction</h2>
 <p>This repository consists of my solo projects for <a href="https://scrimba.com/learn/frontend">Scrimba's Frontend Developer Career Path</a>.</p>
 <!-- ## Problem Solved
 
@@ -257,8 +269,9 @@ <h2>Technologies Used</h2>
 ## Lessons Learned
 
 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>
+        </div>
+    </article>
+</div>
         </main>
         <footer class="footer container">
     <nav class="socials">
diff --git a/projects/tenzies/index.html b/projects/tenzies/index.html
index 46d45104..a82a5580 100644
--- a/projects/tenzies/index.html
+++ b/projects/tenzies/index.html
@@ -229,21 +229,33 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script>
         <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>
-    <div class="project__image-wrapper">
-        <picture><source type="image/avif" srcset="/assets/images/FN8pxcnzUJ-300.avif 300w, /assets/images/FN8pxcnzUJ-800.avif 800w, /assets/images/FN8pxcnzUJ-1920.avif 1920w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of Tenzies Game" loading="lazy" decoding="async" src="/assets/images/FN8pxcnzUJ-300.jpeg" width="1920" height="878" srcset="/assets/images/FN8pxcnzUJ-300.jpeg 300w, /assets/images/FN8pxcnzUJ-800.jpeg 800w, /assets/images/FN8pxcnzUJ-1920.jpeg 1920w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
-    </div>
-    <div class="project__content prose">
-        <h2>Project links</h2>
-        <ul>
-            <li><a href="https://helenchong.dev/Tenzies-Game/">Project Site</a></li>
-            <li><a href="https://github.com/helenclx/Tenzies-Game">Project Repository</a></li>
-        </ul>
-
-        <h2>Introduction</h2>
+            <div class="project--page">
+    <header class="main__header">
+        
+    <ul class="breadcrumbs">
+        
+        <li>
+            <a href="/projects/">Projects</a>
+        </li>
+    </ul>
+
+
+
+        <h1 class="heading--main">Tenzies Game</h1>
+    </header>
+
+    <article class="project">
+        <div class="project__image-wrapper">
+            <picture><source type="image/avif" srcset="/assets/images/FN8pxcnzUJ-300.avif 300w, /assets/images/FN8pxcnzUJ-800.avif 800w, /assets/images/FN8pxcnzUJ-1920.avif 1920w" sizes="(min-width: 30em) 50vw, 100vw"><img alt="Screenshots of Tenzies Game" loading="lazy" decoding="async" src="/assets/images/FN8pxcnzUJ-300.jpeg" width="1920" height="878" srcset="/assets/images/FN8pxcnzUJ-300.jpeg 300w, /assets/images/FN8pxcnzUJ-800.jpeg 800w, /assets/images/FN8pxcnzUJ-1920.jpeg 1920w" sizes="(min-width: 30em) 50vw, 100vw"></picture>
+        </div>
+        <div class="project__content prose">
+            <h2>Project links</h2>
+            <ul>
+                <li><a href="https://helenchong.dev/Tenzies-Game/">Project Site</a></li>
+                <li><a href="https://github.com/helenclx/Tenzies-Game">Project Repository</a></li>
+            </ul>
+
+            <h2>Introduction</h2>
 <p>Tenzies is a dice game that requires the player to roll until all dice are the same. This project is based on the Tenzies Game tutorial from <a href="https://scrimba.com/learn/learnreact">Scrimba's Learn React course</a>.</p>
 <h2>Problem Solved</h2>
 <p>After completing the tutorial to create a Tenzies Game from Scrimba, I made improvements to the game project, including responsive design, accessibility, keeping track of dice roll and time, etc.:</p>
@@ -255,8 +267,9 @@ <h2>Technologies Used</h2>
 <h2>Lessons Learned</h2>
 <p>Building a Tenzies game has been a fun way to learn React.js. As I made enhancements to the project, I also practiced responsive and accessible web design.</p>
 
-    </div>
-</article>
+        </div>
+    </article>
+</div>
         </main>
         <footer class="footer container">
     <nav class="socials">