Update Node.js to v18.20.8

.github/workflows/actions.yml

@@ -77,7 +77,7 @@ jobs:
       - uses: actions/checkout@v4
       - name: Run Ansible playbook
         # uses: dawidd6/action-ansible-playbook@v2.5.0
-        uses: dawidd6/action-ansible-playbook@9d50e1392c06ef7ad5a2e71eb8b97fc2642c7937
+        uses: dawidd6/action-ansible-playbook@671974ed60e946e11964cb0c26e69caaa4b1f559
         with:
           playbook: playbook.yml
           directory: ./

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.20.7 AS base
+FROM node:18.20.8 AS base
 LABEL version="4.1.0"
 LABEL description=""
 

package.json

@@ -17,9 +17,9 @@
     "Prod": "npm run Cleanup && npm run Init && parcel build src/index.pug --dist-dir build"
   },
   "devDependencies": {
-    "@parcel/transformer-pug": "2.14.4",
+    "@parcel/transformer-pug": "2.13.3",
-    "@parcel/transformer-sass": "2.14.4",
+    "@parcel/transformer-sass": "2.13.3",
-    "parcel": "^2.14.4"
+    "parcel": "^2.7.0"
   },
   "resolutions": {
     "node-forge": "1.3.1"

src/index.pug

@@ -14,7 +14,7 @@ html(lang='en')
     .container
       .pod
         .glow
-          img#profile_pic(src='assets/profile_pic.png', alt='')
+          img#profile_pic(src='https://img.fluttershub.com/RmwZPgM9wixiZZEK.png', alt='')
         h1.welcome_text.text-flicker.text-flicker-1 Phoenix/Hotaru
         p.about_me.standard_text.text-box-glow
         .pod

src/scss/components/animations.scss

@@ -1,3 +1,3 @@
-@use "animations/bounce.scss";
+@import "animations/bounce.scss";
-@use "animations/flicker.scss";
+@import "animations/flicker.scss";
-@use "animations/slide.scss";
+@import "animations/slide.scss";

src/scss/components/img.scss

@@ -1,6 +1,18 @@
-// @use "./bounce.scss";
+// @import "./bounce.scss";
 
-// Keyframes must be declared at the top level
+#profile_pic {
+    width: 256px;
+    height: 256px;
+      /* Safari 3-4, iOS 1-3.2, Android 1.6- */
+  -webkit-border-radius: 50%; 
+
+  /* Firefox 1-3.6 */
+  -moz-border-radius: 50%; 
+  
+  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
+  border-radius: 50%; 
+}
+.glow img{
   @keyframes border-pulsate {
       0%{
           box-shadow:none;
@@ -20,21 +32,11 @@
           box-shadow:none;
       }
   }
-
+//   -webkit-animation: bounce-in-fwd 1.1s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
-#profile_pic {
+//   animation: bounce-in-fwd 1.1s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
-  width: 256px;
-  height: 256px;
-
-  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
-  -webkit-border-radius: 50%;
-
-  /* Firefox 1-3.6 */
-  -moz-border-radius: 50%;
-
-  /* Modern browsers */
-  border-radius: 50%;
-}
-
-.glow img {
   animation: bounce-in 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000) both, border-pulsate 10s infinite;
+  /* transition:all 4s ease-out; 
+  /*animation-delay: 0s;
+  animation-play-state: running; 
+  // animation-fill-mode: backwards; */
 }

src/scss/index.scss

@@ -1,7 +1,7 @@
-@use "components/common.scss";
+@import "components/common.scss";
-// @use "components/animation.scss";
+// @import "components/animation.scss";
-@use "components/img.scss";
+@import "components/img.scss";
-@use "components/footer.scss";
+@import "components/footer.scss";
-@use "components/animations.scss";
+@import "components/animations.scss";
-// @use "components/slide.scss";
+// @import "components/slide.scss";
-// @use "components/links.scss";
+// @import "components/links.scss";