fix: package.json & package-lock.json to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-JS-BRACES-6838727
- https://snyk.io/vuln/SNYK-JS-MICROMATCH-6838728

.prettierrc.json

@@ -4,5 +4,5 @@
   "tabWidth": 2,
   "singleQuote": true,
   "jsxSingleQuote": true,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss", "@prettier/plugin-pug"]
 }

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-bullseye-slim
+FROM node:21-bullseye-slim
 
 ENV IS_DOCKER=true
 ENV NODE_ENV=production

package.json

@@ -13,12 +13,12 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "npx nodemon ./bin/www -e js,pug,sass",
-    "start": "npx ./bin/www -e js,pug,sass",
+    "start": "npx nodemon ./bin/www -e js,pug,sass",
     "watch-tailwind": "npx npm-watch",
     "build-tailwind": "npx postcss src/tailwind.css -o public/stylesheets/style.css",
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write --ignore-path .gitignore .",
-    "prepare": "husky install"
+    "husky-install": "husky install"
   },
   "dependencies": {
     "@sendgrid/mail": "^8.1.3",
@@ -37,11 +37,12 @@
     "postcss-cli": "^8.3.1",
     "pug": "^3.0.2",
     "tailwind-hamburgers": "^1.1.1",
-    "tailwindcss": "^2.2.15",
+    "tailwindcss": "^4.0.0",
     "winston": "^3.3.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.1.1",
+    "@prettier/plugin-pug": "^3.0.0",
     "eslint": "^9.1.1",
     "eslint-config-prettier": "^9.1.0",
     "globals": "^15.1.0",

views/about.pug

@@ -1,70 +1,83 @@
 extends layout
 
 block nav-links
-    a(href='/')
+  a(href='/')
-        li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
+    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
-            span Home
+      class='hover:bg-black hover:text-pink'
-    a(href='#')
+    )
-        li(class="py-3 bg-black text-green hover:bg-pink hover:text-black transition duration-500 ease-in-out") 
+      span Home
-            span About
+  a(href='#')
-    a(href='/obsidian/projects.html')
+    li.py-3.bg-black.text-green.transition.duration-500.ease-in-out(
-        li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
+      class='hover:bg-pink hover:text-black'
-            span Obsidian
+    ) 
-    a(href='https://github.com/aurora-dot')
+      span About
-        li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
+  a(href='/obsidian/projects.html')
-            span Projects
+    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
-    a(href='https://blog.pastel.codes')
+      class='hover:bg-black hover:text-pink'
-        li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
+    )
-            span Blog
+      span Obsidian
-    a(href='/contact')
+  a(href='https://github.com/aurora-dot')
-        li(class="py-3 bg-pink text-black hover:bg-black hover:text-pink transition duration-500 ease-in-out")
+    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
-            span Contact
+      class='hover:bg-black hover:text-pink'
-
+    )
-
+      span Projects
+  a(href='https://blog.pastel.codes')
+    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
+      class='hover:bg-black hover:text-pink'
+    )
+      span Blog
+  a(href='/contact')
+    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
+      class='hover:bg-black hover:text-pink'
+    )
+      span Contact
 
 block content
-    div.mt-5
+  .mt-5
-            div.text-lg
+    .text-lg
-                h1.font-sans.text-6xl.wavy.mb-10 Hello.
+      h1.font-sans.text-6xl.wavy.mb-10 Hello.
-                p.mb-5 I’m E, a 23-year-old full-stack developer with three years’ professional experience. I live in the UK.
+      p.mb-5 I’m E, a 22-year-old full-stack developer with three years’ professional experience. I live in the UK.
-                p.mb-5 I’m currently working at Bounce Technologies, where I contribute to or lead various projects using a bunch of different languages and technologies.
+      p.mb-5 I’m currently working at Bounce Technologies, where I contribute to or lead various projects using a bunch of different languages and technologies.
-                p.mb-5 I also do UI/UX design and DevOps! I’m currently learning Go and adjusting to TypeScript.
+      p.mb-5 I also do UI/UX design and DevOps! I’m currently learning Go and adjusting to TypeScript.
-                p.mb-5 In my spare time I create digital art and make electronic music. I also like to discover and play experimental and artistic video games.
+      p.mb-5 In my spare time I create digital art and make electronic music. I also like to discover and play experimental and artistic video games.
-                p.mb-5 Here are all of 
+      p.mb-5 Here are all of!{ ' ' }
-                    a(class=" text-green" href="/obsidian/projects.html") my projects
+        |
-                    span  and my 
+        a.text-green(href='/obsidian/projects.html') my projects
-                        a(class=" text-green" href="https://github.com/aurora-dot/") GitHub
+        span !{ ' ' } and my !{ ' ' }
-            if project
+          |
-                div
+          a.text-green(href='https://github.com/aurora-dot/') GitHub
-                    h1.font-sans.text-6xl.wavy.my-10 Projects.
+        | .
+    if project
+      div
+        h1.font-sans.text-6xl.wavy.my-10 Projects.
 
-                div
+      div
-                    each val in project
+        each val in project
-                        div(class="mb-10 text-center sm:text-left")
+          .mb-10.text-center(class='sm:text-left')
-                            div.contents
+            .contents
-                                a(href=val.url).contents
+              a.contents(href=val.url)
-                                    if val.feature_image
+                if val.feature_image
-                                        img(class="sm:w-2/3 mx-auto sm:mx-0" src=val.feature_image)
+                  img.mx-auto(class='sm:w-2/3 sm:mx-0', src=val.feature_image)
-                                    else
+                else
-                                        img(src="/images/logo.png")
+                  img(src='/images/logo.png')
-                            div.mt-2
+            .mt-2
-                                a(href=val.url)
+              a(href=val.url)
-                                    span(class="font-sans text-2xl sm:text-3xl mt-3 mb-3") #{val.title}
+                span.font-sans.text-2xl.mt-3.mb-3(class='sm:text-3xl') #{ val.title }
-                                p.text-lg #{val.excerpt}
+              p.text-lg #{ val.excerpt }
 
-            if blog
+    if blog
-                div
+      div
-                    h1.font-sans.text-6xl.wavy.my-10 Blog.
+        h1.font-sans.text-6xl.wavy.my-10 Blog.
-                div
+      div
-                    each val in blog
+        each val in blog
-                        div(class="mb-10 text-center sm:text-left")
+          .mb-10.text-center(class='sm:text-left')
-                            div.contents
+            .contents
-                                a(href=val.url).contents
+              a.contents(href=val.url)
-                                    if val.feature_image
+                if val.feature_image
-                                        img(class="sm:w-2/3 mx-auto sm:mx-0" src=val.feature_image)
+                  img.mx-auto(class='sm:w-2/3 sm:mx-0', src=val.feature_image)
-                                    else
+                else
-                                        img(src="/images/logo.png")
+                  img(src='/images/logo.png')
-                            div.mt-2
+            .mt-2
-                                a(href=val.url)
+              a(href=val.url)
-                                    span(class="font-sans text-2xl sm:text-3xl mt-3 mb-3") #{val.title}
+                span.font-sans.text-2xl.mt-3.mb-3(class='sm:text-3xl') #{ val.title }
-                                p.text-lg #{val.excerpt}
+              p.text-lg #{ val.excerpt }