diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 92a0d9a..d9b222d 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,9 +1,15 @@
+name: Deployment
+
+# This workflow runs ONLY on direct pushes to main/staging
+# It runs tests and then deploys if tests pass (deploy "waits" for tests via 'needs')
+# It is separate from the Pull Request Tests workflow and they do not interact
 on:
   push:
-    branches: [ main, staging ]
+    branches: [main, staging]
 
 jobs:
   deploy:
+    name: Deploying...
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -90,5 +96,4 @@ jobs:
           fi
           
           # Always exit with success
-          echo "Deployment completed successfully"
-          exit 0
\ No newline at end of file
+          echo "Deployment completed successfully"
\ No newline at end of file
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 1cc3113..8057626 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,18 +1,23 @@
-name: Test Project
+name: Testing
 
+# This workflow runs ONLY on pull requests to validate changes before merging
+# It is completely separate from the CI/CD Pipeline that runs on push events
+# They are independent and do not wait for each other
 on:
   pull_request:
-    branches:
-      - main
+    branches: [main, staging]
 
 jobs:
   test:
+    name: tests are running...
     runs-on: ubuntu-latest
     container: 
       image: node:20
     steps:
       - uses: actions/checkout@v3
-        with:
-          node-version: 20
-      - run: npm ci
-      - run: npm test
\ No newline at end of file
+      
+      - name: Install All Packages
+        run: npm ci
+      
+      - name: Run Tests
+        run: npm test
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 1fc2cf2..01d9a2e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,4 @@ terraform.tfvars
 aws_credentials
 certificate.txt
 
