🚀 Deployment (#12)

.github/workflows/deploy.yml

@@ -33,7 +33,18 @@ jobs:
         run: |
           npm ci
           npm run generate
-
+
+      - name: Prepare S3 uploads
+        run: |
+          # Ensure the dist directory exists
+          if [ -d "dist" ]; then
+            # Copy index.html to each route directory
+            mkdir -p dist/experience dist/projects dist/contact
+            cp dist/index.html dist/experience/index.html
+            cp dist/index.html dist/projects/index.html  
+            cp dist/index.html dist/contact/index.html
+          fi
+
       - name: Sync to S3
         env:
           AWS_REGION: us-east-1

assets/styles/colors.scss

@@ -22,7 +22,7 @@ $tooltipBg: #1f2131; // Tooltip background
 $redButton: #da7164; // Red UI button
 $yellowButton: #ebc063; // Yellow UI button
 $greenButton: #3fdd78; // Green UI button
-
+$blueButton: #103cfc; // Blue UI button
 // Status colors
 $error: #b80000; // Error state
 

assets/styles/main.scss

@@ -677,4 +677,7 @@ p {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
+  .modal-wrapper--full {
+    max-height: 260px;
+  }
 }

components/AppHeader.vue

@@ -1,11 +1,21 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import { useScroll } from '~/composables/useScroll';
-import Resume from '~/assets/files/resume.pdf';
+// Remove direct import and use dynamic import for the PDF
+// import Resume from '~/assets/files/Mehmet_Deveci_Resume.pdf';
 
 const route = useRoute();
 const isMobileMenuActive = ref(false);
 const { isFixed: isHeaderFixed } = useScroll(100);
+const resumeUrl = ref(''); // Store the resume URL after it's loaded
+
+// Preload the resume URL but don't block rendering
+onMounted(() => {
+  // Dynamically import the resume only when needed
+  import('~/assets/files/Mehmet_Deveci_Resume.pdf').then((module) => {
+    resumeUrl.value = module.default;
+  });
+});
 
 // Watch for route changes to close the mobile menu
 watch(
@@ -21,16 +31,29 @@ const toggleMenu = () => {
 
 const downloadFile = () => {
   try {
-    const link = document.createElement('a');
-    link.href = Resume;
-    link.download = 'MehmetDeveciResume.pdf';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    // If resumeUrl is not loaded yet, load it first
+    if (!resumeUrl.value) {
+      import('~/assets/files/Mehmet_Deveci_Resume.pdf').then((module) => {
+        resumeUrl.value = module.default;
+        triggerDownload();
+      });
+    } else {
+      triggerDownload();
+    }
   } catch (error) {
     console.error('Error downloading file:', error);
   }
 };
+
+// Separate function to trigger the download
+const triggerDownload = () => {
+  const link = document.createElement('a');
+  link.href = resumeUrl.value;
+  link.download = 'MehmetDeveciMehmet_Deveci_Resume.pdf';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
 </script>
 
 <template>
@@ -54,7 +77,8 @@ const downloadFile = () => {
         <NuxtLink to="/projects" :class="{ 'router-link-active': route.path.startsWith('/projects') }">Projects</NuxtLink>
         <!-- <NuxtLink to="/blog">Blog</NuxtLink> -->
         <NuxtLink to="/contact" exact>Contact</NuxtLink>
-        <button class="btn" @click="downloadFile">Download Resume</button>
+        <!-- Add loading="lazy" and optimize rendering priority -->
+        <button class="btn" loading="lazy" @click="downloadFile">Download Resume</button>
       </nav>
     </div>
   </header>
@@ -66,7 +90,8 @@ const downloadFile = () => {
 
 #header {
   box-sizing: border-box;
-  box-shadow: 0px 30px 40px colors.$navyBlue;
+  box-shadow: 0px 30px 40px #01020d;
+  background: #01020d;
 }
 
 #header .container {