diff --git a/eleventy.config.js b/eleventy.config.js
index b82d420..ed4facc 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -49,8 +49,8 @@ export default function(eleventyConfig) {
     });
 
     return {
-        markdownTemplateEngine: "njk",
-        htmlTemplateEngine: "njk",
+        markdownTemplateEngine: "vto",
+        htmlTemplateEngine: "vto",
         dir: {
             input: "src"
         }
diff --git a/src/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won.md b/src/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won.md
index 7c35724..417ae07 100644
--- a/src/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won.md
+++ b/src/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won.md
@@ -9,7 +9,7 @@ Starting from 1 December 2023, I had participated in [Scrimba](https://scrimba.c
 
 In addition, when Scrimba announced the winners of JavaScriptmas in their [JavaScriptmas PrizeFest](https://www.youtube.com/live/Y0tc4DTS0e8) livestream on 24 December, it was revealed that [I (under my Twitter handle helen\_clx) was one of the 24 winners of a one-year Scrimba Pro plan](https://www.youtube.com/live/Y0tc4DTS0e8?t=2190) for [my solution to the Day 18 challenge](https://scrimba.com/scrim/co79e43dcbacb329c01a1744f?pl=pdpB3JZfE): AI alt text generator!
 
-<img src="{% src 'JavaScriptmas-PrizeFest-2023-Day-18-winner_xjdpzm.avif' %}" srcset="{% srcset 'JavaScriptmas-PrizeFest-2023-Day-18-winner_xjdpzm.avif', [260, 649, 980, 1320, 1580, 1830, 2048] %}" sizes="(min-width: 1020px) calc(54.9vw - 67px), calc(96.57vw - 30px)" alt="Screenshot of JavaScriptmas PrizeFest announcing helen_clx as the Day 18 winner" width="1920" height="1080" loading="lazy">
+<img src="{{ src 'JavaScriptmas-PrizeFest-2023-Day-18-winner_xjdpzm.avif' }}" srcset="{{ srcset 'JavaScriptmas-PrizeFest-2023-Day-18-winner_xjdpzm.avif', [260, 649, 980, 1320, 1580, 1830, 2048] }}" sizes="(min-width: 1020px) calc(54.9vw - 67px), calc(96.57vw - 30px)" alt="Screenshot of JavaScriptmas PrizeFest announcing helen_clx as the Day 18 winner" width="1920" height="1080" loading="lazy">
 
 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.
 
diff --git a/src/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy.md b/src/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy.md
index 31550cf..2a68ea8 100644
--- a/src/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy.md
+++ b/src/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy.md
@@ -7,11 +7,11 @@ categories: ["eleventy", "about this website", "about this blog"]
 
 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 ["How to Build Your Own Developer Portfolio Website with HTML, CSS, and JavaScript"](https://www.freecodecamp.org/news/how-to-build-a-developer-portfolio-website/) on freeCodeCamp, and deployed it to GitHub Pages.
 
-<img src="{% src 'Helen-Chong-portfolio-old_va6mq2.avif' %}" srcset="{% srcset 'Helen-Chong-portfolio-old_va6mq2.avif', [260, 649, 980, 1320, 1580, 1830, 2048] %}" sizes="(min-width: 1020px) calc(54.9vw - 67px), calc(96.57vw - 30px)" alt="First version of Helen Chong's developer portfolio" width="1898" height="888" loading="lazy">
+<img src="{{ src 'Helen-Chong-portfolio-old_va6mq2.avif' }}" srcset="{{ srcset 'Helen-Chong-portfolio-old_va6mq2.avif', [260, 649, 980, 1320, 1580, 1830, 2048] }}" sizes="(min-width: 1020px) calc(54.9vw - 67px), calc(96.57vw - 30px)" alt="First version of Helen Chong's developer portfolio" width="1898" height="888" loading="lazy">
 
 When I [shared the first version of my developer portfolio website on Twitter](https://twitter.com/helen_clx/status/1621696817795854336), my tweet was liked and replied to by both [Quincy Larson](https://twitter.com/ossia/status/1621729431009071104), the founder of freeCodeCamp, and [Kolade Chris](https://twitter.com/Ksound22/status/1621739428057079808) themselves, despite me not even tagging freeCodeCamp nor Kolade.
 
-<img src="{% src 'Quincy-Larson-Kolade-Chris-tweet-replies_ckctpn.avif' %}" srcset="{% srcset 'Quincy-Larson-Kolade-Chris-tweet-replies_ckctpn.avif', [260, 649, 980, 1320, 1580, 1830, 2048] %}" sizes="(min-width: 1860px) 886px, (min-width: 1020px) 47.93vw, 88vw" alt="Quincy Larson and Kolade Chris' replies to my tweet" width="886" height="1196" loading="lazy">
+<img src="{{ src 'Quincy-Larson-Kolade-Chris-tweet-replies_ckctpn.avif' }}" srcset="{{ srcset 'Quincy-Larson-Kolade-Chris-tweet-replies_ckctpn.avif', [260, 649, 980, 1320, 1580, 1830, 2048] }}" sizes="(min-width: 1860px) 886px, (min-width: 1020px) 47.93vw, 88vw" alt="Quincy Larson and Kolade Chris' replies to my tweet" width="886" height="1196" loading="lazy">
 
 As my front-end web development skills grew, I made my own improvements to the code of my portfolio website, most notably revamping the CSS to a mobile-first approach. In August 2023, I also [launched my tech and coding blog](2023-08-21-Welcome-to-Helen-Codes.md) to document my coding learnings and talk about various tech topics. At first, I tried to build my blog with a Jekyll template in a separate repository, but switched to [Zonelets](https://zonelets.net/), so I can write and manage my blog in HTML, CSS and JavaScript, languages I was already familiar with, and moved my blog to my portfolio website's own repository.
 
@@ -25,8 +25,8 @@ Thus, my Eleventy journey began. After reading the official Eleventy documentati
 
 Finally, on 9 April 2024, I succeed in rebuilding my developer portfolio website in Eleventy!
 
-<img src="{% src 'Helen-Chong-portfolio-eleventy_yzgrgh.avif' %}" srcset="{% srcset 'Helen-Chong-portfolio-eleventy_yzgrgh.avif', [260, 649, 980, 1320, 1580, 1830, 2048] %}" sizes="(min-width: 1020px) calc(54.9vw - 67px), calc(96.57vw - 30px)" alt="Helen Chong's new developer portfolio" width="1898" height="878" loading="lazy">
+<img src="{{ src 'Helen-Chong-portfolio-eleventy_yzgrgh.avif' }}" srcset="{{ srcset 'Helen-Chong-portfolio-eleventy_yzgrgh.avif', [260, 649, 980, 1320, 1580, 1830, 2048] }}" sizes="(min-width: 1020px) calc(54.9vw - 67px), calc(96.57vw - 30px)" alt="Helen Chong's new developer portfolio" width="1898" height="878" loading="lazy">
 
 Using a static site generator to build my own websites has been a great learning experience, from creating layouts, templates, installing plug-ins, to setting up GitHub Actions. I am glad that I have learned a great tool to build and maintain my static website projects in a dynamic, flexible and efficient manner.
 
-Welcome to Helen Chong's brand new Eleventy portfolio website!🎉
\ No newline at end of file
+Welcome to Helen Chong's brand new Eleventy portfolio website!🎉
diff --git a/src/blog/posts/2024-05-27-cs50x-course-completed.md b/src/blog/posts/2024-05-27-cs50x-course-completed.md
index c4341e8..6066dcb 100644
--- a/src/blog/posts/2024-05-27-cs50x-course-completed.md
+++ b/src/blog/posts/2024-05-27-cs50x-course-completed.md
@@ -39,6 +39,6 @@ For the demo video, which was required to submit the final project, I used Bandi
 
 After submitting CS50 Flask Blog as my final project, I successfully claimed my CS50x certificate! You can also [view the PDF version of my CS50x certificate](https://cs50.harvard.edu/certificates/8cb0f5a4-4107-4df6-8abc-cfab3a437367).
 
-<img src="{% src 'CS50x-certificate_bercpp.avif' %}" srcset="{% srcset 'CS50x-certificate_bercpp.avif', [260, 649, 980, 1320, 1580, 1830, 2048] %}" sizes="(min-width: 1020px) calc(54.9vw - 67px), calc(96.57vw - 30px)" alt="Helen Chong's CS50x certificate" width="2746" height="1588" loading="lazy">
+<img src="{{ src 'CS50x-certificate_bercpp.avif' }}" srcset="{{ srcset 'CS50x-certificate_bercpp.avif', [260, 649, 980, 1320, 1580, 1830, 2048] }}" sizes="(min-width: 1020px) calc(54.9vw - 67px), calc(96.57vw - 30px)" alt="Helen Chong's CS50x certificate" width="2746" height="1588" loading="lazy">
 
-Taking the CS50x course had been a great opportunity for me to learn about computer science, how to learn different programming languages and practice problem-solving skills with its problem sets. I am continuing to focus on front-end web development, but I hope I could carry what I learned from CS50x in my developer journey.
\ No newline at end of file
+Taking the CS50x course had been a great opportunity for me to learn about computer science, how to learn different programming languages and practice problem-solving skills with its problem sets. I am continuing to focus on front-end web development, but I hope I could carry what I learned from CS50x in my developer journey.
diff --git a/src/blog/posts/2024-07-19-eleventy-3-0-upgrade.md b/src/blog/posts/2024-07-19-eleventy-3-0-upgrade.md
index d8190d6..f09629e 100644
--- a/src/blog/posts/2024-07-19-eleventy-3-0-upgrade.md
+++ b/src/blog/posts/2024-07-19-eleventy-3-0-upgrade.md
@@ -52,7 +52,7 @@ eleventyConfig.addBundle("css");
 eleventyConfig.addBundle("js", { toFileDirectory: "assets/js" });
 ```
 
-Next, I opened the base layout template for my entire website, and added the `getBundle` shortcode for CSS and `getBundleFileUrl` shortcode for JavaScript in the `<head>` element, then I replaced the `<style>` and `<script>` tags in my component Nunjucks templates with `{% css %}` and `{% js %}` shortcodes.
+Next, I opened the base layout template for my entire website, and added the `getBundle` shortcode for CSS and `getBundleFileUrl` shortcode for JavaScript in the `<head>` element, then I replaced the `<style>` and `<script>` tags in my component Nunjucks templates with `{{ css }}` and `{{ js }}` shortcodes.
 
 Now my component-specific CSS and JavaScript are bundled in the output.
 
@@ -91,4 +91,4 @@ Hello, Eleventy 3.0! 👋
 
 I was invited to speak at [THE Eleventy Meetup Episode 19](https://11tymeetup.dev/events/ep-19-migrating-to-3-0-and-blogging-with-storyblok/) on 26 September 2024, by giving a talk based on this blog post! You can watch my talk at THE Eleventy Meetup's YouTube Channel.
 
-https://www.youtube.com/watch?v=qgFNl_oAyQY
\ No newline at end of file
+https://www.youtube.com/watch?v=qgFNl_oAyQY
diff --git a/src/blog/posts/2024-07-23-responsive-disability-pride-flag-css.md b/src/blog/posts/2024-07-23-responsive-disability-pride-flag-css.md
index 6539e0b..63c0763 100644
--- a/src/blog/posts/2024-07-23-responsive-disability-pride-flag-css.md
+++ b/src/blog/posts/2024-07-23-responsive-disability-pride-flag-css.md
@@ -7,9 +7,9 @@ categories: ["css", "disability pride"]
 hasCodeBlock: true
 ---
 
-{% set demoHeight = "23rem" %}
+{{ set demoHeight = "23rem" }}
 
-{% set disabilityPrideCss %}.disability-pride-flag {
+{{ set disabilityPrideCss }}.disability-pride-flag {
     background:
         linear-gradient(
             37deg,
@@ -21,12 +21,12 @@ hasCodeBlock: true
             #3BB07D 30% 65%,
             #595959 0
         );
-}{% endset %}
+}{{ endset }}
 
-{%- css %}
+{{- css }}
 {{ disabilityPrideCss }}
 .disability-pride-flag.demo { height: {{ demoHeight }}; }
-{% endcss %}
+{{ endcss }}
 
 <div class="disability-pride-flag demo" role="img" aria-label="Demo of the Disability Pride flag coded in CSS"></div>
 
@@ -57,4 +57,4 @@ You can also check out [my CodePen demo](https://codepen.io/helenclx/pen/VwJjBmB
 </p>
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
-**Update, 15 December 2024:** Previously, I coded the Disability Pride flag background in CSS by using an inline SVG, but I eventually figured out how to create the stripes by using the CSS `linuear-gradient()` function, making my code snippet much cleaner.
\ No newline at end of file
+**Update, 15 December 2024:** Previously, I coded the Disability Pride flag background in CSS by using an inline SVG, but I eventually figured out how to create the stripes by using the CSS `linuear-gradient()` function, making my code snippet much cleaner.
diff --git a/src/blog/posts/2025-01-19-attending-42-school.md b/src/blog/posts/2025-01-19-attending-42-school.md
index 781a43f..cc2b0b0 100644
--- a/src/blog/posts/2025-01-19-attending-42-school.md
+++ b/src/blog/posts/2025-01-19-attending-42-school.md
@@ -12,7 +12,7 @@ One day in December 2024, I suddenly remembered that my mother told me once that
 
 Turned out, the school is named [42](https://www.42network.org/), and is an international school network that provides free computer science education, with many campuses around the world, including Malaysia. The main thing that differentiates 42 from traditional universities is its peer-to-peer and project-based learning models that do not involve any teachers.
 
-According to the [official website of 42's Paris campus](https://42.fr/en/what-is-42/42-program-explained/) — where 42 originated — the name is a reference to Douglas Adams’ book {% cite "The Hitchhiker’s Guide to the Galaxy" %}:
+According to the [official website of 42's Paris campus](https://42.fr/en/what-is-42/42-program-explained/) — where 42 originated — the name is a reference to Douglas Adams’ book {{ cite "The Hitchhiker’s Guide to the Galaxy" }}:
 
 > In Douglas Adams’ book The Hitchhiker’s Guide to the Galaxy – H2G2 for short – an advanced alien species builds a super computer. It has only one job: to find the answer to the Ultimate Question of Life, the Universe and Everything. After 7 million years of calculation, the computer finds the answer: 42. In geek culture, 42 often represents the answer to a seemingly insuperable problem. This is why 42 is called 42. This is our answer to what IT education should be today and in the future.
 
diff --git a/src/blog/posts/2025-03-06-attended-42-discovery-piscine.md b/src/blog/posts/2025-03-06-attended-42-discovery-piscine.md
index dc627a3..1fb9cc2 100644
--- a/src/blog/posts/2025-03-06-attended-42-discovery-piscine.md
+++ b/src/blog/posts/2025-03-06-attended-42-discovery-piscine.md
@@ -15,7 +15,7 @@ Discovery Piscine cadets, or Discovery Pisciners, will learn Python and shell, s
 
 I had experience with Linux desktop environments before 42 founded its first Malaysian campus, as I used to dual boot Windows and Linux in my computer, but that happened years ago. Currently, my main method of using Linux is through Windows Subsystem for Linux (WSL) without setting up any desktop environment. Therefore, Discovery Piscine provided a great opportunity to practice using Linux and shell commands.
 
-I had learned Python before during my journey of teaching myself to code, and I even [contributed to a Python library for datamining my favourite video game {% cite "Cassette Beasts" %}](2023-11-13-My-First-PR-in-Python.md). However, Discovery Piscine allowed me to refresh my Python knowledge and practice writing Python scripts, while also learning Python's built-in functions that I was unfamiliar with. There was an exercise where I was stuck in for a longer time than expect, but then I solved the exercise after discovering the Python function I needed by searching the web with the right keyword.
+I had learned Python before during my journey of teaching myself to code, and I even [contributed to a Python library for datamining my favourite video game {{ cite "Cassette Beasts" }}](2023-11-13-My-First-PR-in-Python.md). However, Discovery Piscine allowed me to refresh my Python knowledge and practice writing Python scripts, while also learning Python's built-in functions that I was unfamiliar with. There was an exercise where I was stuck in for a longer time than expect, but then I solved the exercise after discovering the Python function I needed by searching the web with the right keyword.
 
 Speaking of the computers in 42's workstations, during my last visit to my local campus of 42 on their open day in January, I requested a way to change the computer screen brightness to the campus staff, because my eyes are sensitive to bright light due to me having [retinitis pigmentosa](https://blog.helenchong.omg.lol/en/posts/2024-12-21-living-with-retinitis-pigmentosa/), and to my surprise the computers lacked the option to adjust screen brightness. The school staff promised to accommodate my request. On my first day attending the Discovery Piscine, I reminded the staff of my request, and a staff member soon installed a screen brightness setting in all the workstation computers, so I could adjust the computer screen brightness to the level I felt comfortable with.