diff --git a/INFRASTRUCTURE.md b/INFRASTRUCTURE.md
new file mode 100644
index 0000000..3b399cd
--- /dev/null
+++ b/INFRASTRUCTURE.md
@@ -0,0 +1,162 @@
+# Infrastructure Architecture - volcode.org
+
+## Overview
+
+This document outlines the cloud infrastructure architecture powering the volcode.org platform. The system is designed with a focus on scalability, security, and maintainable deployment processes.
+
+## Architecture Diagram
+
+```
+                          ┌───────────────┐
+                          │   DNS Provider│
+                          │  (Namecheap)  │
+                          └───────┬───────┘
+                                  │
+                                  │ CNAME Records
+                                  ▼
+┌─────────────────┐      ┌───────────────┐     ┌────────────────┐
+│ ACM Certificate │◄─────│   CloudFront  │────►│ S3 Bucket      │
+│ (SSL/TLS)       │      │ Distribution  │     │ (Static Files) │
+└─────────────────┘      └───────────────┘     └────────────────┘
+                                  ▲
+                                  │
+                                  │
+                   ┌──────────────┴──────────────┐
+                   │                             │
+           ┌───────────────┐             ┌───────────────┐
+           │  volcode.org  │             │staging.volcode│
+           │ www.volcode.org│             │    .org      │
+           └───────────────┘             └───────────────┘
+               Production                     Staging
+```
+
+## Core Infrastructure Components
+
+### Content Delivery Network (CDN)
+
+**Amazon CloudFront** is used as the CDN to deliver content with low latency across global edge locations:
+
+- **Configuration Highlights:**
+  - Custom security policy (TLSv1.2_2021)
+  - HTTP/2 and HTTP/3 support
+  - Default root object: index.html
+  - Custom origins for staging and production environments
+
+### SSL/TLS Security
+
+**AWS Certificate Manager (ACM)** provides SSL/TLS certificates:
+
+- Single certificate covering multiple domains:
+  - volcode.org
+  - www.volcode.org
+  - staging.volcode.org
+- DNS validation method
+- Automatic renewal
+
+### Domain Management
+
+External DNS provider (Namecheap) with the following configuration:
+
+- **Primary domains:**
+  - volcode.org (production)
+  - www.volcode.org (production)
+  - staging.volcode.org (staging)
+- **DNS Records:**
+  - CNAME records pointing to CloudFront distributions
+  - Certificate validation records
+  - Additional service records as needed
+
+### Content Storage
+
+**Amazon S3** for static content hosting:
+
+- Private buckets with CloudFront Origin Access Identity (OAI)
+- Versioned objects for rollback capability
+- Structured content organization
+
+## CI/CD Pipeline
+
+### GitHub Actions Workflow
+
+Automated deployment pipeline with environment-specific configurations:
+
+```yaml
+# Simplified workflow representation
+name: Deploy Website
+
+on:
+  push:
+    branches: [main, staging]
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set environment variables
+        run: |
+          if [[ $GITHUB_REF == 'refs/heads/main' ]]; then
+            echo "NUXT_PUBLIC_IS_STAGING=false" >> $GITHUB_ENV
+          else
+            echo "NUXT_PUBLIC_IS_STAGING=true" >> $GITHUB_ENV
+          fi
+      
+      # Build and deployment steps follow...
+```
+
+- **Environment Detection:**
+  - Production: Triggered by main branch
+  - Staging: Triggered by staging branch
+- **Build Process:**
+  - Environment-specific configurations
+  - Optimized assets
+  - Proper cache invalidation
+
+## Environment Separation
+
+### Production Environment
+
+- **Domains:** volcode.org, www.volcode.org
+- **Features:**
+  - Search engine indexing enabled
+  - Production-optimized caching policies
+  - Full CDN capabilities
+
+### Staging Environment
+
+- **Domain:** staging.volcode.org
+- **Features:**
+  - Search engine indexing disabled via robots configuration
+  - Reduced cache TTLs for testing
+  - Same infrastructure as production for accurate testing
+
+## Security Measures
+
+- **HTTPS Enforcement:** All traffic encrypted via HTTPS
+- **Modern TLS:** TLSv1.2_2021 security policy
+- **Access Control:** S3 buckets not publicly accessible
+- **Origin Protection:** CloudFront OAI/OAC for S3 access
+- **Headers Management:** Security headers set via CloudFront response headers policy
+
+## Monitoring and Logging
+
+- **CloudFront Logs:** Detailed access logs for performance analysis
+- **CloudWatch Metrics:** Performance monitoring
+- **Error Tracking:** Client-side and infrastructure error monitoring
+
+## Future Enhancements
+
+Planned infrastructure improvements:
+
+1. **Edge Functions:** CloudFront Functions for request/response manipulation
+2. **WAF Integration:** Web Application Firewall for enhanced security
+3. **Lambda@Edge:** For dynamic content customization
+4. **Regional Failover:** Multi-region setup for high availability
+
+## Technologies Used
+
+- **AWS Services:** CloudFront, S3, ACM, Route 53 (optional)
+- **CI/CD:** GitHub Actions
+- **Frontend:** Nuxt.js, Vue.js
+- **Build Tools:** Vite, Webpack
+- **Infrastructure as Code:** Terraform 
\ No newline at end of file
diff --git a/README.md b/README.md
index b1986b1..ef2e72c 100644
--- a/README.md
+++ b/README.md
@@ -3,60 +3,17 @@ Volcode is a high-performance, modular portfolio template for devevelopers.
 
 It improves setup efficiency and simplifies maintenance, helping developers showcase their work with minimal effort.
 
