chore(projects): added projects gsap animations on scroll trigger

src/sections/ProjectsSection.tsx

@@ -3,6 +3,8 @@ import { StyledCursor } from '../components/styles/Cursor.styled';
 import { StyledProjects } from '../components/styles/Projects.styled';
 import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
 import { useTranslation } from 'react-i18next';
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap';
 
 const badges = {
   HTML: 'https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white',
@@ -27,7 +29,7 @@ const badges = {
   CSharp: 'https://img.shields.io/badge/C%20SHARP-orange?style=for-the-badge&logo=csharp&logoColor=white',
   Dotnet: 'https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
   Tailwind: 'https://img.shields.io/badge/TAILWIND-blue?style=for-the-badge&logo=tailwindcss&logoColor=white',
-  Electron: 'https://img.shields.io/badge/Electron%20JS-white?style=for-the-badge&logo=electron&logoColor=blue',
+  Electron: 'https://img.shields.io/badge/Electron%20JS-white?style=for-the-badge&logo=electron&logoColor=blue'
 };
 
 const projects = {
@@ -39,7 +41,7 @@ const projects = {
       subtitle: '',
       technologies: [badges.Vue, badges.TS, badges.SASS],
       repoLink: 'https://github.com/Spythere/stacjownik',
-      siteLink: 'https://stacjownik-td2.spythere.eu/',
+      siteLink: 'https://stacjownik-td2.spythere.eu/'
     },
     {
       id: 'pojazdownik',
@@ -48,7 +50,7 @@ const projects = {
       subtitle: '',
       technologies: [badges.Vue, badges.TS, badges.SASS],
       repoLink: 'https://github.com/Spythere/pojazdownik',
-      siteLink: 'https://pojazdownik-td2.spythere.eu/',
+      siteLink: 'https://pojazdownik-td2.spythere.eu/'
     },
     {
       id: 'generator',
@@ -57,7 +59,7 @@ const projects = {
       subtitle: '',
       technologies: [badges.Vue, badges.TS, badges.SASS],
       repoLink: 'https://github.com/Spythere/genera-tor',
-      siteLink: 'https://generator-td2.spythere.eu/',
+      siteLink: 'https://generator-td2.spythere.eu/'
     },
     {
       id: 'srjp',
@@ -66,7 +68,7 @@ const projects = {
       subtitle: '',
       technologies: [badges.Vue, badges.TS, badges.Tailwind],
       repoLink: 'https://github.com/Spythere/srjp-td2',
-      siteLink: 'https://srjp-td2.spythere.eu/',
+      siteLink: 'https://srjp-td2.spythere.eu/'
     },
     {
       id: 'td2-discord-presence-ui',
@@ -74,7 +76,7 @@ const projects = {
       iconSrc: 'td2-discord-presence-logo.png',
       subtitle: '',
       technologies: [badges.Node, badges.TS, badges.Electron],
-      repoLink: 'https://github.com/Spythere/td2-discord-presence-ui',
+      repoLink: 'https://github.com/Spythere/td2-discord-presence-ui'
     },
     {
       id: 'stacjownik-manager',
@@ -83,8 +85,8 @@ const projects = {
       subtitle: '',
       technologies: [badges.Vue, badges.TS, badges.SASS],
       repoLink: 'https://github.com/Spythere/station-manager-2.0',
-      siteLink: 'https://stacjownik-manager.spythere.eu/',
+      siteLink: 'https://stacjownik-manager.spythere.eu/'
-    },
+    }
   ],
   other: [
     {
@@ -92,30 +94,49 @@ const projects = {
       iconSrc: null,
       subtitle: '',
       technologies: [badges.NestJS, badges.TS, badges.Postgresql],
-      docsLink: 'https://stacjownik.spythere.eu/docs',
+      docsLink: 'https://stacjownik.spythere.eu/docs'
     },
     {
       id: 'stacjobot',
       iconSrc: null,
       subtitle: '',
-      technologies: [badges.NestJS, badges.Discord, badges.TS],
+      technologies: [badges.NestJS, badges.Discord, badges.TS]
     },
     {
       id: 'td2-discord-presence',
       iconSrc: null,
       subtitle: '',
       technologies: [badges.CSharp, badges.Dotnet],
-      repoLink: 'https://github.com/Spythere/TD2-Discord-Presence',
+      repoLink: 'https://github.com/Spythere/TD2-Discord-Presence'
-    },
+    }
-  ],
+  ]
 };
 
 function ProjectsSection() {
   const { t } = useTranslation();
 
+  useGSAP(() => {
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: '#projects',
+      },
+    });
+
+    tl.from('.projects-header', { opacity: 0 });
+    tl.from('.sub-header', { opacity: 0 });
+    tl.from('.project-card', {
+      duration: 0.5,
+      ease: 'power1.in',
+      opacity: 0,
+      stagger: {
+        each: 0.25,
+      },
+    });
+  });
+
   return (
     <StyledProjects id="projects">
-      <StyledSectionHeader>
+      <StyledSectionHeader className='projects-header'>
         {t('projects.title-1') + ' '}
         <span className="text--accent" style={{ position: 'relative' }}>
           {t('projects.title-2')}