+.cursor/
\ No newline at end of file
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index a9bccbc..ffffa4d 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -80,7 +80,7 @@ onMounted(() => {
 @use '@/assets/styles/vars';
 
 .footer {
-  padding: 2rem 3rem;
+  padding: 2rem 3rem 6rem 3rem;
   text-align: center;
   background-color: colors.$darkBlue;
   background: linear-gradient(to bottom, colors.$navyBlue, colors.$darkBlue 100%);
diff --git a/components/AppHero.vue b/components/AppHero.vue
index 4d1a187..a0c52ab 100644
--- a/components/AppHero.vue
+++ b/components/AppHero.vue
@@ -1,9 +1,36 @@
 <script setup>
 import { ref, onMounted, computed, nextTick } from 'vue';
+import MatrixBackground from '~/components/MatrixBackground.vue';
+
+// Import achievement images - add all your achievement images here
+import performanceBg from '~/assets/imgs/performance-bg.jpg';
+import dataBg from '~/assets/imgs/data-bg.jpg';
+import engagementBg from '~/assets/imgs/engagement-bg.jpg';
+import mentorshipBg from '~/assets/imgs/mentorship-bg.jpg';
+import collaborationBg from '~/assets/imgs/collaboration-bg.jpg';
 
 const isMobile = ref(false);
 const isBoxesRendered = ref(false);
 
+// Create a mapping object for images
+const achievementImages = {
+  'performance-bg.jpg': performanceBg,
+  'data-bg.jpg': dataBg,
+  'engagement-bg.jpg': engagementBg,
+  'mentorship-bg.jpg': mentorshipBg,
+  'collaboration-bg.jpg': collaborationBg
+};
+
+// Helper function to get the correct image path
+const getImagePath = (imageName) => {
+  // In development mode, use the direct path
+  if (process.env.NODE_ENV === 'development') {
+    return `/assets/imgs/${imageName}`;
+  }
+  // In production mode, use the imported image
+  return achievementImages[imageName];
+};
+
 // Defer mobile detection to client-side only
 onMounted(() => {
   isMobile.value = window.innerWidth < 1024;
@@ -145,17 +172,412 @@ const openVideoModal = () => {
   });
 };
 
-// Optimized box generation
-const boxCount = computed(() => (isMobile.value ? 24 : 70));
+// Canvas-based matrix animation
+const matrixCanvasRef = ref(null);
+const matrixAnimationStarted = ref(false);
+let animationFrameId = null;
+let matrixCanvas = null;
+let matrixCtx = null;
+
+// Matrix character set
+const matrixChars = '01'.split('');
+
+// Matrix character set
+const matrixWords = [
+  // Frontend Frameworks & Libraries
+  'VUE',
+  'NUXT',
+  'NEXT',
+  'REACT',
+  'VITE',
+  'WEBPACK',
+  'BABEL',
+  'TYPESCRIPT',
+  'JAVASCRIPT',
+  'HTML',
+  'CSS',
+  'SCSS',
+  'TAILWIND',
+  'VUEX',
+  'GRAPHQL',
+
+  // Backend & Servers
+  'NODE',
+  'EXPRESS',
+  'NEST',
+  'SYMFONY',
+  'LARAVEL',
+  'PHP',
+  'GO',
+  'POSTGRESQL',
+  'MYSQL',
+  'DOCKER',
+  'KUBERNETES',
+
+  // Cloud & DevOps
+  'AWS',
+  'EC2',
+  'S3',
+  'LAMBDA',
+  'CLOUDFRONT',
+  'FIREBASE',
+  'NETLIFY',
+  'VERCEL',
+  'HEROKU',
+  'GITHUB',
+  'GITLAB',
+  'BITBUCKET',
+  'CI/CD',
+  'JENKINS',
+  'TERRAFORM',
+  'GRAFANA',
+
+  // Design & UX
+  'UI',
+  'UX',
+  'FIGMA',
+  'SKETCH',
+  'ADOBE',
+  'PHOTOSHOP',
+  'WIREFRAME',
+  'PROTOTYPE',
+  'ACCESSIBILITY',
+  'A11Y',
+  'RESPONSIVE',
+  'MOBILE',
+
+  // General Programming
+  'STAGING',
+  'BUILD',
+  'TEST',
+  'DEBUG',
+  'DEPLOY',
+  'RELEASE',
+  'AGILE',
+  'SCRUM',
+  'KANBAN',
+  'JIRA',
+  'API',
+  'REST',
+  'CLEAN',
+  'SOLID',
+  'PATTERNS',
+  'ALGORITHMS',
+  'DATA',
+
+  // Performance & Optimization
+  'OPTIMIZE',
+  'CACHE',
+  'LAZY',
+  'BUNDLE',
+  'MINIFY',
+  'COMPRESS',
+  'PERFORMANCE',
+  'METRICS',
+  'LIGHTHOUSE',
+  'WEBVITALS',
+  'LCP',
+  'FID',
+  'CLS',
+  'SEO',
+  'PWA',
+
+  // Data & Analytics
+  'ANALYTICS',
+  'AI',
+  'VISUALIZATION',
+  'D3',
+  'CHART',
+  'DASHBOARD',
+  'LOGGING',
+  'MONITOR',
+  'TRACK'
+];
+const drops = [];
+
+// Initialize the drops
+const initDrops = () => {
+  if (!matrixCanvas) return;
+
+  // Calculate how many drops to add based on width
+  const fontSize = isMobile.value ? 10 : 14;
+  const columns = Math.floor((matrixCanvas.width / fontSize) * 1.2); // Increase density of columns
+
+  // Reset drops array
+  drops.length = 0;
+
+  // Create initial drops
+  for (let i = 0; i < columns; i++) {
+    // Random starting y position
+    drops.push({
+      x: i * fontSize * 2 + Math.random() * fontSize, // Reduce spacing between words
+      y: Math.random() * matrixCanvas.height,
+      speed: 0.5 + Math.random() * 1.5,
+      opacity: 0.03 + Math.random() * 0.15, // Lower overall opacity
+      word: matrixWords[Math.floor(Math.random() * matrixWords.length)],
+      length: Math.floor(2 + Math.random() * 5), // Fewer trailing characters
+      chars: []
+    });
+
+    // Generate trailing characters for this drop
+    for (let j = 0; j < drops[i].length; j++) {
+      drops[i].chars.push({
+        char: drops[i].word[Math.floor(Math.random() * drops[i].word.length)],
+        opacity: j === 0 ? 0.9 : (1 - j / drops[i].length) * 0.7
+      });
+    }
+  }
+};
+
+// The animation loop
+const startMatrixAnimation = () => {
+  if (!matrixCtx || !matrixCanvas) return;
+
+  // More thorough clearing to prevent trails
+  matrixCtx.globalCompositeOperation = 'source-over';
+  matrixCtx.fillStyle = 'rgba(2, 6, 23, 0.15)'; // Increased opacity for better clearing
+  matrixCtx.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height);
+
+  const fontSize = isMobile.value ? 10 : 14;
+
+  // Draw each drop
+  drops.forEach((drop, _) => {
+    // Skip drops without proper initialization
+    if (!drop || !drop.word || !drop.chars || !Array.isArray(drop.chars)) return;
+
+    // Move drop down by its speed
+    drop.y += drop.speed;
+
+    // Draw the main word at the head of the drop with lighter green
+    matrixCtx.font = `bold ${fontSize}px monospace`;
+    // Clear compositing to prevent white halos
+    matrixCtx.globalCompositeOperation = 'source-over';
+    // Use a lighter shade of green with lower opacity
+    matrixCtx.fillStyle = `rgba(120, 230, 160, ${drop.opacity * 0.8})`; // Lighter green with reduced opacity
+    matrixCtx.fillText(drop.word, drop.x, drop.y);
+
+    // Draw trailing characters
+    drop.chars.forEach((charObj, j) => {
+      // Skip undefined char objects
+      if (!charObj || typeof charObj !== 'object') return;
+
+      // Create trailing effect with fading CTA color
+      const trailY = drop.y - (j + 1) * fontSize;
+
+      if (trailY > 0 && trailY < matrixCanvas.height) {
+        // Trailing characters have fading opacity and color transition from CTA to white
+        const opacity = (1 - j / drop.length) * drop.opacity * 0.5; // Lower opacity for trails
+
+        if (j < 2) {
+          // First trailing characters with lighter green
+          matrixCtx.globalCompositeOperation = 'source-over';
+          matrixCtx.fillStyle = `rgba(140, 245, 180, ${opacity})`;
+        } else {
+          // Rest fade to very light cyan
+          matrixCtx.globalCompositeOperation = 'source-over';
+          matrixCtx.fillStyle = `rgba(160, 245, 200, ${opacity})`;
+        }
+
+        matrixCtx.font = `${fontSize}px monospace`;
+        matrixCtx.fillText(charObj.char, drop.x + (Math.random() > 0.5 ? fontSize / 4 : 0), trailY);
+
+        // Occasionally change character
+        if (Math.random() > 0.92) {
+          if (drop.word && drop.word.length > 0) {
+            charObj.char = drop.word[Math.floor(Math.random() * drop.word.length)];
+          }
+        }
+      }
+    });
+
+    // Reset drop when it goes off screen
+    if (drop.y > matrixCanvas.height + fontSize) {
+      // Move drop far above viewport to prevent trails
+      drop.y = -fontSize * 4; // Position higher above the viewport
+      drop.speed = 0.5 + Math.random() * 1.5;
+      drop.opacity = 0.03 + Math.random() * 0.15; // Lower overall opacity
+      drop.word = matrixWords[Math.floor(Math.random() * matrixWords.length)];
+
+      // Ensure length is properly set
+      if (!drop.length || drop.length < 1) {
+        drop.length = Math.floor(2 + Math.random() * 5);
+      }
+
+      // Clear and regenerate trailing characters
+      drop.chars = [];
+      for (let j = 0; j < drop.length; j++) {
+        if (drop.word && drop.word.length > 0) {
+          drop.chars.push({
+            char: drop.word[Math.floor(Math.random() * drop.word.length)],
+            opacity: j === 0 ? 0.9 : (1 - j / drop.length) * 0.7
+          });
+        }
+      }
+    }
+  });
+
+  // Occasionally add a new fast "highlight" drop
+  if (Math.random() > 0.99 && drops.length < (matrixCanvas.width / fontSize) * 1.2) {
+    const fontSize = isMobile.value ? 10 : 14;
+    const x = Math.floor((Math.random() * matrixCanvas.width) / fontSize) * fontSize;
+
+    // Check if there's already a drop at this x position
+    const existingDropIndex = drops.findIndex((d) => d.x === x);
+
+    if (existingDropIndex === -1) {
+      // Add a new bright drop
+      const newDrop = {
+        x,
+        y: -5 * fontSize,
+        speed: 2 + Math.random() * 3,
+        opacity: 0.7 + Math.random() * 0.3,
+        length: Math.floor(4 + Math.random() * 8),
+        chars: []
+      };
+
+      // Generate characters for this drop
+      for (let j = 0; j < newDrop.length; j++) {
+        newDrop.chars.push({
+          char: matrixChars[Math.floor(Math.random() * matrixChars.length)],
+          opacity: j === 0 ? 1 : (1 - j / newDrop.length) * 0.9
+        });
+      }
+
+      drops.push(newDrop);
+    }
+  }
+
+  // Occasionally add a new fast "highlight" drop with a full word
+  if (Math.random() > 0.97 && drops.length < matrixCanvas.width / fontSize) {
+    // Increased probability and allowed density
+    const x = Math.floor((Math.random() * matrixCanvas.width) / fontSize) * fontSize;
+
+    // Check if there's already a drop near this x position (with smaller distance check)
+    const existingDropIndex = drops.findIndex((d) => Math.abs(d.x - x) < fontSize * 2);
+
+    if (existingDropIndex === -1) {
+      // Add a new bright word drop
+      const newWord = matrixWords[Math.floor(Math.random() * matrixWords.length)];
+      const newDrop = {
+        x,
+        y: -5 * fontSize,
+        speed: 2 + Math.random() * 3,
+        opacity: 0.04 + Math.random() * 0.12, // Much lower opacity
+        word: newWord,
+        length: Math.floor(2 + Math.random() * 4),
+        chars: []
+      };
+
+      // Generate trailing characters for this drop
+      for (let j = 0; j < newDrop.length; j++) {
+        newDrop.chars.push({
+          char: newWord[Math.floor(Math.random() * newWord.length)],
+          opacity: j === 0 ? 1 : (1 - j / newDrop.length) * 0.9
+        });
+      }
+
+      drops.push(newDrop);
+    }
+  }
+
+  // Continue animation loop
+  animationFrameId = requestAnimationFrame(startMatrixAnimation);
+};
+
+// Matrix digital rain effect setup
+onMounted(() => {
+  // Render boxes after LCP is done
+  setTimeout(() => {
+    isBoxesRendered.value = true;
+  }, 1000);
+
+  // Initialize matrix animation after boxes are rendered
+  setTimeout(() => {
+    matrixAnimationStarted.value = true;
+    initMatrixAnimation();
+  }, 1500);
+
+  // Keyboard event listeners
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && isModalOpen.value) {
+      closeModal();
+    }
+  });
+});
+
+// Initialize the matrix animation
+const initMatrixAnimation = () => {
+  if (!isBoxesRendered.value) return;
+
+  // Only set up canvas once
+  nextTick(() => {
+    matrixCanvas = matrixCanvasRef.value;
+    if (!matrixCanvas) return;
+
+    // Create canvas context with settings to prevent white background artifacts
+    matrixCtx = matrixCanvas.getContext('2d', {
+      alpha: false,
+      willReadFrequently: false,
+      desynchronized: true
+    });
+
+    // Disable text anti-aliasing for sharper text
+    matrixCtx.imageSmoothingEnabled = false;
+
+    // Initial full clear of the canvas
+    matrixCtx.fillStyle = 'rgb(2, 6, 23)'; // navyBlue
+    matrixCtx.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height);
+
+    // Set canvas dimensions to match container
+    const hero = document.getElementById('hero');
+    if (hero) {
+      matrixCanvas.width = hero.offsetWidth;
+      matrixCanvas.height = hero.offsetHeight;
+    } else {
+      matrixCanvas.width = window.innerWidth;
+      matrixCanvas.height = window.innerHeight;
+    }
+
+    // Add resize listener
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        isMobile.value = window.innerWidth < 1024;
+
+        // Resize canvas
+        if (matrixCanvas) {
+          if (hero) {
+            matrixCanvas.width = hero.offsetWidth;
+            matrixCanvas.height = hero.offsetHeight;
+          } else {
+            matrixCanvas.width = window.innerWidth;
+            matrixCanvas.height = window.innerHeight;
+          }
+
+          // Reset drops when resizing
+          initDrops();
+        }
+      }, 250);
+    });
+
+    // Start matrix animation
+    initDrops();
+    startMatrixAnimation();
+  });
+};
+
+// Clean up animation on component unmount
+onBeforeUnmount(() => {
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId);
+  }
+});
 </script>
 
 <template>
   <div>
