chore: update dependencies and implement GSAP animations

jonaspm · jonaspm · commit da63cf8828c2 · 2025-05-25T23:11:08.000-06:00
- Updated astro dependency from 5.7.13 to 5.8.0.
- Added gsap and astro-mcp to devDependencies.
- Replaced visible-animate classes with gsap animations in BioSection, ContactSection, HomeSection, ProjectsSection, SkillsSection.
- Removed fade-in-observer.js and created gsap-animations.js for handling animations.
- Updated global.css to remove tailwindcss-animated import.
- Adjusted index.astro to use gsap-animations.js for improved animation handling.
diff --git a/astro.config.ts b/astro.config.ts
@@ -1,13 +1,15 @@
 import { defineConfig } from "astro/config";
 import tailwindcss from '@tailwindcss/vite';
 
+import mcp from "astro-mcp";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://jonaspm.github.io",
-  integrations: [],
+  integrations: [mcp()],
   server: {
     host: true,
-    port: 3434
+    port: 4321
   },
   vite: {
     plugins: [tailwindcss()]
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -10,14 +10,15 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "5.7.13",
+    "astro": "5.8.0",
     "material-symbols": "^0.31.3"
   },
   "devDependencies": {
+    "gsap": "^3.13.0",
+    "astro-mcp": "^0.3.2",
     "@biomejs/biome": "^1.9.4",
     "@tailwindcss/vite": "^4.1.7",
-    "tailwindcss": "^4.1.7",
-    "tailwindcss-animated": "^2.0.0"
+    "tailwindcss": "^4.1.7"
   },
   "trustedDependencies": [
     "@biomejs/biome",
diff --git a/src/components/BioSection.astro b/src/components/BioSection.astro
@@ -2,16 +2,16 @@
 
 ---
 
-<section id="bio" class="py-8 scroll-mt-20 visible-animate">
-  <h2 class="mb-12 text-center text-3xl font-medium visible-animate">About Me</h2>
-  <div class="mx-auto bg-grayblue-800 p-8 rounded-lg shadow-lg visible-animate">
-    <p class="text-lg leading-relaxed text-grayblue-300 visible-animate">
+<section id="bio" class="py-8 scroll-mt-20 gsap-section">
+  <h2 class="mb-12 text-center text-3xl font-medium gsap-fade-up">About Me</h2>
+  <div class="mx-auto bg-grayblue-800 p-8 rounded-lg shadow-lg gsap-fade-up">
+    <p class="text-lg leading-relaxed text-grayblue-300 gsap-fade-up">
       With a passion for technology and over eight years of experience in web development, I've dedicated myself to adopting and implementing the latest industry trends and tools. My portfolio includes a diverse range of cloud projects spanning websites, mobile applications, and desktop software.
     </p>
-    <p class="text-lg leading-relaxed text-grayblue-300 mt-4 visible-animate">
+    <p class="text-lg leading-relaxed text-grayblue-300 mt-4 gsap-fade-up">
       As a self-taught perfectionist and natural leader, I bring strong problem-solving abilities to every project I undertake. My consistently positive, motivating, and inclusive approach enables me to thrive in collaborative environments where knowledge sharing is valued.
     </p>
-    <p class="text-lg leading-relaxed text-grayblue-300 mt-4 visible-animate">
+    <p class="text-lg leading-relaxed text-grayblue-300 mt-4 gsap-fade-up">
       Beyond the professional realm, I find balance through music, sports, and quality time with family.
     </p>
   </div>
diff --git a/src/components/ContactSection.astro b/src/components/ContactSection.astro
@@ -1,10 +1,10 @@
 ---
 ---
 
-<section id="contact" class="py-8 scroll-mt-20 visible-animate">
-  <h2 class="mb-12 text-center text-3xl text-grayblue-100 font-medium visible-animate">Get in Touch</h2>
-  <div class="flex justify-center visible-animate">
-    <div class="tidycal-embed visible-animate" data-path="jperusm/15-minute-meeting"></div>
+<section id="contact" class="py-8 scroll-mt-20 gsap-section">
+  <h2 class="mb-12 text-center text-3xl text-grayblue-100 font-medium gsap-fade-up">Get in Touch</h2>
+  <div class="flex justify-center gsap-fade-up">
+    <div class="tidycal-embed gsap-fade-up" data-path="jperusm/15-minute-meeting"></div>
     <script src="https://asset-tidycal.b-cdn.net/js/embed.js" async></script>
   </div>
 </section>
diff --git a/src/components/HomeSection.astro b/src/components/HomeSection.astro
@@ -3,15 +3,14 @@ import socialNetworks from '@/assets/data/social-networks.json'
 import { Image } from 'astro:assets'
 import profilePicture from '@/assets/images/profile.png'
 ---
-<section id="home" class="py-8 scroll-mt-20">
-  <div class="flex flex-col items-center lg:flex-row lg:justify-between">
+<section id="home" class="py-8 scroll-mt-20 gsap-section">  <div class="flex flex-col items-center lg:flex-row lg:justify-between">
     <div class="mb-8 text-center lg:mb-0 lg:text-left lg:w-1/2">
-      <h1 class="mb-4 text-5xl font-medium animate-fade-up animate-delay-300">Jonas Perusquia Morales</h1>
-      <h2 class="mb-6 text-2xl font-light text-blue-300 animate-fade-up animate-delay-600">Chief Technology Officer</h2>
-      <p class="max-w-2xl text-xl text-grayblue-300 animate-fade-up animate-delay-900">
+      <h1 class="mb-4 text-5xl font-medium gsap-hero-stagger">Jonas Perusquia Morales</h1>
+      <h2 class="mb-6 text-2xl font-light text-blue-300 gsap-hero-stagger">Chief Technology Officer</h2>
+      <p class="max-w-2xl text-xl text-grayblue-300 gsap-hero-stagger">
         Innovative tech leader with a passion for building scalable solutions and fostering high-performing teams.
       </p>
-      <div class="flex gap-4 mt-6 justify-center lg:justify-start animate-fade-up animate-delay-1200">
+      <div class="flex gap-4 mt-6 justify-center lg:justify-start gsap-hero-stagger">
         {socialNetworks.map(socialNetwork => (
           <a aria-label={socialNetwork.name} href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">
             <div class="h-6 w-6">
@@ -21,7 +20,7 @@ import profilePicture from '@/assets/images/profile.png'
         ))}
       </div>
     </div>
-    <div class="relative h-64 w-64 overflow-hidden rounded-full border-4 border-blue-300 lg:h-80 lg:w-80 animate-fade-up animate-delay-1600">
+    <div class="relative h-64 w-64 overflow-hidden rounded-full border-4 border-blue-300 lg:h-80 lg:w-80 gsap-hero-stagger">
       <Image
         src={profilePicture}
         alt="Jonas Perusquia Morales"
diff --git a/src/components/ProjectsSection.astro b/src/components/ProjectsSection.astro
@@ -39,18 +39,18 @@ const projects = [
   },
 ]
 ---
