add images to about me page

atch2203 · Jun 18, 2024 · f7d524e · f7d524e
1 parent 6a1d199
commit f7d524e
Show file tree

Hide file tree

Showing 40 changed files with 587 additions and 120 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -3,69 +3,195 @@
 import Image from "next/image";
 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 Scoresaber from "@/public/linkicons/sslogo.svg";
+import { UnderLink } from "@/components/MotionLink";
 import { MotionLogo } from "@/components/MotionLogo";
+import Carousel from "react-multi-carousel";
+import 'react-multi-carousel/lib/styles.css';
+import { useEffect } from "react";
 
 export default function Home() {
   return (
     <PageWrapper>
-      <main className="flex min-h-screen flex-col pt-24">
+      <main className="flex flex-col">
         <Contents />
       </main>
     </PageWrapper>
   );
 }
 
-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>
+const carouselResponsive = {
+  superLargeDesktop: {
+    // the naming can be any, depends on you.
+    breakpoint: { max: 4000, min: 3000 },
+    items: 1
+  },
+  desktop: {
+    breakpoint: { max: 3000, min: 1024 },
+    items: 1
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 464 },
+    items: 1
+  },
+  mobile: {
+    breakpoint: { max: 464, min: 0 },
+    items: 1
+  }
+};
+const carouselHeight = 300;
 
-      <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>
+const sections = [
+  {
+    title: "UMass Cybersecurity Club",
+    contents: (
+      <p>I play CTFs with <UnderLink href="https://ctftime.org/team/78233">SavedByTheShell</UnderLink>,
+        and am currently exploring web, osint, and pwn (and misc as well!)
       </p>
-      <h2>Other stuff</h2>
+    ),
+    images: (
+      <Image
+        src="/aboutme/cybersec.png"
+        alt="JSA performance"
+        width={1000}
+        height={1000}
+        className="object-cover w-full h-auto"
+      />
+    )
+  },
+  {
+    title: "UMass TASC",
+    contents: (
+      <p>I play diabolo and perform in various events around campus. Subscribe to <UnderLink href="https://www.youtube.com/@umasstasc">@umasstasc</UnderLink> for performance recaps.</p>
+    ),
+    images: (
+      <Image
+        src="/aboutme/jsa.png"
+        alt="JSA performance"
+        width={1000}
+        height={1000}
+        className="object-cover w-full h-auto"
+      />
+    )
+  },
+  {
+    title: "Tetris",
+    contents: (
+      <p>I play modern tetris
+        on <UnderLink href="https://jstris.jezevec10.com/">Jstris</UnderLink> and <UnderLink href="https://tetr.io/">tetr.io</UnderLink>
+        (but not tetra league!), and follow classic tetris. <br />
+        Feel free to friend me on
+        tetr.io <UnderLink href="https://ch.tetr.io/u/atch2203">@atch2203</UnderLink>.</p>
+    ),
+    images: (
+      <Image
+        src="/aboutme/tetrio.png"
+        alt="JSA performance"
+        width={1000}
+        height={1000}
+        className="object-cover w-full h-auto"
+      />
+    )
+  },
+  {
+    title: "Beat Saber",
+    contents: (
+      <>
+        <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 md:justify-end">
+          <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="/linkicons/bltransparent.png"
+              className="inline"
+              alt="beatleader"
+              width={50}
+              height={100}
+              priority
+            />
+          </MotionLogo>
+        </div>
+        {/* <p>
+          My best scores (imo):<br />
+          <UnderLink href="https://replay.beatleader.xyz/?scoreId=14800412">vandalized ai </UnderLink><br />
+          <UnderLink href="https://replay.beatleader.xyz/?scoreId=14734317">booths of fighters</UnderLink>
+        </p> */}
+      </>
+    ),
+    images: (
+      <div className="w-full h-auto">
+        <Carousel responsive={carouselResponsive}
+          swipeable={false}
+          draggable={false}
+          showDots={true}
+          infinite={true}
+          keyBoardControl={true}
+          transitionDuration={500}
+          containerClass={`w-full h-full`}
+          dotListClass="custom-dot-list-style"
+        >
+          <div>
+            <iframe src="https://replay.beatleader.xyz/?scoreId=14800412" style={{aspectRatio:3/2}} className="w-full object-contain" />
+          </div>
+          <div>
+            <iframe src="https://replay.beatleader.xyz/?scoreId=14734317" style={{aspectRatio:3/2}} className="w-full object-contain" />
+          </div>
+        </Carousel>
+      </div>
+    )
+  },
+  {
+    title: "Other stuff",
+    contents: (
       <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>
+    ),
+    images: (
+      <Image
+        src="/aboutme/cs2.png"
+        alt="JSA performance"
+        width={1000}
+        height={1000}
+        className="object-cover w-full h-auto"
+      />
+    )
+  },
+  // {
+  //   title: "",
+  //   contents: (
+
+  //   )
+  // },
+];
+
+function Contents() {
+  return (
+    <>
+      <h1>About Me</h1>
+      {
+        sections.map((obj, i) => (
+          <div key={i} className={"my-4 flex max-md:flex-col " + (i % 2 === 1 && "md:text-right md:flex-row-reverse")}>
+            <div className="flex flex-col md:w-[45%] my-auto">
+              <h2>{obj.title}</h2>
+              {obj.contents}
+            </div>
+            <div className="md:w-[55%] p-8">
+              {obj.images}
+            </div>
+          </div>
+        ))
+      }
     </>
   )
 }