+    <MatrixBackground v-if="isBoxesRendered" />
     <div id="hero" class="container">
-      <div v-if="isBoxesRendered" class="boxes">
-        <div v-for="i in boxCount" :key="i"></div>
-      </div>
-
       <span>I'm Mehmet;</span>
       <h1>Software Development Specialist</h1>
       <p>Frontend-focused, 10+ years in web, experienced in backend and full stack work.</p>
@@ -194,7 +616,7 @@ const boxCount = computed(() => (isMobile.value ? 24 : 70));
 
           <template #content>
             <div class="hero-sentence">
-              <NuxtImg :src="`/assets/imgs/${selectedAchievement.image}`" :alt="`${selectedAchievement.label} - ${selectedAchievement.hero}`" loading="lazy" width="800" height="400" format="jpg" quality="80" class="hero-sentence__bg" fit="cover" />
+              <NuxtImg :src="getImagePath(selectedAchievement.image)" :alt="`${selectedAchievement.label} - ${selectedAchievement.hero}`" loading="lazy" width="800" height="400" format="jpg" quality="80" class="hero-sentence__bg" fit="cover" />
               <p>{{ selectedAchievement.hero }}</p>
             </div>
             <ol>
@@ -228,7 +650,7 @@ const boxCount = computed(() => (isMobile.value ? 24 : 70));
 
 #hero {
   position: relative;
-  min-height: 90vh;
+  min-height: 100vh;
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -254,10 +676,10 @@ const boxCount = computed(() => (isMobile.value ? 24 : 70));
     line-height: 2rem;
     font-weight: 500;
     text-align: center;
-    margin: 4.5rem auto 0 auto;
     display: block;
     position: relative;
     width: fit-content;
+    margin-top: -76px;
 
     opacity: 1;
     transform: translateY(0);
@@ -457,36 +879,23 @@ const boxCount = computed(() => (isMobile.value ? 24 : 70));
   justify-content: center;
 
   figure {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: calc(100% + 8px);
+    width: 100%;
     box-sizing: border-box;
-    max-height: 200px;
     margin: 8px 0 0 0;
     opacity: 1;
     z-index: 9;
     display: none;
-
-    img {
-      padding: 0;
-      overflow: hidden;
-      max-width: 270px;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      object-position: center;
-      margin: 0;
-      padding: 0;
-      display: block;
-    }
   }
 }
 
 @media (max-width: 1023px) {
   .btn--video {
+    color: white;
+    border-color: white;
     figure {
       display: block;
+      margin: 0 -24px;
+      transform: translateX(-24px);
     }
   }
 }
@@ -509,7 +918,7 @@ const boxCount = computed(() => (isMobile.value ? 24 : 70));
   p {
     position: relative;
     z-index: 1;
-    padding: 2rem;
+    padding: 3rem;
     color: white;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   }
