From cf5893356e8f3320bfd02923c6bcf87c82db6ad7 Mon Sep 17 00:00:00 2001
From: helenclx <helenclx@users.noreply.github.com>
Date: Fri, 19 Jul 2024 08:36:30 +0000
Subject: [PATCH] deploy: a4cb40b34505d1a240ce0806a87aff73d44ad4e4

---
 404.html                                      |   3 +
 about/index.html                              |   7 +-
 accessibility/index.html                      |   3 +
 assets/css/content.css                        |  29 +-
 assets/css/general.css                        |  19 +-
 assets/js/details-utils.js                    | 367 +++++++++++++
 blog/categories/100-days-of-code/index.html   |   3 +
 blog/categories/about-this-blog/index.html    |   3 +
 blog/categories/about-this-website/index.html |  15 +-
 blog/categories/bellabuffs/index.html         |   3 +
 blog/categories/cassette-beasts/index.html    |   3 +
 blog/categories/cbpickaxe/index.html          |   3 +
 blog/categories/chingu/index.html             |   3 +
 blog/categories/cs50/index.html               |   3 +
 blog/categories/cs50x/index.html              |   3 +
 blog/categories/css/index.html                |   3 +
 blog/categories/eleventy/index.html           |  15 +-
 blog/categories/flask/index.html              |   3 +
 blog/categories/freecodecamp/index.html       |   3 +
 blog/categories/github-pages/index.html       |   3 +
 blog/categories/github/index.html             |   3 +
 blog/categories/html/index.html               |   3 +
 blog/categories/index.html                    |   9 +-
 blog/categories/javascript/index.html         |  15 +-
 blog/categories/javascriptmas/index.html      |   3 +
 blog/categories/php/index.html                |   3 +
 blog/categories/python/index.html             |   3 +
 blog/categories/react/index.html              |   3 +
 blog/categories/scrimba/index.html            |   3 +
 blog/categories/sql/index.html                |   3 +
 blog/feed.xml                                 |  91 +++-
 blog/index.html                               |  21 +-
 blog/posts/1/index.html                       |  13 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   3 +
 .../index.html                                |   8 +
 .../index.html                                | 514 ++++++++++++++++++
 blog/posts/index.html                         |  23 +-
 colophon/index.html                           |  36 +-
 contact/index.html                            |   3 +
 index.html                                    |   1 +
 now/index.html                                |  15 +-
 projects/frontend-mentor/index.html           |  13 +-
 projects/index.html                           |  23 +-
 projects/quizzical/index.html                 |   9 +-
 projects/recipe-hub/index.html                |  21 +-
 projects/scrimba/index.html                   |   9 +-
 projects/tenzies/index.html                   |  17 +-
 60 files changed, 1315 insertions(+), 86 deletions(-)
 create mode 100644 assets/js/details-utils.js
 create mode 100644 blog/posts/2024-07-19-eleventy-3-0-upgrade/index.html

diff --git a/404.html b/404.html
index 03b009e6..5309e511 100644
--- a/404.html
+++ b/404.html
@@ -201,6 +201,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Page Not Found |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -252,6 +253,8 @@ <h1 class="heading--main">Page Not Found</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         <p>Sorry! Either the page you are looking for does not exist, or it has been moved to a diffrent part of this website.</p>
 
diff --git a/about/index.html b/about/index.html
index 4e428b04..518adf5c 100644
--- a/about/index.html
+++ b/about/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> About |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -258,12 +259,16 @@ <h1 class="heading--main">About</h1>
 
 <content-wrapper>
     
+
+    
     <article class="prose">
         <p>Hi, I am Helen Chong (they/she) from Malaysia. I am a front-end web developer with 8 years of working experience as a graphic designer.</p>
 <p>I love to build and create things for problem-solving and self-expression. I intend to transfer my graphic design experience into web design and web development expertise, using 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>
 <p>In addition to coding and programming, I enjoy gaming, reading, drawing and crocheting.</p>
 <p>You can <a href="https://helenchong.dev/resume">check out my resume</a>.</p>
-<h2>My Certificates:</h2>
+<div class="heading-wrapper h2">
+<h2 id="my-certificates">My Certificates:</h2>
+<a class="heading-anchor" href="#my-certificates" aria-labelledby="my-certificates"><span hidden="">#</span></a></div>
 <ul>
 <li>freeCodeCamp's <a href="https://www.freecodecamp.org/certification/helenclx/responsive-web-design">Responsive Web Design Certification</a></li>
 <li>freeCodeCamp's <a href="https://www.freecodecamp.org/certification/helenclx/javascript-algorithms-and-data-structures-v8">JavaScript Algorithms and Data Structures (Beta) Certification</a></li>
diff --git a/accessibility/index.html b/accessibility/index.html
index 7e167f8d..d0a13b3a 100644
--- a/accessibility/index.html
+++ b/accessibility/index.html
@@ -203,6 +203,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Accessibility |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -254,6 +255,8 @@ <h1 class="heading--main">Accessibility</h1>
 
 <content-wrapper>
     
+
+    
     <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>
diff --git a/assets/css/content.css b/assets/css/content.css
index c1439419..a0281b35 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -13,7 +13,11 @@ content-wrapper { gap: 1rem; }
 }
 
 .prose > * + :not([class]) { margin-top: var(--sz-paragraph-margin); }
-.prose * + h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin-top: 2em; }
+
+.prose > * + h2, .prose > * + .h2,
+.prose > h3,  .prose > * + .h3,
+.prose > h4, .prose > h5, .prose > h6 { margin-top: 2em; }
+
 .bio { max-width: 65ch; }
 .right-sidebar { padding: 0 clamp(1em, 5%, 1.5em) 3em; }
 
@@ -22,6 +26,27 @@ content-wrapper { gap: 1rem; }
     top: 6em;
 }
 
+/* Heading Wrapper and Anchor */
+.heading-wrapper {
+    display: flex;
+    gap: 0.3em;
+    align-items: baseline;
+}
+
+* + .heading-wrapper { margin-top: 1.8em; }
+
+.heading-anchor {
+    order: -1;
+    text-underline-offset: 0.1em;
+}
+
+.heading-anchor:focus {
+    outline: 0.13em solid currentColor;
+    outline-offset: 0.05em;
+}
+
+.heading-anchor [hidden] { display: block; }
+
 /* Desktop main content layout */
 @media only screen and (min-width: 60rem) {
     content-wrapper {
@@ -32,4 +57,4 @@ content-wrapper { gap: 1rem; }
     .prose { grid-area: article; }
     .left-sidebar { grid-area: leftbar; }
     .right-sidebar { grid-area: rightbar; }
-}
+}
\ No newline at end of file
diff --git a/assets/css/general.css b/assets/css/general.css
index 743db287..d5c99af1 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -20,15 +20,22 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 { font-size: var(--fs-h1); }
-h2 { font-size: var(--fs-h2); }
-h3 { font-size: var(--fs-h3); }
+h2, .h2 { font-size: var(--fs-h2); }
+h3, .h3 { font-size: var(--fs-h3); }
 h4 { font-size: var(--fs-h4); }
 
+h2:has(+ *[class]:not(.heading-anchor)), .h2:has(+ *[class]),
+h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) { margin-bottom: 0.5em; }
+
 img, picture { height: auto; }
+:focus { outline: 0.15em solid currentColor; }
 
-code { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }
-:not(pre) > code { padding: 0.125em 0.25em; }
+code {
+    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+    word-break: break-word;
+}
 
+:not(pre) > code { padding: 0.125em 0.25em; }
 :not(pre) > code,
 pre { background-color: var(--clr-code-bg); }
 
