feat: animation cards

astro.config.mjs

@@ -1,8 +1,9 @@
-import { defineConfig } from "astro/config"
+import { defineConfig } from "astro/config";
+import tailwind from "@astrojs/tailwind";
 
-import tailwind from "@astrojs/tailwind"
+import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
-})
+  integrations: [tailwind(), react()]
+});

package.json

@@ -15,6 +15,7 @@
     "@astrojs/tailwind": "^5.0.0",
     "@fontsource-variable/saira": "^5.0.13",
     "astro": "^3.0.13",
+    "framer-motion": "^10.16.4",
     "tailwindcss": "^3.0.24"
   },
   "devDependencies": {

src/components/oss/oss-card.astro

@@ -40,12 +40,12 @@ const bgImage = imageMap[title]
       <span class="font-normal text-xs sm:text-lg mt-1">~ {description}</span>
     </header>
     <div
-      class="flex flex-col sm:flex-row justify-between items-center w-full h-full gap-10 mt-5"
+      class="flex flex-col sm:flex-row justify-between items-center w-full gap-6 mt-5"
     >
       <p class="text-white text-xl text-justify self-start w-full sm:w-2/3">
         {body}
       </p>
-      <div class="flex sm:flex-col w-full sm:w-1/3 h-full gap-6 sm:gap-2">
+      <div class="flex sm:flex-col gap-6 sm:gap-2">
         {
           link_demo && (
             <OssLink name="Live Demo" href={link_demo}>
@@ -63,4 +63,4 @@ const bgImage = imageMap[title]
       </div>
     </div>
   </article>
-</section>
+</section>

src/components/ui/reveal.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react"
+import { motion, useAnimation, useInView } from "framer-motion"
+
+interface Props {
+  children: React.ReactNode
+  animationOrder?: number
+}
+
+const Reveal = ({ children, animationOrder = 1 }: Props) => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true })
+  const mainControls = useAnimation()
+
+  useEffect(() => {
+    if (isInView) {
+      mainControls.start("visible")
+    }
+  }, [isInView])
+
+  return (
+    <motion.section
+      ref={ref}
+      initial='hidden'
+      className='flex w-full'
+      animate={mainControls}
+      variants={{
+        visible: { opacity: 1, translateX: 0, translateY: 0 },
+        hidden: { opacity: 0, translateX: -50, translateY: -50 }
+      }}
+      transition={{ duration: 0.7, delay: 0.2 * (animationOrder + 1) }}
+    >
+      {children}
+    </motion.section>
+  )
+}
+export default Reveal

src/pages/open-source.astro

@@ -1,6 +1,7 @@
 ---
 import OssCard from "../components/oss/oss-card.astro"
 import Title from "../components/shared/title.astro"
+import Reveal from "../components/ui/reveal"
 import Memora from "../components/ui/svg/icons/memora-icon.astro"
 import OHT from "../components/ui/svg/icons/oht-icon.astro"
 import Spotigen from "../components/ui/svg/icons/spotigen-icon.astro"
@@ -23,35 +24,42 @@ import Layout from "../layouts/layout.astro"
         </p>
       </section>
       <section class="flex flex-col gap-8">
-        <OssCard
-          title="Memora Date"
-          description="Yet Another Reminder App"
-          body="First project, big step. Memora Date offers a simple list of reminders, one-time or recurring events, and the ability to import contacts. Email alerts keep you on track."
-          link_demo="https://memora-date.vercel.app/"
-          link_repository="https://github.com/Railly/memora-date"
-        >
-          <Memora class="w-10 h-10 md:w-14 md:h-14" />
-        </OssCard>
-        <OssCard
+        <Reveal client:visible animationOrder={0}>
+          <OssCard
+            title="Memora Date"
+            description="Yet Another Reminder App"
+            body="First project, big step. Memora Date offers a simple list of reminders, one-time or recurring events, and the ability to import contacts. Email alerts keep you on track."
+            link_demo="https://memora-date.vercel.app/"
+            link_repository="https://github.com/Railly/memora-date"
+          >
+            <Memora class="w-10 h-10 md:w-14 md:h-14" />
+          </OssCard>
+        </Reveal>
+
+        <Reveal client:visible animationOrder={1}>
+          <OssCard
           title="One Hunter Theme"
           description="Popular VSCode Theme"
           body="Merging the best of Vercel Theme ▲ and One Dark Pro 🎨, One Hunter brings a unique aesthetic to your coding environment."
           link_demo="https://marketplace.visualstudio.com/items?itemName=RaillyHugo.one-hunter"
           link_repository="https://github.com/Railly/one-hunter-vscode"
-        >
-          <OHT
+          >
+            <OHT
             class="border-2 border-white rounded-full min-w-[40px] min-h-[40px] w-10 h-10 md:w-14 md:h-14"
-          />
-        </OssCard>
-        <OssCard
-          title="Spotigen"
-          description="ChatGPT Plugin"
-          body="Simply type in what you're feeling or looking for, and Spotigen will generate a Spotify playlist to match. A straightforward way to discover new music."
-          link_demo="https://spotigen.vercel.app/"
-          link_repository="https://github.com/Railly/spotigen-chat-gpt-plugin"
-        >
-          <Spotigen class="w-10 h-10 md:w-14 md:h-14" />
-        </OssCard>
+            />
+          </OssCard>
+        </Reveal>
+        <Reveal client:visible animationOrder={1}>
+          <OssCard
+            title="Spotigen"
+            description="ChatGPT Plugin"
+            body="Simply type in what you're feeling or looking for, and Spotigen will generate a Spotify playlist to match. A straightforward way to discover new music."
+            link_demo="https://spotigen.vercel.app/"
+            link_repository="https://github.com/Railly/spotigen-chat-gpt-plugin"
+          >
+            <Spotigen class="w-10 h-10 md:w-14 md:h-14" />
+          </OssCard>
+        </Reveal>
       </section>
     </article>
     </main>

src/pages/services.astro

@@ -1,9 +1,9 @@
 ---
 import ServiceCard from "../components/service-card.astro"
 import Title from "../components/shared/title.astro"
+import Reveal from "../components/ui/reveal";
 import Layout from "../layouts/layout.astro"
-import GlowLogo from "../components/ui/svg/icons/glow-logo.astro"
-import { largeServiceCards, smallServiceCards } from "../data/service-cards.ts"
+import { largeServiceCards, smallServiceCards } from "../lib/data/service-cards.ts"
 ---
 
 <Layout title="Crafter Station | Services" withFooter>
@@ -26,14 +26,18 @@ import { largeServiceCards, smallServiceCards } from "../data/service-cards.ts"
           largeServiceCards
             .slice(0, 2)
             .map((card) => (
-              <ServiceCard title={card.title} body={card.body} type="large" />
+              <Reveal client:visible>
+                <ServiceCard title={card.title} body={card.body} type="large" />
+              </Reveal>
             ))
         }
         <!--Small cards -->
         <section class="grid grid-cols-1 sm:grid-cols-2 gap-8">
           {
             smallServiceCards.map((card) => (
+            <Reveal client:visible>
               <ServiceCard title={card.title} body={card.body} type="small" />
+            </Reveal>
             ))
           }
         </section>
@@ -42,7 +46,9 @@ import { largeServiceCards, smallServiceCards } from "../data/service-cards.ts"
           largeServiceCards
             .slice(2)
             .map((card) => (
-              <ServiceCard title={card.title} body={card.body} type="large" />
+              <Reveal client:visible>
+                <ServiceCard title={card.title} body={card.body} type="large" />
+              </Reveal>
             ))
         }
       </section>

tsconfig.json

@@ -1,3 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
-}
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}