diff --git a/src/assets/images/bootstrap.png b/src/assets/images/bootstrap.png new file mode 100644 index 0000000..f0b7a48 Binary files /dev/null and b/src/assets/images/bootstrap.png differ diff --git a/src/assets/images/postgresql.png b/src/assets/images/postgresql.png new file mode 100644 index 0000000..76cce96 Binary files /dev/null and b/src/assets/images/postgresql.png differ diff --git a/src/assets/images/ruby.png b/src/assets/images/ruby.png new file mode 100644 index 0000000..69536af Binary files /dev/null and b/src/assets/images/ruby.png differ diff --git a/src/assets/images/rubyonrails.png b/src/assets/images/rubyonrails.png new file mode 100644 index 0000000..66a4da2 Binary files /dev/null and b/src/assets/images/rubyonrails.png differ diff --git a/src/assets/images/tailwindcss.png b/src/assets/images/tailwindcss.png new file mode 100644 index 0000000..4b89ed8 Binary files /dev/null and b/src/assets/images/tailwindcss.png differ diff --git a/src/data/techstack.ts b/src/data/techstack.ts index 465309d..f27f337 100644 --- a/src/data/techstack.ts +++ b/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: 'TypeScript', level: 'Intermediate', image: '@/assets/images/typescript.png' }, - { name: 'Node.js', level: 'Intermediate', image: '@/assets/images/nodejs.png' }, + { name: 'JavaScript', level: 'Advanced', image: '@/assets/images/javascript.png' }, + { name: 'TypeScript', level: 'Advanced', image: '@/assets/images/typescript.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: 'CSS', level: 'Beginner', image: '@/assets/images/css.png' }, - { name: 'Figma', level: 'Intermediate', image: '@/assets/images/figma.png' }, + { name: 'HTML', level: 'Advanced', image: '@/assets/images/html.png' }, + { name: 'CSS', level: 'Advanced', image: '@/assets/images/css.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: 'MySQL', level: 'Intermediate', image: '@/assets/images/mysql.png' }, - { name: 'Redis', level: 'Intermediate', image: '@/assets/images/redis.png' }, - { name: 'SQLite', level: 'Intermediate', image: '@/assets/images/sqlite.png' } + { name: 'MongoDB', level: 'Advanced', image: '@/assets/images/mongodb.png' }, + { name: 'MySQL', level: 'Advanced', image: '@/assets/images/mysql.png' }, + { name: 'Redis', level: 'Advanced', image: '@/assets/images/redis.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: 'GitHub', level: 'Intermediate', image: '@/assets/images/github.png' }, - { name: 'GitLab', level: 'Intermediate', image: '@/assets/images/gitlab.png' }, - { name: 'GitKraken', level: 'Intermediate', image: '@/assets/images/gitkraken.png' }, - { name: 'Visual Studio Code', level: 'Intermediate', image: '@/assets/images/vscode.png' }, - { name: 'Atom', level: 'Intermediate', image: '@/assets/images/atom.png' }, - { name: 'Docker', level: 'Intermediate', image: '@/assets/images/docker.png' }, - { name: 'npm', level: 'Intermediate', image: '@/assets/images/npm.png' }, - { name: 'Postman', level: 'Intermediate', image: '@/assets/images/postman.png' }, - { name: 'FileZilla', level: 'Beginner', image: '@/assets/images/filezilla.png' }, - { name: 'Termius', level: 'Intermediate', image: '@/assets/images/termius.png' }, - { name: 'HeidiSQL', level: 'Intermediate', image: '@/assets/images/heidisql.png' }, - { name: 'MySQL Workbench', level: 'Intermediate', image: '@/assets/images/mysqlworkbench.png' }, - { name: 'Sequel Pro', level: 'Beginner', image: '@/assets/images/sequelpro.png' } + { name: 'Git', level: 'Advanced', image: '@/assets/images/git.png' }, + { name: 'GitHub', level: 'Advanced', image: '@/assets/images/github.png' }, + { name: 'GitLab', level: 'Advanced', image: '@/assets/images/gitlab.png' }, + { name: 'GitKraken', level: 'Advanced', image: '@/assets/images/gitkraken.png' }, + { name: 'Visual Studio Code', level: 'Advanced', image: '@/assets/images/vscode.png' }, + { name: 'Atom', level: 'Advanced', image: '@/assets/images/atom.png' }, + { name: 'Docker', level: 'Advanced', image: '@/assets/images/docker.png' }, + { name: 'npm', level: 'Advanced', image: '@/assets/images/npm.png' }, + { name: 'Postman', level: 'Advanced', image: '@/assets/images/postman.png' }, + { name: 'FileZilla', level: 'Advanced', image: '@/assets/images/filezilla.png' }, + { name: 'Termius', level: 'Advanced', image: '@/assets/images/termius.png' }, + { name: 'HeidiSQL', level: 'Advanced', image: '@/assets/images/heidisql.png' }, + { name: 'MySQL Workbench', level: 'Advanced', image: '@/assets/images/mysqlworkbench.png' }, + { name: 'Sequel Pro', level: 'Intermediate', image: '@/assets/images/sequelpro.png' } ], operating_systems: [ - { name: 'Linux', level: 'Intermediate', image: '@/assets/images/linux.png' }, - { name: 'Ubuntu', level: 'Intermediate', image: '@/assets/images/ubuntu.png' }, - { name: 'Debian', level: 'Intermediate', image: '@/assets/images/debian.png' }, + { name: 'Linux', level: 'Advanced', image: '@/assets/images/linux.png' }, + { name: 'Ubuntu', level: 'Advanced', image: '@/assets/images/ubuntu.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: 'macOS', level: 'Intermediate', image: '@/assets/images/macos.png' }, - { name: 'Android', level: 'Intermediate', image: '@/assets/images/android.png' }, + { name: 'Windows', level: 'Advanced', image: '@/assets/images/windows.png' }, + { name: 'macOS', level: 'Advanced', image: '@/assets/images/macos.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: 'Instagram', level: 'Intermediate', image: '@/assets/images/instagram.png' }, - { name: 'LinkedIn', level: 'Intermediate', image: '@/assets/images/linkedin.png' }, - { name: 'Twitter', level: 'Intermediate', image: '@/assets/images/twitter.png' }, - { name: 'Reddit', level: 'Intermediate', image: '@/assets/images/reddit.png' }, - { name: 'Facebook', level: 'Intermediate', image: '@/assets/images/facebook.png' }, - { name: 'Messenger', level: 'Intermediate', image: '@/assets/images/messenger.png' }, - { name: 'WhatsApp', level: 'Intermediate', image: '@/assets/images/whatsapp.png' }, - { name: 'Telegram', level: 'Intermediate', image: '@/assets/images/telegram.png' } + { name: 'Discord', level: 'Advanced', image: '@/assets/images/discord.png' }, + { name: 'Instagram', level: 'Advanced', image: '@/assets/images/instagram.png' }, + { name: 'LinkedIn', level: 'Advanced', image: '@/assets/images/linkedin.png' }, + { name: 'Twitter', level: 'Advanced', image: '@/assets/images/twitter.png' }, + { name: 'Reddit', level: 'Advanced', image: '@/assets/images/reddit.png' }, + { name: 'Facebook', level: 'Advanced', image: '@/assets/images/facebook.png' }, + { name: 'Messenger', level: 'Advanced', image: '@/assets/images/messenger.png' }, + { name: 'WhatsApp', level: 'Advanced', image: '@/assets/images/whatsapp.png' }, + { name: 'Telegram', level: 'Advanced', image: '@/assets/images/telegram.png' } ] } diff --git a/src/router/index.ts b/src/router/index.ts index 049a558..af1166c 100644 --- a/src/router/index.ts +++ b/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() { - // Always scroll to top for consistent navigation - return { top: 0 } + scrollBehavior(to, from, savedPosition) { + // If there's a saved position (back/forward navigation), use it + 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 - setTimeout(() => { - window.scrollTo(0, 0) - }, 0) + // Use nextTick to ensure the DOM is fully updated + nextTick(() => { + // Smooth scroll to top + window.scrollTo({ + top: 0, + left: 0, + behavior: 'smooth' + }) + }) }) export default router