Add a lot of stuff

Author: foxeddev

app/page.tsx

@@ -6,6 +6,8 @@ import Logo from "@/public/img/logo-foxeddev.png";
 import Card from "@/components/Card";
 
 import { SiGithub, SiDiscord } from "react-icons/si";
+import { FaClock } from "react-icons/fa";
+import Clock from "@/components/Clock";
 
 export default function Home() {
   const now = new Date();
@@ -18,12 +20,12 @@ export default function Home() {
 
   return (
     <div className="flex flex-col justify-end items-center bg-[url(/img/background-arctic-fox.jpg)] bg-cover bg-fixed min-h-screen size-full font-sans text-gray-800 scroll-smooth">
-      <div className="flex flex-col gap-32 bg-white/75 m-32 mt-128 p-20 w-full max-w-4xl">
+      <div className="flex flex-col gap-32 bg-white/75 md:m-32 mt-128 md:mt-128 p-4 md:p-20 w-full max-w-4xl">
         <section className="flex flex-col items-center gap-16">
           <Image src={Logo} alt="" className="-mt-40"></Image>
           <div className="flex flex-col items-center gap-2 text-center">
             <p className="font-mono text-gray-500 text-4xl">Hi, I&apos;m</p>
-            <h1 className="font-extrabold text-gray-800 text-9xl">FOXED</h1>
+            <h1 className="font-extrabold text-gray-800 text-8xl md:text-9xl">FOXED</h1>
             <p className="font-mono text-gray-500 text-xl">
               I&apos;m a {now.getFullYear() - 2010} year old developer and
               designer from Germany.
@@ -126,6 +128,13 @@ export default function Home() {
               </p>
             </div>
           </Card>
+          <Card>
+            <Clock hasSeconds showSubtext />
+          </Card>
+          <Card>
+            <FaClock size={48} className="fill-pink-400"></FaClock>
+            <h3 className="font-medium text-2xl">More stuff coming soon!</h3>
+          </Card>
         </section>
       </div>
     </div>

components/Card.tsx

@@ -18,7 +18,7 @@ export default function Card({
 
   return (
     <div
-      className={`after:bottom-0 after:absolute relative flex flex-col gap-8 col-span-$(cols) bg-white after:bg-sky-300 p-8 ${alignClass}`}
+      className={`flex flex-col gap-8 col-span-$(cols) bg-white p-8 justify-center ${alignClass}`}
       style={{
         gridColumnEnd: `span ${cols}`,
         gridRowEnd: `span ${rows}`,

components/Clock.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function Clock({
+  hasSeconds = false,
+  showSubtext = false,
+}: {
+  hasSeconds?: boolean;
+  showSubtext?: boolean;
+}) {
+  const getTimeParts = () => {
+    const now = new Date();
+    return {
+      hours: now.getHours().toString().padStart(2, "0"),
+      minutes: now.getMinutes().toString().padStart(2, "0"),
+      seconds: now.getSeconds().toString().padStart(2, "0"),
+    };
+  };
+
+  const [time, setTime] = useState(getTimeParts());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(getTimeParts());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <h3 className="flex md:flex-row flex-col gap-4 md:gap-0 font-mono font-bold text-indigo-600 text-5xl">
+      {/* Hours */}
+      <span className="relative">
+        {showSubtext ? (
+          <small className="-bottom-2.5 absolute text-sm">hours</small>
+        ) : (
+          ""
+        )}
+        {time.hours}
+      </span>
+
+      <span className="hidden md:inline">:</span>
+
+      {/* Minutes */}
+      <span className="relative">
+        {showSubtext && (
+          <small className="-bottom-2.5 absolute text-sm">minutes</small>
+        )}
+        {time.minutes}
+      </span>
+
+      {hasSeconds ? (
+        <>
+          <span className="hidden md:inline">:</span>
+
+          {/* Seconds */}
+          <span className="relative">
+            {showSubtext && (
+              <small className="-bottom-2.5 absolute text-sm">seconds</small>
+            )}
+            {time.seconds}
+          </span>
+        </>
+      ) : (
+        ""
+      )}
+    </h3>
+  );
+}