-<section id="projects" class="py-8 scroll-mt-20 visible-animate">
-  <h2 class="mb-12 text-center text-3xl font-medium visible-animate">Featured Projects</h2>
-  <div class="grid gap-8 md:grid-cols-2 visible-animate">
+<section id="projects" class="py-8 scroll-mt-20 gsap-section">
+  <h2 class="mb-12 text-center text-3xl font-medium gsap-fade-up">Featured Projects</h2>
+  <div class="grid gap-8 md:grid-cols-2 gsap-fade-up">
     {projects.map(project => 
-      <a href={project.url} class="rounded-lg bg-grayblue-800 p-6 shadow-lg scale-image grid md:grid-cols-2 gap-4 visible-animate">
-        <div id="project-info" class="flex flex-col gap-3 visible-animate">
-          <h3 class="text-xl font-semibold text-blue-300 visible-animate">{ project.name }</h3>
-          <p class="text-grayblue-300 visible-animate">{ project.description }</p>
+      <a href={project.url} class="rounded-lg bg-grayblue-800 p-6 shadow-lg scale-image grid md:grid-cols-2 gap-4 gsap-fade-up">
+        <div id="project-info" class="flex flex-col gap-3 gsap-fade-up">
+          <h3 class="text-xl font-semibold text-blue-300 gsap-fade-up">{ project.name }</h3>
+          <p class="text-grayblue-300 gsap-fade-up">{ project.description }</p>
         </div>
-        <div class="project-image self-center visible-animate">
-          <div class="overflow-hidden aspect-video rounded-lg visible-animate">
-            <img loading="lazy" class="duration-300 transition-all aspect-video visible-animate" src={ project.image.src } alt={ project.name } />
+        <div class="project-image self-center gsap-fade-up">
+          <div class="overflow-hidden aspect-video rounded-lg gsap-fade-up">
+            <img loading="lazy" class="duration-300 transition-all aspect-video" src={ project.image.src } alt={ project.name } />
           </div>
         </div>
       </a>
diff --git a/src/components/SkillsSection.astro b/src/components/SkillsSection.astro
@@ -1,12 +1,12 @@
 ---
 import skills from '@/assets/data/skills.json'
 ---
-<section id="skills" class="py-8 scroll-mt-20 visible-animate">
-  <h2 class="mb-12 text-center text-3xl font-medium visible-animate">Skills & Expertise</h2>
-  <div class="grid grid-cols-2 gap-8 md:grid-cols-4 visible-animate">
+<section id="skills" class="py-8 scroll-mt-20 gsap-section">
+  <h2 class="mb-12 text-center text-3xl font-medium gsap-fade-up">Skills & Expertise</h2>
+  <div class="grid grid-cols-2 gap-8 md:grid-cols-4 gsap-fade-up">
     {skills.map((skill: string) => (
-      <div class="rounded-lg bg-grayblue-800 p-6 text-center shadow-lg transition-all duration-300 hover:bg-slate-700 hover:scale-110 flex items-center justify-center visible-animate">
-        <p class="text-lg text-center break-words hyphens-auto font-medium visible-animate">{skill}</p>
+      <div class="rounded-lg bg-grayblue-800 p-6 text-center shadow-lg transition-all duration-300 hover:bg-slate-700 hover:scale-110 flex items-center justify-center gsap-fade-up">
+        <p class="text-lg text-center break-words hyphens-auto font-medium">{skill}</p>
       </div>
     ))}
   </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -16,9 +16,8 @@ import ContactSection from '@/components/ContactSection.astro'
             <ProjectsSection />
             <ContactSection />
         </div>
-    </main>
-    <footer class="bg-grayblue-800 py-6 text-center text-sm text-grayblue-400">
+    </main>    <footer class="bg-grayblue-800 py-6 text-center text-sm text-grayblue-400">
         <p>Made with ♥️ from Chihuahua, Mexico.</p>
     </footer>
-    <script src="@/scripts/fade-in-observer.js"></script>
+    <script src="@/scripts/gsap-animations.js"></script>
 </Layout>
diff --git a/src/scripts/fade-in-observer.js b/src/scripts/fade-in-observer.js
diff --git a/src/scripts/gsap-animations.js b/src/scripts/gsap-animations.js
@@ -0,0 +1,74 @@
+// src/scripts/gsap-animations.js
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+// Register ScrollTrigger plugin
+gsap.registerPlugin(ScrollTrigger);
+
+export function initGSAPAnimations() {
+  if (typeof window === 'undefined') return;
+  // Animate elements with fade-up effect on scroll
+  gsap.utils.toArray('.gsap-fade-up').forEach((element) => {
+    gsap.fromTo(element, 
+      {
+        opacity: 0,
+        y: 30
+      },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.8,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: element,
+          start: 'top 80%',
+          end: 'bottom 10%',
+          toggleActions: 'play reverse play reverse'
+        }
+      }
+    );
+  });
+
+  // Animate elements with staggered delays for hero section
+  gsap.utils.toArray('.gsap-hero-stagger').forEach((element, index) => {
+    gsap.fromTo(element,
+      {
+        opacity: 0,
+        y: 30
+      },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.8,
+        ease: 'power2.out',
+        delay: index * 0.2
+      }
+    );
+  });
+  // Animate sections with a slight scale effect
+  gsap.utils.toArray('.gsap-section').forEach((element) => {
+    gsap.fromTo(element,
+      {
+        opacity: 0,
+        scale: 0.95
+      },
+      {
+        opacity: 1,
+        scale: 1,
+        duration: 1,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: element,
+          start: 'top 85%',
+          end: 'bottom 15%',
+          toggleActions: 'play reverse play reverse'
+        }
+      }
+    );
+  });
+}
+
+// Initialize animations when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  initGSAPAnimations();
+});
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,7 +1,6 @@
 /* @import url("https://fonts.googleapis.com/css?family=Nunito"); */
 @charset "utf-8";
 @import 'tailwindcss';
-@import "tailwindcss-animated";
 @import 'material-symbols' layer(utilities);
 
 @theme {
