test

app/about/page.tsx

@@ -1,41 +1,71 @@
 'use client'
 
-import Nav from "../nav";
 import Image from "next/image";
-import {motion} from "framer-motion";
+import { motion } from "framer-motion";
+import { PageWrapper } from "@/components/PageWrapper";
+import Link from "next/link";
+import Scoresaber from "@/public/sslogo.svg";
+import { MotionLink } from "@/components/MotionLink";
+import { MotionLogo } from "@/components/MotionLogo";
 
 export default function Home() {
   return (
-    <main >
-      <Contents />
-    </main>
+    <PageWrapper>
+      <main className="flex min-h-screen flex-col pt-24">
+        <Contents />
+      </main>
+    </PageWrapper>
   );
 }
 
-function Contents(){
-  return(
-    <div className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>aboutme</h1>
-      <Image
-        src="/Happy_Negative_Galaxy.png"
-        alt="Alex Tong"
-        width={500}
-        height={4}
-      />
-      <h1>aboutme</h1>
-      <h1>aboutme</h1>
-      <Image
-        src="/Happy_Negative_Galaxy.png"
-        alt="Alex Tong"
-        width={500}
-        height={4}
-      />
-      <Image
-        src="/Happy_Negative_Galaxy.png"
-        alt="Alex Tong"
-        width={500}
-        height={4}
-      />
-    </div>
+function Contents() {
+  return (
+    <>
+      <h1>About Me</h1>
+      <h2>UMass Cybersecurity Club</h2>
+      {/* TODO */}
+      <p>I play CTFs with <MotionLink href="https://ctftime.org/team/78233">SavedByTheShell</MotionLink>, and am currently exploring web, osint, and pwn (don't forget misc as well!)</p>
+
+      <h2>UMass TASC</h2>
+      {/* TODO */}
+      <p>I play diabolo and perform in various events around campus. Subscribe to <MotionLink href="https://www.youtube.com/@umasstasc">@umasstasc</MotionLink> for performance recaps.</p>
+      <h2>Tetris</h2>
+      {/* TODO */}
+      <p>I play modern tetris on <MotionLink href="https://jstris.jezevec10.com/">Jstris</MotionLink> and <MotionLink href="https://tetr.io/">tetr.io</MotionLink>(but not tetra league!), and follow classic tetris. <br />
+        Feel free to friend me on tetr.io <MotionLink href="https://ch.tetr.io/u/atch2203">@atch2203</MotionLink>.</p>
+      <h2>Beat Saber</h2>
+      {/* TODO */}
+      <p>I enjoy playing Beat Saber often, and am currently top 800 global/300 US.<br />
+        I also play challenge maps, and am currently CS level 9.<br />
+        You can find my scoresaber and beatleader profile below.<br /></p>
+      <div className="flex">
+        <MotionLogo className="px-2 inline" href="https://scoresaber.com/u/76561198246352688">
+          <Image src={Scoresaber}
+            className="inline"
+            alt="scoresaber"
+            width={50}
+            height={100}
+            priority
+          />
+        </MotionLogo>
+        <MotionLogo className="px-2 inline" href="https://beatleader.xyz/u/76561198246352688">
+          <Image src="/bltransparent.png"
+            className="inline"
+            alt="beatleader"
+            width={50}
+            height={100}
+            priority
+          />
+        </MotionLogo>
+      </div>
+      <p>
+        My best scores (imo): <Link href="https://replay.beatleader.xyz/?scoreId=14800412">1 </Link> <Link href="https://replay.beatleader.xyz/?scoreId=14734317">2</Link>
+      </p>
+      <h2>Other stuff</h2>
+      <p>
+        I follow the CS2 esports scene, and occasionally watch Valorant, R6, and Rocket League.<br />
+        I also sometimes watch Osu! and Beat Saber tournaments.
+      </p>
+    </>
   )
 }

app/footer.tsx

@@ -0,0 +1,7 @@
+export default function Footer(){
+  return (
+    <footer className="mt-5 w-full py-5 text-center text-gray-900 bg-gray-500">
+      Check out my socials!
+    </footer>
+  );
+}

app/globals.css

@@ -1,29 +1,35 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@tailwind apply;
 
 :root{
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background: #ffffff;
 }
-
-/* @media (prefers-color-scheme: dark) {
-:root {
-  --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 0, 0, 0;
-  --background-end-rgb: 0, 0, 0;
+.box {
+  width: 200px;
+  height: 80px;
+  border-radius: 50px;
+  background: #555555;
+  cursor: pointer;
 }
- } */
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: var(--background);
+}
+
+h1{
+  @apply text-6xl py-4
+}
+
+h2{
+  @apply text-4xl py-4
+}
+
+p{
+  @apply text-xl
 }
 
 @layer utilities {

app/head.tsx

@@ -0,0 +1,8 @@
+export default function Head() {
+  return (
+    <>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <link rel="icon" href="/favicon.png" />
+    </>
+  );
+}

app/header.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import React, { useState } from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+
+const links = [
+  {
+    text: 'Home',
+    link: '/'
+  },
+  {
+    text: "Projects",
+    link: '/projects'
+  },
+  {
+    text: 'About Me',
+    link: '/about'
+  },
+  {
+    text: 'Blog',
+    link: '/blog'
+  }
+]
+
+export default function Header() {
+  const [mobile, setMobile] = useState(false);
+  const hidden = !mobile ? " hidden" : "";
+  const [logorot, setlogorot] = useState(0);
+
+  return (
+    <nav className="max-w-screen-x1 flex-wrap flex items-center justify-between mx-auto p-4 fixed w-full z-20 bg-blue-900">
+      <motion.div whileHover={{ scale: 1.2 }} animate={{ rotate: logorot }} onClick={() => { setlogorot(logorot + 90) }}
+        transition={{ type: "spring", stiffness: 400, damping: 20 }}
+      >
+        <Image
+          src="/favicon.png"
+          alt="atch2203"
+          width={50}
+          height={50}
+          priority
+        />
+      </motion.div>
+      <button className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        onClick={() => setMobile(m => !m)} type="button" data-coll="navbar-default" aria-controls="navbar-default" aria-expanded="false">
+        <MenuSvg />
+      </button>
+      <div className={"w-full md:block md:w-auto" + hidden}>
+        <NavBar />
+      </div>
+    </nav>
+  );
+}
+
+function NavBar() {
+  const path = usePathname();
+
+  const liClass = `block py-5 px-3
+          text-gray-900 rounded md:border-0 md:p-0
+          dark:text-white hover:bg-blue-400 md:hover:bg-transparent md:hover:text-gray-400`;//md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent
+
+  return (
+    <ul className="flex flex-col md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 top-20 md:pr-8 max-md:pt-4">
+      {links.map((obj, i) => <li key={i} className={liClass}><Link href={obj.link} className="relative">
+        {obj.link === path && (
+          <>
+            <motion.span
+              layoutId="underline"
+              className="absolute left-0 top-full block h-[2px] w-full bg-black max-md:hidden" />
+            <motion.span className="absolute left-0 top-full block h-[2px] w-full bg-black md:hidden" />
+          </>
+        )}
+        {obj.text}
+      </Link></li>)}
+    </ul>
+  );
+}
+
+function MenuSvg() {
+  return (
+    <>
+      <span className="sr-only">Open main menu</span>
+      <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15" />
+      </svg>
+    </>
+  );
+}

app/layout.tsx

@@ -1,17 +1,15 @@
-'use client'
-
-import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Nav from "./nav";
-import { AnimatePresence } from "framer-motion";
-import { Router, Routes, useLocation } from "react-router-dom";
+import Header from "./header";
+import Head from "./head";
+import { Metadata } from "next";
+import Footer from "./footer";
 
 const inter = Inter({ subsets: ["latin"] });
 
-// export const metadata: Metadata = {
-//   title: "Alex's Website"
-// };
+export const metadata: Metadata = {
+  title: "atch2203's website"
+};
 
 export default function RootLayout({
   children,
@@ -20,13 +18,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <Head />
       <body className={inter.className}>
-        <Nav />
-        <AnimatePresence>
+        <Header />
         {children}
-        </AnimatePresence>
+        <Footer />
       </body>
     </html>
-
   );
 }