@@ -79,4 +86,6 @@ ul:not([class]), ol:not([class]) {
 ul:not([class]) ul, ol:not([class]) ol,
 ul:not([class]) ol, ol:not([class]) ul { margin-top: var(--sz-list-gap); }
 
-button:hover { cursor: pointer; }
\ No newline at end of file
+button:hover { cursor: pointer; }
+details:focus { outline-offset: 0.2em; }
+summary { cursor: pointer; }
\ No newline at end of file
diff --git a/assets/js/details-utils.js b/assets/js/details-utils.js
new file mode 100644
index 00000000..5bf72107
--- /dev/null
+++ b/assets/js/details-utils.js
@@ -0,0 +1,367 @@
+class DetailsUtilsForceState {
+	constructor(detail, options = {}) {
+		this.options = Object.assign({
+			closeClickOutside: false,		// can also be a media query str
+			forceStateClose: false,			// can also be a media query str
+			forceStateOpen: false,			// can also be a media query str
+			closeEsc: false,						// can also be a media query str
+			forceStateRestore: true,
+		}, options);
+
+		this.detail = detail;
+		this.summary = detail.querySelector(":scope > summary");
+		this._previousStates = {};
+	}
+
+	getMatchMedia(el, mq) {
+		if(!el) return;
+		if(mq && mq === true) {
+			return {
+				matches: true
+			};
+		}
+
+		if(mq && "matchMedia" in window) {
+			return window.matchMedia(mq);
+		}
+	}
+
+	// warning: no error checking if the open/close media queries are configured wrong and overlap in weird ways
+	init() {
+		let openMatchMedia = this.getMatchMedia(this.detail, this.options.forceStateOpen);
+		let closeMatchMedia = this.getMatchMedia(this.detail, this.options.forceStateClose);
+		
+		// When both force-close and force-open are valid, it toggles state
+		if( openMatchMedia && openMatchMedia.matches && closeMatchMedia && closeMatchMedia.matches ) {
+			this.setState(!this.detail.open);
+		} else {
+			if( openMatchMedia && openMatchMedia.matches ) {
+				this.setState(true);
+			}
+
+			if( closeMatchMedia && closeMatchMedia.matches ) {
+				this.setState(false);
+			}
+		}
+
+		this.addListener(openMatchMedia, "for-open");
+		this.addListener(closeMatchMedia, "for-close");
+	}
+
+	addListener(matchmedia, type) {
+		if(!matchmedia || !("addListener" in matchmedia)) {
+			return;
+		}
+
+		// Force stated based on force-open/force-close attribute value in a media query listener
+		matchmedia.addListener(e => {
+			if(e.matches) {
+				this._previousStates[type] = this.detail.open;
+				if(this.detail.open !== (type === "for-open")) {
+					this.setState(type === "for-open");
+				}
+			} else {
+				if(this.options.forceStateRestore && this._previousStates[type] !== undefined) {
+					if(this.detail.open !== this._previousStates[type]) {
+						this.setState(this._previousStates[type]);
+					}
+				}
+			}
+		});
+	}
+
+
+	toggle() {
+		let clickEvent = new MouseEvent("click", {
+			view: window,
+			bubbles: true,
+			cancelable: true
+		});
+		this.summary.dispatchEvent(clickEvent);
+	}
+
+	triggerClickToClose() {
+		if(this.summary && this.options.closeClickOutside) {
+			this.toggle();
+		}
+	}
+
+	setState(setOpen) {
+		if( setOpen ) {
+			this.detail.setAttribute("open", "open");
+		} else {
+			this.detail.removeAttribute("open");
+		}
+	}
+}
+
+class DetailsUtilsAnimateDetails {
+	constructor(detail) {
+		this.duration = {
+			open: 200,
+			close: 150
+		};
+		this.detail = detail;
+		this.summary = this.detail.querySelector(":scope > summary");
+
+		let contentTarget = this.detail.getAttribute("data-du-animate-target");
+		if(contentTarget) {
+			this.content = this.detail.closest(contentTarget);
+		}
+
+		if(!this.content) {
+			this.content = this.summary.nextElementSibling;
+		}
+		if(!this.content) {
+			// TODO wrap in an element?
+			throw new Error("For now <details-utils> requires a child element for animation.");
+		}
+
+		this.summary.addEventListener("click", this.onclick.bind(this));
+	}
+
+	parseAnimationFrames(property, ...frames) {
+		let keyframes = [];
+		for(let frame of frames) {
+			let obj = {};
+			obj[property] = frame;
+			keyframes.push(obj);
+		}
+		return keyframes;
+	}
+
+	getKeyframes(open) {
+		let frames = this.parseAnimationFrames("maxHeight", "0px", `${this.getContentHeight()}px`);
+		if(!open) {
+			return frames.filter(() => true).reverse();
+		}
+		return frames;
+	}
+
+	getContentHeight() {
+		if(this.contentHeight) {
+			return this.contentHeight;
+		}
+
+		// make sure it’s open before we measure otherwise it will be 0
+		if(this.detail.open) {
+			this.contentHeight = this.content.offsetHeight;
+			return this.contentHeight;
+		}
+	}
+
+	animate(open, duration) {
+		this.isPending = true;
+		let frames = this.getKeyframes(open);
+		this.animation = this.content.animate(frames, {
+			duration,
+			easing: "ease-out"
+		});
+		this.detail.classList.add("details-animating")
+
+		this.animation.finished.catch(e => {}).finally(() => {
+			this.isPending = false;
+			this.detail.classList.remove("details-animating");
+		});
+
+		// close() has to wait to remove the [open] attribute manually until after the animation runs
+		// open() doesn’t have to wait, it needs [open] added before it animates
+		if(!open) {
+			this.animation.finished.catch(e => {}).finally(() => {
+				this.detail.removeAttribute("open");
+			});
+		}
+	}
+
+	open() {
+		if(this.contentHeight) {
+			this.animate(true, this.duration.open);
+		} else {
+			// must wait a frame if we haven’t cached the contentHeight
+			requestAnimationFrame(() => this.animate(true, this.duration.open));
+		}
+	}
+
+	close() {
+		this.animate(false, this.duration.close);
+	}
+
+	useAnimation() {
+		return "matchMedia" in window && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	}
+
+	// happens before state change when toggling
+	onclick(event) {
+		// do nothing if the click is inside of a link
+		if(event.target.closest("a[href]") || !this.useAnimation()) {
+			return;
+		}
+
+		if(this.isPending) {
+			if(this.animation) {
+				this.animation.cancel();
+			}
+		} else if(this.detail.open) {
+			// cancel the click because we want to wait to remove [open] until after the animation
+			event.preventDefault();
+			this.close();
+		} else {
+			this.open();
+		}
+	}
+}
+
+class DetailsUtils extends HTMLElement {
+	constructor() {
+		super();
+
+		this.attrs = {
+			animate: "animate",
+			closeEsc: "close-esc",
+			closeClickOutside: "close-click-outside",
+			forceStateClose: "force-close",
+			forceStateOpen: "force-open",
+			forceStateRestore: "force-restore",
+			toggleDocumentClass: "toggle-document-class",
+			closeClickOutsideButton: "data-du-close-click",
+		};
+
+		this.options = {};
+
+		this._connect();
+	}
+
+	getAttributeValue(name) {
+		let value = this.getAttribute(name);
+		if(value === undefined || value === "") {
+			return true;
+		} else if(value) {
+			return value;
+		}
+		return false;
+	}
+
+	connectedCallback() {
+		this._connect();
+	}
+
+	_connect() {
+		if (this.children.length) {
+			this._init();
+			return;
+		}
+
+		// not yet available, watch it for init
+		this._observer = new MutationObserver(this._init.bind(this));
+		this._observer.observe(this, { childList: true });
+	}
+
+	_init() {
+		if(this.initialized) {
+			return;
+		}
+		this.initialized = true;
+
+		this.options.closeClickOutside = this.getAttributeValue(this.attrs.closeClickOutside);
+		this.options.closeEsc = this.getAttributeValue(this.attrs.closeEsc);
+		this.options.forceStateClose = this.getAttributeValue(this.attrs.forceStateClose);
+		this.options.forceStateOpen = this.getAttributeValue(this.attrs.forceStateOpen);
+		this.options.forceStateRestore = this.getAttributeValue(this.attrs.forceStateRestore);
+
+		// TODO support nesting <details-utils>
+		let details = Array.from(this.querySelectorAll(`:scope details`));
+		for(let detail of details) {
+			// override initial state based on viewport (if needed)
+			let fs = new DetailsUtilsForceState(detail, this.options);
+			fs.init();
+
+			if(this.hasAttribute(this.attrs.animate)) {
+				// animate the menus
+				new DetailsUtilsAnimateDetails(detail);
+			}
+		}
+
+		this.bindCloseOnEsc(details);
+		this.bindClickoutToClose(details);
+
+		this.toggleDocumentClassName = this.getAttribute(this.attrs.toggleDocumentClass);
+		if(this.toggleDocumentClassName) {
+			this.bindToggleDocumentClass(details);
+		}
+	}
+
+	bindCloseOnEsc(details) {
+		if(!this.options.closeEsc) {
+			return;
+		}
+
+		document.documentElement.addEventListener("keydown", event => {
+			if(event.keyCode === 27) {
+				for(let detail of details) {
+					if (detail.open) {
+						let fs = new DetailsUtilsForceState(detail, this.options);
+						let mm = fs.getMatchMedia(detail, this.options.closeEsc);
+						if(!mm || mm && mm.matches) {
+							fs.toggle();
+						}
+					}
+				}
+			}
+		}, false);
+	}
+
+	isChildOfParent(target, parent) {
+		while(target && target.parentNode) {
+			if(target.parentNode === parent) {
+				return true;
+			}
+			target = target.parentNode;
+		}
+		return false;
+	}
+
+	onClickoutToClose(detail, event) {
+		let fs = new DetailsUtilsForceState(detail, this.options);
+		let mm = fs.getMatchMedia(detail, this.options.closeClickOutside);
+		if(mm && !mm.matches) {
+			// don’t close if has a media query but it doesn’t match current viewport size
+			// useful for viewport navigation that must stay open (e.g. list of horizontal links)
+			return;
+		}
+
+		let isCloseButton = event.target.hasAttribute(this.attrs.closeClickOutsideButton);
+		if((isCloseButton || !this.isChildOfParent(event.target, detail)) && detail.open) {
+			fs.triggerClickToClose(detail);
+		}
+	}
+
+	bindClickoutToClose(details) {
+		// Note: Scoped to document
+		document.documentElement.addEventListener("mousedown", event => {
+			for(let detail of details) {
+				this.onClickoutToClose(detail, event);
+			}
+		}, false);
+
+		// Note: Scoped to this element only
+		this.addEventListener("keypress", event => {
+			if(event.which === 13 || event.which === 32) { // enter, space
+				for(let detail of details) {
+					this.onClickoutToClose(detail, event);
+				}
+			}
+		}, false);
+	}
+
+	bindToggleDocumentClass(details) {
+		for(let detail of details) {
+			detail.addEventListener("toggle", (event) => {
+				document.documentElement.classList.toggle( this.toggleDocumentClassName, event.target.open );
+			});
+		}
+	}
+}
+
+if(typeof window !== "undefined" && ("customElements" in window)) {
+	window.customElements.define("details-utils", DetailsUtils);
+}
diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html
index b4506310..2588c2b4 100644
--- a/blog/categories/100-days-of-code/index.html
+++ b/blog/categories/100-days-of-code/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;100 days of code&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;100 days of code&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "100 days of code"</h2>
diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
index db3ae8bf..5667e5ea 100644
--- a/blog/categories/about-this-blog/index.html
+++ b/blog/categories/about-this-blog/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;about this blog&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;about this blog&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>2 Posts Filed Under "about this blog"</h2>
diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html
index 84be0b17..533ec5e4 100644
--- a/blog/categories/about-this-website/index.html
+++ b/blog/categories/about-this-website/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;about this website&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,13 +252,25 @@ <h1 class="heading--main">Blog Post Category: &quot;about this website&quot;</h1
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
-<h2>3 Posts Filed Under "about this website"</h2>
+<h2>4 Posts Filed Under "about this website"</h2>
 
 
 <ul class="blog__postlist">
     
+        <li>
+            <p class="blog__postlist--title">
+                <a href="/blog/posts/2024-07-19-eleventy-3-0-upgrade/">
+                    Aboard the Eleventy 3.0 Train
+                    
+                </a>
+            </p>
+            <time>19 July 2024</time>
+        </li>
+    
         <li>
             <p class="blog__postlist--title">
                 <a href="/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/">
diff --git a/blog/categories/bellabuffs/index.html b/blog/categories/bellabuffs/index.html
index 9bc49219..4d780d8d 100644
--- a/blog/categories/bellabuffs/index.html
+++ b/blog/categories/bellabuffs/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;bellabuffs&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;bellabuffs&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "bellabuffs"</h2>
diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
index 692a4eb5..698bf59b 100644
--- a/blog/categories/cassette-beasts/index.html
+++ b/blog/categories/cassette-beasts/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;cassette beasts&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;cassette beasts&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "cassette beasts"</h2>
diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html
index aad1a705..17df0a06 100644
--- a/blog/categories/cbpickaxe/index.html
+++ b/blog/categories/cbpickaxe/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;cbpickaxe&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;cbpickaxe&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "cbpickaxe"</h2>
diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html
index 74de5ac3..c30334ac 100644
--- a/blog/categories/chingu/index.html
+++ b/blog/categories/chingu/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;chingu&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;chingu&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>2 Posts Filed Under "chingu"</h2>
diff --git a/blog/categories/cs50/index.html b/blog/categories/cs50/index.html
index e13dce93..ac5d9881 100644
--- a/blog/categories/cs50/index.html
+++ b/blog/categories/cs50/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;cs50&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;cs50&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>4 Posts Filed Under "cs50"</h2>
diff --git a/blog/categories/cs50x/index.html b/blog/categories/cs50x/index.html
index b1bfcb8b..b43f08ca 100644
--- a/blog/categories/cs50x/index.html
+++ b/blog/categories/cs50x/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;cs50x&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;cs50x&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>4 Posts Filed Under "cs50x"</h2>
diff --git a/blog/categories/css/index.html b/blog/categories/css/index.html
index ad62e177..b984de36 100644
--- a/blog/categories/css/index.html
+++ b/blog/categories/css/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;css&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;css&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "css"</h2>
diff --git a/blog/categories/eleventy/index.html b/blog/categories/eleventy/index.html
index bbe53a95..8f74b376 100644
--- a/blog/categories/eleventy/index.html
+++ b/blog/categories/eleventy/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;eleventy&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,13 +252,25 @@ <h1 class="heading--main">Blog Post Category: &quot;eleventy&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
-<h2>1 Posts Filed Under "eleventy"</h2>
+<h2>2 Posts Filed Under "eleventy"</h2>
 
 
 <ul class="blog__postlist">
     
+        <li>
+            <p class="blog__postlist--title">
+                <a href="/blog/posts/2024-07-19-eleventy-3-0-upgrade/">
+                    Aboard the Eleventy 3.0 Train
+                    
+                </a>
+            </p>
+            <time>19 July 2024</time>
+        </li>
+    
         <li>
             <p class="blog__postlist--title">
                 <a href="/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/">
diff --git a/blog/categories/flask/index.html b/blog/categories/flask/index.html
index 70042968..7d81f78f 100644
--- a/blog/categories/flask/index.html
+++ b/blog/categories/flask/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;flask&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;flask&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>2 Posts Filed Under "flask"</h2>
diff --git a/blog/categories/freecodecamp/index.html b/blog/categories/freecodecamp/index.html
index 49014a8f..cb9ad29c 100644
--- a/blog/categories/freecodecamp/index.html
+++ b/blog/categories/freecodecamp/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;freecodecamp&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;freecodecamp&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "freecodecamp"</h2>
diff --git a/blog/categories/github-pages/index.html b/blog/categories/github-pages/index.html
index 37ae3c75..919f3621 100644
--- a/blog/categories/github-pages/index.html
+++ b/blog/categories/github-pages/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;github pages&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;github pages&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "github pages"</h2>
diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html
index 022c3943..7fcf738b 100644
--- a/blog/categories/github/index.html
+++ b/blog/categories/github/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;github&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;github&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "github"</h2>
diff --git a/blog/categories/html/index.html b/blog/categories/html/index.html
index a3351dcd..81c4adc4 100644
--- a/blog/categories/html/index.html
+++ b/blog/categories/html/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;html&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;html&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "html"</h2>
diff --git a/blog/categories/index.html b/blog/categories/index.html
index 41c6b6ce..b99e2b80 100644
--- a/blog/categories/index.html
+++ b/blog/categories/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Categories |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Categories</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <ul>
@@ -265,7 +268,7 @@ <h1 class="heading--main">Blog Post Categories</h1>
 
 	
 	
-	<li><a href="/blog/categories/about-this-website/">about this website</a> (3 posts)</li>
+	<li><a href="/blog/categories/about-this-website/">about this website</a> (4 posts)</li>
 
 	
 	
@@ -297,7 +300,7 @@ <h1 class="heading--main">Blog Post Categories</h1>
 
 	
 	
-	<li><a href="/blog/categories/eleventy/">eleventy</a> (1 posts)</li>
+	<li><a href="/blog/categories/eleventy/">eleventy</a> (2 posts)</li>
 
 	
 	
@@ -321,7 +324,7 @@ <h1 class="heading--main">Blog Post Categories</h1>
 
 	
 	
-	<li><a href="/blog/categories/javascript/">javascript</a> (1 posts)</li>
+	<li><a href="/blog/categories/javascript/">javascript</a> (2 posts)</li>
 
 	
 	
diff --git a/blog/categories/javascript/index.html b/blog/categories/javascript/index.html
index d8987e73..6b886db3 100644
--- a/blog/categories/javascript/index.html
+++ b/blog/categories/javascript/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;javascript&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,13 +252,25 @@ <h1 class="heading--main">Blog Post Category: &quot;javascript&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
-<h2>1 Posts Filed Under "javascript"</h2>
+<h2>2 Posts Filed Under "javascript"</h2>
 
 
 <ul class="blog__postlist">
     
+        <li>
+            <p class="blog__postlist--title">
+                <a href="/blog/posts/2024-07-19-eleventy-3-0-upgrade/">
+                    Aboard the Eleventy 3.0 Train
+                    
+                </a>
+            </p>
+            <time>19 July 2024</time>
+        </li>
+    
         <li>
             <p class="blog__postlist--title">
                 <a href="/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/">
diff --git a/blog/categories/javascriptmas/index.html b/blog/categories/javascriptmas/index.html
index 2230e587..251c6ea0 100644
--- a/blog/categories/javascriptmas/index.html
+++ b/blog/categories/javascriptmas/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;javascriptmas&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;javascriptmas&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "javascriptmas"</h2>
diff --git a/blog/categories/php/index.html b/blog/categories/php/index.html
index 1231f285..fb3789a4 100644
--- a/blog/categories/php/index.html
+++ b/blog/categories/php/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;php&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;php&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "php"</h2>
diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html
index 464a1182..43fa5a62 100644
--- a/blog/categories/python/index.html
+++ b/blog/categories/python/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;python&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;python&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>3 Posts Filed Under "python"</h2>
diff --git a/blog/categories/react/index.html b/blog/categories/react/index.html
index e073371f..e7c1129c 100644
--- a/blog/categories/react/index.html
+++ b/blog/categories/react/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;react&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;react&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>1 Posts Filed Under "react"</h2>
diff --git a/blog/categories/scrimba/index.html b/blog/categories/scrimba/index.html
index 254c44e4..f7096c5b 100644
--- a/blog/categories/scrimba/index.html
+++ b/blog/categories/scrimba/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;scrimba&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;scrimba&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>2 Posts Filed Under "scrimba"</h2>
diff --git a/blog/categories/sql/index.html b/blog/categories/sql/index.html
index 31bed51a..4212416f 100644
--- a/blog/categories/sql/index.html
+++ b/blog/categories/sql/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Post Category: &quot;sql&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog Post Category: &quot;sql&quot;</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <h2>3 Posts Filed Under "sql"</h2>
diff --git a/blog/feed.xml b/blog/feed.xml
index 964d2f3c..9b56d24c 100644
--- a/blog/feed.xml
+++ b/blog/feed.xml
@@ -4,13 +4,87 @@
     <subtitle>Helen Chong talks about tech, coding and development</subtitle>
     <link href="https://helenchong.dev/blog/feed.xml" rel="self"/>
     <link href="https://helenchong.dev/blog/"/>
-    <updated>2024-07-08T00:00:00Z</updated>
+    <updated>2024-07-19T00:00:00Z</updated>
     <id>https://helenchong.dev/blog/</id>
     <author>
         <name>Helen Chong</name>
         <email>contact@helenchong.dev</email>
     </author>
         
+        <entry>
+            <title>Aboard the Eleventy 3.0 Train</title>
+            <link href="https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/"/>
+            <updated>2024-07-19T00:00:00Z</updated>
+            <id>https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/</id>
+            <content type="html">&lt;p&gt;On 9 April 2024, I &lt;a href=&quot;https://helenchong.dev/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/&quot;&gt;rebuilt this developer portfolio and blog website of mine&lt;/a&gt; with Eleventy 2.0.1. Three months after using Eleventy and loving it, now I have upgraded Eleventy to 3.0! 🥳&lt;/p&gt;
+&lt;p&gt;Version 3.0 of Eleventy is still in alpha, but as I have been following Eleventy&#39;s development and community after starting to use it, and learning about other Eleventy users upgrading to version 3.0, I began to consider hopping on the Eleventy 3.0 train. Now that I have done it, I guess I am one of Eleventy&#39;s &amp;quot;courageous canary testers&amp;quot;, &lt;a href=&quot;https://www.11ty.dev/blog/canary-eleventy-v3/&quot;&gt;as the official Eleventy blog put it&lt;/a&gt;, haha. 😆&lt;/p&gt;
+&lt;div class=&quot;heading-wrapper h2&quot;&gt;
+&lt;h2 id=&quot;why-upgrading-to-30&quot;&gt;Why Upgrading to 3.0&lt;/h2&gt;
+&lt;a class=&quot;heading-anchor&quot; href=&quot;https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/#why-upgrading-to-30&quot; aria-labelledby=&quot;why-upgrading-to-30&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
+&lt;div class=&quot;heading-wrapper h3&quot;&gt;
+&lt;h3 id=&quot;esm-support&quot;&gt;ESM Support&lt;/h3&gt;
+&lt;a class=&quot;heading-anchor&quot; href=&quot;https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/#esm-support&quot; aria-labelledby=&quot;esm-support&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
+&lt;p&gt;The first major factor that made me consider upgrading Eleventy to 3.0 is 3.0&#39;s support for ECMAScript Modules (ESM).&lt;/p&gt;
+&lt;p&gt;Since I began to learn web development more seriously starting from December 2022, I have been using ESM in my JavaScript projects, including vanilla JavaScript and React, due to that being what is taught in Scrimba&#39;s JavaScript and React courses. As a consequence, Eleventy 2.0 was my first time using CommonJS, so I had to learn the syntax differences between the CommonJS and ESM. I learned about 3.0&#39;s ESM support soon after I began to use Eleventy, but I decided to stick to 2.0 for a bit because I wanted to familiarise myself with Eleventy first.&lt;/p&gt;
+&lt;p&gt;As I learned to use Eleventy more and becoming more satisfied with my decision to build my website with it, I felt more confident in my ability of trying out an alpha release of Eleventy.&lt;/p&gt;
+&lt;div class=&quot;heading-wrapper h3&quot;&gt;
+&lt;h3 id=&quot;built-in-bundle-plugin&quot;&gt;Built-In Bundle Plugin&lt;/h3&gt;
+&lt;a class=&quot;heading-anchor&quot; href=&quot;https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/#built-in-bundle-plugin&quot; aria-labelledby=&quot;built-in-bundle-plugin&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
+&lt;p&gt;Another major push for me to upgrade to Eleventy 3.0 was its &lt;a href=&quot;https://github.com/11ty/eleventy-plugin-bundle&quot;&gt;built-in bundle plugin&lt;/a&gt;. I have been considering to use the plugin to bundle my CSS and JavaScript for specific components, including the header, footer, scroll-to-top button link, and so on, so the CSS and JavaScript code blocks I wrote in the components&#39; templates would be bundled into the &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; element. Without bundling the CSS and JavaScript, the &lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tags would scatter across the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element in the HTML output, which is not a good practice, as the &lt;a href=&quot;https://validator.w3.org/&quot;&gt;W3C Markdown Validation Service&lt;/a&gt; would output errors when I checked the HTML output.&lt;/p&gt;
+&lt;p&gt;Previously, Eleventy&#39;s bundle plugin was a separate plugin that needed to be installed manually, as seen in the &lt;a href=&quot;https://github.com/11ty/eleventy-base-blog&quot;&gt;Eleventy base blog&lt;/a&gt; starter project, which uses Eleventy 2.0.1, though starting with Eleventy v3.0.0-alpha.10, the bundle plugin is now bundled with Eleventy.&lt;/p&gt;
+&lt;div class=&quot;heading-wrapper h3&quot;&gt;
+&lt;h3 id=&quot;eleventy-transform-plugin&quot;&gt;Eleventy Transform Plugin&lt;/h3&gt;
+&lt;a class=&quot;heading-anchor&quot; href=&quot;https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/#eleventy-transform-plugin&quot; aria-labelledby=&quot;eleventy-transform-plugin&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
+&lt;p&gt;Thirdly, another incentive for me to upgrade to Eleventy 3.0 was &lt;a href=&quot;https://www.11ty.dev/docs/plugins/image/&quot;&gt;Eleventy&#39;s official Image plugin&lt;/a&gt;&#39;s &lt;a href=&quot;https://www.11ty.dev/docs/plugins/image/#eleventy-transform&quot;&gt;transform feature&lt;/a&gt;, which is only supported by Eleventy 3.0.&lt;/p&gt;
+&lt;p&gt;I have been using the official Image plugin since I rebuilt my website with Eleventy, after learning it from Gerard Hynes&#39; tutorial, &lt;a href=&quot;https://www.freecodecamp.org/news/learn-eleventy/&quot;&gt;Learn the Eleventy Static Site Generator by Building and Deploying a Portfolio Website&lt;/a&gt;. However, with the image transform feature, we no longer need to insert shortcodes for every image we want to be responsive, since we could just use the good old &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag for our images and let the plugin handle the responsiveness.&lt;/p&gt;
+&lt;p&gt;Therefore, I finally made the jump, by keying in &lt;code&gt;bun install @11ty/eleventy@canary --save-exact&lt;/code&gt; in my website&#39;s folder on the terminal, and voilà! Eleventy 3.0 here I come!&lt;/p&gt;
+&lt;p&gt;(Yes, I use &lt;a href=&quot;https://bun.sh/&quot;&gt;Bun&lt;/a&gt; as the JavaScript runtime for developing my Eleventy website and deploying it to GitHub Pages, and it works since Bun is meant to be a drop-in replacement for Node.js)&lt;/p&gt;
+&lt;div class=&quot;heading-wrapper h2&quot;&gt;
+&lt;h2 id=&quot;step-1-changing-my-packagejson-scripts&quot;&gt;Step 1: Changing My &lt;code&gt;package.json&lt;/code&gt; Scripts&lt;/h2&gt;
+&lt;a class=&quot;heading-anchor&quot; href=&quot;https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/#step-1-changing-my-packagejson-scripts&quot; aria-labelledby=&quot;step-1-changing-my-packagejson-scripts&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
+&lt;p&gt;A change I had to made immediately after installing Eleventy 3.0 was to edit my &lt;code&gt;package.json&lt;/code&gt; scripts for Eleventy, including &amp;quot;start&amp;quot; and &amp;quot;build&amp;quot; scripts, by replacing &lt;code&gt;@11ty/eleventy&lt;/code&gt; to just &lt;code&gt;eleventy&lt;/code&gt;, since otherwise the terminal will output an error saying &amp;quot;Script not found &#39;@11ty/eleventy&#39;&amp;quot;.&lt;/p&gt;
+&lt;p&gt;This happens when I run the Eleventy commands with either &lt;code&gt;npm&lt;/code&gt; or &lt;code&gt;bun&lt;/code&gt;.&lt;/p&gt;
+&lt;div class=&quot;heading-wrapper h2&quot;&gt;
+&lt;h2 id=&quot;step-2-bundling-css-and-javascript&quot;&gt;Step 2: Bundling CSS and JavaScript&lt;/h2&gt;
+&lt;a class=&quot;heading-anchor&quot; href=&quot;https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/#step-2-bundling-css-and-javascript&quot; aria-labelledby=&quot;step-2-bundling-css-and-javascript&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
+&lt;p&gt;With problems with my &lt;code&gt;package.json&lt;/code&gt; script solved, I could finally begin my process to transform my website to an Eleventy 3.0 site, by starting with bundling my component-specific CSS and JavaScript.&lt;/p&gt;
+&lt;p&gt;I followed the instructions from &lt;a href=&quot;https://github.com/11ty/eleventy-plugin-bundle&quot;&gt;Eleventy bundle plugin&#39;s GitHub repository&lt;/a&gt;, by adding &lt;code&gt;addBundle(&amp;quot;css&amp;quot;)&lt;/code&gt; and &lt;code&gt;addBundle(&amp;quot;js&amp;quot;)&lt;/code&gt; to my Eleventy configuration file.&lt;/p&gt;
+&lt;p&gt;I want to write my bundled JavaScript into files with the &lt;code&gt;getBundleFileUrl&lt;/code&gt; shortcode, so I can add the &lt;code&gt;defer&lt;/code&gt; HTML attribute to the &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tags that load the bundled file. For this purpose, I use the &lt;code&gt;toFileDirectory&lt;/code&gt; to configure my JavaScript bundle to write the bundled JavaScript files into the output&#39;s assets folder and its JavaScript subfolder, so the setup to bundle my CSS and JavaScript in my Eleventy configuration file becomes this:&lt;/p&gt;
+&lt;pre class=&quot;language-js&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addBundle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;css&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addBundle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;js&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;toFileDirectory&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;assets/js&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Next, I opened the base layout template for my entire website, and added the &lt;code&gt;getBundle&lt;/code&gt; shortcode for CSS and &lt;code&gt;getBundleFileUrl&lt;/code&gt; shortcode for JavaScript in the &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; element, then I replaced the &lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tags in my component Nunjucks templates with &lt;code&gt;{% css %}&lt;/code&gt; and &lt;code&gt;{% js %}&lt;/code&gt; shortcodes.&lt;/p&gt;
+&lt;p&gt;Now my component-specific CSS and JavaScript are bundled in the output.&lt;/p&gt;
+&lt;div class=&quot;heading-wrapper h2&quot;&gt;
+&lt;h2 id=&quot;step-3-converting-commonjs-to-esm&quot;&gt;Step 3: Converting CommonJS to ESM&lt;/h2&gt;
+&lt;a class=&quot;heading-anchor&quot; href=&quot;https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/#step-3-converting-commonjs-to-esm&quot; aria-labelledby=&quot;step-3-converting-commonjs-to-esm&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
+&lt;p&gt;It was finally time to go all way in using ESM in my projects that use JavaScript, including Eleventy, by converting all CommonJS syntax in my Eleventy configuration and data files to ESM.&lt;/p&gt;
+&lt;p&gt;The first step was to add &lt;code&gt;&amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;/code&gt; to my &lt;code&gt;package.json&lt;/code&gt;, to make my Eleventy project environment support ESM.&lt;/p&gt;
+&lt;p&gt;Fun fact: When you create a &lt;code&gt;package.json&lt;/code&gt; file with Bun, &lt;code&gt;&amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;/code&gt; will be added by default. This actually tripped me up when I created my Eleventy 2.0 website with Bun, and made me about the differences between CommonJS and ESM the hard way, so I had to remove &lt;code&gt;&amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;/code&gt;. Therefore, it feels good to have &lt;code&gt;&amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;/code&gt; back to my &lt;code&gt;package.json&lt;/code&gt; file.&lt;/p&gt;
+&lt;p&gt;Fortunately, Visual Studio Code, my go-to code editor, can automatically convert the CommonJS syntax of the imports in my Eleventy configuration files and the exports of the Eleventy configuration functions. Visual Studio Code also converts the &lt;code&gt;module.exports&lt;/code&gt; syntax in my website metadata file, by assigning &lt;code&gt;const&lt;/code&gt; variables and adding the &lt;code&gt;export&lt;/code&gt; declaration, which allows me to use the variables and their values in other variables in the same file, without using the &lt;code&gt;this&lt;/code&gt; keyword. For example:&lt;/p&gt;
+&lt;pre class=&quot;language-js&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; siteDomain &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;helenchong.dev&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; siteUrl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;https://&quot;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; siteDomain &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;http://localhost:8080&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; siteAuthor &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
+    name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Helen Chong&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+    email&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;contact@helenchong.dev&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
+    url&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; siteUrl &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;/about&quot;&lt;/span&gt;
+&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
+&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; siteDescription &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; siteAuthor&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&#39;s developer portfolio and blog website.&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;However, I needed to manually change the &lt;code&gt;require()&lt;/code&gt; functions inside the Eleventy configuration function, by using the &lt;code&gt;import&lt;/code&gt; declaration at the top of the file, and assign them variables.&lt;/p&gt;
+&lt;p&gt;The process of converting CommonJS to ESM in my Eleventy website was smoother than I expected. It might be because my website is not that complex, and my methods of organising my website files were relatively compatible with ESM.&lt;/p&gt;
+&lt;div class=&quot;heading-wrapper h2&quot;&gt;
+&lt;h2 id=&quot;step-4-goodbye-eleventy-image-shortcodes&quot;&gt;Step 4: Goodbye, Eleventy Image Shortcodes&lt;/h2&gt;
+&lt;a class=&quot;heading-anchor&quot; href=&quot;https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/#step-4-goodbye-eleventy-image-shortcodes&quot; aria-labelledby=&quot;step-4-goodbye-eleventy-image-shortcodes&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
+&lt;p&gt;The final major step for my developer portfolio and blog website to transition to an Eleventy 3.0 site was to replace Eleventy Image shortcodes with the regular &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tags, and replace the Eleventy Image configurations with the image transform ones.&lt;/p&gt;
+&lt;p&gt;Goodbye, Eleventy Image shortcodes, welcome back &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tags!&lt;/p&gt;
+&lt;p&gt;Another benefit of using the image transform plugin is to enable overriding your default configurations for the plugin in individual images, something difficult to do with shortcodes.&lt;/p&gt;
+&lt;div class=&quot;heading-wrapper h2&quot;&gt;
+&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
+&lt;a class=&quot;heading-anchor&quot; href=&quot;https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/#conclusion&quot; aria-labelledby=&quot;conclusion&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
+&lt;p&gt;My website&#39;s transition to an Eleventy 3.0 site is a success, and I could not be happier with my decision to make the upgrade. If you like Eleventy, I highly recommend giving 3.0 a try.&lt;/p&gt;
+&lt;p&gt;Hello, Eleventy 3.0! 👋&lt;/p&gt;
+</content>
+        </entry>
+        
         <entry>
             <title>Dipping My Toes in PHP for My Hobby Project</title>
             <link href="https://helenchong.dev/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/"/>
@@ -259,21 +333,6 @@
 &lt;p&gt;&lt;img src=&quot;https://helenchong.dev/assets/images/posts/JavaScriptmas-2023-Challenge-Completed-and-Won/JavaScriptmas-PrizeFest-2023-Day-18-winner.avif&quot; alt=&quot;Screenshot of JavaScriptmas PrizeFest announcing helen_clx as the Day 18 winner&quot; loading=&quot;lazy&quot; /&gt;&lt;/p&gt;
 &lt;p&gt;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.&lt;/p&gt;
 &lt;p&gt;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.&lt;/p&gt;
-</content>
-        </entry>
-        
-        <entry>
-            <title>Chingu Voyage 46 Completed</title>
-            <link href="https://helenchong.dev/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/"/>
-            <updated>2023-11-25T00:00:00Z</updated>
-            <id>https://helenchong.dev/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/</id>
-            <content type="html">&lt;p&gt;On 12 November 2023, I, along with two other teammates had officially completed &lt;a href=&quot;https://www.chingu.io/&quot;&gt;Chingu&lt;/a&gt; Voyage 46. I received my &lt;a href=&quot;https://helenchong.dev/assets/documents/Chingu-Voyage46-Completion-Cert.pdf&quot;&gt;Certificate of Completion&lt;/a&gt; (PDF file) from Chingu on 19 November 2023.&lt;/p&gt;
-&lt;p&gt;Back in August, I had created a &lt;a href=&quot;https://helenchong.dev/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project&quot;&gt;TickyBot clone&lt;/a&gt; as my &lt;a href=&quot;https://github.com/chingu-voyages/Handbook/blob/main/docs/guides/soloproject/soloproject.md&quot;&gt;solo project&lt;/a&gt; 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.&lt;/p&gt;
-&lt;p&gt;We were instructed to build a &lt;a href=&quot;https://github.com/chingu-voyages/voyage-project-tier1-recipes&quot;&gt;recipe app&lt;/a&gt; that allows users to search for recipes by inputting ingredients.&lt;/p&gt;
-&lt;p&gt;&lt;img src=&quot;https://raw.githubusercontent.com/chingu-voyages/v46-tier1-team-01/main/Recipe-Hub-screenshot.png&quot; alt=&quot;Screenshot of Recipe Hub&quot; /&gt;&lt;/p&gt;
-&lt;p&gt;You can view our Recipe Hub app&#39;s &lt;a href=&quot;https://chingu-voyages.github.io/v46-tier1-team-01/Food-Recipe/&quot;&gt;live site&lt;/a&gt; and &lt;a href=&quot;https://github.com/chingu-voyages/v46-tier1-team-01&quot;&gt;GitHub repository&lt;/a&gt;.&lt;/p&gt;
-&lt;p&gt;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.&lt;/p&gt;
-&lt;p&gt;Before joining Chingu, I already practice my front-end web development skills with my own projects and Frontend Mentor&#39;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.&lt;/p&gt;
 </content>
         </entry>
 </feed>
\ No newline at end of file
diff --git a/blog/index.html b/blog/index.html
index eb21c457..cd72eacb 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Blog</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <p>Welcome to my tech and coding blog!</p>
@@ -265,32 +268,32 @@ <h2>Latest Posts</h2>
     
         <li>
             <p class="blog__postlist--title">
-                <a href="/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/">
-                    Dipping My Toes in PHP for My Hobby Project
+                <a href="/blog/posts/2024-07-19-eleventy-3-0-upgrade/">
+                    Aboard the Eleventy 3.0 Train
                     
                 </a>
             </p>
-            <time>8 July 2024</time>
+            <time>19 July 2024</time>
         </li>
     
         <li>
             <p class="blog__postlist--title">
-                <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 href="/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/">
+                    Dipping My Toes in PHP for My Hobby Project
                     
                 </a>
             </p>
-            <time>3 June 2024</time>
+            <time>8 July 2024</time>
         </li>
     
         <li>
             <p class="blog__postlist--title">
-                <a href="/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/">
-                    Custom Domain Name for My Developer Website
+                <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>
             </p>
-            <time>29 May 2024</time>
+            <time>3 June 2024</time>
         </li>
     
 </ul>
diff --git a/blog/posts/1/index.html b/blog/posts/1/index.html
index 61a88b66..77ae421d 100644
--- a/blog/posts/1/index.html
+++ b/blog/posts/1/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Archive |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,10 +252,22 @@ <h1 class="heading--main">Blog Archive</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <ul class="blog__postlist">
     
+        <li>
+            <p class="blog__postlist--title">
+                <a href="/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/">
+                    Chingu Voyage 46 Completed
+                    
+                </a>
+            </p>
+            <time>25 November 2023</time>
+        </li>
+    
         <li>
             <p class="blog__postlist--title">
                 <a href="/blog/posts/2023-11-13-My-First-PR-in-Python/">
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 f4bb801e..7d56333a 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Welcome to Helen Codes |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -275,6 +276,8 @@ <h1 class="heading--main">Welcome to Helen Codes</h1>
 
 <content-wrapper>
     
+
+    
     <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>
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 c1ffde95..d9a78f5a 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Built A TickyBot Clone for Chingu&#39;s Solo Projects |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -275,6 +276,8 @@ <h1 class="heading--main">Built A TickyBot Clone for Chingu&#39;s Solo Projects<
 
 <content-wrapper>
     
+
+    
     <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>
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 5bb2cd40..d6dccb84 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> CS50x Week 7 Completed |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -279,6 +280,8 @@ <h1 class="heading--main">CS50x Week 7 Completed</h1>
 
 <content-wrapper>
     
+
+    
     <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>
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 c9e8f662..70c7f4b1 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> CS50x Week 8 Assignments Completed |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -283,6 +284,8 @@ <h1 class="heading--main">CS50x Week 8 Assignments Completed</h1>
 
 <content-wrapper>
     
+
+    
     <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>
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 f1bb1a57..0fcc2c36 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> cbpickaxe and My First (Merged) Pull Request in Python |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -281,6 +282,8 @@ <h1 class="heading--main">cbpickaxe and My First (Merged) Pull Request in Python
 
 <content-wrapper>
     
+
+    
     <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>
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 a1b1abd9..f3d44044 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Chingu Voyage 46 Completed |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -275,6 +276,8 @@ <h1 class="heading--main">Chingu Voyage 46 Completed</h1>
 
 <content-wrapper>
     
+
+    
     <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>
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 ce6f43c4..6af6385a 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> JavaScriptmas 2023 Challenge Completed — and Won |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -277,6 +278,8 @@ <h1 class="heading--main">JavaScriptmas 2023 Challenge Completed — and Won</h1
 
 <content-wrapper>
     
+
+    
     <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>
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 c2b81592..14875b9c 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Rebuilding My Developer Portfolio with Eleventy |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -279,6 +280,8 @@ <h1 class="heading--main">Rebuilding My Developer Portfolio with Eleventy</h1>
 
 <content-wrapper>
     
+
+    
     <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><picture><source type="image/avif" srcset="/img/VA1uOaKp2e-1898.avif 1898w"><img loading="lazy" decoding="async" src="/img/VA1uOaKp2e-1898.jpeg" alt="First version of Helen Chong's developer portfolio" width="1898" height="888"></picture></p>
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 1fe5d63e..16867667 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Round 1 of 100 Days of Code Challenge Completed |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -277,6 +278,8 @@ <h1 class="heading--main">Round 1 of 100 Days of Code Challenge Completed</h1>
 
 <content-wrapper>
     
+
+    
     <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>
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 4b18f668..810bcc48 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> CS50x Week 9 Completed |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -283,6 +284,8 @@ <h1 class="heading--main">CS50x Week 9 Completed</h1>
 
 <content-wrapper>
     
+
+    
     <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>
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 d3c17289..5eeba200 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Now Page for My Website |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -275,6 +276,8 @@ <h1 class="heading--main">Now Page for My Website</h1>
 
 <content-wrapper>
     
+
+    
     <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>
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 e16194a4..30da2e23 100644
--- a/blog/posts/2024-05-27-cs50x-course-completed/index.html
+++ b/blog/posts/2024-05-27-cs50x-course-completed/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> CS50x Course Completed |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -283,6 +284,8 @@ <h1 class="heading--main">CS50x Course Completed</h1>
 
 <content-wrapper>
     
+
+    
     <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>
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 2b76e499..f9c0d3fd 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Custom Domain Name for My Developer Website |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -275,6 +276,8 @@ <h1 class="heading--main">Custom Domain Name for My Developer Website</h1>
 
 <content-wrapper>
     
+
+    
     <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>
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 17fe3517..21bd4ca1 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
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Finally Deployed My Scrimba React Solo Projects to GitHub Pages |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -279,6 +280,8 @@ <h1 class="heading--main">Finally Deployed My Scrimba React Solo Projects to Git
 
 <content-wrapper>
     
+
+    
     <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>
diff --git a/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/index.html b/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/index.html
index c8286e08..290320fe 100644
--- a/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/index.html
+++ b/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Dipping My Toes in PHP for My Hobby Project |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -277,6 +278,8 @@ <h1 class="heading--main">Dipping My Toes in PHP for My Hobby Project</h1>
 
 <content-wrapper>
     
+
+    
     <article class="prose">
         <p>Hobbies are a great motivator to learn new things, and web development is no exception. I had dabbled in HTML and CSS since my teenage years, but it was not until December 2022 when I decided to take online web development courses, and then aspire to become a web developer.</p>
 <p>Recently, I took a particular interest in fanlistings. For those who are unfamiliar with it, a fanlisting is an online listing of fans for a particular subject open for fans around the world to join. I find fanlistings a neat concept to gather and discover other people who share your interests. You can find fanlistings through <a href="https://thefanlistings.org/">The Fanlistings Network</a> and <a href="https://thefanlistings.org/">The Anime Fanlistings Network</a>.</p>
@@ -302,6 +305,11 @@ <h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2
                             <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>
                     
+                        <li class="blog__post--next">
+                            <p>Next Post:</p>
+                            <a href="/blog/posts/2024-07-19-eleventy-3-0-upgrade/">Aboard the Eleventy 3.0 Train</a>
+                        </li>
+                    
                     </ul>
         </nav>
     
diff --git a/blog/posts/2024-07-19-eleventy-3-0-upgrade/index.html b/blog/posts/2024-07-19-eleventy-3-0-upgrade/index.html
new file mode 100644
index 00000000..aeb946bb
--- /dev/null
+++ b/blog/posts/2024-07-19-eleventy-3-0-upgrade/index.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="en" id="top">
+    <head>
+        
+        <meta property="og:title" content="Aboard the Eleventy 3.0 Train">
+        <meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="author" content="Helen Chong">
+<meta name="generator" content="Eleventy v3.0.0">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/">
+<meta property="og:site_name" content="Helen Chong | Front-End Web Developer">
+<meta property="og:locale" content="en_MY">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:url" content="https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/">
+<link rel="canonical" href="https://helenchong.dev/blog/posts/2024-07-19-eleventy-3-0-upgrade/">
+
+        
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon/favicon-16x16.png">
+        <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
+
+        
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/home.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/a11y-syntax-highlighting-light.css"><link rel="stylesheet" href="/assets/css/a11y-syntax-highlighting-dark.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <style>.toc__wrapper {
+        max-height: 89vh;
+        overflow-x: auto;
+        padding: 0.3em 1.3rem;
+    }
+
+    .toc__heading {
+        font-size: 1.3rem;
+        font-weight: 700;
+        cursor: pointer;
+    }
+
+    .toc ol,
+    .toc ol ol {
+        display: grid;
+        gap: 0.7em;
+    }
+
+    .toc ol {
+        border-top: 0.1em solid var(--clr-txt-default);
+        padding-left: 1.3em;
+        padding-top: 1em;
+    }
+
+    .toc ol ol {
+        border-top: none;
+        list-style-type: disc;
+        padding-left: 1em;
+        padding-top: 0.5em;
+        margin: 0;
+    }
+
+    .toc ol a {
+        font-size: 1.1rem;
+        padding-left: 0.3em;
+    }
+
+    .toc ol ol a {
+        padding: 0;
+        font-size: 1rem;
+    }
+.header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 1rem 1.5rem;
+        position: sticky;
+        top: 0;
+        background-color: var(--clr-body-bg);
+        box-shadow: var(--bs-main);
+        z-index: 998;
+    }
+
+    .header__title {
+        color: var(--clr-accent-600);
+        text-transform: uppercase;
+        font-size: 2rem;
+        margin: 0;
+    }
+
+    .header__title a:focus,
+    .header__toggle:focus {
+        outline: 0.12em solid var(--clr-accent-600);
+    }
+
+    .header__title > a {
+        text-decoration: none;
+    }
+
+    .header__toggle {
+        border: none;
+        background-color: transparent;
+        font-size: 2rem;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+    }
+
+    .header__links {
+        list-style-type: "";
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: var(--clr-accent-600);
+        text-align: center;
+        gap: 2rem;
+
+        position: fixed;
+        background-color: var(--clr-body-bg);
+        display: grid;
+        top: 4.5rem;
+        left: 10%;
+        width: 80%;
+        padding: 1.5em;
+        box-shadow: var(--bs-main);
+        transform: translateX(120%);
+        transition: transform 0.5s ease-in;
+    }
+
+    .header__links--show,
+    .header__links:focus-within {
+        transform: translateX(0);
+    }
+
+    .header__links [aria-current="page"],
+    .link--active {
+        color: var(--clr-link-hover);
+    }
+
+    .header__link {
+        position: relative;
+        font-size: 1.125rem;
+        text-decoration: none;
+    }
+
+    .header__link::after {
+        content: "";
+        left: 0px;
+        bottom: -4px;
+        height: 2px;
+        width: 100%;
+        position: absolute;
+        background-color: var(--clr-link-hover);
+        transform: scaleX(0);
+        transition: transform 0.3s ease 0s;
+    }
+
+    .header__link:hover::after,
+    .header__links [aria-current="page"]::after,
+    .link--active::after {
+        transform: scaleX(1);
+    }
+
+    .header__link:focus {
+        outline: 0.2em solid var(--clr-accent-600);
+        outline-offset: 0.1em;
+    }
+
+    /* For larger screen sizes */
+    @media (min-width: 640px) {
+        .header__title {
+            margin-bottom: 0;
+        }
+    }
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .header__toggle {
+            display: none;
+        }
+
+        .header__links {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            position: static;
+            background-color: inherit;
+            top: 0;
+            left: 0;
+            padding: 0;
+            margin: 0;
+            width: unset;
+            transform: none;
+            transition: none;
+            box-shadow: none;
+        }
+    }
+.top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); }
+
+    .top-btn {
+        position: fixed;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+
+        background-color: var(--clr-top-btn-bg);
+        border-radius: 50em;
+        height: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+
+    .top-link::before,
+    .top-link::after {
+        --arrow-margin: 0.3em;
+        content: "";
+        display: inline-block;
+        border-bottom: 0.6rem solid currentColor;
+        border-left: 0.4rem solid transparent;
+        border-right: 0.4rem solid transparent;
+    }
+
+    .top-link::before { margin: 0 var(--arrow-margin) 0 0; }
+    .top-link::after { margin: 0 0 0 var(--arrow-margin); }
+.footer {
+        width: 100%;
+        padding: 2em 1em clamp(2em, calc(100% - 2rem), 3em);
+        text-align: center;
+        display: flex;
+        gap: 0.5em;
+        flex-direction: column;
+        box-shadow: var(--bs-footer);
+    }</style>
+
+        
+        <link rel="me" href="mailto:contact@helenchong.dev">
+        <link rel="authorization_endpoint" href="https://indieauth.com/auth">
+
+        
+        <link rel="webmention" href="https://webmention.io/helenchong.dev/webmention">
+
+        
+        <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
+        <script src="/assets/js/details-utils.js" defer=""></script>
+    
+
+        <title> Aboard the Eleventy 3.0 Train |  Helen Chong | Front-End Web Developer</title>
+    </head>
+    <body>
+        <div class="skip-btn"><a href="#content">Skip to content</a></div>
+        
+
+<header class="header">
+    <h2 class="header__title">
+        <a href="/">Helen Chong</a>
+    </h2>
+    <nav aria-labelledby="top-nav-title">
+        <h3 class="visually-hidden" id="top-nav-title">Main Navigation</h3>
+        <button class="header__toggle" aria-label="Toggle navigation menu" aria-expanded="false">
+            <svg aria-hidden="true" width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+        </button>
+        <ul class="header__links">
+            
+                <li><a class="header__link " href="/about/">
+                        About
+                </a></li>
+                <li><a class="header__link " href="/now/">
+                        Now
+                </a></li>
+                <li><a class="header__link link--active" href="/blog/">
+                        Blog
+                </a></li>
+                <li><a class="header__link " href="/projects/">
+                        Projects
+                </a></li>
+                <li><a class="header__link " href="/contact/">
+                        Contact
+                </a></li>
+        </ul>
+    </nav>
+</header>
+        <main id="content">
+            
+<header class="main__header">
+    
+    <nav aria-labelledby="breadcrumbs-title">
+        <h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
+        <ol class="breadcrumbs">
+            
+            <li>
+                <a href="/blog/">Blog</a>
+            </li>
+            <li>
+                <a href="/blog/posts/">Archive</a>
+            </li>
+        </ol>
+    </nav>
+
+
+
+    <h1 class="heading--main">Aboard the Eleventy 3.0 Train</h1>
+
+    
+        <div class="blog__post--info">
+            <p><span class="text-bold">Posted:</span> 19 July 2024 by Helen Chong</p>
+            
+            <p><span class="text-bold">Categories:</span>
+                
+                    <a href="/blog/categories/about-this-website">about this website</a>, 
+                
+                    <a href="/blog/categories/eleventy">eleventy</a>, 
+                
+                    <a href="/blog/categories/javascript">javascript</a>
+                
+            </p>
+            <p>🍿  6 min. read</p>
+        </div>
+    
+</header>
+
+<content-wrapper>
+    
+        <aside class="left-sidebar" aria-label="Left sidebar">
+    <details-utils force-open="(min-width: 60rem)" force-restore="">
+        <details class="toc__wrapper sidebar--sticky">
+            <summary class="toc__heading" id="toc-heading">
+                Table of Contents
+            </summary>
+            <nav class="toc" aria-labelledby="toc-heading"><ol><li><a href="#why-upgrading-to-30">Why Upgrading to 3.0</a><ol><li><a href="#esm-support">ESM Support</a></li>
+<li><a href="#built-in-bundle-plugin">Built-In Bundle Plugin</a></li>
+<li><a href="#eleventy-transform-plugin">Eleventy Transform Plugin</a></li></ol></li>
+<li><a href="#step-1-changing-my-packagejson-scripts">Step 1: Changing My package.json Scripts</a></li>
+<li><a href="#step-2-bundling-css-and-javascript">Step 2: Bundling CSS and JavaScript</a></li>
+<li><a href="#step-3-converting-commonjs-to-esm">Step 3: Converting CommonJS to ESM</a></li>
+<li><a href="#step-4-goodbye-eleventy-image-shortcodes">Step 4: Goodbye, Eleventy Image Shortcodes</a></li>
+<li><a href="#conclusion">Conclusion</a></li></ol></nav>
+        </details>
+    </details-utils>
+</aside>
+
+    
+
+    
+    <article class="prose">
+        <p>On 9 April 2024, I <a href="/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/">rebuilt this developer portfolio and blog website of mine</a> with Eleventy 2.0.1. Three months after using Eleventy and loving it, now I have upgraded Eleventy to 3.0! 🥳</p>
+<p>Version 3.0 of Eleventy is still in alpha, but as I have been following Eleventy's development and community after starting to use it, and learning about other Eleventy users upgrading to version 3.0, I began to consider hopping on the Eleventy 3.0 train. Now that I have done it, I guess I am one of Eleventy's &quot;courageous canary testers&quot;, <a href="https://www.11ty.dev/blog/canary-eleventy-v3/">as the official Eleventy blog put it</a>, haha. 😆</p>
+<div class="heading-wrapper h2">
+<h2 id="why-upgrading-to-30">Why Upgrading to 3.0</h2>
+<a class="heading-anchor" href="#why-upgrading-to-30" aria-labelledby="why-upgrading-to-30"><span hidden="">#</span></a></div>
+<div class="heading-wrapper h3">
+<h3 id="esm-support">ESM Support</h3>
+<a class="heading-anchor" href="#esm-support" aria-labelledby="esm-support"><span hidden="">#</span></a></div>
+<p>The first major factor that made me consider upgrading Eleventy to 3.0 is 3.0's support for ECMAScript Modules (ESM).</p>
+<p>Since I began to learn web development more seriously starting from December 2022, I have been using ESM in my JavaScript projects, including vanilla JavaScript and React, due to that being what is taught in Scrimba's JavaScript and React courses. As a consequence, Eleventy 2.0 was my first time using CommonJS, so I had to learn the syntax differences between the CommonJS and ESM. I learned about 3.0's ESM support soon after I began to use Eleventy, but I decided to stick to 2.0 for a bit because I wanted to familiarise myself with Eleventy first.</p>
+<p>As I learned to use Eleventy more and becoming more satisfied with my decision to build my website with it, I felt more confident in my ability of trying out an alpha release of Eleventy.</p>
+<div class="heading-wrapper h3">
+<h3 id="built-in-bundle-plugin">Built-In Bundle Plugin</h3>
+<a class="heading-anchor" href="#built-in-bundle-plugin" aria-labelledby="built-in-bundle-plugin"><span hidden="">#</span></a></div>
+<p>Another major push for me to upgrade to Eleventy 3.0 was its <a href="https://github.com/11ty/eleventy-plugin-bundle">built-in bundle plugin</a>. I have been considering to use the plugin to bundle my CSS and JavaScript for specific components, including the header, footer, scroll-to-top button link, and so on, so the CSS and JavaScript code blocks I wrote in the components' templates would be bundled into the <code>&lt;head&gt;</code> element. Without bundling the CSS and JavaScript, the <code>&lt;style&gt;</code> and <code>&lt;script&gt;</code> tags would scatter across the <code>&lt;body&gt;</code> element in the HTML output, which is not a good practice, as the <a href="https://validator.w3.org/">W3C Markdown Validation Service</a> would output errors when I checked the HTML output.</p>
+<p>Previously, Eleventy's bundle plugin was a separate plugin that needed to be installed manually, as seen in the <a href="https://github.com/11ty/eleventy-base-blog">Eleventy base blog</a> starter project, which uses Eleventy 2.0.1, though starting with Eleventy v3.0.0-alpha.10, the bundle plugin is now bundled with Eleventy.</p>
+<div class="heading-wrapper h3">
+<h3 id="eleventy-transform-plugin">Eleventy Transform Plugin</h3>
+<a class="heading-anchor" href="#eleventy-transform-plugin" aria-labelledby="eleventy-transform-plugin"><span hidden="">#</span></a></div>
+<p>Thirdly, another incentive for me to upgrade to Eleventy 3.0 was <a href="https://www.11ty.dev/docs/plugins/image/">Eleventy's official Image plugin</a>'s <a href="https://www.11ty.dev/docs/plugins/image/#eleventy-transform">transform feature</a>, which is only supported by Eleventy 3.0.</p>
+<p>I have been using the official Image plugin since I rebuilt my website with Eleventy, after learning it from Gerard Hynes' tutorial, <a href="https://www.freecodecamp.org/news/learn-eleventy/">Learn the Eleventy Static Site Generator by Building and Deploying a Portfolio Website</a>. However, with the image transform feature, we no longer need to insert shortcodes for every image we want to be responsive, since we could just use the good old <code>&lt;img&gt;</code> tag for our images and let the plugin handle the responsiveness.</p>
+<p>Therefore, I finally made the jump, by keying in <code>bun install @11ty/eleventy@canary --save-exact</code> in my website's folder on the terminal, and voilà! Eleventy 3.0 here I come!</p>
+<p>(Yes, I use <a href="https://bun.sh/">Bun</a> as the JavaScript runtime for developing my Eleventy website and deploying it to GitHub Pages, and it works since Bun is meant to be a drop-in replacement for Node.js)</p>
+<div class="heading-wrapper h2">
+<h2 id="step-1-changing-my-packagejson-scripts">Step 1: Changing My <code>package.json</code> Scripts</h2>
+<a class="heading-anchor" href="#step-1-changing-my-packagejson-scripts" aria-labelledby="step-1-changing-my-packagejson-scripts"><span hidden="">#</span></a></div>
+<p>A change I had to made immediately after installing Eleventy 3.0 was to edit my <code>package.json</code> scripts for Eleventy, including &quot;start&quot; and &quot;build&quot; scripts, by replacing <code>@11ty/eleventy</code> to just <code>eleventy</code>, since otherwise the terminal will output an error saying &quot;Script not found '@11ty/eleventy'&quot;.</p>
+<p>This happens when I run the Eleventy commands with either <code>npm</code> or <code>bun</code>.</p>
+<div class="heading-wrapper h2">
+<h2 id="step-2-bundling-css-and-javascript">Step 2: Bundling CSS and JavaScript</h2>
+<a class="heading-anchor" href="#step-2-bundling-css-and-javascript" aria-labelledby="step-2-bundling-css-and-javascript"><span hidden="">#</span></a></div>
+<p>With problems with my <code>package.json</code> script solved, I could finally begin my process to transform my website to an Eleventy 3.0 site, by starting with bundling my component-specific CSS and JavaScript.</p>
+<p>I followed the instructions from <a href="https://github.com/11ty/eleventy-plugin-bundle">Eleventy bundle plugin's GitHub repository</a>, by adding <code>addBundle(&quot;css&quot;)</code> and <code>addBundle(&quot;js&quot;)</code> to my Eleventy configuration file.</p>
+<p>I want to write my bundled JavaScript into files with the <code>getBundleFileUrl</code> shortcode, so I can add the <code>defer</code> HTML attribute to the <code>&lt;script&gt;</code> tags that load the bundled file. For this purpose, I use the <code>toFileDirectory</code> to configure my JavaScript bundle to write the bundled JavaScript files into the output's assets folder and its JavaScript subfolder, so the setup to bundle my CSS and JavaScript in my Eleventy configuration file becomes this:</p>
+<pre class="language-js" tabindex="0"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addBundle</span><span class="token punctuation">(</span><span class="token string">"css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+eleventyConfig<span class="token punctuation">.</span><span class="token function">addBundle</span><span class="token punctuation">(</span><span class="token string">"js"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">toFileDirectory</span><span class="token operator">:</span> <span class="token string">"assets/js"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
+<p>Next, I opened the base layout template for my entire website, and added the <code>getBundle</code> shortcode for CSS and <code>getBundleFileUrl</code> shortcode for JavaScript in the <code>&lt;head&gt;</code> element, then I replaced the <code>&lt;style&gt;</code> and <code>&lt;script&gt;</code> tags in my component Nunjucks templates with <code>{% css %}</code> and <code>{% js %}</code> shortcodes.</p>
+<p>Now my component-specific CSS and JavaScript are bundled in the output.</p>
+<div class="heading-wrapper h2">
+<h2 id="step-3-converting-commonjs-to-esm">Step 3: Converting CommonJS to ESM</h2>
+<a class="heading-anchor" href="#step-3-converting-commonjs-to-esm" aria-labelledby="step-3-converting-commonjs-to-esm"><span hidden="">#</span></a></div>
+<p>It was finally time to go all way in using ESM in my projects that use JavaScript, including Eleventy, by converting all CommonJS syntax in my Eleventy configuration and data files to ESM.</p>
+<p>The first step was to add <code>&quot;type&quot;: &quot;module&quot;</code> to my <code>package.json</code>, to make my Eleventy project environment support ESM.</p>
+<p>Fun fact: When you create a <code>package.json</code> file with Bun, <code>&quot;type&quot;: &quot;module&quot;</code> will be added by default. This actually tripped me up when I created my Eleventy 2.0 website with Bun, and made me about the differences between CommonJS and ESM the hard way, so I had to remove <code>&quot;type&quot;: &quot;module&quot;</code>. Therefore, it feels good to have <code>&quot;type&quot;: &quot;module&quot;</code> back to my <code>package.json</code> file.</p>
+<p>Fortunately, Visual Studio Code, my go-to code editor, can automatically convert the CommonJS syntax of the imports in my Eleventy configuration files and the exports of the Eleventy configuration functions. Visual Studio Code also converts the <code>module.exports</code> syntax in my website metadata file, by assigning <code>const</code> variables and adding the <code>export</code> declaration, which allows me to use the variables and their values in other variables in the same file, without using the <code>this</code> keyword. For example:</p>
+<pre class="language-js" tabindex="0"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">const</span> siteDomain <span class="token operator">=</span> <span class="token string">"helenchong.dev"</span><span class="token punctuation">;</span>
+<span class="token keyword">export</span> <span class="token keyword">const</span> siteUrl <span class="token operator">=</span> <span class="token string">"https://"</span> <span class="token operator">+</span> siteDomain <span class="token operator">||</span> <span class="token string">"http://localhost:8080"</span><span class="token punctuation">;</span>
+<span class="token keyword">export</span> <span class="token keyword">const</span> siteAuthor <span class="token operator">=</span> <span class="token punctuation">{</span>
+    name<span class="token operator">:</span> <span class="token string">"Helen Chong"</span><span class="token punctuation">,</span>
+    email<span class="token operator">:</span> <span class="token string">"contact@helenchong.dev"</span><span class="token punctuation">,</span>
+    url<span class="token operator">:</span> siteUrl <span class="token operator">+</span> <span class="token string">"/about"</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">export</span> <span class="token keyword">const</span> siteDescription <span class="token operator">=</span> siteAuthor<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">"'s developer portfolio and blog website."</span><span class="token punctuation">;</span></code></pre>
+<p>However, I needed to manually change the <code>require()</code> functions inside the Eleventy configuration function, by using the <code>import</code> declaration at the top of the file, and assign them variables.</p>
+<p>The process of converting CommonJS to ESM in my Eleventy website was smoother than I expected. It might be because my website is not that complex, and my methods of organising my website files were relatively compatible with ESM.</p>
+<div class="heading-wrapper h2">
+<h2 id="step-4-goodbye-eleventy-image-shortcodes">Step 4: Goodbye, Eleventy Image Shortcodes</h2>
+<a class="heading-anchor" href="#step-4-goodbye-eleventy-image-shortcodes" aria-labelledby="step-4-goodbye-eleventy-image-shortcodes"><span hidden="">#</span></a></div>
+<p>The final major step for my developer portfolio and blog website to transition to an Eleventy 3.0 site was to replace Eleventy Image shortcodes with the regular <code>&lt;img&gt;</code> tags, and replace the Eleventy Image configurations with the image transform ones.</p>
+<p>Goodbye, Eleventy Image shortcodes, welcome back <code>&lt;img&gt;</code> tags!</p>
+<p>Another benefit of using the image transform plugin is to enable overriding your default configurations for the plugin in individual images, something difficult to do with shortcodes.</p>
+<div class="heading-wrapper h2">
+<h2 id="conclusion">Conclusion</h2>
+<a class="heading-anchor" href="#conclusion" aria-labelledby="conclusion"><span hidden="">#</span></a></div>
+<p>My website's transition to an Eleventy 3.0 site is a success, and I could not be happier with my decision to make the upgrade. If you like Eleventy, I highly recommend giving 3.0 a try.</p>
+<p>Hello, Eleventy 3.0! 👋</p>
+
+
+    
+        <nav class="blog__post--pagination" aria-labelledby="nextprev-title">
+            <h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2>
+                    <ul class="blog__post--nextprev">
+                        <li class="blog__post--prev">
+                            <p>Previous Post:</p>
+                            <a href="/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/">Dipping My Toes in PHP for My Hobby Project</a>
+                        </li>
+                    
+                    </ul>
+        </nav>
+    
+    </article>
+
+    
+        
+<aside class="right-sidebar">
+    <nav class="blog__nav sidebar--sticky" aria-labelledby="blog-nav-title">
+        <h2 class="blog__nav--title" id="blog-nav-title">Blog Navigation</h2>
+        <ul class="blog__nav--links">
+            <li><a href="/blog/">Index</a></li>
+            
+                <li><a href="/blog/categories/">
+                        Categories
+                </a></li>
+                <li><a href="/blog/posts/">
+                        Archive
+                </a></li>
+            <li><a href="/blog/feed.xml">RSS</a></li>
+        </ul>
+    </nav>
+</aside>
+
+    
+</content-wrapper>
+        </main>
+        <footer class="footer">
+    <nav class="socials" aria-labelledby="social-link-title">
+    <h2 class="visually-hidden" id="social-link-title">Social Links:</h2>
+    <ul class="socials__links">
+        <li>
+            <a href="https://github.com/helenclx" aria-label="GitHub" rel="me">
+                <svg class="socials__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
+            </a>
+        </li>
+        <li>
+            <a href="https://tech.lgbt/@helenclx" aria-label="Mastodon" rel="me">
+                <svg class="socials__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"></path></svg>
+            </a>
+        </li>
+        <li>
+            <a href="https://twitter.com/helen_clx" aria-label="Twitter" rel="me">
+                <svg class="socials__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"></path></svg>
+            </a>
+        </li>
+        <li>
+            <a href="https://bsky.app/profile/helenchong.dev" aria-label="Bluesky" rel="me">
+                <svg class="socials__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"></path></svg>
+            </a>
+        </li>
+        <li>
+            <a href="https://www.linkedin.com/in/helenclx/" aria-label="LinkedIn" rel="me">
+                <svg class="socials__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg>
+            </a>
+        </li>
+    </ul>
+</nav>
+
+
+    <p>Built with &#x2661; by Helen Chong. 2023–2024.</p>
+
+    <ul class="inline-list">
+        <li><a href="/blog/feed.xml">RSS Feed</a></li><li><a href="/accessibility/">Accessibility</a></li><li><a href="/colophon/">Colophon</a></li></ul>
+
+    <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
+
+    
+
+<a href="#top" class="top-btn hidden">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12"></path>
+    </svg>
+    <span class="visually-hidden">Back to Top</span>
+</a>
+<noscript>
+    <p><a class="top-link" href="#top">Back to Top</a></p>
+</noscript>
+    <div class="h-card hidden">
+    <span class="p-name">Helen Chong</span>
+    <span class="p-given-name">Helen</span>
+    <span class="p-family-name">Chong</span>
+    <a href="/" class="u-url">Home page</a>
+    <picture><source type="image/avif" srcset="/img/0ouGwnjbcz-400.avif 400w"><img loading="lazy" decoding="async" src="/img/0ouGwnjbcz-400.jpeg" alt="Helen Chong, Front-End Developer" class="u-photo" width="400" height="400"></picture>
+    <span class="p-country-name">Malaysia</span>
+    <span class="p-note">Graphic designer turned front-end web developer.</span>
+</div>
+</footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/blog/posts/index.html b/blog/posts/index.html
index 75ee0777..711f8d61 100644
--- a/blog/posts/index.html
+++ b/blog/posts/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Blog Archive |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,10 +252,22 @@ <h1 class="heading--main">Blog Archive</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <ul class="blog__postlist">
     
+        <li>
+            <p class="blog__postlist--title">
+                <a href="/blog/posts/2024-07-19-eleventy-3-0-upgrade/">
+                    Aboard the Eleventy 3.0 Train
+                    
+                </a>
+            </p>
+            <time>19 July 2024</time>
+        </li>
+    
         <li>
             <p class="blog__postlist--title">
                 <a href="/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project/">
@@ -345,16 +358,6 @@ <h1 class="heading--main">Blog Archive</h1>
             <time>27 December 2023</time>
         </li>
     
-        <li>
-            <p class="blog__postlist--title">
-                <a href="/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/">
-                    Chingu Voyage 46 Completed
-                    
-                </a>
-            </p>
-            <time>25 November 2023</time>
-        </li>
-    
 </ul>
 
 <p>
diff --git a/colophon/index.html b/colophon/index.html
index c40eaa0f..67dc8ca5 100644
--- a/colophon/index.html
+++ b/colophon/index.html
@@ -203,6 +203,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Colophon |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -254,10 +255,14 @@ <h1 class="heading--main">Colophon</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <p>How this website is built.</p>
-<h2>Technology</h2>
+<div class="heading-wrapper h2">
+<h2 id="technology">Technology</h2>
+<a class="heading-anchor" href="#technology" aria-labelledby="technology"><span hidden="">#</span></a></div>
 <ul>
 <li>Built with the static site generator <a href="https://www.11ty.dev/">Eleventy</a> (version 3.0)</li>
 <li>Templating languages: Nunjucks and Markdown</li>
@@ -265,36 +270,51 @@ <h2>Technology</h2>
 <li>JavaScript runtime: <a href="https://bun.sh">Bun</a></li>
 <li>Source code available on <a href="https://github.com/helenclx/helenclx.github.io">GitHub</a></li>
 </ul>
-<h2>Host and Domain</h2>
+<div class="heading-wrapper h2">
+<h2 id="host-and-domain">Host and Domain</h2>
+<a class="heading-anchor" href="#host-and-domain" aria-labelledby="host-and-domain"><span hidden="">#</span></a></div>
 <ul>
 <li>Deployed to GitHub Pages from the site's GitHub repository</li>
 <li>The domain name, <code>helenchong.dev</code>, was registered on 29 May 2024, was purchased from, registered on, and is managed by <a href="https://porkbun.com/">Porkbun</a></li>
 </ul>
-<h2>Plugins</h2>
+<div class="heading-wrapper h2">
+<h2 id="plugins">Plugins</h2>
+<a class="heading-anchor" href="#plugins" aria-labelledby="plugins"><span hidden="">#</span></a></div>
 <ul>
 <li>Eleventy's official <a href="https://www.11ty.dev/docs/plugins/image/">Image</a> plugin</li>
 <li>Eleventy's official <a href="https://www.11ty.dev/docs/plugins/rss/">RSS</a> plugin</li>
 <li>Eleventy's official <a href="https://www.11ty.dev/docs/plugins/navigation/">Navigation</a> plugin</li>
 <li>Eleventy's official <a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/">Syntax Highlighting</a> plugin</li>
+<li><a href="https://www.npmjs.com/package/@zachleat/details-utils">@zachleat/details-utils</a></li>
 </ul>
-<h3>Eleventy Community Plugins</h3>
+<div class="heading-wrapper h3">
+<h3 id="eleventy-community-plugins">Eleventy Community Plugins</h3>
+<a class="heading-anchor" href="#eleventy-community-plugins" aria-labelledby="eleventy-community-plugins"><span hidden="">#</span></a></div>
 <ul>
 <li><a href="https://11ty.rocks/#plugin-emoji-read-time">Emoji Read Time Eleventy Plugin</a></li>
 <li><a href="https://www.npmjs.com/package/eleventy-plugin-metagen">eleventy-plugin-metagen</a></li>
 <li><a href="https://www.npmjs.com/package/eleventy-plugin-embed-everything">eleventy-plugin-embed-everything</a></li>
+<li><a href="https://www.npmjs.com/package/@uncenter/eleventy-plugin-toc">@uncenter/eleventy-plugin-toc</a></li>
 </ul>
-<h3>markdown-it Plugins</h3>
+<div class="heading-wrapper h3">
+<h3 id="markdown-it-plugins">markdown-it Plugins</h3>
+<a class="heading-anchor" href="#markdown-it-plugins" aria-labelledby="markdown-it-plugins"><span hidden="">#</span></a></div>
 <p>Eleventy has the Markdown parser <a href="https://www.npmjs.com/package/markdown-it">markdown-it</a> built in to render Markdown to HTML.</p>
 <ul>
+<li><a href="https://www.npmjs.com/package/markdown-it-anchor">markdown-it-anchor</a></li>
 <li><a href="https://www.npmjs.com/package/markdown-it-attrs">markdown-it-attrs</a></li>
 <li><a href="https://www.npmjs.com/package/markdown-it-bracketed-spans">markdown-it-bracketed-spans</a></li>
 </ul>
-<h2>Self-hosted Assets</h2>
+<div class="heading-wrapper h2">
+<h2 id="self-hosted-assets">Self-hosted Assets</h2>
+<a class="heading-anchor" href="#self-hosted-assets" aria-labelledby="self-hosted-assets"><span hidden="">#</span></a></div>
 <ul>
 <li>Technology and stack icons from <a href="https://icons8.com/">icons8</a></li>
 <li>Eric Bailey's <a href="https://github.com/ericwbailey/a11y-syntax-highlighting">a11y-syntax-highlighting</a> CSS stylesheets for Prism.js</li>
 </ul>
-<h2>Credits</h2>
+<div class="heading-wrapper h2">
+<h2 id="credits">Credits</h2>
+<a class="heading-anchor" href="#credits" aria-labelledby="credits"><span hidden="">#</span></a></div>
 <ul>
 <li>Gerard Hynes for providing inspiration with the tutorial: <a href="https://www.freecodecamp.org/news/learn-eleventy/">Learn the Eleventy Static Site Generator by Building and Deploying a Portfolio Website</a></li>
 <li>Raymond Camden for providing inspiration with the tutorial: <a href="https://cfjedimaster.github.io/eleventy-blog-guide/guide.html">A Complete Guide to Building a Blog with Eleventy</a></li>
@@ -302,7 +322,7 @@ <h2>Credits</h2>
 </ul>
 
 
-<p>(This colophon page was last updated on 18 July 2024)</p>
+<p>(This colophon page was last updated on 19 July 2024)</p>
 
     
     </div>
diff --git a/contact/index.html b/contact/index.html
index 6eae20c3..0fd43382 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Contact |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Want to get in touch?</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <p class="contact__sub-heading text-center">I am always open to new opportunities and projects. </p>
diff --git a/index.html b/index.html
index 65093117..2938afc3 100644
--- a/index.html
+++ b/index.html
@@ -203,6 +203,7 @@
 
         
         <script src="/assets/js/MnNi5ky3A8.js" defer=""></script>
+    
 
         <title> Helen Chong | Front-End Web Developer</title>
     </head>
diff --git a/now/index.html b/now/index.html
index a8f85514..27cb87c9 100644
--- a/now/index.html
+++ b/now/index.html
@@ -203,6 +203,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Now |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -261,12 +262,18 @@ <h1 class="heading--main">Now</h1>
 
 <content-wrapper>
     
+
+    
     <article class="prose">
         <p><em>This page was last updated on 8 July 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/">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>
-<h3><a href="https://scrimba.com/learn/frontend">Scrimba's Frontend Developer Career Path</a></h3>
+<div class="heading-wrapper h2">
+<h2 id="my-current-progress-in-my-courses">My Current Progress in My Courses</h2>
+<a class="heading-anchor" href="#my-current-progress-in-my-courses" aria-labelledby="my-current-progress-in-my-courses"><span hidden="">#</span></a></div>
+<div class="heading-wrapper h3">
+<h3 id="scrimbas-frontend-developer-career-path"><a href="https://scrimba.com/learn/frontend">Scrimba's Frontend Developer Career Path</a></h3>
+<a class="heading-anchor" href="#scrimbas-frontend-developer-career-path" aria-labelledby="scrimbas-frontend-developer-career-path"><span hidden="">#</span></a></div>
 <ul>
 <li>Module 11 - Advanced React
 <ul>
@@ -274,7 +281,9 @@ <h3><a href="https://scrimba.com/learn/frontend">Scrimba's Frontend Developer Ca
 </ul>
 </li>
 </ul>
-<h2>Other Things I Have Been Doing Recently</h2>
+<div class="heading-wrapper h2">
+<h2 id="other-things-i-have-been-doing-recently">Other Things I Have Been Doing Recently</h2>
+<a class="heading-anchor" href="#other-things-i-have-been-doing-recently" aria-labelledby="other-things-i-have-been-doing-recently"><span hidden="">#</span></a></div>
 <p>I created and released a fork of BellaBuffs, the PHP script for building and managing a fanlisting, an online listing of fans for a particular subject open for fans around the world to join, with PHPMailer integration to power the email sending features.</p>
 <p>You can download my BellaBuffs fork and learn about how to use it from <a href="https://github.com/helenclx/BellaBuffs-PHPMailer">its GitHub repository</a>, and read my blog post about it: <a href="/blog/posts/2024-07-08-dipping-my-toes-in-php-for-my-hobby-project">Dipping My Toes in PHP for My Hobby Project</a>.</p>
 
diff --git a/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html
index 19537aa5..6ffecb66 100644
--- a/projects/frontend-mentor/index.html
+++ b/projects/frontend-mentor/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Frontend Mentor Challenge Solutions |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -268,19 +269,25 @@ <h2>Project links</h2>
                 <li><a href="https://github.com/helenclx/Frontend-Mentor-Challenges">Project Repository</a></li>
             </ul>
 
-            <h2>Introduction</h2>
+            <div class="heading-wrapper h2">
+<h2 id="introduction">Introduction</h2>
+<a class="heading-anchor" href="#introduction" aria-labelledby="introduction"><span hidden="">#</span></a></div>
 <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>
 <!-- ## Problem Solved
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt tortor aliquam nulla facilisi. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Condimentum lacinia quis vel eros donec ac odio tempor orci. -->
-<h2>Technologies Used</h2>
+<div class="heading-wrapper h2">
+<h2 id="technologies-used">Technologies Used</h2>
+<a class="heading-anchor" href="#technologies-used" aria-labelledby="technologies-used"><span hidden="">#</span></a></div>
 <p>The solutions currently included in the repository are built with HTML, CSS and vanilla JavaScript, with one of them also built with an API.</p>
 <!-- ### Challenges Faced
 
 Eget mauris pharetra et ultrices. Molestie nunc non blandit massa enim nec. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Nulla at volutpat diam ut venenatis. Volutpat ac tincidunt vitae semper quis lectus nulla at. -->
-<h2>Lessons Learned</h2>
+<div class="heading-wrapper h2">
+<h2 id="lessons-learned">Lessons Learned</h2>
+<a class="heading-anchor" href="#lessons-learned" aria-labelledby="lessons-learned"><span hidden="">#</span></a></div>
 <p>Frontend Mentor has been a great platform for me to practice my frontend development skills by building real-world projects.</p>
 
         </div>
diff --git a/projects/index.html b/projects/index.html
index 9a7171bc..339a5ad7 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Projects |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -251,6 +252,8 @@ <h1 class="heading--main">Featured Projects</h1>
 
 <content-wrapper>
     
+
+    
     <div class="prose">
         
 <div class="project-list">
@@ -272,7 +275,7 @@ <h1 class="heading--main">Featured Projects</h1>
             <span class="project-card__tag">API</span>
         
         </div>
-        <h2 class="project-card__title">Frontend Mentor Challenge Solutions
+        <h2 class="project-card__title">Frontend Mentor Challenge Solutions</h2>
         <p class="project-card__summary">My solutions to the Frontend Mentor challenges.</p>
         <a class="project-card__link" href="/projects/frontend-mentor/">
             <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
@@ -282,7 +285,7 @@ <h2 class="project-card__title">Frontend Mentor Challenge Solutions
         <a class="project-card__btn" href="https://helenchong.dev/Frontend-Mentor-Challenges/">Project Site</a>
             <a class="project-card__btn" href="https://github.com/helenclx/Frontend-Mentor-Challenges">Repository</a>
         </div>
-    </h2></div>
+    </div>
 </article>
     
         
@@ -302,7 +305,7 @@ <h2 class="project-card__title">Frontend Mentor Challenge Solutions
             <span class="project-card__tag">API</span>
         
         </div>
-        <h2 class="project-card__title">Quizzical
+        <h2 class="project-card__title">Quizzical</h2>
         <p class="project-card__summary">Test your knowledge with this quiz game. A solo project for Scrimba&#39;s React course.</p>
         <a class="project-card__link" href="/projects/quizzical/">
             <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
@@ -312,7 +315,7 @@ <h2 class="project-card__title">Quizzical
         <a class="project-card__btn" href="https://helenchong.dev/Scrimba-React-Solo-Projects/3-quizzical/">Project Site</a>
             <a class="project-card__btn" href="https://github.com/helenclx/Scrimba-React-Solo-Projects/tree/main/3-quizzical">Repository</a>
         </div>
-    </h2></div>
+    </div>
 </article>
     
         
@@ -332,7 +335,7 @@ <h2 class="project-card__title">Quizzical
             <span class="project-card__tag">API</span>
         
         </div>
-        <h2 class="project-card__title">Recipe Hub
+        <h2 class="project-card__title">Recipe Hub</h2>
         <p class="project-card__summary">Allows users to search for recipes by entering an ingredient. Developed by Chingu Voyage 46 Tier 1 Team 1, in which I was part of.</p>
         <a class="project-card__link" href="/projects/recipe-hub/">
             <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
@@ -342,7 +345,7 @@ <h2 class="project-card__title">Recipe Hub
         <a class="project-card__btn" href="https://chingu-voyages.github.io/v46-tier1-team-01/Food-Recipe/">Project Site</a>
             <a class="project-card__btn" href="https://github.com/chingu-voyages/v46-tier1-team-01">Repository</a>
         </div>
-    </h2></div>
+    </div>
 </article>
     
         
@@ -364,7 +367,7 @@ <h2 class="project-card__title">Recipe Hub
             <span class="project-card__tag">Firebase</span>
         
         </div>
-        <h2 class="project-card__title">Scrimba Frontend Path Solo Projects
+        <h2 class="project-card__title">Scrimba Frontend Path Solo Projects</h2>
         <p class="project-card__summary">My solo projects for Scrimba&#39;s Frontend Developer Career Path.</p>
         <a class="project-card__link" href="/projects/scrimba/">
             <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
@@ -374,7 +377,7 @@ <h2 class="project-card__title">Scrimba Frontend Path Solo Projects
         
             <a class="project-card__btn" href="https://github.com/helenclx/Scrimba-Frontend-Solo-Projects">Repository</a>
         </div>
-    </h2></div>
+    </div>
 </article>
     
         
@@ -392,7 +395,7 @@ <h2 class="project-card__title">Scrimba Frontend Path Solo Projects
             <span class="project-card__tag">React.js</span>
         
         </div>
-        <h2 class="project-card__title">Tenzies Game
+        <h2 class="project-card__title">Tenzies Game</h2>
         <p class="project-card__summary">A dice roll game built with React. Roll until all dice are the same.</p>
         <a class="project-card__link" href="/projects/tenzies/">
             <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
@@ -402,7 +405,7 @@ <h2 class="project-card__title">Tenzies Game
         <a class="project-card__btn" href="https://helenchong.dev/Tenzies-Game/">Project Site</a>
             <a class="project-card__btn" href="https://github.com/helenclx/Tenzies-Game">Repository</a>
         </div>
-    </h2></div>
+    </div>
 </article>
     
 </div>
diff --git a/projects/quizzical/index.html b/projects/quizzical/index.html
index ad5511b7..e16ef811 100644
--- a/projects/quizzical/index.html
+++ b/projects/quizzical/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Quizzical |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -268,12 +269,16 @@ <h2>Project links</h2>
                 <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="heading-wrapper h2">
+<h2 id="introduction">Introduction</h2>
+<a class="heading-anchor" href="#introduction" aria-labelledby="introduction"><span hidden="">#</span></a></div>
 <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
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt tortor aliquam nulla facilisi. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Condimentum lacinia quis vel eros donec ac odio tempor orci. -->
-<h2>Technologies Used</h2>
+<div class="heading-wrapper h2">
+<h2 id="technologies-used">Technologies Used</h2>
+<a class="heading-anchor" href="#technologies-used" aria-labelledby="technologies-used"><span hidden="">#</span></a></div>
 <p>Quizzical is built with Vite and React.js. The quiz data is fetched from the <a href="https://opentdb.com/">Open Trivia Database</a> API.</p>
 <!-- ## Challenges Faced
 
diff --git a/projects/recipe-hub/index.html b/projects/recipe-hub/index.html
index fb687cbe..460fd1d7 100644
--- a/projects/recipe-hub/index.html
+++ b/projects/recipe-hub/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Recipe Hub |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -268,15 +269,25 @@ <h2>Project links</h2>
                 <li><a href="https://github.com/chingu-voyages/v46-tier1-team-01">Project Repository</a></li>
             </ul>
 
-            <h2>Introduction</h2>
+            <div class="heading-wrapper h2">
+<h2 id="introduction">Introduction</h2>
+<a class="heading-anchor" href="#introduction" aria-labelledby="introduction"><span hidden="">#</span></a></div>
 <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>
+<div class="heading-wrapper h2">
+<h2 id="problem-solved">Problem Solved</h2>
+<a class="heading-anchor" href="#problem-solved" aria-labelledby="problem-solved"><span hidden="">#</span></a></div>
 <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>
-<h2>Technologies Used</h2>
+<div class="heading-wrapper h2">
+<h2 id="technologies-used">Technologies Used</h2>
+<a class="heading-anchor" href="#technologies-used" aria-labelledby="technologies-used"><span hidden="">#</span></a></div>
 <p>Recipe Hub is built with HTML, CSS, vanilla JavaScript and the <a href="https://rapidapi.com/apidojo/api/tasty">Tasty API</a>.</p>
-<h2>Challenges Faced</h2>
+<div class="heading-wrapper h2">
+<h2 id="challenges-faced">Challenges Faced</h2>
+<a class="heading-anchor" href="#challenges-faced" aria-labelledby="challenges-faced"><span hidden="">#</span></a></div>
 <p>The free tier of Tasty API has a limited quota of how much response we can fetch monthly. As we worked on this project, we quickly ran out of quota multiple times, and therefore we had to constantly change our API key.</p>
-<h3>Lessons Learned</h3>
+<div class="heading-wrapper h3">
+<h3 id="lessons-learned">Lessons Learned</h3>
+<a class="heading-anchor" href="#lessons-learned" aria-labelledby="lessons-learned"><span hidden="">#</span></a></div>
 <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>
 
diff --git a/projects/scrimba/index.html b/projects/scrimba/index.html
index 9791d5f1..6f4b36b2 100644
--- a/projects/scrimba/index.html
+++ b/projects/scrimba/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Scrimba Frontend Path Solo Projects |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -268,12 +269,16 @@ <h2>Project links</h2>
                 <li><a href="https://github.com/helenclx/Scrimba-Frontend-Solo-Projects">Project Repository</a></li>
             </ul>
 
-            <h2>Introduction</h2>
+            <div class="heading-wrapper h2">
+<h2 id="introduction">Introduction</h2>
+<a class="heading-anchor" href="#introduction" aria-labelledby="introduction"><span hidden="">#</span></a></div>
 <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
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt tortor aliquam nulla facilisi. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Condimentum lacinia quis vel eros donec ac odio tempor orci. -->
-<h2>Technologies Used</h2>
+<div class="heading-wrapper h2">
+<h2 id="technologies-used">Technologies Used</h2>
+<a class="heading-anchor" href="#technologies-used" aria-labelledby="technologies-used"><span hidden="">#</span></a></div>
 <p>The solo projects included in the repository are built with HTML, CSS and vanilla JavaScript. One of the projects, We Are the Champion, also uses Firebase to store data, while some other project are built upon fetching data from APIs.</p>
 <!-- ## Challenges Faced
 
diff --git a/projects/tenzies/index.html b/projects/tenzies/index.html
index c5f87799..61ff09bd 100644
--- a/projects/tenzies/index.html
+++ b/projects/tenzies/index.html
@@ -200,6 +200,7 @@
 
         
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+    
 
         <title> Tenzies Game |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -268,16 +269,24 @@ <h2>Project links</h2>
                 <li><a href="https://github.com/helenclx/Tenzies-Game">Project Repository</a></li>
             </ul>
 
-            <h2>Introduction</h2>
+            <div class="heading-wrapper h2">
+<h2 id="introduction">Introduction</h2>
+<a class="heading-anchor" href="#introduction" aria-labelledby="introduction"><span hidden="">#</span></a></div>
 <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>
+<div class="heading-wrapper h2">
+<h2 id="problem-solved">Problem Solved</h2>
+<a class="heading-anchor" href="#problem-solved" aria-labelledby="problem-solved"><span hidden="">#</span></a></div>
 <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>
-<h2>Technologies Used</h2>
+<div class="heading-wrapper h2">
+<h2 id="technologies-used">Technologies Used</h2>
+<a class="heading-anchor" href="#technologies-used" aria-labelledby="technologies-used"><span hidden="">#</span></a></div>
 <p>This project is built with Vite and React.js.</p>
 <!-- ## Challenges Faced
 
 Eget mauris pharetra et ultrices. Molestie nunc non blandit massa enim nec. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Nulla at volutpat diam ut venenatis. Volutpat ac tincidunt vitae semper quis lectus nulla at. -->
-<h2>Lessons Learned</h2>
+<div class="heading-wrapper h2">
+<h2 id="lessons-learned">Lessons Learned</h2>
+<a class="heading-anchor" href="#lessons-learned" aria-labelledby="lessons-learned"><span hidden="">#</span></a></div>
 <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>