avincodes · Isuru2701 · May 31, 2024 · May 31, 2024 · Jun 1, 2024 · Jun 1, 2024
diff --git a/.eslintrc b/.eslintrc
@@ -1,7 +1,7 @@
 {
   "parser": "vue-eslint-parser",
   "parserOptions": {
-    "ecmaVersion": 7,
+    "ecmaVersion": 2020,
     "sourceType": "module"
   }
 }
diff --git a/dist/index.html b/dist/index.html
@@ -50,7 +50,7 @@
         <li><a href=/Resume.pdf target=_blank title="Download Resume">Download my resume</a></li>
     </ul>
 </noscript>
-<div id=app></div>
+<!-- <div id=app></div> -->
 <script src=/js/chunk-vendors.75f98db3.js></script>
 <script src=/js/app.7017a359.js></script>
 </body>

diff --git a/node_modules/.bin/detect-libc b/node_modules/.bin/detect-libc
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,35 +9,35 @@
     "prettier": "prettier -w *"
   },
   "dependencies": {
-    "gsap": "^2.1.2",
     "nprogress": "^0.2.0",
-    "scrollmagic": "^2.0.6",
-    "scrollmagic-plugin-gsap": "^1.0.3",
-    "vue": "^2.6.6",
+    "vue": "^3.4.27",
     "vue-analytics": "^5.16.4"
   },
   "devDependencies": {
-    "@gfx/zopfli": "^1.0.11",
-    "@vue/cli-plugin-babel": "^3.7.0",
-    "@vue/cli-plugin-eslint": "^3.7.0",
-    "@vue/cli-service": "^3.7.0",
-    "@vue/eslint-config-airbnb": "^4.0.0",
-    "@vue/eslint-config-prettier": "^4.0.1",
+    "@gfx/zopfli": "^1.0.15",
+    "@types/scrollmagic": "^2.0.8",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-airbnb": "^8.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "babel-eslint": "^10.0.1",
-    "compression-webpack-plugin": "^2.0.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "fibers": "^4.0.1",
-    "node-sass": "^4.12.0",
-    "sass": "^1.19.0",
-    "sass-loader": "^7.1.0",
-    "vue-router": "^3.0.6",
-    "vue-template-compiler": "^2.5.21",
-    "workbox-webpack-plugin": "^4.3.1"
+    "compression-webpack-plugin": "^11.1.0",
+    "eslint": "^8.2.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "gsap": "^3.12.5",
+    "node-sass": "^9.0.0",
+    "sass": "^1.77.4",
+    "sass-loader": "^14.2.1",
+    "scrollmagic": "^2.0.8",
+    "scrollmagic-plugin-gsap": "^1.0.4",
+    "vue-router": "^4.3.2",
+    "vue-template-compiler": "^2.7.16",
+    "workbox-webpack-plugin": "^7.1.0"
   },
   "engines": {
-    "node": "15.14.0",
-    "npm": "7.7.6"
+    "node": "20.14.0",
+    "npm": "10.7.0"
   },
   "engineStrict": true
 }
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta content="ie=edge" http-equiv="x-ua-compatible">
-    <meta name="viewport" content="width=device-width,initial-scale=1">5
+    <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="Content-Security-Policy" content="default-src 'self'">
     <!-- Primary Meta Tags -->
     <title>Yep, I mean it!</title>

diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app" :class="this.$route.meta.bodyClass">
+    <div :class="this.$route.meta.bodyClass">
         <Spinner></Spinner>
         <BgBody />
 
@@ -25,14 +25,17 @@ import '@/styles/app.scss'
 import '@/styles/nprogress.scss'
 // GSAP + ScrollMagic
 import * as ScrollMagic from 'scrollmagic'
-import { TweenMax, TimelineMax } from 'gsap'
-import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap'
-ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax)
 // Components
 import Header from '@/components/Header.vue'
 import Spine from '@/components/Spine.vue'
 import BgBody from '@/components/BgBody.vue'
-import Spinner from './components/Spinner.vue'
+import Spinner from '@/components/Spinner.vue'
+import router from './router';
+import { gsap,Power3, Elastic, TimelineMax } from "gsap"
+
+
+// import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap'
+// ScrollMagicPluginGsap(ScrollMagic, gsap);
 
 export default {
     name: 'App',
@@ -45,8 +48,8 @@ export default {
                 is768: window.innerWidth <= 768,
                 is1024: window.innerWidth <= 1024,
             },
-            introTimeline: new TimelineMax(),
-            leaveTimeline: new TimelineMax(),
+            introTimeline: gsap.timeline(),
+            leaveTimeline: gsap.timeline(),
         }
     },
     created() {

diff --git a/src/components/Home/Biz.vue b/src/components/Home/Biz.vue
@@ -20,7 +20,7 @@
                 </div>
             </div>
             <div class="container">
-                <!--svg xmlns="http://www.w3.org/2000/svg" id="abiz" viewBox="0 0 100 100" aria-labelledby="aBizTitle aBizDesc">
+                <svg xmlns="http://www.w3.org/2000/svg" id="abiz" viewBox="0 0 100 100" aria-labelledby="aBizTitle aBizDesc">
                     <title id="aBizTitle">Biz, the BizCommerce mascot</title>
                     <desc id="aBizDesc">She is a cute light blue pentagon, holding the Magento logo inside an orange
                         circle
@@ -43,7 +43,7 @@
                             <path class="magento-logo" fill="#FFF" d="M16.8 47.3l-2.6-1.2-2 2 .6 3.6.9.6-.6-3.9.9-.9.7 4.5.5.3.5-.5-.8-4.4 1.2.5.6 3.8.7-.8z"/>
                         </g>
                     </g>
-                </svg-->
+                </svg>
                 <div id="abiz" aria-labelledby="aBizTitle aBizDesc" width="100" height="100">
                     <title id="aBizTitle">Biz, the BizCommerce mascot</title>
                     <desc id="aBizDesc">She is a cute light blue pentagon, holding the Magento logo inside an orange
@@ -135,7 +135,7 @@
                     </g>
                 </svg>
                 <!--svg v-if="!viewport.is1024" xmlns="http://www.w3.org/2000/svg" id="filomena" viewBox="0 0 100 100" aria-labelledby="filomenaDesc">
-                    <desc id="filomenaDesc">A calm orange shrimp, with a smile on her face, swimming with her little
+                    <desc-- id="filomenaDesc">A calm orange shrimp, with a smile on her face, swimming with her little
                         legs
                     </desc-->
                     <g class="filomena-filomena">
@@ -198,7 +198,7 @@
                         </g>
                         <path class="filomena-r-foot" fill="#ff6d42" d="M72.3 71.7c-5.6 4.9-15.6 14.7-20.6 19.9-1.1 1.2-.7 3.7 1.3 3.2 4-.9 9.3-3.7 14.3-8.6 4.5-4.4 4.9-10.2 5.9-13.9.2-.6-.5-1-.9-.6z"/>
                     </g>
-                </svg>
+                <!-- </svg> -->
                 <svg v-if="!viewport.is1024" xmlns="http://www.w3.org/2000/svg" id="octo" viewBox="0 0 100 100" aria-labelledby="octoDesc">
                     <desc id="octoDesc">A green one-eyed octopus, smiling and swimming around with his little
                         tentacles

diff --git a/src/components/Home/Intro.vue b/src/components/Home/Intro.vue
@@ -19,20 +19,16 @@
 <script>
 export default {
     name: 'Intro',
+    mounted() {
+        var Tawk_API = Tawk_API || {},
+            Tawk_LoadStart = new Date();
+        var s1 = document.createElement('script'),
+            s0 = document.getElementsByTagName('script')[0];
+        s1.async = true;
+        s1.src = 'https://embed.tawk.to/620fb2571ffac05b1d7a90be/1fs6l1anu';
+        s1.charset = 'UTF-8';
+        s1.setAttribute('crossorigin', '*');
+        s0.parentNode.insertBefore(s1, s0);
+    }
 }
-</script>
-<!--Start of Tawk.to Script-->
-<script type="text/javascript">
-var Tawk_API = Tawk_API || {},
-    Tawk_LoadStart = new Date()
-;(function () {
-    var s1 = document.createElement('script'),
-        s0 = document.getElementsByTagName('script')[0]
-    s1.async = true
-    s1.src = 'https://embed.tawk.to/620fb2571ffac05b1d7a90be/1fs6l1anu'
-    s1.charset = 'UTF-8'
-    s1.setAttribute('crossorigin', '*')
-    s0.parentNode.insertBefore(s1, s0)
-})()
-</script>
-<!--End of Tawk.to Script-->
+</script>
diff --git a/src/components/Home/Thanks.vue b/src/components/Home/Thanks.vue
@@ -67,6 +67,7 @@
                         </ul>
                         <ul class="col songs">
                             <li class="ico">
+                                <svg>
                                     <path fill-rule="evenodd" d="M15 0L5 1.7v11c-.3-.2-.7-.3-1.2-.3-.6 0-1.3.3-1.9.7-.6.4-1 1-1 1.6 0 .4.2.7.4.9.4.3.8.4 1.2.4.6 0 1.4-.3 1.9-.7.6-.4 1-1 1-1.7V3l9.2-1.6v9.7c-.3-.2-.7-.3-1.2-.3-.6 0-1.3.3-1.9.7-.6.4-1 1-1 1.6 0 .4.2.7.4.9.3.2.6.3 1.1.3.6 0 1.4-.3 1.9-.7.6-.4 1-1 1-1.7L15 0z" clip-rule="evenodd"/>
                                 </svg>
                             </li>

diff --git a/src/js/abiz.js b/src/js/abiz.js
@@ -2,10 +2,11 @@
  * @loop
  * A biz
  */
+import { gsap, Power2 } from 'gsap';
 export default {
     tl: null,
     build() {
-        this.tl = new TimelineMax({ paused: true })
+        this.tl = gsap.timeline({ paused: true })
         this.tl
             .addLabel('start', 0)
             .to(

diff --git a/src/js/astro.js b/src/js/astro.js
@@ -1,11 +1,13 @@
 // astro
+import {gsap, Power2, Elastic} from 'gsap';
+
 export default {
     tl: null,
     r(min, max) {
         return Math.random() * (max - min) + min
     },
     build() {
-        this.tl = new TimelineMax({ paused: true })
+        this.tl = gsap.timeline({ paused: true })
         this.tl
             .set('.astro-head', {
                 rotation: -15,

diff --git a/src/js/coffee.js b/src/js/coffee.js
@@ -1,11 +1,13 @@
 // coffee
+import {gsap, Power1} from 'gsap';
+
 export default {
     tl: null,
     r(min, max) {
         return Math.random() * (max - min) + min
     },
     build() {
-        this.tl = new TimelineMax({ paused: true })
+        this.tl = gsap.timeline({ paused: true })
         this.tl.to('.coffee-coffee', 5, {
             yPercent: this.r(20, 200),
             xPercent: this.r(-50, 50),

diff --git a/src/js/dino.js b/src/js/dino.js
@@ -1,4 +1,5 @@
 // dino
+import {gsap, Power2} from 'gsap';
 export default {
     tl: null,
     rhythm: 0.3,
@@ -70,7 +71,7 @@ export default {
             window.open(songLink)
         })
 
-        this.tl = new TimelineMax({ paused: true })
+        this.tl = gsap.timeline({ paused: true })
         this.tl
             .addLabel('start', 0)
             .to(

diff --git a/src/js/et.js b/src/js/et.js
@@ -1,4 +1,6 @@
 // et
+import { gsap } from "gsap";
+import { Power2, Power0 } from "gsap/all";
 export default {
     tl: null,
     stop() {
@@ -15,7 +17,7 @@ export default {
             ship = document.querySelector('.et-ship'),
             eye = document.querySelector('.et-eye')
 
-        this.tl = new TimelineMax({ paused: true })
+        this.tl = gsap.timeline({ paused: true })
         this.tl
             .clear()
             .addLabel('start', 0)

diff --git a/src/js/filomena.js b/src/js/filomena.js
@@ -1,4 +1,6 @@
 // filomena
+import { gsap } from "gsap"
+import { Power2 } from "gsap/all"
 export default {
     tl: null,
     r(min, max) {
@@ -19,7 +21,7 @@ export default {
             leftArm = document.querySelector('.filomena-l-arm'),
             rightArm = document.querySelector('.filomena-r-arm')
 
-        this.tl = new TimelineMax({ paused: true })
+        this.tl = gsap.timeline({ paused: true })
         this.tl
             .addLabel('start')
             .to([skirt, backSkirt], 3, {

diff --git a/src/js/ghibli.js b/src/js/ghibli.js
@@ -1,4 +1,6 @@
 // ghibli castle
+import { gsap } from 'gsap';
+import { RoughEase, Power2, Power0 } from 'gsap/all';
 export default {
     tl: null,
     r(min, max) {
@@ -28,7 +30,7 @@ export default {
             foliage3 = document.querySelectorAll('.castle .foliage3'),
             castle = document.querySelectorAll('.castle')
 
-        this.tl = new TimelineMax({ paused: true })
+        this.tl = gsap.timeline({ paused: true })
         this.tl
             .addLabel('start', 0)
             .to(
@@ -229,7 +231,7 @@ export default {
             ear = document.querySelector('.castle .ear'),
             castle = document.querySelectorAll('.castle')
 
-        this.tl = new TimelineMax({ paused: true })
+        this.tl = gsap.timeline({ paused: true })
         this.tl
             .addLabel('start', 0)
             // .to(top, 2, {

diff --git a/src/js/mario.js b/src/js/mario.js
@@ -1,7 +1,10 @@
 // mario
+
+import { gsap,SteppedEase } from "gsap";
+
 export default {
-    tl: new TimelineMax(),
-    mariotl: new TimelineMax(),
+    tl: /*TimelineMax(), depreciated*/ gsap.timeline(),
+    mariotl: /* new TimelineMax(), depreciated*/ gsap.timeline(),
     bgmStart: null,
     bgmStomp: null,
     bgmEmpty: null,
@@ -86,7 +89,7 @@ export default {
 
                 // setup
                 let coin = null,
-                    newCoin = new TimelineMax()
+                    newCoin = gsap.timeline()
 
                 // animate mario jump + box
                 this.marioJump(i)
@@ -154,7 +157,7 @@ export default {
                         `
                         )
                         // animate message
-                        let msg = new TimelineMax()
+                        let msg = gsap.timeline()
                         msg.to('.mario-msg', 1, {
                             onStart: () => this.bgmExit.play(),
                             scale: 1,
@@ -178,7 +181,7 @@ export default {
                                             event.code === 'Escape'
                                         ) {
                                             // hide & remove msg
-                                            let tl = new TimelineMax()
+                                            let tl =  gsap.timeline()
                                             tl.to(
                                                 '.mario-msg, .mario-msg-overlay',
                                                 1,

diff --git a/src/js/octo.js b/src/js/octo.js
@@ -1,4 +1,6 @@
 // octo
+import { gsap } from "gsap";
+import { Power2 } from "gsap/all";
 export default {
     tl: null,
     r(min, max) {
@@ -14,7 +16,7 @@ export default {
         let body = document.querySelector('.octo-octo'),
             eye = document.querySelector('.octo-eye')
 
-        this.tl = new TimelineMax({ paused: true })
+        this.tl = gsap.timeline({ paused: true })
         this.tl
             .addLabel('start', 0)
             .fromTo(