-## Infastructure
-| Layer | Tool(s) | Purpose |
-|-------|---------|---------|
-| Hosting | AWS S3 + CloudFront | Serve static assets securely |
-| Access Control | IAM + CloudFront signed URLs / HTTP Basic Auth | Restrict access to staging |
-| IaC | Terraform | Provision S3, CloudFront, IAM |
-| CI/CD | GitHub Actions | Automate deployment from staging branch |
-
-### High Level Architecture
-
-#### Diagram
-``` 
-┌───────────────────┐           ┌───────────────────────┐
-│ Namecheap DNS     │           │ AWS Certificate       │
-│ • CNAME records   │◀───┐      │ Manager (ACM public)  │
-└───────────────────┘    │      │ • Certificates for    │
-                         │      │   volcode.org &       │
-                         │      │   staging.volcode.org │
-                         │      └───────────────────────┘
-                         │
-                         │      ┌───────────────────────┐
-                         └─────▶│ Terraform‑provisioned │
-                                │ S3 + CloudFront       │
-                                │ • Private S3 buckets  │
-                                │ • 2 CloudFront distros │
-                                │   (prod + staging)    │
-                                │ • Attach ACM cert     │
-                                └───────────────────────┘
-                                         ▲
-                                         │
-                         ┌───────────────┴───────────────┐
-                         │ GitHub Actions (CI/CD)       │
-                         │ • main → prod S3/CF distro   │
-                         │ • staging → staging S3/CF    │
-                         │ • Cache invalidation         │
-                         └───────────────────────────────┘
-```
+## Infrastructure
+
+This project is powered by a modern cloud architecture designed for scalability, security, and performance. Key features:
+
+- **Global CDN:** CloudFront distribution for low-latency content delivery
+- **Secure by Default:** HTTPS-only with modern TLS policies
+- **Environment Separation:** Distinct production and staging environments
+- **Automated Deployments:** CI/CD pipeline via GitHub Actions
+- **Infrastructure as Code:** Terraform-managed AWS resources
 
-#### Objectives
-* Deploy `staging` branch to a secure S3 bucket
-* Serve it via CloudFront (for HTTPS + performance)
-* Restrict access (IAM, OAI, or signed URLs)
-* Use Terraform to manage all infra
-* Automate deployments from GitHub Actions
-
-##### Terraform
-Provision the following resources:
-| Resource | Purpose |
-|----------|---------|
-| aws_s3_bucket | Host static website for staging |
-| aws_cloudfront_distribution | Serve via CDN with HTTPS |
-| aws_iam_user + aws_iam_policy | Push permission for CI |
-| aws_s3_bucket_policy | Restrict access via OAI or signed URLs |
-| (Optional) aws_secretsmanager_secret | Store credentials for GitHub Actions |
+📑 [View complete infrastructure documentation](./INFRASTRUCTURE.md)
 
 ## Setup
 
