fix: Fixed dumb nextjs hydration error + styling fixes

README.md

@@ -1,2 +1,3 @@
 # Wych
+
 Source code + blog posts for my website, [wych.dev](https://wych.dev).

src/app/not-found.tsx

@@ -19,11 +19,11 @@ const NotFound = () => (
     <p className="max-w-md text-foreground/60 space-y-2">
       {quote.split("\n").map((line, i) => (
         <span key={i} className="block">
-          {'>'} {line}
+          {">"} {line}
         </span>
       ))}
     </p>
-    <div>
+    <div className="space-x-8">
       <ILink href="#">Stay</ILink>
       <ILink href="/">Leave</ILink>
     </div>

src/app/page.tsx

@@ -26,7 +26,7 @@ export default function Home() {
           <CardHeader>
             <CardTitle>Elias Almqvist</CardTitle>
             <CardDescription className="pl-0 space-y-4">
-              <p>
+              <span className="inline-block">
                 I am a{" "}
                 {
                   <AgeHCyclesDisplay
@@ -38,23 +38,23 @@ export default function Home() {
                 <span className="text-xs text-foreground/40">(± 2 MHz)</span>{" "}
                 old <span className="font-bold">human-</span> founder, engineer,
                 and hacker with a passion for CS, physics, and mathematics.
-              </p>
-              <p>
+              </span>
+              <span className="inline-block">
                 Currently working on{" "}
-                <ILink href="https://rembr.co" target="_blank" className="px-0">
+                <ILink href="https://rembr.co" target="_blank">
                   ingenuity
                 </ILink>
                 . Some of my projects are open-source (FOSS), and if you are
                 interested, you can find them on my{" "}
-                <ILink href="https://git.wych.dev/elal" target="_blank" className="px-0">
+                <ILink href="https://git.wych.dev/elal" target="_blank">
                   self-hosted git-server
                 </ILink>{" "}
                 or{" "}
-                <ILink href="https://github.com/almqv" target="_blank" className="px-0">
+                <ILink href="https://github.com/almqv" target="_blank">
                   GitHub
                 </ILink>
                 .
-              </p>
+              </span>
             </CardDescription>
             <CardContent className="flex flex-col items-center justify-center pb-0 pt-4">
               <ExternalNav className="w-full max-w-48 flex flex-row justify-between" />

src/components/age.tsx

@@ -5,12 +5,6 @@ import { useEffect, useState } from "react";
 
 const hydrogenLineFrequency_Hz = 1420.405751768 * 10 ** 6;
 
-function getAge() {
-  let birth = 1050019200;
-  let now = Math.floor(Date.now() / 1000);
-  return now - birth;
-}
-
 function secondsToHydrogenLineCycles(secs: number) {
   return secs * hydrogenLineFrequency_Hz;
 }
@@ -108,18 +102,27 @@ const AgeHCyclesDisplay: React.FC<AgeHCyclesDisplayProps> = ({
   className,
   precision = 2,
 }) => {
-  const [cycles, setCycles] = useState<number>(0);
+  const [age, setAge] = useState<number | null>(null);
+
+  function getAge() {
+    let birth = 1050019200;
+    let now = Math.floor(Date.now() / 1000);
+    return now - birth;
+  }
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setCycles(secondsToHydrogenLineCycles(getAge()));
+      setAge(getAge());
     }, 400);
-
     return () => clearInterval(interval);
-  });
+  }, [getAge]);
 
   return (
-    <FormatBigNumber num={cycles} precision={precision} className={className} />
+    <FormatBigNumber
+      num={secondsToHydrogenLineCycles(age ?? 0)}
+      precision={precision}
+      className={className}
+    />
   );
 };
 

src/components/ilink.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Button } from "./ui/button";
+import { cn } from "@/lib/utils";
 
 type ILinkProps = {
   href: string;
@@ -15,7 +16,10 @@ const ILink: React.FC<ILinkProps> = ({
 }) => {
   return (
     <Link href={href} {...props}>
-      <Button className={className} variant="link">
+      <Button
+        className={cn("p-0 m-0 inline-block h-fit w-fit", className)}
+        variant="link"
+      >
         {children}
       </Button>
     </Link>