From 372de7f4ed6288a736704b9323bad897ad41b7c1 Mon Sep 17 00:00:00 2001
From: CodeFromKerala <mjnair52@gmail.com>
Date: Wed, 4 Mar 2026 10:33:46 +0530
Subject: Added animations and font-changes to about page

---
 src/pages/about.astro | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/pages/about.astro b/src/pages/about.astro
index 2ea2e6f..c5d37bf 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -11,7 +11,6 @@ const projects = await getAllProjects()
 <Layout class="max-w-3xl">
   <PageHead slot="head" title="About" />
   <Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />
-  <link rel="stylesheet" href="../styles/about.css">
   <div class="max-w-4xl mx-auto">
     <section class="pt-24 pb-20 px-6">
     <div class="max-w-6xl mx-auto text-center hero-content">
@@ -29,20 +28,20 @@ const projects = await getAllProjects()
     <div class="absolute inset-0 bg-gradient-to-r from-emerald-500/5 to-cyan-500/5"></div>
     <div class="max-w-6xl mx-auto relative">
       <div class="grid md:grid-cols-4 gap-8 text-center">
-        <div class="fade-in" style="transition-delay: 100ms">
+        <div class="fade-in" style="transition-delay: 100ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/members'">
           <div class="stat-number text-emerald-400 font-mono" data-target="50">0</div>
           <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Active Members</div>
         </div>
-        <div class="fade-in" style="transition-delay: 200ms">
-          <div class="stat-number text-cyan-400 font-mono" data-target="25">0</div>
+        <div class="fade-in" style="transition-delay: 200ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/blog'">
+          <div class="stat-number text-emerald-400 font-mono" data-target="25">0</div>
           <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Projects Live</div>
         </div>
-        <div class="fade-in" style="transition-delay: 300ms">
-          <div class="stat-number text-purple-400 font-mono" data-target="150">0</div>
+        <div class="fade-in" style="transition-delay: 300ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/blog'">
+          <div class="stat-number text-emerald-400 font-mono" data-target="150">0</div>
           <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Commits Pushed</div>
         </div>
-        <div class="fade-in" style="transition-delay: 400ms">
-          <div class="stat-number text-orange-400 font-mono" data-target="8">0</div>
+        <div class="fade-in" style="transition-delay: 400ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/events'">
+          <div class="stat-number text-emerald-400 font-mono" data-target="8">0</div>
           <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Events Hosted</div>
         </div>
       </div>
@@ -61,7 +60,7 @@ const projects = await getAllProjects()
         <div class="space-y-6 fade-in" style="transition-delay: 200ms">
           <h3 class="text-3xl font-bold text-white mb-6"><span class="text-primary">F</span>ree and <span class="text-primary">O</span>pen <span class="text-primary">S</span>ource <span class="text-primary">S</span>oftware</h3>
           <p class="text-lg text-slate-300 leading-relaxed">
-            We're bringing FOSS to CET students—replacing proprietary tools with Linux, GitHub workflows, 
+            We're bringing FOSS to CET students by replacing proprietary tools with Linux, GitHub workflows, 
             and community-driven development. From kernel hacking to UI/UX contributions, we're building 
             the next generation of open source maintainers.
           </p>
@@ -100,7 +99,7 @@ const projects = await getAllProjects()
           <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
             <i class="fas fa-rocket"></i>
           </div>
-          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4">
+          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
             <div class="flex items-center mb-2" id='container'>
               <span class="text-2xl font-mono"><span class="text-primary">1983–1985</span></span>
               <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
@@ -116,7 +115,7 @@ const projects = await getAllProjects()
           <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
             <i class="fab fa-linux"></i>
           </div>
-          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4">
+          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
             <div class="flex items-center mb-2">
               <span class="text-2xl font-mono"><span class="text-primary">1991–1993</span></span>
               <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
@@ -132,7 +131,7 @@ const projects = await getAllProjects()
           <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
             <i class="fas fa-globe"></i>
           </div>
-          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4">
+          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
             <div class="flex items-center mb-2">
               <span class="text-2xl font-mono"><span class="text-primary">1998</span></span>
               <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
@@ -148,7 +147,7 @@ const projects = await getAllProjects()
           <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
             <i class="fas fa-flag"></i>
           </div>
-          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4">
+          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
             <div class="flex items-center mb-2">
               <span class="text-2xl font-mono text-orange-400"><span class="text-primary">2000-2001</span></span>
               <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
@@ -164,14 +163,14 @@ const projects = await getAllProjects()
           <div class="absolute -left-12 w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
             <i class="fas fa-users"></i>
           </div>
-          <div class="bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 backdrop-blur-sm p-8 rounded-2xl border-2 border-emerald-500/50 shadow-2xl w-full ml-4">
+          <div class="bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 backdrop-blur-sm p-8 rounded-2xl border-2 border-emerald-500/50 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
             <div class="flex items-center mb-3">
               <span class="text-2xl font-mono text-emerald-400">2025–2026</span>
               <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
-              <span class="text-sm text-slate-200 font-semibold">FossCET</span>
+              <span class="text-sm text-slate-400">FOSS@CET</span></span>
             </div>
             <h3 class="text-3xl font-black bg-gradient-to-r from-white to-slate-200 bg-clip-text text-transparent mb-3">
-              <span class="new_font">foss<span class="text-primary">cet</span></span> is launched
+              <span class="italic">foss<span class="text-primary">cet</span></span> is launched
             </h3>
             <p class="text-slate-300">The FOSS movement is brought back to our very own CET, stronger than ever.</p>
             <div class="flex space-x-4 text-sm">
-- 
cgit v1.2.3