diff --git a/astro.config.mjs b/astro.config.mjs
index 6f54cee..be66ddb 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -3,5 +3,5 @@ import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({
-  // Pure Astro configuration - no additional integrations needed
+  compressHTML: true,
 });
\ No newline at end of file
diff --git a/src/components/App.astro b/src/components/App.astro
index d2b4739..9d89ef1 100644
--- a/src/components/App.astro
+++ b/src/components/App.astro
@@ -6,11 +6,12 @@ import SocialShare from './SocialShare.astro';
 ---
 
 <div class="App">
+  <div class="mesh-gradient"></div>
   <Navbar />
   <div class="App-header">
-    <h1>
+    <h1 class="reveal-text">
       Make your first <br/> 
-      <a href="https://firstcontributions.github.io/contribute-to-opensource"> 
+      <a href="https://firstcontributions.github.io/contribute-to-opensource" class="highlight-link"> 
         open source <span>contribution</span> 
       </a> 
       <br/> in 5 minutes
@@ -23,30 +24,81 @@ import SocialShare from './SocialShare.astro';
 
 <style>
   .App {
+    position: relative;
     background-color: #0a0a0a;
     text-align: center;
     display: flex;
     justify-content: center;
     flex-direction: column;
     min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  .mesh-gradient {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    pointer-events: none;
+    opacity: 0.4;
+    background: 
+      radial-gradient(at 0% 0%, hsla(220, 100%, 20%, 1) 0, transparent 50%),
+      radial-gradient(at 50% 0%, hsla(260, 100%, 15%, 1) 0, transparent 50%),
+      radial-gradient(at 100% 0%, hsla(220, 100%, 20%, 1) 0, transparent 50%);
   }
 
   .App-header {
-    padding: 20px;
+    position: relative;
+    z-index: 1;
+    padding: 60px 20px;
     color: white;
   }
 
-  .App-header a {
+  .reveal-text {
+    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .highlight-link {
     text-decoration: none;
     color: inherit;
+    position: relative;
+    transition: all 0.3s ease;
+  }
+
+  .highlight-link::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #60a5fa, #1d4ed8);
+    transition: width 0.3s ease;
+  }
+
+  .highlight-link:hover::after {
+    width: 100%;
   }
 
   .App-header > h1 {
-    font-size: 5.1rem;
+    font-size: 5.5rem;
     letter-spacing: -0.05em;
-    font-weight: 700;
+    font-weight: 800;
     margin: 0 0 20px 0;
-    line-height: 1.2;
+    line-height: 1.1;
   }
 
   .App-header > h1 span {
@@ -59,28 +111,20 @@ import SocialShare from './SocialShare.astro';
   }
 
   @keyframes gradientShift {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
   }
 
-  @media (max-width: 700px) {
+  @media (max-width: 768px) {
     .App-header > h1 {
-      font-size: 3.1rem;
-      letter-spacing: -0.05em;
-      font-weight: 700;
+      font-size: 3.5rem;
     }
   }
 
   @media (max-width: 480px) {
     .App-header > h1 {
-      font-size: 2.5rem;
+      font-size: 2.8rem;
     }
   }
 </style>
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index b765d70..f003e80 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -23,6 +23,8 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
         onerror="this.src='/default.png'"
         width="60"
         height="60"
+        loading="lazy"
+        decoding="async"
       />
       <p class="Card-Title">{name}</p>
     </div>
@@ -60,6 +62,20 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
     min-height: 200px;
     margin-bottom: 1.5rem;
     position: relative;
+    content-visibility: auto;
+    contain-intrinsic-size: 1px 200px;
+    animation: cardAppear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
+  }
+
+  @keyframes cardAppear {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   .Card-Container::before {
diff --git a/src/components/ProjectList.astro b/src/components/ProjectList.astro
index 8a8806b..0994abb 100644
--- a/src/components/ProjectList.astro
+++ b/src/components/ProjectList.astro
@@ -152,7 +152,8 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))]
   #search:focus {
     outline: none;
     border-color: #667eea;
-    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
+    background: rgba(255, 255, 255, 0.15);
   }
 
   #tag-selector {
@@ -170,7 +171,8 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))]
   #tag-selector:focus {
     outline: none;
     border-color: #667eea;
-    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
+    background: rgba(255, 255, 255, 0.15);
   }
 
   #tag-selector option {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e5913ea..7eb8fa6 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -24,6 +24,10 @@ const {
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		
+		<!-- Preconnect to external domains -->
+		<link rel="preconnect" href="https://avatars.githubusercontent.com" crossorigin />
+		<link rel="preconnect" href="https://raw.githubusercontent.com" crossorigin />
+		
 		<!-- Favicon -->
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
diff --git a/src/pages/contribute-to-opensource.astro b/src/pages/contribute-to-opensource.astro
index 64d7449..1d8b78d 100644
--- a/src/pages/contribute-to-opensource.astro
+++ b/src/pages/contribute-to-opensource.astro
@@ -6,7 +6,10 @@
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
+  <link rel="preconnect" href="https://unpkg.com" crossorigin />
+  <link rel="dns-prefetch" href="https://unpkg.com" />
+  <link rel="preconnect" href="https://firstcontributions.github.io" crossorigin />
+  
   <title>
     How to Contribute to Open Source: A Complete Guide for Beginners
   </title>
@@ -70,8 +73,8 @@
   <!-- Favicon -->
   <link
     rel="icon"
-    type="image/png"
-    href="https://firstcontributions.github.io/assets/first-contributions-logo.svg"
+    type="image/svg+xml"
+    href="/favicon.svg"
   />
   <link
     rel="stylesheet"
@@ -95,7 +98,7 @@
         "name": "First contributions",
         "logo": {
           "@type": "ImageObject",
-          "url": "https://firstcontributions.github.io/assets/first-contributions-logo.svg"
+          "url": "https://firstcontributions.github.io/favicon.svg"
         }
       },
       "datePublished": "2025-02-01",