@@ -524,16 +933,30 @@ const boxCount = computed(() => (isMobile.value ? 24 : 70));
   height: 100%;
   overflow: hidden;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  grid-auto-rows: 160px;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(6, 1fr);
   opacity: 0;
   animation: fadeIn 0.5s cubic-bezier(0.2, 0.57, 0.76, 0.79) forwards;
   animation-delay: 0.2s;
   box-sizing: border-box;
   z-index: -1;
-  pointer-events: none; /* Ensure doesn't interfere with interactions */
   contain: layout style paint; /* Improve performance */
 
+  &.matrix-animation-active {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: radial-gradient(circle at center, transparent 0%, colors.$navyBlue 70%);
+      z-index: 1;
+      opacity: 0.7;
+      pointer-events: none;
+    }
+  }
+
   &:after {
     content: '';
     position: absolute;
@@ -543,6 +966,7 @@ const boxCount = computed(() => (isMobile.value ? 24 : 70));
     height: 100%;
     box-shadow: inset 10px 0px 80px 80px colors.$navyBlue;
     z-index: 2;
+    pointer-events: none;
   }
 
   > div {
@@ -550,9 +974,24 @@ const boxCount = computed(() => (isMobile.value ? 24 : 70));
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
     box-sizing: border-box;
     transform: translateZ(0); /* Hardware acceleration */
+    position: relative;
+    transition:
+      background-color 0.5s ease,
+      opacity 0.5s ease;
+    will-change: background-color, opacity;
 
-    &:nth-child(3n) {
-      border-right-width: 1px;
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: transparent;
+      transition: opacity 0.3s ease;
+      opacity: 0;
+    }
+
+    &:hover {
+      background-color: rgba(43, 204, 105, 0.2) !important;
+      opacity: 1 !important;
     }
   }
 }
@@ -562,7 +1001,51 @@ const boxCount = computed(() => (isMobile.value ? 24 : 70));
     opacity: 0;
   }
   to {
-    opacity: 0.8; /* Slightly less opaque for better contrast */
+    opacity: 1;
+  }
+}
+
+@keyframes matrixGlow {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.2);
   }
 }
+// #hero {
+//   *:not(.boxes > div):not(.boxes):not(.btn):not(.btn--video):not(.modal-button) {
+//     pointer-events: none;
+//   }
+// }
+
+/* Canvas-based Matrix animation for better performance */
+.matrix-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  opacity: 0;
+  animation: fadeIn 0.5s cubic-bezier(0.2, 0.57, 0.76, 0.79) forwards;
+  animation-delay: 0.2s;
+  box-sizing: border-box;
+  z-index: -1;
+  contain: layout style paint; /* Improve performance */
+}
+
+.matrix-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: translateZ(0); /* Hardware acceleration */
+  will-change: transform; /* Optimize for animations */
+  opacity: 0.7; // Slightly reduced opacity
+  filter: contrast(1.05) brightness(1.05); // Reduced filter intensity to minimize trails
+  image-rendering: optimizeSpeed; // Improve rendering performance
+  background-color: rgb(2, 6, 23); // Match canvas background to prevent white flashes
+}
 </style>
