Deps (no more beta)

package.json

@@ -9,18 +9,16 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "10.0.0-beta.5",
-    "@astrojs/vue": "6.0.0-beta.1",
-    "@fontsource-variable/roboto-slab": "^5.2.8",
+    "@astrojs/node": "9.5.4",
+    "@astrojs/vue": "5.1.4",
     "@tailwindcss/vite": "^4.2.1",
-    "astro": "6.0.0-beta.15",
-    "motion-v": "2.0.0",
+    "astro": "5.18.0",
     "nodemailer": "^8.0.1",
     "tailwindcss": "^4.2.1",
     "vue": "^3.5.29"
   },
   "devDependencies": {
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.3.3",
     "@types/nodemailer": "^7.0.11",
     "daisyui": "^5.5.19"
   }

src/components/RotatingText.astro

@@ -1,22 +0,0 @@
----
-interface Props {
-    items: Array<{
-        text: string;
-        className: string;
-    }>;
-}
-
-const { items } = Astro.props;
----
-
-<span class="text-rotate duration-9000">
-    <span>
-        {
-            items.map((item) => (
-                <span class:list={["mx-auto text-center", item.className]}>
-                    {item.text}
-                </span>
-            ))
-        }
-    </span>
-</span>

src/components/RotatingText.vue

@@ -0,0 +1,33 @@
+<template>
+    <span class="block w-full my-2">
+        <span class="text-rotate">
+            <span class="justify-items-center">
+                <span
+                    v-for="(item, index) in items"
+                    :key="index"
+                    :class="item.className"
+                >
+                    {{ item.text }}
+                </span>
+            </span>
+        </span>
+    </span>
+</template>
+
+<script setup lang="ts">
+interface RotatingTextItem {
+    text: string;
+    className: string;
+}
+
+defineProps<{
+    items: RotatingTextItem[];
+}>();
+</script>
+
+<style scoped>
+.text-rotate:hover,
+.text-rotate:hover * {
+    animation-play-state: running !important;
+}
+</style>

src/components/sections/ContactSection.vue

@@ -239,12 +239,12 @@ ${message.value}`,
                         class="btn btn-lg w-full shadow-lg transition-all duration-300"
                         :class="[
                             status === 'success'
-                                ? 'btn-success text-white'
+                                ? 'btn-success text-white pointer-events-none'
                                 : status === 'error'
-                                  ? 'btn-error text-white'
+                                  ? 'btn-error text-white pointer-events-none'
                                   : 'btn-primary',
                         ]"
-                        :disabled="status === 'sending' || status === 'success'"
+                        :disabled="status === 'sending'"
                     >
                         <template v-if="status === 'sending'">
                             <span

src/components/sections/HeroSection.astro

@@ -2,7 +2,7 @@
 import { siteConfig } from "../../config/site";
 import Icon from "../Icon.astro";
 import Section from "../Section.astro";
-import RotatingText from "../RotatingText.astro";
+import RotatingText from "../RotatingText.vue";
 import StatusIndicator from "../StatusIndicator.vue";
 
 const rotatingText = (siteConfig.hero as any).rotatingText as
@@ -30,7 +30,7 @@ const rotatingText = (siteConfig.hero as any).rotatingText as
                 {
                     rotatingText ? (
                         <>
-                            <RotatingText items={rotatingText} />
+                            <RotatingText items={rotatingText} client:idle />
                             <span class="block">
                                 {siteConfig.hero.mainTitle
                                     .replace("{rotating}", "")

src/config/site.ts

@@ -108,7 +108,7 @@ export const siteConfig = {
         variant: "primary",
       },
       {
-        title: "Slop-free",
+        title: "Slop-free Guarantee",
         content: "Hand-crafted code built with care",
         variant: "secondary",
       },

src/layouts/Layout.astro

@@ -2,7 +2,6 @@
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import { siteConfig } from "../config/site";
-import "@fontsource-variable/roboto-slab";
 import "../styles/global.css";
 
 interface Props {
@@ -65,6 +64,13 @@ const isProd = import.meta.env.PROD;
         <meta property="og:image:alt" content={resolvedOgImage.alt} />
         <meta name="theme-color" content="#ffffff" />
         <link rel="canonical" href={siteUrl} />
+        <link
+            rel="preload"
+            href="/fonts/roboto.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+        />
         <title>{metaTitle}</title>
         {
             isProd && (
@@ -87,7 +93,7 @@ const isProd = import.meta.env.PROD;
             )
         }
     </head>
-    <body class="min-h-screen flex flex-col bg-base-100 font-sans antialiased">
+    <body class="min-h-screen flex flex-col bg-base-100 antialiased">
         <Header />
         <main class="grow flex flex-col">
             <slot />

src/styles/global.css

@@ -40,6 +40,14 @@ html {
     scroll-behavior: smooth;
 }
 
-body {
-    font-family: "Roboto Slab Variable", serif;
+@font-face {
+    font-family: "Roboto Slab";
+    src: url("/fonts/roboto.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: block;
+}
+
+body {
+    font-family: "Roboto Slab", serif;
 }