refactor: remove projects section and navigation link

Temporarily hide projects section from homepage and remove its navigation link

src/components/GlassHeader.tsx

@@ -54,7 +54,7 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
             { key: 'nav.home', icon: '🏠 ', href: getLocalizedPath('/', lang) },
             { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', lang) },
             { key: 'nav.services', icon: '🛠️ ', href: getLocalizedPath('/services', lang) },
-            { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
+            // { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
             { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
           ].map((item) => (
             <a

src/pages/index.astro

@@ -368,8 +368,7 @@ const pageTitle = t('site.title');
     </section>
     
     <!-- Projects Section - Inlined Content -->
-    <section id="projects" class="py-20 relative">
-      <!-- Background gradient -->
+    <!-- <section id="projects" class="py-20 relative">
       <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
       
       <Container client:load className="relative z-10">
@@ -383,14 +382,11 @@ const pageTitle = t('site.title');
         </div>
 
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
-          <!-- Taskify App Project -->
           <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-transform duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative" style="will-change: transform; transform: translateZ(0);">
-            <!-- Project tag - positioned at top right -->
             <div class="absolute top-4 right-4 z-10">
               <span class="px-3 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs rounded-full font-medium border border-blue-200 dark:border-blue-700">{t('project.tag.business')}</span>
             </div>
             
-            <!-- Project image placeholder -->
             <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
               <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-colors duration-500"></div>
               <div class="absolute bottom-4 left-4 right-4">
@@ -427,7 +423,6 @@ const pageTitle = t('site.title');
                 </div>
               </div>
               
-              <!-- Tech stack indicators with unified gray styling -->
               <div class="mt-6 mb-4 flex flex-wrap gap-2">
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">React</span>
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Node.js</span>
@@ -449,15 +444,11 @@ const pageTitle = t('site.title');
               </div>
             </div>
           </div>
-
-          <!-- E-Shop Platform Project -->
           <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-transform duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative" style="will-change: transform; transform: translateZ(0);">
-            <!-- Project tag - positioned at top right -->
             <div class="absolute top-4 right-4 z-10">
               <span class="px-3 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 text-xs rounded-full font-medium border border-green-200 dark:border-green-700">{t('project.tag.opensource')}</span>
             </div>
             
-            <!-- Project image placeholder -->
             <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
               <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-colors duration-500"></div>
               <div class="absolute bottom-4 left-4 right-4">
@@ -494,7 +485,6 @@ const pageTitle = t('site.title');
                 </div>
               </div>
               
-              <!-- Tech stack indicators with unified gray styling -->
               <div class="mt-6 mb-4 flex flex-wrap gap-2">
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Next.js</span>
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Stripe</span>
@@ -517,14 +507,11 @@ const pageTitle = t('site.title');
             </div>
           </div>
 
-          <!-- Portfolio Site Project -->
           <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-transform duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative" style="will-change: transform; transform: translateZ(0);">
-            <!-- Project tag - positioned at top right -->
             <div class="absolute top-4 right-4 z-10">
               <span class="px-3 py-1 bg-amber-100 dark:bg-amber-800 text-amber-800 dark:text-amber-200 text-xs rounded-full font-medium border border-amber-200 dark:border-amber-700">{t('project.tag.personal')}</span>
             </div>
             
-            <!-- Project image placeholder -->
             <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
               <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-colors duration-500"></div>
               <div class="absolute bottom-4 left-4 right-4">
@@ -557,7 +544,7 @@ const pageTitle = t('site.title');
                 </div>
               </div>
               
-              <!-- Tech stack indicators with unified gray styling -->
+        
               <div class="mt-6 mb-4 flex flex-wrap gap-2">
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">HTML</span>
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
@@ -581,7 +568,7 @@ const pageTitle = t('site.title');
           </div>
         </div>
       </Container>
-    </section>
+    </section> -->
   </main>
   <Footer lang={lang} client:only="react" />
 </Layout>

src/pages/zh/index.astro

@@ -368,8 +368,7 @@ const pageTitle = t('site.title');
     </section>
 
     <!-- Projects Section - Inlined Content -->
-    <section id="projects" class="py-20 relative">
-      <!-- Background gradient -->
+    <!-- <section id="projects" class="py-20 relative">
       <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
       
       <Container client:load className="relative z-10">
@@ -383,14 +382,11 @@ const pageTitle = t('site.title');
         </div>
 
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
-          <!-- Taskify App -->
           <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
-            <!-- Project tag - positioned at top right -->
             <div class="absolute top-4 right-4 z-10">
               <span class="px-3 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs rounded-full font-medium border border-blue-200 dark:border-blue-700">{t('project.tag.business')}</span>
             </div>
             
-            <!-- Project image placeholder -->
             <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
               <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
               <div class="absolute bottom-4 left-4 right-4">
@@ -423,7 +419,6 @@ const pageTitle = t('site.title');
                 </div>
               </div>
               
-              <!-- Tech stack indicators with unified gray styling -->
               <div class="mt-6 mb-4 flex flex-wrap gap-2">
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">React</span>
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Node.js</span>
@@ -446,14 +441,11 @@ const pageTitle = t('site.title');
             </div>
           </div>
 
-          <!-- E-Shop Platform -->
           <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
-            <!-- Project tag - positioned at top right -->
             <div class="absolute top-4 right-4 z-10">
               <span class="px-3 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 text-xs rounded-full font-medium border border-green-200 dark:border-green-700">{t('project.tag.opensource')}</span>
             </div>
             
-            <!-- Project image placeholder -->
             <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
               <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
               <div class="absolute bottom-4 left-4 right-4">
@@ -486,7 +478,6 @@ const pageTitle = t('site.title');
                 </div>
               </div>
               
-              <!-- Tech stack indicators with unified gray styling -->
               <div class="mt-6 mb-4 flex flex-wrap gap-2">
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Next.js</span>
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Stripe</span>
@@ -509,14 +500,11 @@ const pageTitle = t('site.title');
             </div>
           </div>
 
-          <!-- Portfolio Site -->
           <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
-            <!-- Project tag - positioned at top right -->
             <div class="absolute top-4 right-4 z-10">
               <span class="px-3 py-1 bg-amber-100 dark:bg-amber-800 text-amber-800 dark:text-amber-200 text-xs rounded-full font-medium border border-amber-200 dark:border-amber-700">{t('project.tag.personal')}</span>
             </div>
             
-            <!-- Project image placeholder -->
             <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
               <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
               <div class="absolute bottom-4 left-4 right-4">
@@ -549,7 +537,7 @@ const pageTitle = t('site.title');
                 </div>
               </div>
               
-              <!-- Tech stack indicators with unified gray styling -->
+
               <div class="mt-6 mb-4 flex flex-wrap gap-2">
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">HTML</span>
                 <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
@@ -573,7 +561,7 @@ const pageTitle = t('site.title');
           </div>
         </div>
       </Container>
-    </section>
+    </section> -->
   </main>
   <Footer lang={lang} client:load />
 </Layout>