diff --git a/components/MatrixBackground.vue b/components/MatrixBackground.vue
new file mode 100644
index 0000000..6082d6d
--- /dev/null
+++ b/components/MatrixBackground.vue
@@ -0,0 +1,432 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+
+defineProps({
+  isVisible: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const isMobile = ref(false);
+const isAnimationStarted = ref(false);
+const matrixCanvasRef = ref(null);
+let animationFrameId = null;
+let matrixCanvas = null;
+let matrixCtx = null;
+let resizeTimeout;
+
+// Matrix words
+const matrixWords = [
+  // Frontend Frameworks & Libraries
+  'VUE',
+  'NUXT',
+  'NEXT',
+  'REACT',
+  'VITE',
+  'WEBPACK',
+  'JAVASCRIPT',
+  'TYPESCRIPT',
+  'NODE',
+  'REST',
+  'AXIOS',
+  'CYPRESS',
+  'JEST',
+  'PHP',
+  'GIT',
+  'GRAPHQL',
+  'DOCKER',
+  'POSTMAN',
+  'HTML',
+  'CSS',
+  'SCSS',
+  'LESS',
+  'BOOTSTRAP',
+  'TAILWIND',
+  'FIGMA',
+  'AGILE',
+  'SCRUM',
+  'KANBAN',
+  'BEM',
+  'GITHUB',
+  'MYSQL',
+  'AWS',
+  'LARAVEL',
+  'SQL',
+  'JQUERY',
+  'UI',
+  'UX',
+  'TERRAFORM',
+  'FIREBASE',
+  'GITHUB-ACTIONS',
+
+  // Backend & Servers
+  'EXPRESS',
+  'NEST',
+  'SYMFONY',
+  'GO',
+  'POSTGRESQL',
+  'KUBERNETES',
+
+  // Cloud & DevOps
+  'EC2',
+  'S3',
+  'LAMBDA',
+  'CLOUDFRONT',
+  'NETLIFY',
+  'VERCEL',
+  'HEROKU',
+  'GITLAB',
+  'BITBUCKET',
+  'CI/CD',
+  'JENKINS',
+  'GRAFANA',
+
+  // Design & UX
+  'SKETCH',
+  'ADOBE',
+  'PHOTOSHOP',
+  'WIREFRAME',
+  'PROTOTYPE',
+  'ACCESSIBILITY',
+  'A11Y',
+  'RESPONSIVE',
+  'MOBILE',
+
+  // General Programming
+  'STAGING',
+  'BUILD',
+  'TEST',
+  'DEBUG',
+  'DEPLOY',
+  'RELEASE',
+  'JIRA',
+  'API',
+  'CLEAN',
+  'SOLID',
+  'PATTERNS',
+  'ALGORITHMS',
+  'DATA',
+
+  // Performance & Optimization
+  'OPTIMIZE',
+  'CACHE',
+  'LAZY',
+  'BUNDLE',
+  'MINIFY',
+  'COMPRESS',
+  'PERFORMANCE',
+  'METRICS',
+  'LIGHTHOUSE',
+  'WEBVITALS',
+  'LCP',
+  'FID',
+  'CLS',
+  'SEO',
+  'PWA',
+
+  // Data & Analytics
+  'ANALYTICS',
+  'AI',
+  'VISUALIZATION',
+  'D3',
+  'CHART',
+  'DASHBOARD',
+  'LOGGING',
+  'MONITOR',
+  'TRACK'
+];
+
+// Array to hold falling word objects
+const drops = [];
+
+// Initialize the drops
+const initDrops = () => {
+  if (!matrixCanvas) return;
+
+  // Calculate how many drops to add based on width
+  const fontSize = isMobile.value ? 10 : 14;
+  const columns = Math.floor((matrixCanvas.width / fontSize) * 1.2); // Increase density of columns
+
+  // Reset drops array
+  drops.length = 0;
+
+  // Create initial drops
+  for (let i = 0; i < columns; i++) {
+    // Random starting y position
+    drops.push({
+      x: i * fontSize * 2 + Math.random() * fontSize, // Reduce spacing between words
+      y: Math.random() * matrixCanvas.height,
+      speed: 0.5 + Math.random() * 1.5,
+      opacity: 0.03 + Math.random() * 0.15, // Lower overall opacity
+      word: matrixWords[Math.floor(Math.random() * matrixWords.length)],
+      length: Math.floor(2 + Math.random() * 5), // Fewer trailing characters
+      chars: []
+    });
+
+    // Generate trailing characters for this drop
+    for (let j = 0; j < drops[i].length; j++) {
+      drops[i].chars.push({
+        char: drops[i].word[Math.floor(Math.random() * drops[i].word.length)],
+        opacity: j === 0 ? 0.9 : (1 - j / drops[i].length) * 0.7
+      });
+    }
+  }
+};
+
+// The animation loop
+const startMatrixAnimation = () => {
+  if (!matrixCtx || !matrixCanvas) return;
+
+  // Partial clearing to maintain some trails but prevent excessive accumulation
+  matrixCtx.globalCompositeOperation = 'source-over';
+  matrixCtx.fillStyle = 'rgba(2, 6, 23, 0.85)'; // Semi-transparent navyBlue
+  matrixCtx.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height);
+
+  const fontSize = isMobile.value ? 10 : 14;
+
+  // Draw each drop
+  drops.forEach((drop, _) => {
+    // Skip drops without proper initialization
+    if (!drop || !drop.word || !drop.chars || !Array.isArray(drop.chars)) return;
+
+    // Move drop down by its speed
+    drop.y += drop.speed;
+
+    // Draw the main word at the head of the drop with lighter green
+    matrixCtx.font = `bold ${fontSize}px monospace`;
+    // Clear compositing to prevent white halos
+    matrixCtx.globalCompositeOperation = 'source-over';
+    // Use a lighter shade of green with lower opacity
+    matrixCtx.fillStyle = `rgba(130, 255, 170, ${drop.opacity * 1.2})`; // Brighter green with increased opacity
+    matrixCtx.fillText(drop.word, drop.x, drop.y);
+
+    // Draw trailing characters
+    drop.chars.forEach((charObj, j) => {
+      // Skip undefined char objects
+      if (!charObj || typeof charObj !== 'object') return;
+
+      // Create trailing effect with fading CTA color
+      const trailY = drop.y - (j + 1) * fontSize;
+
+      if (trailY > 0 && trailY < matrixCanvas.height) {
+        // Trailing characters have fading opacity and color transition from CTA to white
+        const opacity = (1 - j / drop.length) * drop.opacity * 0.7; // Increased opacity for trails
+
+        if (j < 2) {
+          // First trailing characters with lighter green
+          matrixCtx.globalCompositeOperation = 'source-over';
+          matrixCtx.fillStyle = `rgba(150, 255, 190, ${opacity * 1.3})`;
+        } else {
+          // Rest fade to very light cyan
+          matrixCtx.globalCompositeOperation = 'source-over';
+          matrixCtx.fillStyle = `rgba(170, 255, 210, ${opacity})`;
+        }
+
+        matrixCtx.font = `${fontSize}px monospace`;
+        matrixCtx.fillText(charObj.char, drop.x + (Math.random() > 0.5 ? fontSize / 4 : 0), trailY);
+
+        // Occasionally change character
+        if (Math.random() > 0.92) {
+          if (drop.word && drop.word.length > 0) {
+            charObj.char = drop.word[Math.floor(Math.random() * drop.word.length)];
+          }
+        }
+      }
+    });
+
+    // Reset drop when it goes off screen
+    if (drop.y > matrixCanvas.height + fontSize) {
+      // Move drop far above viewport to prevent trails
+      drop.y = -fontSize * 4; // Position higher above the viewport
+      drop.speed = 0.5 + Math.random() * 1.5;
+      drop.opacity = 0.03 + Math.random() * 0.15; // Lower overall opacity
+      drop.word = matrixWords[Math.floor(Math.random() * matrixWords.length)];
+
+      // Ensure length is properly set
+      if (!drop.length || drop.length < 1) {
+        drop.length = Math.floor(2 + Math.random() * 5);
+      }
+
+      // Clear and regenerate trailing characters
+      drop.chars = [];
+      for (let j = 0; j < drop.length; j++) {
+        if (drop.word && drop.word.length > 0) {
+          drop.chars.push({
+            char: drop.word[Math.floor(Math.random() * drop.word.length)],
+            opacity: j === 0 ? 0.9 : (1 - j / drop.length) * 0.7
+          });
+        }
+      }
+    }
+  });
+
+  // Occasionally add a new fast "highlight" drop with a full word
+  if (Math.random() > 0.97 && drops.length < matrixCanvas.width / fontSize) {
+    // Increased probability and allowed density
+    const x = Math.floor((Math.random() * matrixCanvas.width) / fontSize) * fontSize;
+
+    // Check if there's already a drop near this x position (with smaller distance check)
+    const existingDropIndex = drops.findIndex((d) => Math.abs(d.x - x) < fontSize * 2);
+
+    if (existingDropIndex === -1) {
+      // Add a new bright word drop
+      const newWord = matrixWords[Math.floor(Math.random() * matrixWords.length)];
+      const newDrop = {
+        x,
+        y: -5 * fontSize,
+        speed: 2 + Math.random() * 3,
+        opacity: 0.04 + Math.random() * 0.12, // Much lower opacity
+        word: newWord,
+        length: Math.floor(2 + Math.random() * 4),
+        chars: []
+      };
+
+      // Generate trailing characters for this drop
+      for (let j = 0; j < newDrop.length; j++) {
+        newDrop.chars.push({
+          char: newWord[Math.floor(Math.random() * newWord.length)],
+          opacity: j === 0 ? 1 : (1 - j / newDrop.length) * 0.9
+        });
+      }
+
+      drops.push(newDrop);
+    }
+  }
+
+  // Continue animation loop
+  animationFrameId = requestAnimationFrame(startMatrixAnimation);
+};
+
+// Initialize the matrix animation
+const initMatrixAnimation = () => {
+  // Only set up canvas once
+  nextTick(() => {
+    matrixCanvas = matrixCanvasRef.value;
+    if (!matrixCanvas) return;
+
+    // Create canvas context with settings to prevent white background artifacts
+    matrixCtx = matrixCanvas.getContext('2d', {
+      alpha: false,
+      willReadFrequently: false,
+      desynchronized: true
+    });
+
+    // Disable text anti-aliasing for sharper text
+    matrixCtx.imageSmoothingEnabled = false;
+
+    // Create gradient background
+    const gradient = matrixCtx.createLinearGradient(0, 0, 0, matrixCanvas.height);
+    gradient.addColorStop(0, '#01020d');
+    gradient.addColorStop(1, '#03050d');
+
+    // Initial full clear of the canvas with gradient
+    matrixCtx.fillStyle = gradient;
+    matrixCtx.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height);
+
+    // Set canvas dimensions to match container
+    const container = matrixCanvas.parentElement;
+    if (container) {
+      matrixCanvas.width = container.offsetWidth;
+      matrixCanvas.height = container.offsetHeight;
+    } else {
+      matrixCanvas.width = window.innerWidth;
+      matrixCanvas.height = window.innerHeight;
+    }
+
+    // Add resize listener
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        isMobile.value = window.innerWidth < 1024;
+
+        // Resize canvas
+        if (matrixCanvas) {
+          if (container) {
+            matrixCanvas.width = container.offsetWidth;
+            matrixCanvas.height = container.offsetHeight;
+          } else {
+            matrixCanvas.width = window.innerWidth;
+            matrixCanvas.height = window.innerHeight;
+          }
+
+          // Reset drops when resizing
+          initDrops();
+        }
+      }, 250);
+    });
+
+    // Start matrix animation
+    initDrops();
+    startMatrixAnimation();
+    isAnimationStarted.value = true;
+  });
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  isMobile.value = window.innerWidth < 1024;
+
+  // Start animation with a slight delay
+  setTimeout(() => {
+    initMatrixAnimation();
+  }, 500);
+});
+
+// Clean up animation on component unmount
+onBeforeUnmount(() => {
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId);
+  }
+
+  // Remove event listeners
+  window.removeEventListener('resize', () => {});
+});
+</script>
+
+<template>
+  <div class="matrix-container" :class="{ 'matrix-animation-active': isAnimationStarted }">
+    <canvas ref="matrixCanvasRef" class="matrix-canvas"></canvas>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/colors' as colors;
+
+.matrix-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  opacity: 0;
+  animation: fadeIn 0.5s cubic-bezier(0.2, 0.57, 0.76, 0.79) forwards;
+  animation-delay: 0.2s;
+  box-sizing: border-box;
+  z-index: -1;
+  contain: layout style paint; /* Improve performance */
+}
+
+.matrix-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: translateZ(0); /* Hardware acceleration */
+  will-change: transform; /* Optimize for animations */
+  opacity: 0.9; // Higher opacity for vivid effect
+  filter: contrast(1.08) brightness(1.05) blur(0.3px); // Added slight blur for glow effect
+  image-rendering: optimizeSpeed; // Improve rendering performance
+  background: linear-gradient(to bottom, #01020d, #03050d); // Vertical gradient
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/pages/contact.vue b/pages/contact.vue
index 9c929da..22cc8af 100644
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -136,7 +136,7 @@ const submitForm = async () => {
   submitStatus.value = null;
 
   try {
-    await axios.get('http://betonsa.com.gh/utils/test.php', {
+    await axios.get('https://betonsa.com.gh/utils/test.php', {
       params: {
         name: formData.name,
         email: formData.email,
diff --git a/pages/index.vue b/pages/index.vue
index 59685f6..31372ac 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <AppHero />
-    <!-- <AppAchievements /> -->
 
     <div id="secondary" :class="{ isActive: isActive }">
       <div class="container">
@@ -88,23 +87,25 @@ onMounted(() => {
 
 #secondary {
   padding-top: 10rem;
-  background: url(~/assets/imgs/Frame-2.svg) repeat-x center 350px;
+  background: url(/public/assets/imgs/Frame-2.svg) repeat-x center 350px;
   padding-bottom: 3rem;
   background-size: 100% auto;
   transition: all 0.7s cubic-bezier(0.25, 1.07, 0.6, 0.9);
   margin-bottom: -6rem;
   position: relative;
   opacity: 0;
+  background-color: #01020d;
+  box-shadow: 0px 0px 40px 60px #01020d;
 
   &:after {
     content: '';
+    display: block;
     width: 100%;
     height: 100%;
+    box-shadow: inset 0px 0px 30px 40px #01020d;
     position: absolute;
-    left: 0;
     top: 0;
-    background: colors.$navyBlue;
-    background: radial-gradient(circle, colors.$navyBlue 0%, rgba(255, 0, 0, 0) 50%, colors.$navyBlue 100%);
+    left: 0;
     z-index: 1;
   }
 
@@ -130,6 +131,7 @@ onMounted(() => {
   h2 {
     font-weight: 900;
     font-family: vars.$fontFamilyBold;
+    margin-bottom: 0;
   }
 }
 
@@ -209,6 +211,19 @@ h2 {
     padding-top: 2rem;
     padding-bottom: 2rem;
     margin-bottom: 0;
+    opacity: 1;
+    .grid {
+      margin-top: 0;
+      padding-top: 1rem;
+    }
+
+    h2 {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      font-size: 1.5rem;
+      line-height: 2rem;
+    }
 
     p {
       padding-left: 1rem;
diff --git a/pages/projects.vue b/pages/projects.vue
index e658d19..0ed6698 100644
--- a/pages/projects.vue
+++ b/pages/projects.vue
@@ -1,17 +1,108 @@
 <template>
   <div id="projects">
     <AppPageHeader :title="'Projects'" :pages="pages" />
-    <p class="container explanation">Each project here represents my commitment to leveraging technology to make a positive impact, whether it's empowering employees, or crafting applications that address genuine needs of others.</p>
+    <p class="container explanation">All projects span infrastructure automation, web development, and data tools, built to solve real problems and empower both developers and end-users alike.</p>
     <div class="project">
       <div class="container">
         <figure class="no-margin">
-          <NuxtImg src="/assets/imgs/betonsa-screenshot.jpg" alt="Betonsa Screenshot" loading="lazy" preset="project" height="1000" width="485" class="project-image" fit="contain" />
+          <NuxtImg
+            src="/assets/imgs/infra-screenshot.jpg"
+            alt="AWS Infrastructure as Code Screenshot"
+            loading="lazy"
+            sizes="sm:100vw md:650px lg:650px"
+            class="project-image"
+            :modifiers="{
+              fit: 'cover',
+              format: 'webp',
+              quality: 80
+            }"
+            placeholder
+            width="700"
+            height="1000"
+          />
+        </figure>
+        <div class="project-info">
+          <strong>FREE TIER</strong>
+          <span>Architected a scalable, cost-effective AWS infrastructure (IaC)</span>
+          <p style="width: 100%">Designed and implemented a cloud infrastructure with separate staging and production environments using Terraform. The solution features CI/CD pipelines with GitHub Actions for automated testing, building, and deployment.</p>
+          <div class="technologies">
+            <span>
+              <MdiIcon icon="mdiTerraform" />
+              <span>Terraform</span>
+            </span>
+            <span>
+              <MdiIcon icon="mdiLanguageTypescript" />
+              <span>Typescript</span>
+            </span>
+            <span>
+              <MdiIcon icon="mdiAws" />
+              <span>AWS</span>
+            </span>
+            <span>
+              <MdiIcon icon="mdiCloudOutline" />
+              <span>CloudFront</span>
+            </span>
+            <span>
+              <MdiIcon icon="mdiLanguageJavascript" />
+              <span>Javascript</span>
+            </span>
+            <span>
+              <MdiIcon icon="mdiDatabaseOutline" />
+              <span>S3</span>
+            </span>
+            <span>
+              <MdiIcon icon="mdiShieldAccount" />
+              <span>IAM</span>
+            </span>
+            <span>
+              <MdiIcon icon="mdiLightningBolt" />
+              <span>Lambda</span>
+            </span>
+            <span>
+              <MdiIcon icon="mdiGithub" />
+              <span>GitHub Actions</span>
+            </span>
+            <span>
+              <MdiIcon icon="mdiPipe" />
+              <span>CI/CD</span>
+            </span>
+          </div>
+          <div class="project-links">
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcodes/volcodeorg-app/tree/main/terraform" class="cta">Source Code <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcodes/volcodeorg-app/actions/runs/14526061723/job/40757705681" class="cta">Pipeline <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://excalidraw.com/#json=6_uYRWfEV1gS90dYX-Ok_,ckFu8EiOcsswRSr_Cs_gWA" class="cta">Diagram <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="project">
+      <div class="container">
+        <figure class="no-margin">
+          <NuxtImg
+            src="/assets/imgs/betonsa-screenshot.jpg"
+            alt="Betonsa Screenshot"
+            loading="lazy"
+            sizes="sm:100vw md:485px lg:485px"
+            class="project-image"
+            :modifiers="{
+              fit: 'cover',
+              format: 'webp',
+              quality: 80
+            }"
+            placeholder
+            width="485"
+            height="1000"
+          />
         </figure>
         <div class="project-info">
           <!-- <strong>Anonymous Reporting Tool</strong> -->
           <span>Designed and built a modern website for Betonsa Ltd.</span>
           <p>Aligned with stakeholders to gather requirements, prototyped, designed, and built a website that showcases Betonsa's mission, services, and products.</p>
           <div class="technologies">
+            <span>
+              <MdiIcon icon="mdiLanguageJavascript" />
+              <span>Javascript</span>
+            </span>
             <span>
               <MdiIcon icon="mdiVuejs" />
               <span>Vue</span>
@@ -20,14 +111,6 @@
               <MdiIcon icon="mdiNuxt" />
               <span>Nuxt.js</span>
             </span>
-            <span>
-              <MdiIcon icon="mdiLanguageJavascript" />
-              <span>Javascript</span>
-            </span>
-            <span>
-              <MdiIcon icon="mdiAws" />
-              <span>AWS</span>
-            </span>
             <span>
               <MdiIcon icon="mdiTailwind" />
               <span>Tailwind</span>
@@ -45,12 +128,12 @@
               <span>Prettier</span>
             </span>
             <span>
-              <MdiIcon icon="mdiGithub" />
-              <span>Github Actions</span>
+              <MdiIcon icon="mdiConsole" />
+              <span>SSH</span>
             </span>
           </div>
           <div class="project-links">
-            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://betonsa.com.gh" class="cta">Visit betonsa.com.gh <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://betonsa.com.gh" class="cta">Live Site <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
           </div>
         </div>
       </div>
@@ -58,7 +141,21 @@
     <div class="project">
       <div class="container">
         <figure class="no-margin">
-          <NuxtImg src="/assets/imgs/volcodeorg-app.jpg" alt="Mehmet Deveci Portfolio Webapp" loading="lazy" preset="project" height="780" width="700" class="project-image" fit="contain" />
+          <NuxtImg
+            src="/assets/imgs/volcodeorg-app.jpg"
+            alt="Mehmet Deveci Portfolio Webapp"
+            loading="lazy"
+            sizes="sm:100vw md:700px lg:700px"
+            class="project-image"
+            :modifiers="{
+              fit: 'cover',
+              format: 'webp',
+              quality: 80
+            }"
+            placeholder
+            width="700"
+            height="780"
+          />
         </figure>
         <div class="project-info">
           <span>Developed a high-performance, modular portfolio template for devs.</span>
@@ -102,8 +199,8 @@
             </span>
           </div>
           <div class="project-links">
-            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcodes/volcodeorg-app" class="cta">Github <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
-            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://volcode.org" class="cta">Demo <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcodes/volcodeorg-app" class="cta">Source Code <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://volcode.org" class="cta">Live Site <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
           </div>
         </div>
       </div>
@@ -111,7 +208,21 @@
     <div class="project">
       <div class="container">
         <figure class="no-margin">
-          <NuxtImg src="/assets/imgs/art-screenshot.jpg" alt="Anonymous Reporting Tool Screenshot" loading="lazy" preset="project" height="567" width="480" class="project-image" fit="contain" />
+          <NuxtImg
+            src="/assets/imgs/art-screenshot.jpg"
+            alt="Anonymous Reporting Tool Screenshot"
+            loading="lazy"
+            sizes="sm:100vw md:480px lg:480px"
+            class="project-image"
+            :modifiers="{
+              fit: 'cover',
+              format: 'webp',
+              quality: 80
+            }"
+            placeholder
+            width="480"
+            height="567"
+          />
         </figure>
         <div class="project-info">
           <span>Engineered a secure, anonymous reporting tool for workplaces.</span>
@@ -139,8 +250,8 @@
             </span>
           </div>
           <div class="project-links">
-            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcanioo/anonymous-reporting-tool" class="cta">Github <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
-            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://affectionate-williams-df6f76.netlify.app/" class="cta">Demo <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcanioo/anonymous-reporting-tool" class="cta">Source Code <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://affectionate-williams-df6f76.netlify.app/" class="cta">Live Site <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
           </div>
         </div>
       </div>
@@ -148,7 +259,21 @@
     <div class="project">
       <div class="container">
         <figure class="no-margin">
-          <NuxtImg src="/assets/imgs/localwebsites-app.jpg" alt="Local Websites App Screenshot" loading="lazy" preset="project" height="750" width="680" class="project-image" fit="contain" />
+          <NuxtImg
+            src="/assets/imgs/localwebsites-app.jpg"
+            alt="Local Websites App Screenshot"
+            loading="lazy"
+            sizes="sm:100vw md:680px lg:680px"
+            class="project-image"
+            :modifiers="{
+              fit: 'cover',
+              format: 'webp',
+              quality: 80
+            }"
+            placeholder
+            width="680"
+            height="750"
+          />
         </figure>
         <div class="project-info">
           <span>Developed a localized service finder for easy relocations.</span>
@@ -172,8 +297,8 @@
             </span>
           </div>
           <div class="project-links">
-            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcanioo/local-websites" class="cta">Github <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
-            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://volcanioo.github.io/local-websites/dist/index.html" class="cta">Demo <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcanioo/local-websites" class="cta">Source Code <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://volcanioo.github.io/local-websites/dist/index.html" class="cta">Live Site <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
           </div>
         </div>
       </div>
@@ -181,7 +306,21 @@
     <div class="project">
       <div class="container">
         <figure class="no-margin">
-          <NuxtImg src="/assets/imgs/humanbody-app.jpg" alt="Human Body Input Binder Screenshot" loading="lazy" preset="project" height="750" width="515" class="project-image" fit="contain" />
+          <NuxtImg
+            src="/assets/imgs/humanbody-app.jpg"
+            alt="Human Body Input Binder Screenshot"
+            loading="lazy"
+            sizes="sm:100vw md:515px lg:515px"
+            class="project-image"
+            :modifiers="{
+              fit: 'cover',
+              format: 'webp',
+              quality: 80
+            }"
+            placeholder
+            width="515"
+            height="750"
+          />
         </figure>
         <div class="project-info">
           <!-- <strong>Human Body Input Binder</strong> -->
@@ -198,8 +337,8 @@
             </span>
           </div>
           <div class="project-links">
-            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcanioo/Human-Body-Rendering-HTML" class="cta">Github <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
-            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://maya-gans.shinyapps.io/human_body_app/" class="cta">Demo <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://github.com/volcanioo/Human-Body-Rendering-HTML" class="cta">Source Code <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
+            <NuxtLink rel="noopener noreferrer" target="_blank" to="https://maya-gans.shinyapps.io/human_body_app/" class="cta">Live Site <MdiIcon icon="mdiArrowTopRight" /></NuxtLink>
           </div>
         </div>
       </div>
@@ -315,7 +454,7 @@ const pages = [
         font-size: 1.15rem;
         line-height: 2rem;
         font-family: vars.$fontFamilyBold;
-        color: colors.$greenShadow;
+        color: colors.$ctaHover;
         text-transform: uppercase;
         letter-spacing: 0.1rem;
       }
@@ -422,7 +561,7 @@ const pages = [
     figure {
       max-width: 100% !important;
       width: 100% !important;
-      max-height: 280px !important;
+      max-height: 69vh !important;
     }
     .project-info {
       max-width: 100% !important;
diff --git a/public/assets/imgs/infra-screenshot.jpg b/public/assets/imgs/infra-screenshot.jpg
new file mode 100644
index 0000000..9d82afc
Binary files /dev/null and b/public/assets/imgs/infra-screenshot.jpg differ
diff --git a/INFRASTRUCTURE.md b/terraform/README.md
similarity index 100%
rename from INFRASTRUCTURE.md
rename to terraform/README.md
diff --git a/terraform/main.tf b/terraform/main.tf
index 9ff896c..0b3f8df 100644
--- a/terraform/main.tf
+++ b/terraform/main.tf
@@ -31,6 +31,10 @@ resource "aws_s3_bucket_website_configuration" "site" {
   index_document {
     suffix = "index.html"
   }
+
+  error_document {
+    key = "index.html"  # Important: Route all errors to index.html
+  }
 }
 
 # 2) OAI + bucket policy
@@ -72,16 +76,27 @@ resource "aws_cloudfront_distribution" "dist" {
   default_cache_behavior {
     target_origin_id       = "S3-${each.key}"
     viewer_protocol_policy = "redirect-to-https"
-    allowed_methods        = ["GET","HEAD"]
-    cached_methods         = ["GET","HEAD"]
+
+    # Allow all HTTP methods if needed
+    allowed_methods  = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]
+    cached_methods   = ["GET", "HEAD"]
     
+    # Forward headers and cookies if your app needs them
     forwarded_values {
-      query_string = false
+      query_string = true
       cookies {
-        forward = "none"
+        forward = "all"
       }
+      headers = ["Origin", "Access-Control-Request-Headers", "Access-Control-Request-Method"]
     }
+
+    # Optimize caching for SPA
+    min_ttl                = 0
+    default_ttl            = 3600  # 1 hour for default caching
+    max_ttl                = 86400 # 24 hours max
   }
+  
+  aliases = each.key == "volcode.org" ? ["volcode.org", "www.volcode.org"] : ["staging.volcode.org"]
 
   viewer_certificate {
     acm_certificate_arn      = aws_acm_certificate.site.arn
@@ -95,6 +110,18 @@ resource "aws_cloudfront_distribution" "dist" {
     }
   }
 
+  custom_error_response {
+    error_code         = 403
+    response_code      = 200
+    response_page_path = "/index.html"
+  }
+
+  custom_error_response {
+    error_code         = 404
+    response_code      = 200
+    response_page_path = "/index.html"
+  }
+
   tags = { Environment = each.key == "volcode.org" ? "prod" : "staging" }
 
   depends_on = [aws_acm_certificate_validation.site]
@@ -104,9 +131,10 @@ resource "aws_cloudfront_distribution" "dist" {
 resource "aws_acm_certificate" "site" {
   domain_name       = "volcode.org"
   validation_method = "DNS"
-  provider         = aws.us-east-1
+  provider          = aws.us-east-1
 
-  subject_alternative_names = ["staging.volcode.org"]
+  # Ensuring all domains are covered: volcode.org, www.volcode.org, and staging.volcode.org
+  subject_alternative_names = ["www.volcode.org", "staging.volcode.org"]
 
   lifecycle {
     create_before_destroy = true