Stuff that works and also does not work

src/app/page.tsx

@@ -1,6 +1,7 @@
 import ThingCurve from "@/components/3d/curves/thing";
 import RenderedSection from "@/components/3d/renderedsection";
 import AgeHCyclesDisplay from "@/components/age";
+import ExternalNav from "@/components/externalnav";
 import fonts from "@/components/fonts";
 import ILink from "@/components/ilink";
 import {
@@ -14,12 +15,12 @@ import { cn } from "@/lib/utils";
 
 export default function Home() {
   return (
-    <>
+    <div className="w-full h-full overflow-y-clip">
       <RenderedSection
         id="about"
         curve={ThingCurve}
         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-32 overflow-clip"
+        curveClassname="w-[38rem] h-[52rem] xl:w-[58rem] xl:h-[82rem] absolute -top-16 xl:-top-48 -right-32 lg:-right-12 2xl:right-32 overflow-clip"
       >
         <Card className="max-w-screen-md">
           <CardHeader>
@@ -30,12 +31,13 @@ export default function Home() {
                 {
                   <AgeHCyclesDisplay
                     className={cn("font-bold", fonts.mono.className)}
-                    precision={6}
+                    precision={12}
                   />
                 }{" "}
-                <span className="font-bold">hydrogen-line-cycles</span> old{" "}
-                <span className="font-bold">human-</span> founder, engineer, and
-                hacker with a passion for CS, physics, and mathematics.
+                <span className="font-bold">hydrogen-line-cycles</span>{" "}
+                <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>
                 Currently working on{" "}
@@ -54,10 +56,12 @@ export default function Home() {
                 .
               </p>
             </CardDescription>
-            {/* <CardContent></CardContent> */}
+            <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" />
+            </CardContent>
           </CardHeader>
         </Card>
       </RenderedSection>
-    </>
+    </div>
   );
 }

src/components/3d/curves/thing.ts

@@ -72,7 +72,7 @@ const ThingCurve = {
   },
   particles: {
     max: maxParticles,
-    size: 0.1,
+    size: 0.07,
     color: "#888",
     darkcolor: "#444",
     opacity: 0.4,

src/components/3d/renderedsection.tsx

@@ -20,7 +20,7 @@ const RenderedSection: React.FC<
   ...props
 }) => {
   return (
-    <div className="flex w-full flex-col items-center align-middle relative">
+    <div className="flex w-full h-full flex-col items-center align-middle relative">
       <div className={cn("absolute", curveClassname)}>
         <Renderer {...curve} />
       </div>

src/components/age.tsx

@@ -28,28 +28,52 @@ const FormatBigNumber: React.FC<FormatBigNumberProps> = ({
 }) => {
   const suffixes = [
     "",
-    "K",
-    "M",
-    "Bn",
-    "T",
-    "Q",
-    "Qt",
-    "Sx",
-    "Sp",
-    "O",
-    "N",
-    "D",
-    "Ud",
-    "Dd",
-    "Td",
-    "Qad",
-    "Qid",
-    "Sd",
-    "Sed",
-    "Od",
-    "Nod",
-    "Vg",
+    "thousand",
+    "million",
+    "billion",
+    "trillion",
+    "quadrillion",
+    "quintillion",
+    "sextillion",
+    "septillion",
+    "octillion",
+    "nonillion",
+    "decillion",
+    "undecillion",
+    "duodecillion",
+    "tredecillion",
+    "quattuordecillion",
+    "quindecillion",
+    "sexdecillion",
+    "septendecillion",
+    "octodecillion",
+    "novemdecillion",
+    "vigintillion",
   ];
+  // const suffixes = [
+  //   "",
+  //   "K",
+  //   "M",
+  //   "Bn",
+  //   "T",
+  //   "Q",
+  //   "Qt",
+  //   "Sx",
+  //   "Sp",
+  //   "O",
+  //   "N",
+  //   "D",
+  //   "Ud",
+  //   "Dd",
+  //   "Td",
+  //   "Qad",
+  //   "Qid",
+  //   "Sd",
+  //   "Sed",
+  //   "Od",
+  //   "Nod",
+  //   "Vg",
+  // ];
 
   let exponent = Math.floor(Math.log10(num) / 3);
   exponent = Math.min(exponent, suffixes.length - 1);
@@ -61,7 +85,10 @@ const FormatBigNumber: React.FC<FormatBigNumberProps> = ({
   if (base) {
     return (
       <span
-        className={cn("inline-flex flex-row space-x-0.5 mr-0.5 pointer-events-none", className)}
+        className={cn(
+          "inline-flex flex-row space-x-1 mr-0.5 pointer-events-none",
+          className,
+        )}
       >
         <span className="inline-block">{formattedBase}</span>
         <span className="inline-block">{suffix}</span>
@@ -86,7 +113,7 @@ const AgeHCyclesDisplay: React.FC<AgeHCyclesDisplayProps> = ({
   useEffect(() => {
     const interval = setInterval(() => {
       setCycles(secondsToHydrogenLineCycles(getAge()));
-    }, 40);
+    }, 400);
 
     return () => clearInterval(interval);
   });

src/components/externalnav.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import NavLinks from "./navlinks";
+import { Button } from "./ui/button";
+import { cn } from "@/lib/utils";
+
+type ExternalNavProps = {
+  className?: string;
+};
+
+const ExternalNav: React.FC<ExternalNavProps> = ({ className }) => (
+  <ul className={cn(className)}>
+    {NavLinks.map((link, index) => (
+      <li key={index} className="w-fit">
+        <Link
+          href={link.href}
+          target={link.href.match("http") ? "_blank" : "_self"}
+          className="flex flex-row items-center w-fit"
+        >
+          <Button
+            variant="ghost"
+            size="icon"
+            className="transition-opacity hover:bg-transparent hover:opacity-75"
+          >
+            <link.icon className="h-4 w-4" />
+          </Button>
+        </Link>
+      </li>
+    ))}
+  </ul>
+);
+
+export default ExternalNav;

src/components/layout/header.tsx

@@ -7,6 +7,7 @@ import NavLinks from "../navlinks";
 import NavCommand from "./nav";
 
 import Logo from "@/components/logo";
+import ExternalNav from "../externalnav";
 
 const Header = () => (
   <header className="w-full h-14 flex flex-col justify-center items-center">
@@ -22,25 +23,7 @@ const Header = () => (
       <div className="flex flex-row items-center space-x-2">
         <ThemeButton className="w-4 h-4 hidden sm:block" />
         <NavCommand />
-        <ul className="flex-row space-x-2 w-fit h-full items-center hidden sm:flex">
-          {NavLinks.map((link, index) => (
-            <li key={index}>
-              <Link
-                href={link.href}
-                target={link.href.match("http") ? "_blank" : "_self"}
-                className="flex flex-row items-center"
-              >
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="transition-opacity hover:bg-transparent hover:opacity-75"
-                >
-                  <link.icon className="h-4 w-4" />
-                </Button>
-              </Link>
-            </li>
-          ))}
-        </ul>
+        <ExternalNav className="hidden sm:flex flex-row space-x-1" />
       </div>
     </div>
     <Separator />

src/components/layout/index.tsx

@@ -5,7 +5,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <Header />
-      <main className="w-full flex justify-center overflow-x-clip">
+      <main className="w-full h-[calc(100vh-3.5rem)] flex justify-center overflow-x-clip">
         {children}
       </main>
       <NavBinds />