oooh shiny

src/app/page.tsx

···
 import Email from "@/components/email";
 import styles from "@/styles/Home.module.css";
 import CommitHash from "@/components/helpers/commitHash";
+import SquigglyLine from "@/components/SquigglyLine";
 import {
   SiGithub,
   SiInstagram,
···
   SiBluesky,
 } from "react-icons/si";
 import RoundedImage from "@/components/RoundedImage";
+import Experience from "@/components/experience";
+import AnimatedTitle from "@/components/AnimatedTitle";
 
 export default function Home({}) {
   const [selectedTab, setSelectedTab] = useState("Homepage");
···
       case "Homepage":
         return (
           <>
-            <div className="flex flex-col md:flex-row gap-8 items-center">
+            <div className="flex flex-col md:flex-row gap-8 items-center -mt-8">
               <div className="w-64 flex-shrink-0">
                 <RoundedImage
                   src="/images/jmdark-min.jpg"
···
                 </div>
               </div>
             </div>
-            <div className="py-5" />
-            <Email />
+            <div className="py-2.5" />
+            <SquigglyLine
+              width="104%"
+              frequency={175}
+              amplitude={1}
+              className="-ml-10"
+            />
+            <div className="py-1.5" />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-2">
+              <Experience />
+              <Email />
+            </div>
           </>
         );
       case "Portfolio":
···
     >
       <div className={styles.container}>
         <div className={styles.top}>
-          <h1 className={styles.title} title="Jasper Mayone's website">
-            Jasper Mayone
-          </h1>
+          <AnimatedTitle />
           <div className={styles.menuContainer}>
             <div className={styles.menu} aria-label="main menu">
               {menuItems.map((item) => (
···
             {renderContent()}
           </motion.div>
         </div>
-        <footer className="flex flex-col items-center mb-3.5">
+        <footer className="flex flex-col items-center mb-3.5 -mt-4">
           <div className="flex items-center justify-center">
             <p className="text-xs mr-1.5">
               © {new Date().getFullYear()} Jasper Mayone

src/components/AnimatedTitle.tsx

···
+import React, { useState, useEffect } from "react";
+import styles from "@/styles/AnimatedTitle.module.css";
+
+const AnimatedTitle = () => {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const firstWord = "Jasper";
+  const secondWord = "Mayone";
+  const totalLength = firstWord.length + secondWord.length;
+
+  useEffect(() => {
+    const animate = () => {
+      let currentIndex = -1;
+      const interval = setInterval(() => {
+        currentIndex = (currentIndex + 1) % (totalLength + 1);
+        setActiveIndex(currentIndex === totalLength ? -1 : currentIndex);
+      }, 300);
+      return () => clearInterval(interval);
+    };
+    const animation = animate();
+    return () => animation();
+  }, []);
+
+  return (
+    <h1 className={styles.title} title="Jasper Mayone's website">
+      {firstWord.split("").map((letter, index) => (
+        <span
+          key={`first-${index}`}
+          className="transition-colors duration-300"
+          style={{
+            color: index === activeIndex ? "#4299e1" : "inherit",
+          }}
+        >
+          {letter}
+        </span>
+      ))}{" "}
+      {secondWord.split("").map((letter, index) => (
+        <span
+          key={`second-${index}`}
+          className="transition-colors duration-300"
+          style={{
+            color:
+              index + firstWord.length === activeIndex ? "#4299e1" : "inherit",
+          }}
+        >
+          {letter}
+        </span>
+      ))}
+    </h1>
+  );
+};
+
+export default AnimatedTitle;

src/components/SquigglyLine.tsx

···
+// components/SquigglyLine.tsx
+"use client";
+
+import { FC, useMemo } from "react";
+
+interface SquigglyLineProps {
+  width?: string | number;
+  height?: string | number;
+  color?: string;
+  className?: string;
+  frequency?: number; // How many waves
+  amplitude?: number; // Height of waves
+}
+
+const SquigglyLine: FC<SquigglyLineProps> = ({
+  width = "100%",
+  height = "8",
+  color = "#4299e1",
+  className = "",
+  frequency = 6, // Default number of waves
+  amplitude = 1, // Default wave height
+}) => {
+  const generatePath = useMemo(() => {
+    // Convert width to number if it's a string with units
+    const numWidth =
+      typeof width === "string" ? parseFloat(width) || 100 : width;
+
+    const points = [];
+    const segments = frequency * 2; // Two control points per wave
+    const segmentWidth = numWidth / segments;
+
+    for (let i = 0; i <= segments; i++) {
+      const x = i * segmentWidth;
+      const y = i % 2 === 0 ? 0.5 : i % 4 === 1 ? -amplitude : amplitude;
+      // @ts-expect-error
+      points.push(`${x},${y}`);
+    }
+
+    // Create the path using quadratic curves
+    let path = `M${points[0]}`;
+    for (let i = 1; i < points.length; i++) {
+      // @ts-expect-error
+      const [x, y] = points[i].split(",");
+      path += ` Q${x},${y} ${x},${y}`;
+    }
+
+    return path;
+  }, [width, frequency, amplitude]);
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={`overflow-visible ${className}`}
+      preserveAspectRatio="none"
+      viewBox={`0 -${amplitude} ${typeof width === "number" ? width : 100} ${amplitude * 2}`}
+    >
+      <path
+        d={generatePath}
+        style={{
+          stroke: color,
+          strokeWidth: "1.5px",
+          vectorEffect: "non-scaling-stroke",
+          fill: "none",
+        }}
+      />
+    </svg>
+  );
+};
+
+export default SquigglyLine;

src/components/email.tsx

···
   return (
     <>
       <div className="space-y" aria-label="Jasper's Newsletter Signup">
-        <p className="font-[450]">Newsletter</p>
+        <p className="font-medium text-xl">Newsletter</p>
         <p className="text-gray-500">
           Join my newsletter to get updates on new projects.
         </p>

src/components/experience.tsx

···
+import React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+interface ExperienceItem {
+  title: string;
+  role: string;
+  date: string;
+  link: string;
+}
+
+import { experience } from "@/lib/experience";
+
+export default function Experience() {
+  const midpoint = Math.ceil(experience.length / 2);
+  const leftColumn = experience.slice(0, midpoint);
+  const rightColumn = experience.slice(midpoint);
+
+  const ExperienceColumn = ({ items }: { items: ExperienceItem[] }) => (
+    <div className="flex-1">
+      {items.map((item, index) => (
+        <div key={item.title} className="mb-2">
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value={index.toString()} className="border-b-0">
+              <AccordionTrigger className="py-2 hover:no-underline hover:bg-gray-50 rounded-lg px-3 text-sm">
+                <div className="text-left">{item.title}</div>
+              </AccordionTrigger>
+              <AccordionContent className="px-3 py-2">
+                <p className="text-gray-700 text-sm">{item.role}</p>
+                <p className="text-xs text-gray-500 mt-1">{item.date}</p>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <div className="w-full max-w-6xl mx-auto">
+      <h2 className="font-medium text-xl pb-4">Experience</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <ExperienceColumn items={leftColumn} />
+        <ExperienceColumn items={rightColumn} />
+      </div>
+    </div>
+  );
+}

src/lib/experience.tsx

···
+interface ExperienceItem {
+  title: string;
+  role: string;
+  date: string;
+  link: string;
+}
+
+export const experience: ExperienceItem[] = [
+  {
+    title: "Jewish Community of Greater Stowe (JCOGS), Stowe, VT",
+    role: "Part Time Technology Coordinator",
+    date: "September 2023 - Present",
+    link: "https://www.jcogs.org/",
+  },
+  {
+    title: "The Hack Foundation, Shelburne, VT",
+    role: "Gap Year Software Engineer",
+    date: "September 2023 - July 2024",
+    link: "https://www.hackclub.com/",
+  },
+  {
+    title: "Harwood Union High School, Duxbury, VT",
+    role: "Student Tech Assistant",
+    date: "September 2021 - June 2024",
+    link: "https://huusd.org/",
+  },
+  {
+    title: "Three Mountain Associates, Waitsfield, VT",
+    role: "Rep in training/Intern",
+    date: "June 2018 - Present",
+    link: "https://threemountainassociates.com/",
+  },
+  {
+    title: "Signal Kitchen, Burlington, VT",
+    role: "Event Registration Coordinator & Assistant to Event Director, Bookshop Manager",
+    date: "February 2023 - February 2024",
+    link: "https://signalkitchen.com/",
+  },
+  {
+    title: "Sadie Dog LLC, Warren, VT",
+    role: "Busser / Event Staff",
+    date: "November 2022 - December 2023",
+    link: "https://www.pitcherinn.com/",
+  },
+  {
+    title: "Valley Players Theater, Waitsfield, VT",
+    role: "Lighting Designer & Operator",
+    date: "December 2019 - November 2023",
+    link: "https://valleyplayers.com/",
+  },
+  {
+    title: "DeJames Hospitality, Waitsfield, VT",
+    role: "Busser / Event Staff",
+    date: "May 2022 - May 2023",
+    link: "https://theroundbarn.com/",
+  },
+  {
+    title: "Sugarbush Soaring Association, Warren, VT",
+    role: "Line Crew Member",
+    date: "July 2021 - September 2021",
+    link: "https://sugarbushsoaring.com/",
+  },
+  {
+    title: "Mad River Valley Television, Waitsfield, VT",
+    role: "Media Intern",
+    date: "May 2020 - October 2020",
+    link: "https://mrvtv.com/",
+  },
+];

src/styles/AnimatedTitle.module.css

···
+.title {
+    margin: 0; /* Remove default margin */
+    font-size: 3.5em;
+    font-family: "Cute Notes", sans-serif;
+}

src/styles/DotsBackground.module.css

···
-/* DotsBackground.module.css */
-.container {
-    position: absolute; /* Use absolute positioning to cover the viewport */
-    top: 0;
-    left: 0;
-    width: 100vw; /* Full viewport width */
-    height: 100vh; /* Full viewport height */
-    overflow: hidden;
-    z-index: -10;
-}
-
-.dot {
-    position: absolute;
-    border-radius: 50%;
-    opacity: 0.7;
-    animation: move 5s ease-in-out infinite;
-}
-
-/* Adjust the keyframes to ensure dots stay within the container */
-@keyframes move {
-    0% {
-        transform: translateY(0); /* Adjust if needed */
-    }
-    100% {
-        transform: translateY(
-            calc(100% - 100px)
-        ); /* Ensure dots don’t exceed container height */
-    }
-}

src/styles/Home.module.css

···
 }
 
 .menu p:hover {
-    color: #78cbf2; /* Change text color when hovered (adjust to desired color) */
+    color: #4299e1; /* Change text color when hovered (adjust to desired color) */
 }
 
 .menu p.selected {
     text-decoration: underline wavy;
-    text-decoration-color: #78cbf2; /* Wavy underline for selected items */
+    text-decoration-color: #4299e1; /* Wavy underline for selected items */
 }
 
 .profilePhoto {
···
 }
 
 .footerLink {
-    color: #78cbf2; /* Link color */
+    color: #4299e1; /* Link color */
     text-decoration: underline wavy; /* Add an underline */
     transition: color 0.3s ease; /* Smooth color transition on hover */
 }
 
 .lnk {
-    color: #78cbf2; /* Link color */
+    color: #4299e1; /* Link color */
     text-decoration: underline wavy; /* Add an underline */
     transition: color 0.3s ease; /* Smooth color transition on hover */
 }
 
 .lnk:hover {
-    color: #408da3; /* Change color on hover */
+    color: #003e73; /* Change color on hover */
 }
 
 .footerLink:hover {
-    color: #408da3; /* Change color on hover */
+    color: #003e73; /* Change color on hover */
 }