updated text and skills

src/components/data-display/tech-details.tsx

@@ -3,6 +3,7 @@
 import { TechDetails } from "@/lib/types";
 import Typography from "@/components/general/typography";
 import spaceGrotesk from "../general/space-grotesk-font";
+import Reavel from "@/hooks/Reavel";
 
 const TechDetail = ({ label, progress }: TechDetails) => {
   return (

src/components/sections/about-me.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Image from "next/image";
 import PrinceKumar from "../../../public/images/about_image.jpg";
 import Tag from "@/components/data-display/tag";

src/components/sections/hero.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Image from "next/image";
 import { MapPin } from "lucide-react";
 import PrinceProfile from "../../../public/images/profile_image.jpg";
@@ -34,8 +36,14 @@ const HeroSection = () => {
           <div className="flex flex-col gap-2">
             <Reavel>
               <Typography variant="h1">
-                Hello, he is Prince{" "}
+                Hello
                 <span className="inline-block animate-waving-hand">👋</span>
+                {","}
+              </Typography>
+            </Reavel>
+            <Reavel>
+              <Typography variant="h1">
+                He&apos;s <span className="text-emerald-500">Prince</span>{"."}
               </Typography>
             </Reavel>
             <Reavel>

src/components/sections/project.tsx

@@ -6,6 +6,7 @@ import ScrollAnimation from "@/hooks/scrollAnimation";
 import spaceGrotesk from "../general/space-grotesk-font";
 import Typography from "../general/typography";
 import ProjectDetails from "../data-display/project-details";
+import Reavel from "@/hooks/Reavel";
 
 export default function ProjectSection() {
   return (
@@ -20,13 +21,15 @@ export default function ProjectSection() {
           </div>
         </ScrollAnimation>
 
-        <Typography
-          variant="subtitle"
-          className={`${spaceGrotesk.className} max-w-lg text-center`}
-        >
-          Here are some projects that showcase Prince&apos;s passion for web and
-          app development.
-        </Typography>
+        <Reavel>
+          <Typography
+            variant="subtitle"
+            className={`${spaceGrotesk.className} max-w-lg text-center`}
+          >
+            Here are some projects that showcase Prince&apos;s passion for web
+            and app development.
+          </Typography>
+        </Reavel>
       </div>
 
       <div>

src/components/sections/skills.tsx

@@ -1,10 +1,13 @@
+"use client";
+
 import { TECHNOLOGIES } from "@/lib/data";
 import Tag from "@/components/data-display/tag";
 import Container from "@/components/layout/container";
 import ScrollAnimation from "@/hooks/scrollAnimation";
 import spaceGrotesk from "../general/space-grotesk-font";
 import TechDetail from "../data-display/tech-details";
 import Typography from "../general/typography";
+import Reavel from "@/hooks/Reavel";
 
 const SkillsSection = () => {
   return (
@@ -18,13 +21,15 @@ const SkillsSection = () => {
             />
           </div>
         </ScrollAnimation>
-        <Typography
-          variant="subtitle"
-          className={`${spaceGrotesk.className} sm:max-w-xl text-center`}
-        >
-          Here are some key skills that demonstrate Prince&apos;s expertise and
-          passion for web and app development.
-        </Typography>
+        <Reavel>
+          <Typography
+            variant="subtitle"
+            className={`${spaceGrotesk.className} sm:max-w-xl text-center`}
+          >
+            Here are some key skills that demonstrate Prince&apos;s expertise
+            and passion for web and app development.
+          </Typography>
+        </Reavel>
       </div>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 sm:gap-4">

tailwind.config.js

@@ -51,7 +51,7 @@ module.exports = {
       animation: {
         "drawer-open": "open 0.3s ease-in-out",
         "drawer-close": "close 0.3s ease-in-out",
-        "waving-hand": "waving 2s linear 3",
+        "waving-hand": "waving 2s infinite",
       },
     },
   },