feat(assets): ajout de nouvelles images et mise à jour des niveaux de compétences

- Ajout des images pour Bootstrap, PostgreSQL, Ruby et Ruby on Rails
- Ajout des images pour Tailwind CSS
- Mise à jour des niveaux de compétences pour plusieurs technologies dans le fichier techstack.ts
- Amélioration du comportement de défilement dans le routeur pour une navigation plus fluide

src/data/techstack.ts

@@ -2,66 +2,72 @@ import type { TechStack } from '@/types'
 
 export const techStack: TechStack = {
   programming: [
-    { name: 'JavaScript', level: 'Intermediate', image: '@/assets/images/javascript.png' },
+    { name: 'JavaScript', level: 'Advanced', image: '@/assets/images/javascript.png' },
-    { name: 'TypeScript', level: 'Intermediate', image: '@/assets/images/typescript.png' },
+    { name: 'TypeScript', level: 'Advanced', image: '@/assets/images/typescript.png' },
-    { name: 'Node.js', level: 'Intermediate', image: '@/assets/images/nodejs.png' },
+    { name: 'Node.js', level: 'Advanced', image: '@/assets/images/nodejs.png' },
     { name: 'Bash', level: 'Intermediate', image: '@/assets/images/bash.png' },
-    { name: 'Markdown', level: 'Beginner', image: '@/assets/images/markdown.png' }
+    { name: 'Markdown', level: 'Advanced', image: '@/assets/images/markdown.png' },
+    // TODO: Add Ruby image
+    { name: 'Ruby', level: 'Intermediate', image: '@/assets/images/ruby.png' },
+    { name: 'Ruby on Rails', level: 'Intermediate', image: '@/assets/images/rubyonrails.png' },
   ],
   front: [
-    { name: 'Vue.js', level: 'Intermediate', image: '@/assets/images/vuejs.png' },
+    { name: 'Vue.js', level: 'Advanced', image: '@/assets/images/vuejs.png' },
     { name: 'React', level: 'Intermediate', image: '@/assets/images/react.png' },
     { name: 'Angular', level: 'Intermediate', image: '@/assets/images/angular.png' },
-    { name: 'HTML', level: 'Intermediate', image: '@/assets/images/html.png' },
+    { name: 'HTML', level: 'Advanced', image: '@/assets/images/html.png' },
-    { name: 'CSS', level: 'Beginner', image: '@/assets/images/css.png' },
+    { name: 'CSS', level: 'Advanced', image: '@/assets/images/css.png' },
-    { name: 'Figma', level: 'Intermediate', image: '@/assets/images/figma.png' },
+    { name: 'Figma', level: 'Advanced', image: '@/assets/images/figma.png' },
     { name: 'WordPress', level: 'Intermediate', image: '@/assets/images/wordpress.png' }
   ],
   database: [
-    { name: 'MongoDB', level: 'Intermediate', image: '@/assets/images/mongodb.png' },
+    { name: 'MongoDB', level: 'Advanced', image: '@/assets/images/mongodb.png' },
-    { name: 'MySQL', level: 'Intermediate', image: '@/assets/images/mysql.png' },
+    { name: 'MySQL', level: 'Advanced', image: '@/assets/images/mysql.png' },
-    { name: 'Redis', level: 'Intermediate', image: '@/assets/images/redis.png' },
+    { name: 'Redis', level: 'Advanced', image: '@/assets/images/redis.png' },
-    { name: 'SQLite', level: 'Intermediate', image: '@/assets/images/sqlite.png' }
+    { name: 'SQLite', level: 'Advanced', image: '@/assets/images/sqlite.png' },
+    { name: 'PostgreSQL', level: 'Advanced', image: '@/assets/images/postgresql.png' },
+    { name: 'Bootstrap', level: 'Intermediate', image: '@/assets/images/bootstrap.png' },
+    { name: 'Tailwind CSS', level: 'Intermediate', image: '@/assets/images/tailwindcss.png' }
   ],
   devtools: [
-    { name: 'Git', level: 'Intermediate', image: '@/assets/images/git.png' },
+    { name: 'Git', level: 'Advanced', image: '@/assets/images/git.png' },
-    { name: 'GitHub', level: 'Intermediate', image: '@/assets/images/github.png' },
+    { name: 'GitHub', level: 'Advanced', image: '@/assets/images/github.png' },
-    { name: 'GitLab', level: 'Intermediate', image: '@/assets/images/gitlab.png' },
+    { name: 'GitLab', level: 'Advanced', image: '@/assets/images/gitlab.png' },
-    { name: 'GitKraken', level: 'Intermediate', image: '@/assets/images/gitkraken.png' },
+    { name: 'GitKraken', level: 'Advanced', image: '@/assets/images/gitkraken.png' },
-    { name: 'Visual Studio Code', level: 'Intermediate', image: '@/assets/images/vscode.png' },
+    { name: 'Visual Studio Code', level: 'Advanced', image: '@/assets/images/vscode.png' },
-    { name: 'Atom', level: 'Intermediate', image: '@/assets/images/atom.png' },
+    { name: 'Atom', level: 'Advanced', image: '@/assets/images/atom.png' },
-    { name: 'Docker', level: 'Intermediate', image: '@/assets/images/docker.png' },
+    { name: 'Docker', level: 'Advanced', image: '@/assets/images/docker.png' },
-    { name: 'npm', level: 'Intermediate', image: '@/assets/images/npm.png' },
+    { name: 'npm', level: 'Advanced', image: '@/assets/images/npm.png' },
-    { name: 'Postman', level: 'Intermediate', image: '@/assets/images/postman.png' },
+    { name: 'Postman', level: 'Advanced', image: '@/assets/images/postman.png' },
-    { name: 'FileZilla', level: 'Beginner', image: '@/assets/images/filezilla.png' },
+    { name: 'FileZilla', level: 'Advanced', image: '@/assets/images/filezilla.png' },
-    { name: 'Termius', level: 'Intermediate', image: '@/assets/images/termius.png' },
+    { name: 'Termius', level: 'Advanced', image: '@/assets/images/termius.png' },
-    { name: 'HeidiSQL', level: 'Intermediate', image: '@/assets/images/heidisql.png' },
+    { name: 'HeidiSQL', level: 'Advanced', image: '@/assets/images/heidisql.png' },
-    { name: 'MySQL Workbench', level: 'Intermediate', image: '@/assets/images/mysqlworkbench.png' },
+    { name: 'MySQL Workbench', level: 'Advanced', image: '@/assets/images/mysqlworkbench.png' },
-    { name: 'Sequel Pro', level: 'Beginner', image: '@/assets/images/sequelpro.png' }
+    { name: 'Sequel Pro', level: 'Intermediate', image: '@/assets/images/sequelpro.png' }
   ],
   operating_systems: [
-    { name: 'Linux', level: 'Intermediate', image: '@/assets/images/linux.png' },
+    { name: 'Linux', level: 'Advanced', image: '@/assets/images/linux.png' },
-    { name: 'Ubuntu', level: 'Intermediate', image: '@/assets/images/ubuntu.png' },
+    { name: 'Ubuntu', level: 'Advanced', image: '@/assets/images/ubuntu.png' },
-    { name: 'Debian', level: 'Intermediate', image: '@/assets/images/debian.png' },
+    { name: 'Debian', level: 'Advanced', image: '@/assets/images/debian.png' },
     { name: 'Arch Linux', level: 'Intermediate', image: '@/assets/images/archlinux.png' },
     { name: 'Kali Linux', level: 'Intermediate', image: '@/assets/images/kalilinux.png' },
     { name: 'Deepin', level: 'Intermediate', image: '@/assets/images/deepin.png' },
-    { name: 'Windows', level: 'Intermediate', image: '@/assets/images/windows.png' },
+    { name: 'Windows', level: 'Advanced', image: '@/assets/images/windows.png' },
-    { name: 'macOS', level: 'Intermediate', image: '@/assets/images/macos.png' },
+    { name: 'macOS', level: 'Advanced', image: '@/assets/images/macos.png' },
-    { name: 'Android', level: 'Intermediate', image: '@/assets/images/android.png' },
+    { name: 'Android', level: 'Advanced', image: '@/assets/images/android.png' },
     { name: 'iOS', level: 'Intermediate', image: '@/assets/images/ios.png' },
     { name: 'Wear OS', level: 'Intermediate', image: '@/assets/images/wearos.png' },
     { name: 'watchOS', level: 'Intermediate', image: '@/assets/images/watchos.png' }
   ],
   socials: [
-    { name: 'Discord', level: 'Intermediate', image: '@/assets/images/discord.png' },
+    { name: 'Discord', level: 'Advanced', image: '@/assets/images/discord.png' },
-    { name: 'Instagram', level: 'Intermediate', image: '@/assets/images/instagram.png' },
+    { name: 'Instagram', level: 'Advanced', image: '@/assets/images/instagram.png' },
-    { name: 'LinkedIn', level: 'Intermediate', image: '@/assets/images/linkedin.png' },
+    { name: 'LinkedIn', level: 'Advanced', image: '@/assets/images/linkedin.png' },
-    { name: 'Twitter', level: 'Intermediate', image: '@/assets/images/twitter.png' },
+    { name: 'Twitter', level: 'Advanced', image: '@/assets/images/twitter.png' },
-    { name: 'Reddit', level: 'Intermediate', image: '@/assets/images/reddit.png' },
+    { name: 'Reddit', level: 'Advanced', image: '@/assets/images/reddit.png' },
-    { name: 'Facebook', level: 'Intermediate', image: '@/assets/images/facebook.png' },
+    { name: 'Facebook', level: 'Advanced', image: '@/assets/images/facebook.png' },
-    { name: 'Messenger', level: 'Intermediate', image: '@/assets/images/messenger.png' },
+    { name: 'Messenger', level: 'Advanced', image: '@/assets/images/messenger.png' },
-    { name: 'WhatsApp', level: 'Intermediate', image: '@/assets/images/whatsapp.png' },
+    { name: 'WhatsApp', level: 'Advanced', image: '@/assets/images/whatsapp.png' },
-    { name: 'Telegram', level: 'Intermediate', image: '@/assets/images/telegram.png' }
+    { name: 'Telegram', level: 'Advanced', image: '@/assets/images/telegram.png' }
   ]
 }

src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { nextTick } from 'vue'
 import HomePage from '../views/HomePage.vue'
 
 const router = createRouter({
@@ -30,18 +31,39 @@ const router = createRouter({
       component: () => import('../views/ContactPage.vue')
     }
   ],
-  scrollBehavior() {
+  scrollBehavior(to, from, savedPosition) {
-    // Always scroll to top for consistent navigation
+    // If there's a saved position (back/forward navigation), use it
-    return { top: 0 }
+    if (savedPosition) {
+      return savedPosition
+    }
+
+    // If navigating to a hash anchor, scroll to that element
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth'
+      }
+    }
+
+    // For all other navigation, scroll to top
+    return {
+      top: 0,
+      behavior: 'smooth'
+    }
   }
 })
 
-// Force scroll to top on every navigation
+// Additional scroll to top handler for better compatibility
 router.afterEach(() => {
-  // Use nextTick to ensure DOM is updated
+  // Use nextTick to ensure the DOM is fully updated
-  setTimeout(() => {
+  nextTick(() => {
-    window.scrollTo(0, 0)
+    // Smooth scroll to top
-  }, 0)
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    })
+  })
 })
 
 export default router