diff --git a/app.vue b/app.vue
index 66dffbf..6eecc64 100644
--- a/app.vue
+++ b/app.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
@@ -31,8 +31,24 @@ const router = useRouter();
 const isPageTransitionOff = ref(true);
 
 onMounted(() => {
+  // First make sure all content is visible
+  document.documentElement.classList.add('content-visible');
+
+  // Force content to be visible after a delay, regardless of transition state
   setTimeout(() => {
     isPageTransitionOff.value = false;
+    document.documentElement.classList.add('transitions-ready');
+
+    // Try to re-trigger animations after a delay
+    setTimeout(() => {
+      const elements = document.querySelectorAll('.page-transition');
+      elements.forEach((el) => {
+        el.style.opacity = '0';
+        setTimeout(() => {
+          el.style.opacity = '1';
+        }, 50);
+      });
+    }, 500);
   }, 200);
 });
 
@@ -52,10 +68,15 @@ router.afterEach(() => {
 @use '~/assets/styles/responsive.scss';
 @use '~/assets/styles/colors' as colors;
 
+html.transitions-ready .page {
+  opacity: 1 !important;
+}
+
 .page-transition {
   position: relative;
   transition: all 0.4s cubic-bezier(0.38, 0.98, 0.6, 0.9);
   transition-delay: 0.1s;
+  opacity: 1; /* Ensure content is visible by default */
 
   &--on {
     opacity: 0;
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index fac78ea..ba99e1c 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -101,7 +101,7 @@ onMounted(() => {
 
   span {
     color: colors.$textGray;
-    // margin-top: 1rem;
+    padding: 1rem 0;
     display: block;
   }
 
diff --git a/components/AppHero.vue b/components/AppHero.vue
index 2186b06..4f5f229 100644
--- a/components/AppHero.vue
+++ b/components/AppHero.vue
@@ -1,8 +1,27 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed, nextTick } from 'vue';
 
 const isMobile = ref(false);
-isMobile.value = window ? window.innerWidth < 1024 : false;
+const isBoxesRendered = ref(false);
+
+// Defer mobile detection to client-side only
+onMounted(() => {
+  isMobile.value = window.innerWidth < 1024;
+
+  // Add resize listener with debounce
+  let resizeTimeout;
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      isMobile.value = window.innerWidth < 1024;
+    }, 250);
+  });
+
+  // Render boxes with delay after critical content
+  setTimeout(() => {
+    isBoxesRendered.value = true;
+  }, 1000); // Render boxes after LCP is done
+});
 
 const closeVideoModal = () => {
   isVideoModalOpen.value = false;
@@ -116,72 +135,94 @@ onMounted(() => {
     }
   });
 });
+
+// Lazy-load video modal content
+const isVideoRequested = ref(false);
+const openVideoModal = () => {
+  isVideoRequested.value = true;
+  nextTick(() => {
+    isVideoModalOpen.value = true;
+  });
+};
+
+// Optimized box generation
+const boxCount = computed(() => (isMobile.value ? 24 : 70));
 </script>
 
 <template>
