Cringe

src/app/page.tsx

@@ -1,5 +1,14 @@
 import ThingCurve from "@/components/3d/curves/thing";
 import RenderedSection from "@/components/3d/renderedsection";
+import AgeDisplay from "@/components/age";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
 
 export default function Home() {
   return (
@@ -7,10 +16,27 @@ export default function Home() {
       <RenderedSection
         id="about"
         curve={ThingCurve}
-        className="relative w-full h-full px-4 md:px-8 max-w-screen-2xl"
+        className="relative w-full h-full px-4 md:px-8 max-w-screen-2xl items-center flex"
-        curveClassname="w-[38rem] h-[52rem] -right-32 md:right-8 overflow-hidden"
+        curveClassname="w-[38rem] h-[52rem] -right-32 md:right-32 overflow-clip"
       >
-        <h1 className="text-2xl">Hello, I am a </h1>
+        <Card className="max-w-screen-md">
+          <CardHeader>
+            <CardTitle>Elias Almqvist</CardTitle>
+            <CardDescription className="pl-0 space-y-4">
+              <p>
+                I am a {<AgeDisplay precision={10} />}-year-old <span className="font-bold">human-</span>{" "}
+                founder, engineer, and hacker with a passion for CS, physics,
+                and mathematics.
+              </p>
+              <p>
+                Currently working on ingenuity. Most of my projects are
+                open-source, and if you are interested, you can find all of my
+                projects on my git-server or GitHub.
+              </p>
+            </CardDescription>
+            {/* <CardContent></CardContent> */}
+          </CardHeader>
+        </Card>
       </RenderedSection>
     </>
   );

src/components/age.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type AgeDisplayProps = {
+  className?: string;
+  precision?: number;
+};
+
+function getAge() {
+  let birth = 1050019200;
+  let now = Math.floor(Date.now() / 1000);
+  return now - birth;
+}
+
+function secondsToYears(secs: number, precision: number) {
+  let years = secs / 31556952;
+  return years.toFixed(precision);
+}
+
+const AgeDisplay: React.FC<AgeDisplayProps> = ({
+  className,
+  precision = 2,
+}) => {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const anim = useCallback(() => {
+    if (!ref.current) {
+      return;
+    }
+    ref.current.textContent = secondsToYears(getAge(), precision);
+  }, [])
+
+  useEffect(() => {
+    const animFrame = requestAnimationFrame(() => {
+      anim();
+    });
+
+    return () => {
+      cancelAnimationFrame(animFrame);
+    };
+  }, [getAge, ref.current]);
+
+  return <span ref={ref} className={className}>??</span>;
+};
+
+export default AgeDisplay;

src/components/layout/header.tsx

@@ -24,9 +24,8 @@ const Header = () => (
         <NavCommand />
         <ul className="flex-row space-x-2 w-fit h-full items-center hidden sm:flex">
           {NavLinks.map((link, index) => (
-            <li>
+            <li key={index}>
               <Link
-                key={index}
                 href={link.href}
                 target={link.href.match("http") ? "_blank" : "_self"}
                 className="flex flex-row items-center"

src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }