Node and Node packages upgrade

Remzi1993 · Oct 26, 2024 · 39b3d36 · 39b3d36
1 parent 2c7ed58
commit 39b3d36
Show file tree

Hide file tree

Showing 12 changed files with 238 additions and 278 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v22.9.0
+v23.1.0
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,20 +10,20 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@unhead/vue": "^1.11.7",
+    "@unhead/vue": "^1.11.10",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
-    "vue": "^3.5.11",
+    "vue": "^3.5.12",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.2.10",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.8.0",
     "@vitejs/plugin-vue": "^5.1.4",
-    "sass-embedded": "^1.79.4",
+    "sass-embedded": "^1.80.4",
     "sass-loader": "^16.0.2",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.8",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
     "vue-tsc": "^2.1.6"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import NavBar from '@/NavBar.vue';
-import FooterComp from '@/FooterComp.vue';
+import NavBar from './components/NavBar.vue'
+import FooterComp from './components/FooterComp.vue'
 </script>
 
 <template>

diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import {useHead} from '@unhead/vue';
-import Sidebar from '@/Sidebar.vue';
+import {useHead} from '@unhead/vue'
+import Sidebar from './Sidebar.vue'
 
 useHead({
   title: 'Remzi Cavdar',

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { shallowRef, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { Dropdown, Collapse } from 'bootstrap';
-import { useTemplateRef } from 'vue';
+import {shallowRef, onMounted, onBeforeUnmount, watch, nextTick} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
+import {Dropdown, Collapse} from 'bootstrap';
+import {useTemplateRef} from 'vue';
 
 const isDropdownActive = shallowRef(false);
 const dropdownMenu = useTemplateRef<HTMLElement | null>('dropdownMenu');
@@ -28,7 +28,7 @@ watch(
       const dropdownUrlRoutePattern = /^\/sublinks\//;
       isDropdownActive.value = dropdownUrlRoutePattern.test(to);
     },
-    { immediate: true }
+    {immediate: true}
 );
 
 // Use afterEach hook for route navigation
@@ -42,7 +42,7 @@ onMounted(async () => {
   const menuToggle = bsCollapse.value;
 
   if (menuToggle) {
-    const bsCollapseInstance = Collapse.getOrCreateInstance(menuToggle, { toggle: false });
+    const bsCollapseInstance = Collapse.getOrCreateInstance(menuToggle, {toggle: false});
 
     const navLinks = document.querySelectorAll('.navbar-brand, .nav-item:not(.dropdown), .dropdown-item');
 

diff --git a/src/components/Resume.vue b/src/components/Resume.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHead } from '@unhead/vue';
+import {useHead} from '@unhead/vue';
 
 useHead({
   title: 'Curriculum vitae - Remzi Cavdar',
@@ -70,7 +70,9 @@ useHead({
           <h4 class="subtitle">MBO niveau 4 / Applicatie- en mediaontwikkeling</h4>
 
           <h2 class="mt-3 mt-lg-4">Skills</h2>
-          <p>HTML/CSS | JavaScript | React | Redis | Vue.js | Vite | PHP | WordPress | Java | JavaFX | Spring Boot | JPA | Hibernate | RESTful API | TypeScript | Node.js | C# | .NET | JSON | XML | MySQL | MariaDB | MongoDB | Apache Maven | Apache server | DNS | Linux | Bash | Git | MVC | Agile/Scrum | SEO | Nederlands | Engels</p>
+          <p>HTML/CSS | JavaScript | React | Redis | Vue.js | Vite | PHP | WordPress | Java | JavaFX | Spring Boot | JPA
+            | Hibernate | RESTful API | TypeScript | Node.js | C# | .NET | JSON | XML | MySQL | MariaDB | MongoDB |
+            Apache Maven | Apache server | DNS | Linux | Bash | Git | MVC | Agile/Scrum | SEO | Nederlands | Engels</p>
 
           <h2 class="mt-3 mt-lg-4">Extra</h2>
           <h3>2019 - Codaisseur</h3>

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -10,22 +10,28 @@
           <strong><i class="bi bi-person"></i> Naam:</strong> Remzi Cavdar<br>
           <strong><i class="bi bi-house"></i> Woonplaats:</strong> Amsterdam<br>
           <strong><i class="bi bi-phone"></i> Mobiel:</strong> <a href="tel:+31611719929">06 117 199 29</a><br>
-          <strong><i class="bi bi-envelope-at"></i> E-mail:</strong> <a href="mailto:[email protected]">[email protected]</a><br>
+          <strong><i class="bi bi-envelope-at"></i> E-mail:</strong> <a
+            href="mailto:[email protected]">[email protected]</a><br>
         </p>
         <h4>Hogeschool van Amsterdam</h4>
         <p>
           <strong><i class="bi bi-building"></i> Locatie:</strong> Wibauthuis (WBH)<br>
           <strong><i class="bi bi-envelope-at"></i> E-mail:</strong> <a href="mailto:[email protected]">[email protected]</a><br>
-          <strong><i class="bi bi-mortarboard"></i> </strong> <a href="https://scholar.google.com/citations?user=14W7_vQAAAAJ" target="_blank" rel="noopener noreferrer">Google Scholar</a><br>
-          <strong><i class="bi bi-mortarboard"></i> </strong> <a href="https://www.researchgate.net/profile/Remzi-Cavdar" target="_blank">ResearchGate</a>
+          <strong><i class="bi bi-mortarboard"></i> </strong> <a
+            href="https://scholar.google.com/citations?user=14W7_vQAAAAJ" target="_blank" rel="noopener noreferrer">Google
+          Scholar</a><br>
+          <strong><i class="bi bi-mortarboard"></i> </strong> <a
+            href="https://www.researchgate.net/profile/Remzi-Cavdar" target="_blank">ResearchGate</a>
         </p>
         <h4>Zakelijk en portfolio</h4>
         <p>
-          <strong><i class="bi bi-linkedin"></i> LinkedIn:</strong> <a href="https://www.linkedin.com/in/remzicavdar" target="_blank">linkedin.com/in/remzicavdar</a><br>
+          <strong><i class="bi bi-linkedin"></i> LinkedIn:</strong> <a href="https://www.linkedin.com/in/remzicavdar"
+                                                                       target="_blank">linkedin.com/in/remzicavdar</a><br>
           <strong><i class="bi bi-github"></i> GitHub:</strong> <a href="https://github.com/Remzi1993" target="_blank">github.com/Remzi1993</a>
         </p>
         <p>
-          <a class="btn btn-primary" href="https://storage.remzi.info/assets/docs/Curriculum-vitae-R.Cavdar.pdf" target="_blank" role="button" download="Curriculum-vitae–R.Cavdar.pdf">Download cv</a>
+          <a class="btn btn-primary" href="https://storage.remzi.info/assets/docs/Curriculum-vitae-R.Cavdar.pdf"
+             target="_blank" role="button" download="Curriculum-vitae–R.Cavdar.pdf">Download cv</a>
         </p>
       </div>
     </div>

diff --git a/src/main.scss b/src/main.scss
@@ -1,5 +1,3 @@
-@import "bootstrap/scss/bootstrap.scss";
-
 .emoji {
   font-family: 'Noto Color Emoji', sans-serif;
 }
@@ -33,6 +31,8 @@ hr {
   border: 1px solid #8785854a;
 }
 
+@import "bootstrap/scss/bootstrap.scss";
+
 @include color-mode(dark) {
   .navbar {
     --bs-navbar-color: white;
@@ -68,37 +68,4 @@ hr {
       color: #1874D2;
     }
   }
-}
-
-.rating {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  span {
-    margin-right: 10px;
-  }
-
-  .stars {
-    display: flex;
-    direction: rtl; /* Right-to-left for correct star selection */
-    user-select: none;
-  }
-
-  .stars > input {
-    display: none;
-  }
-
-  .stars > label {
-    color: #555;
-    padding: 0 5px;
-    &:before {
-      content: "☆";
-    }
-  }
-
-  .stars > input:checked ~ label:before {
-    content: "★";
-    color: #FFD700;
-  }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -2,12 +2,12 @@ import {createApp} from 'vue'
 import {createRouter, createWebHistory} from 'vue-router'
 import 'bootstrap-icons/font/bootstrap-icons.scss'
 import './main.scss'
-import 'bootstrap';
+import 'bootstrap'
 import App from './App.vue'
-import Home from '@/Home.vue'
-import Resume from '@/Resume.vue'
-import Portfolio from '@/Portfolio.vue'
-import NotFound from '@/NotFound.vue'
+import Home from './components/Home.vue'
+import Resume from './components/Resume.vue'
+import Portfolio from './components/Portfolio.vue'
+import NotFound from './components/NotFound.vue'
 import {createHead} from '@unhead/vue'
 
 // Routes

diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "esnext",
     "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
 
     /* Bundler mode */
@@ -21,4 +21,4 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
-}
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,18 +1,13 @@
 import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
-import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src/components'),
-    }
-  },
   css: {
     preprocessorOptions: {
       scss: {
+        api: 'modern-compiler',
         quietDeps: true, // Suppresses warnings from dependencies
       },
     },