-  <div id="hero" class="container">
-    <NuxtImg src="/assets/imgs/Frame.svg" alt="Hero Background" class="hero-bg" loading="lazy" width="1200" height="800" format="webp" quality="80" />
-    <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>
-    <p>I design, build, and optimize digital interfaces, apps, and infrastructures.</p>
-    <section id="ctaButtons">
-      <button class="btn btn--filled sliding-text--button" @click="isModalOpen = true">Discover My Achievements</button>
-      <button class="btn btn--video" @click="isVideoModalOpen = true">
-        <figure>
-          <NuxtImg src="/assets/imgs/og-image.jpg" alt="Video Icon - Watch Mehmet Deveci's Introduction" loading="lazy" width="270" height="180" format="webp" quality="80" preset="og" sizes="sm:270px md:270px lg:270px" :modifiers="{ fit: 'cover' }" />
-        </figure>
-        Watch My Introduction
-      </button>
-    </section>
-    <div class="scroll-indicator">
-      <div class="scroll-indicator__icon"></div>
-      <em>Scroll down to see more</em>
-    </div>
-
-    <Teleport to="body">
-      <Modal :is-open="isModalOpen" :is-animating="isModalAnimationVisible" :has-sidebar="true" sidebar-title="Key Achievements" @close="closeModal">
-        <template #sidebar>
-          <div v-if="isMobile" class="select-wrapper">
-            <select v-model="selectedAchievementIndex" @change="handleAchievementChange(selectedAchievementIndex)">
-              <option v-for="(item, index) in achievements" :key="index" :value="index">
+  <div>
+    <div id="hero" class="container">
+      <!-- Optimized boxes with conditional rendering -->
+      <div v-if="isBoxesRendered" class="boxes">
+        <div v-for="i in boxCount" :key="i"></div>
+      </div>
+
+      <!-- Critical content - loaded first -->
+      <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>
+      <p>I design, build, and optimize digital interfaces, apps, and infrastructures.</p>
+      <section id="ctaButtons">
+        <button class="btn btn--filled sliding-text--button" @click="isModalOpen = true">Discover My Achievements</button>
+        <button class="btn btn--video" @click="openVideoModal">
+          <figure>
+            <!-- Use native lazy loading for images -->
+            <NuxtImg src="/assets/imgs/og-image.jpg" alt="Video Icon - Watch Mehmet Deveci's Introduction" loading="lazy" width="270" height="180" format="webp" quality="80" preset="og" sizes="sm:270px md:270px lg:270px" :modifiers="{ fit: 'cover' }" />
+          </figure>
+          Watch My Introduction
+        </button>
+      </section>
+      <div class="scroll-indicator">
+        <div class="scroll-indicator__icon"></div>
+        <span>Scroll down to see more</span>
+      </div>
+
+      <Teleport to="body">
+        <!-- Achievement modal -->
+        <Modal :is-open="isModalOpen" :is-animating="isModalAnimationVisible" :has-sidebar="true" sidebar-title="Key Achievements" @close="closeModal">
+          <template #sidebar>
+            <div v-if="isMobile" class="select-wrapper">
+              <select v-model="selectedAchievementIndex" @change="handleAchievementChange(selectedAchievementIndex)">
+                <option v-for="(item, index) in achievements" :key="index" :value="index">
+                  {{ item.label }}
+                </option>
+              </select>
+              <div class="select-arrow"></div>
+            </div>
+            <div v-else class="flex-column">
+              <button v-for="(item, index) in achievements" :key="index" class="modal-button" :class="{ active: selectedAchievementIndex === index }" @click="handleAchievementChange(index)">
                 {{ item.label }}
-              </option>
-            </select>
-            <div class="select-arrow"></div>
-          </div>
-          <div v-else class="flex-column">
-            <button v-for="(item, index) in achievements" :key="index" class="modal-button" :class="{ active: selectedAchievementIndex === index }" @click="handleAchievementChange(index)">
-              {{ item.label }}
-            </button>
-          </div>
-        </template>
-
-        <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" />
-            <p>{{ selectedAchievement.hero }}</p>
-          </div>
-          <ol>
-            <li v-for="(ach, index) in selectedAchievement.accomplishments" :key="index" v-html="ach.entity"></li>
-          </ol>
-          <a v-if="hasNextAchievement" rel="nofollow" class="cta cta-custom" @click="handleAchievementChange(selectedAchievementIndex + 1)">
-            Explore {{ nextAchievementLabel }} Accomplishments
-            <MdiIcon icon="mdiArrowTopRight" />
-          </a>
-          <nuxt-link v-else to="/experience/" class="cta cta-custom">
-            Explore my full experience (tech stack, tools, etc.)
-            <MdiIcon icon="mdiArrowTopRight" />
-          </nuxt-link>
-        </template>
-      </Modal>
-
-      <Modal :is-open="isVideoModalOpen" :is-animating="false" :has-sidebar="false" @close="closeVideoModal">
-        <template #content>
-          <iframe src="https://www.youtube.com/embed/1fAYdOZw4EQ?cc_load_policy=1" frameborder="0" width="100%" height="100%" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-        </template>
-      </Modal>
-    </Teleport>
+              </button>
+            </div>
+          </template>
+
+          <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" />
+              <p>{{ selectedAchievement.hero }}</p>
+            </div>
+            <ol>
+              <li v-for="(ach, index) in selectedAchievement.accomplishments" :key="index" v-html="ach.entity"></li>
+            </ol>
+            <a v-if="hasNextAchievement" rel="nofollow" class="cta cta-custom" @click="handleAchievementChange(selectedAchievementIndex + 1)">
+              Explore {{ nextAchievementLabel }} Accomplishments
+              <MdiIcon icon="mdiArrowTopRight" />
+            </a>
+            <nuxt-link v-else to="/experience/" class="cta cta-custom">
+              Explore my full experience (tech stack, tools, etc.)
+              <MdiIcon icon="mdiArrowTopRight" />
+            </nuxt-link>
+          </template>
+        </Modal>
+
+        <!-- Lazy-loaded video modal -->
+        <Modal v-if="isVideoRequested" :is-open="isVideoModalOpen" :is-animating="false" :has-sidebar="false" @close="closeVideoModal">
+          <template #content>
+            <iframe src="https://www.youtube.com/embed/1fAYdOZw4EQ?cc_load_policy=1" frameborder="0" width="100%" height="100%" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          </template>
+        </Modal>
+      </Teleport>
+    </div>
   </div>
 </template>
 
