feat: move to next.js (!14)

Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/14 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
2024-08-25 02:40:46 +00:00
parent 6b7c8b2256
commit e22a51ba23
146 changed files with 3582 additions and 11995 deletions
@@ -0,0 +1,55 @@
+"use client";
+import { NavItems } from "@/config/NavItems";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+
+export default function Home() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+    const isDark = savedTheme === "dark" || (!savedTheme && prefersDark);
+    document.documentElement.classList.toggle("dark", isDark);
+    setIsDarkMode(isDark);
+  }, []);
+  return (
+    <div>
+      <div className="absolute top-0 right-[33vw] z-100 w-[100vh] h-[100vh] rotate-90 hidden lg:block">
+        <svg viewBox="0 0 500 500" className="absolute">
+          <path
+            d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z"
+            style={{ stroke: "none", fill: "var(--foreground)" }}
+          ></path>
+        </svg>
+      </div>
+      <main className="grid grid-cols-[2fr,1fr] min-h-screen">
+        <section className="bg-[--background] text-[--foreground] flex flex-col items-left justify-center text-left pl-5">
+          <h1 className="text-4xl mb-2">Naomi Carrigan</h1>
+          <Image
+            src="https://cdn.nhcarrigan.com/profile.png"
+            alt="Naomi Carrigan"
+            width={200}
+            height={200}
+            className="rounded-full"
+          />
+          <p className="text-3xl">Software Engineer</p>
+          <p className="text-3xl">Community Manager</p>
+        </section>
+        <section className="bg-[--foreground] text-[--background] flex flex-col items-center justify-center">
+          {NavItems.map((item, index) => (
+            <a
+              key={item.href}
+              href={item.href}
+              className="block py-2 px-4 text-2xl hover:bg-[--background] hover:text-[--foreground]"
+            >
+              {index % 2 ? "🩷" : "🩵"} {item.text}
+            </a>
+          ))}
+        </section>
+      </main>
+    </div>
+  );
+}