Skip to content

Commit da63cf8

Browse files
jonaspmjonaspm
committed
chore: update dependencies and implement GSAP animations
- 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.
1 parent 89597a0 commit da63cf8

12 files changed

Lines changed: 309 additions & 74 deletions

‎astro.config.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { defineConfig } from "astro/config";
22
import tailwindcss from '@tailwindcss/vite';
33

4+
import mcp from "astro-mcp";
5+
46
// https://astro.build/config
57
export default defineConfig({
68
site: "https://jonaspm.github.io",
7-
integrations: [],
9+
integrations: [mcp()],
810
server: {
911
host: true,
10-
port: 3434
12+
port: 4321
1113
},
1214
vite: {
1315
plugins: [tailwindcss()]

‎bun.lock‎

Lines changed: 194 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@
1010
"astro": "astro"
1111
},
1212
"dependencies": {
13-
"astro": "5.7.13",
13+
"astro": "5.8.0",
1414
"material-symbols": "^0.31.3"
1515
},
1616
"devDependencies": {
17+
"gsap": "^3.13.0",
18+
"astro-mcp": "^0.3.2",
1719
"@biomejs/biome": "^1.9.4",
1820
"@tailwindcss/vite": "^4.1.7",
19-
"tailwindcss": "^4.1.7",
20-
"tailwindcss-animated": "^2.0.0"
21+
"tailwindcss": "^4.1.7"
2122
},
2223
"trustedDependencies": [
2324
"@biomejs/biome",

‎src/components/BioSection.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
33
---
44

5-
<section id="bio" class="py-8 scroll-mt-20 visible-animate">
6-
<h2 class="mb-12 text-center text-3xl font-medium visible-animate">About Me</h2>
7-
<div class="mx-auto bg-grayblue-800 p-8 rounded-lg shadow-lg visible-animate">
8-
<p class="text-lg leading-relaxed text-grayblue-300 visible-animate">
5+
<section id="bio" class="py-8 scroll-mt-20 gsap-section">
6+
<h2 class="mb-12 text-center text-3xl font-medium gsap-fade-up">About Me</h2>
7+
<div class="mx-auto bg-grayblue-800 p-8 rounded-lg shadow-lg gsap-fade-up">
8+
<p class="text-lg leading-relaxed text-grayblue-300 gsap-fade-up">
99
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.
1010
</p>
11-
<p class="text-lg leading-relaxed text-grayblue-300 mt-4 visible-animate">
11+
<p class="text-lg leading-relaxed text-grayblue-300 mt-4 gsap-fade-up">
1212
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.
1313
</p>
14-
<p class="text-lg leading-relaxed text-grayblue-300 mt-4 visible-animate">
14+
<p class="text-lg leading-relaxed text-grayblue-300 mt-4 gsap-fade-up">
1515
Beyond the professional realm, I find balance through music, sports, and quality time with family.
1616
</p>
1717
</div>

‎src/components/ContactSection.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
---
33

4-
<section id="contact" class="py-8 scroll-mt-20 visible-animate">
5-
<h2 class="mb-12 text-center text-3xl text-grayblue-100 font-medium visible-animate">Get in Touch</h2>
6-
<div class="flex justify-center visible-animate">
7-
<div class="tidycal-embed visible-animate" data-path="jperusm/15-minute-meeting"></div>
4+
<section id="contact" class="py-8 scroll-mt-20 gsap-section">
5+
<h2 class="mb-12 text-center text-3xl text-grayblue-100 font-medium gsap-fade-up">Get in Touch</h2>
6+
<div class="flex justify-center gsap-fade-up">
7+
<div class="tidycal-embed gsap-fade-up" data-path="jperusm/15-minute-meeting"></div>
88
<script src="https://asset-tidycal.b-cdn.net/js/embed.js" async></script>
99
</div>
1010
</section>

‎src/components/HomeSection.astro‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import socialNetworks from '@/assets/data/social-networks.json'
33
import { Image } from 'astro:assets'
44
import profilePicture from '@/assets/images/profile.png'
55
---
6-
<section id="home" class="py-8 scroll-mt-20">
7-
<div class="flex flex-col items-center lg:flex-row lg:justify-between">
6+
<section id="home" class="py-8 scroll-mt-20 gsap-section"> <div class="flex flex-col items-center lg:flex-row lg:justify-between">
87
<div class="mb-8 text-center lg:mb-0 lg:text-left lg:w-1/2">
9-
<h1 class="mb-4 text-5xl font-medium animate-fade-up animate-delay-300">Jonas Perusquia Morales</h1>
10-
<h2 class="mb-6 text-2xl font-light text-blue-300 animate-fade-up animate-delay-600">Chief Technology Officer</h2>
11-
<p class="max-w-2xl text-xl text-grayblue-300 animate-fade-up animate-delay-900">
8+
<h1 class="mb-4 text-5xl font-medium gsap-hero-stagger">Jonas Perusquia Morales</h1>
9+
<h2 class="mb-6 text-2xl font-light text-blue-300 gsap-hero-stagger">Chief Technology Officer</h2>
10+
<p class="max-w-2xl text-xl text-grayblue-300 gsap-hero-stagger">
1211
Innovative tech leader with a passion for building scalable solutions and fostering high-performing teams.
1312
</p>
14-
<div class="flex gap-4 mt-6 justify-center lg:justify-start animate-fade-up animate-delay-1200">
13+
<div class="flex gap-4 mt-6 justify-center lg:justify-start gsap-hero-stagger">
1514
{socialNetworks.map(socialNetwork => (
1615
<a aria-label={socialNetwork.name} href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">
1716
<div class="h-6 w-6">
@@ -21,7 +20,7 @@ import profilePicture from '@/assets/images/profile.png'
2120
))}
2221
</div>
2322
</div>
24-
<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">
23+
<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">
2524
<Image
2625
src={profilePicture}
2726
alt="Jonas Perusquia Morales"

‎src/components/ProjectsSection.astro‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,18 @@ const projects = [
3939
},
4040
]
4141
---
42-
<section id="projects" class="py-8 scroll-mt-20 visible-animate">
43-
<h2 class="mb-12 text-center text-3xl font-medium visible-animate">Featured Projects</h2>
44-
<div class="grid gap-8 md:grid-cols-2 visible-animate">
42+
<section id="projects" class="py-8 scroll-mt-20 gsap-section">
43+
<h2 class="mb-12 text-center text-3xl font-medium gsap-fade-up">Featured Projects</h2>
44+
<div class="grid gap-8 md:grid-cols-2 gsap-fade-up">
4545
{projects.map(project =>
46-
<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">
47-
<div id="project-info" class="flex flex-col gap-3 visible-animate">
48-
<h3 class="text-xl font-semibold text-blue-300 visible-animate">{ project.name }</h3>
49-
<p class="text-grayblue-300 visible-animate">{ project.description }</p>
46+
<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">
47+
<div id="project-info" class="flex flex-col gap-3 gsap-fade-up">
48+
<h3 class="text-xl font-semibold text-blue-300 gsap-fade-up">{ project.name }</h3>
49+
<p class="text-grayblue-300 gsap-fade-up">{ project.description }</p>
5050
</div>
51-
<div class="project-image self-center visible-animate">
52-
<div class="overflow-hidden aspect-video rounded-lg visible-animate">
53-
<img loading="lazy" class="duration-300 transition-all aspect-video visible-animate" src={ project.image.src } alt={ project.name } />
51+
<div class="project-image self-center gsap-fade-up">
52+
<div class="overflow-hidden aspect-video rounded-lg gsap-fade-up">
53+
<img loading="lazy" class="duration-300 transition-all aspect-video" src={ project.image.src } alt={ project.name } />
5454
</div>
5555
</div>
5656
</a>

‎src/components/SkillsSection.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
22
import skills from '@/assets/data/skills.json'
33
---
4-
<section id="skills" class="py-8 scroll-mt-20 visible-animate">
5-
<h2 class="mb-12 text-center text-3xl font-medium visible-animate">Skills & Expertise</h2>
6-
<div class="grid grid-cols-2 gap-8 md:grid-cols-4 visible-animate">
4+
<section id="skills" class="py-8 scroll-mt-20 gsap-section">
5+
<h2 class="mb-12 text-center text-3xl font-medium gsap-fade-up">Skills & Expertise</h2>
6+
<div class="grid grid-cols-2 gap-8 md:grid-cols-4 gsap-fade-up">
77
{skills.map((skill: string) => (
8-
<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">
9-
<p class="text-lg text-center break-words hyphens-auto font-medium visible-animate">{skill}</p>
8+
<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">
9+
<p class="text-lg text-center break-words hyphens-auto font-medium">{skill}</p>
1010
</div>
1111
))}
1212
</div>

‎src/pages/index.astro‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@ import ContactSection from '@/components/ContactSection.astro'
1616
<ProjectsSection />
1717
<ContactSection />
1818
</div>
19-
</main>
20-
<footer class="bg-grayblue-800 py-6 text-center text-sm text-grayblue-400">
19+
</main> <footer class="bg-grayblue-800 py-6 text-center text-sm text-grayblue-400">
2120
<p>Made with ♥️ from Chihuahua, Mexico.</p>
2221
</footer>
23-
<script src="@/scripts/fade-in-observer.js"></script>
22+
<script src="@/scripts/gsap-animations.js"></script>
2423
</Layout>

‎src/scripts/fade-in-observer.js‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

0 commit comments

Comments
 (0)