@@ -196,13 +237,14 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  contain: content; /* Improve paint performance */
 
   .hero-bg {
     position: absolute;
     z-index: -1;
     left: 50%;
     top: 0;
-    transform: translateX(-50%) translateY(10%);
+    transform: translateX(-50%) translateY(00%);
     width: 65%;
     max-width: 1200px;
     height: auto;
@@ -225,6 +267,7 @@ onMounted(() => {
     transform: translateY(0);
     transition: all 0.4s cubic-bezier(0.38, 0.98, 0.6, 0.9);
     transition-delay: 0.3s;
+    will-change: transform, opacity; /* Optimize for animations */
   }
 
   p {
@@ -240,6 +283,7 @@ onMounted(() => {
     transform: translateY(0);
     transition: all 0.4s cubic-bezier(0.38, 0.98, 0.6, 0.9);
     transition-delay: 0.55s;
+    will-change: transform, opacity; /* Optimize for animations */
 
     u {
       text-decoration: none;
@@ -256,6 +300,7 @@ onMounted(() => {
     transform: translateY(0);
     transition: all 0.4s cubic-bezier(0.38, 0.98, 0.6, 0.9);
     transition-delay: 0.5s;
+    will-change: transform, opacity; /* Optimize for animations */
   }
 }
 
@@ -287,6 +332,7 @@ onMounted(() => {
   transform: translateY(0px);
   transition: all 0.4s cubic-bezier(0.38, 0.98, 0.6, 0.9);
   transition-delay: 0.6s;
+  will-change: transform, opacity; /* Optimize for animations */
 }
 
 .page-transition--on #ctaButtons {
@@ -326,15 +372,17 @@ onMounted(() => {
       border-radius: 2px;
       opacity: 0.8;
       animation: scrollDown 1s cubic-bezier(0.25, 1.07, 0.6, 0.9) infinite;
+      will-change: transform, opacity; /* Optimize for animations */
     }
   }
 
-  em {
+  span {
     font-family: 'Inter';
-    font-size: 16px;
+    font-size: 1.25rem;
     font-weight: 400;
     color: colors.$textGray;
     font-style: normal;
+    margin-top: 0 !important;
   }
 }
 
@@ -411,7 +459,6 @@ onMounted(() => {
   flex-direction: column-reverse;
   align-items: center;
   justify-content: center;
-  margin-bottom: 130px;
 
   figure {
     position: absolute;
@@ -471,4 +518,55 @@ onMounted(() => {
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   }
 }
+
+/* Optimized boxes with reduced CSS complexity */
+.boxes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-auto-rows: 160px;
+  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 */
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: inset 10px 0px 80px 80px colors.$navyBlue;
+    z-index: 2;
+  }
+
+  > div {
+    border-right: 1px solid rgba(255, 255, 255, 0.04);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+    box-sizing: border-box;
+    transform: translateZ(0); /* Hardware acceleration */
+
+    &:nth-child(3n) {
+      border-right-width: 1px;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.8; /* Slightly less opaque for better contrast */
+  }
+}
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 9f91d1c..1a568e5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -89,7 +89,8 @@ onMounted(() => {
 #secondary {
   padding-top: 10rem;
   background: url(~/assets/imgs/Frame-2.svg) repeat-x center 350px;
-  padding-bottom: 8rem;
+  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;
@@ -107,6 +108,10 @@ onMounted(() => {
     z-index: 1;
   }
 
+  .grid {
+    padding: 3rem 0;
+  }
+
   > * {
     position: relative;
     z-index: 2;