diff --git a/app/footer.tsx b/app/footer.tsx
@@ -1,7 +1,11 @@
+import Socials from "@/components/Socials";
+
 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 className="mt-5 w-full py-5 text-center text-gray-900 bg-gray-300 flex">
+      <div className="m-auto">
+        <Socials />
+      </div>
     </footer>
   );
 }
diff --git a/app/globals.css b/app/globals.css
@@ -29,7 +29,7 @@ h2{
 }
 
 p{
-  @apply text-xl
+  @apply text-xl leading-loose
 }
 
 @layer utilities {

diff --git a/app/header.tsx b/app/header.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import Image from "next/image";
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 
@@ -31,7 +31,8 @@ export default function Header() {
   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">
+    <AnimatePresence>
+    <nav className="max-w-screen-x1 flex-wrap flex items-center justify-between mx-auto p-4 fixed w-full z-50 bg-blue-900">
       <motion.div whileHover={{ scale: 1.2 }} animate={{ rotate: logorot }} onClick={() => { setlogorot(logorot + 90) }}
         transition={{ type: "spring", stiffness: 400, damping: 20 }}
       >
@@ -50,7 +51,7 @@ export default function Header() {
       <div className={"w-full md:block md:w-auto" + hidden}>
         <NavBar />
       </div>
-    </nav>
+    </nav></AnimatePresence>
   );
 }
 
@@ -59,21 +60,22 @@ function NavBar() {
 
   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
+          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
+  const onpage = ` max-md:bg-blue-500`;
 
   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">
+      {links.map((obj, i) => <Link key={i} href={obj.link} className="relative"><li key={i} className={liClass + (obj.link === path && (onpage))}>
         {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" />
-          </>
+              initial={{opacity:0,y:20}}
+              animate={{opacity:1,y:0}}
+              exit={{opacity:0,y:20}}
+              className="absolute top-full block h-[2px] w-full bg-black max-md:hidden" />
         )}
+
         {obj.text}
-      </Link></li>)}
+      </li></Link>)}
     </ul>
   );
 }

diff --git a/app/page.tsx b/app/page.tsx
@@ -7,7 +7,7 @@ import Link from "next/link";
 export default function Home() {
   return (
     <PageWrapper>
-      <main className="flex min-h-screen flex-col pt-24">
+      <main className="flex flex-col md:min-h-[calc(100vh-160px)]">
         <Contents />
       </main>
     </PageWrapper>
@@ -17,23 +17,22 @@ export default function Home() {
 function Contents() {
   return (
     <>
-      <h1>Hello!</h1>
-      <p>{"I'm"} Alex, an undergraduate CS student at UMass Amherst. I have many interests, including but not limited to: </p>
-      <ul>
-        <li>Cybersecurity</li>
-        <li>Robotics</li>
-        <li>Tetris</li>
-        <li>Beat saber</li>
-      </ul>
-      <Image
-      src="/20240521_192316.jpg"
-      alt=""
-      width={1000}
-      height={100}
-      priority
-       />
-
-
+      <div className="flex md:flex-row max-md:flex-col my-auto">
+        <div className="md:mr-12 my-auto">
+          <h1>Hello!</h1>
+          <p className="">{"I'm"} Alex, an undergraduate CS student at UMass Amherst.  <br />
+            I am currently exploring and learning many things, ranging from cybersecurity to diabolo tricks and everything in between. </p>
+        </div>
+        <div className="md:w-[100%] relative my-auto" >
+          <Image
+            src="/me/20240521_192316.jpg"
+            alt=""
+            width={1000}
+            height={1000}
+            className="object-cover w-full h-auto"
+          />
+        </div>
+      </div>
     </>
   )
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ h2{ @@
     }
     p{
-      @apply text-xl
+      @apply text-xl leading-loose
     }
     @layer utilities {
@@ Expand Down @@