feat(Home): implement job rotation animation using framer-motion

app/layout.tsx

@@ -30,7 +30,9 @@ export default function RootLayout({
             <Image alt="logo.png" className="mx-4" src={logo} width={70} height={70} />
           </Link>
         </Header>
-        {children}
+        <main className="pt-20">
+          {children}
+        </main>
         <div className="bg" />
       </body>
     </html>

app/page.tsx

@@ -1,6 +1,35 @@
+'use client'
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
 export default function Home() {
+  const jobs = ["Software", "Fullstack", "Web", "System", "Rust"];
+  const [job, setJob] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setJob((prev) => (prev + 1) % jobs.length);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
-    <main>
-    </main>
+    <section className="mx-10 mt-50 ml-50">
+      <h2 className="text-7xl/12 font-light">Mike</h2>
+      <h1 className="text-9xl font-bold">Karl</h1>
+      <AnimatePresence mode="wait">
+      <motion.h3
+        key={jobs[job]}
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        exit={{ y: -20, opacity: 0 }}
+        transition={{ duration: 0.5 }}
+        className="absolute text-4xl mt-2"
+      >
+        {jobs[job]} Entwickler
+        </motion.h3>
+        </AnimatePresence>
+    </section>
   );
 }

package-lock.json

@@ -8,6 +8,7 @@
       "name": "portfolio",
       "version": "0.1.0",
       "dependencies": {
+        "framer-motion": "^12.33.0",
         "next": "^15.5.12",
         "react": "19.1.0",
         "react-dom": "19.1.0"
@@ -1111,6 +1112,33 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.33.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.33.0.tgz",
+      "integrity": "sha512-ca8d+rRPcDP5iIF+MoT3WNc0KHJMjIyFAbtVLvM9eA7joGSpeqDfiNH/kCs1t4CHi04njYvWyj0jS4QlEK/rJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.33.0",
+        "motion-utils": "^12.29.2",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -1400,6 +1428,21 @@
         "node": ">= 18"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.33.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.33.0.tgz",
+      "integrity": "sha512-XRPebVypsl0UM+7v0Hr8o9UAj0S2djsQWRdHBd5iVouVpMrQqAI0C/rDAT3QaYnXnHuC5hMcwDHCboNeyYjPoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.29.2"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "framer-motion": "^12.33.0",
     "next": "^15.5.12",
     "react": "19.1.0",
     "react-dom": "19.1.0"