feat(portfolio): add resume navigation and improve layout handling

- Add "View Resume" button to Hero component with responsive design (desktop/mobile variants)
- Implement gradient styling with hover animations and pulse effect on desktop button
- Wrap Hero content in flex container for proper button alignment
- Remove client:only directive from TopNav component in default layout
- Add semantic <main> tag wrapper around slot content in default layout
- Implement layoutKey computed property to force re-render on route changes
- Add scrollToTop meta and onMounted scroll reset to resume page
- Add "Back to Home" navigation button to resume page with print-safe styling
- Improve resume page background with white/dark mode support
- Add print media query to hide navigation elements during printing
- Enhance user navigation flow between home and resume pages
This commit is contained in:
mahdiarghyani
2025-12-02 13:20:12 +03:30
parent 9c40914d6a
commit 4dd0ed6f2a
3 changed files with 70 additions and 16 deletions
+10 -3
View File
@@ -1,7 +1,9 @@
<template>
<div class="layout-default">
<TopNav client:only />
<slot />
<div class="layout-default" :key="layoutKey">
<TopNav />
<main>
<slot />
</main>
<FooterCopyright />
</div>
</template>
@@ -16,6 +18,11 @@ import FooterCopyright from '@/components/common/FooterCopyright.vue'
* Main layout for the application including TopNav and Footer.
* This layout is used by default for all pages unless specified otherwise.
*/
const route = useRoute()
// Force re-render when navigating back from pages with layout: false
const layoutKey = computed(() => route.fullPath)
</script>
<style scoped>