implement project setup

package.json

@@ -13,18 +13,21 @@
   },
   "dependencies": {
     "@tanstack/react-query": "~5.53.3",
+    "colorthief": "^2.6.0",
     "lucide-react": "~0.417.0",
     "motion": "^12.23.12",
     "next": "~14.2.10",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "react-icons": "^5.5.0",
     "react-loading": "^2.0.3",
-    "react-scroll-parallax": "^3.4.5"
+    "react-scroll-parallax": "^3.4.5",
+    "react-type-animation": "^3.2.0"
   },
   "devDependencies": {
     "@eslint/js": "~9.8.0",
     "@tanstack/eslint-plugin-query": "~5.53.0",
+    "@types/colorthief": "^2.6.0",
     "@types/node": "~22.1.0",
     "@types/react": "~18.3.3",
     "@types/react-dom": "~18.3.0",

src/app/components/About.tsx

@@ -1,4 +1,4 @@
 const About = () => {
-  return <div className="h-screen">About</div>;
+  return <div className=""></div>;
 };
 export default About;

src/app/components/Footer.tsx

@@ -1,4 +1,4 @@
 const Footer = () => {
-  return <div className="h-screen">Hello</div>;
+  return <div className="w-full py-8 text-center">© Kevin Loritsch</div>;
 };
 export default Footer;

src/app/components/Header.tsx

@@ -0,0 +1,26 @@
+import { TypeAnimation } from "react-type-animation";
+
+interface headerProps {
+  title: string;
+  subtitle?: string;
+}
+
+const Header = ({ title, subtitle }: headerProps) => {
+  return (
+    <div className="text-center">
+      <div className="text-4xl font-bold">{title}</div>
+      {subtitle && (
+        <div className="text-2xl text-gray-500">
+          <TypeAnimation
+            sequence={[subtitle, 2000, "", 100]}
+            wrapper="span"
+            cursor={true}
+            repeat={Infinity}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Header;

src/app/components/Navbar.tsx

@@ -29,8 +29,8 @@ const Navbar = () => {
       </div>
       <div className="font flex w-1/2 flex-row items-center justify-end text-right">
         {navbarItems.map(({ name, link }, i) => (
-          <motion.div {...fadeIn(i / 5)}>
-            <motion.div key={i} className="pr-4" {...hoverAnimation}>
+          <motion.div {...fadeIn(i / 5)} key={i}>
+            <motion.div className="pr-4" {...hoverAnimation}>
               <Link href={link}> {name}</Link>
             </motion.div>
           </motion.div>

src/app/components/Project.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Image, { StaticImageData } from "next/image";
+import { motion } from "motion/react";
+
+interface projectProps {
+  image: StaticImageData;
+  title: string;
+  description: string;
+}
+
+const Projects = ({ image, title, description }: projectProps) => {
+  return (
+    <div className="mx-8">
+      <p className="text-center text-xl font-bold">{title}</p>
+      <div className="mb-4 text-center">Deploy Links</div>
+
+      <motion.div
+        className="group relative aspect-[3/2] overflow-hidden rounded-2xl shadow-xl"
+        whileHover={{ scale: 1.05, rotate: 1 }}
+      >
+        <motion.div
+          className="absolute inset-0"
+          initial={{ opacity: 1 }}
+          whileHover={{ opacity: 0.2, scale: 1.1 }}
+          transition={{ duration: 0.5 }}
+        >
+          <Image
+            src={image}
+            alt={title}
+            fill
+            className="rounded-2xl object-cover"
+          />
+        </motion.div>
+
+        <motion.div
+          className="absolute inset-0 flex items-center justify-center rounded-2xl bg-black/70 p-6 text-center"
+          style={{ backdropFilter: "blur(6px)" }}
+          initial={{ opacity: 0 }}
+          whileHover={{ opacity: 1 }}
+        >
+          <p className="text-sm text-white">{description}</p>
+        </motion.div>
+      </motion.div>
+      <div className="flex flex-row justify-evenly pt-3">
+        <div className="mr-auto">Tech Stack</div>
+        <div className="ml-auto">Role on Project</div>
+      </div>
+    </div>
+  );
+};
+
+export default Projects;

src/app/components/Projects.tsx

@@ -0,0 +1,22 @@
+import Header from "@/app/components/Header";
+import Project from "@/app/components/Project";
+import projectItems from "@/data/ProjectsData";
+
+const Projects = () => {
+  return (
+    <div>
+      <Header
+        title={"My Projects"}
+        subtitle={"Hover to learn about each project!"}
+      />
+      <div className="flex w-full flex-row flex-wrap justify-center">
+        {projectItems.map(({ image, title, description }, i) => (
+          <div key={i} className="w-2/5 py-8">
+            <Project image={image} title={title} description={description} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+export default Projects;

src/app/page.tsx

@@ -1,12 +1,14 @@
 "use client";
 import Landing from "@/app/components/Landing";
 import About from "@/app/components/About";
+import Projects from "@/app/components/Projects";
 
 const Home = () => {
   return (
     <div>
       <Landing />
       <About />
+      <Projects />
     </div>
   );
 };

src/data/ProjectsData.ts

@@ -0,0 +1,68 @@
+import { StaticImageData } from "next/image";
+import ULA from "@/public/projects/ula.png";
+import Tree from "@/public/projects/tree.png";
+import FinalTake from "@/public/projects/finalTake.png";
+import PTSO from "@/public/projects/ptso.png";
+import Chess from "@/public/projects/chess.png";
+import AviatR from "@/public/projects/aviatr.png";
+import Leap from "@/public/projects/leap.png";
+import SquareRoot from "@/public/projects/squareRoot.png";
+
+interface ProjectItem {
+  image: StaticImageData;
+  title: string;
+  description: string;
+}
+
+const projectItems: ProjectItem[] = [
+  {
+    image: ULA,
+    title: "ULA Website",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    image: Tree,
+    title: "Data Structures Website",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    image: PTSO,
+    title: "PTSO Website",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    image: FinalTake,
+    title: "Hackathon Game",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    image: AviatR,
+    title: "Aviat'R Website",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    image: Chess,
+    title: "Parallelized Chess",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    image: Leap,
+    title: "Leap Website",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    image: SquareRoot,
+    title: "Quick Magic Square Root",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+];
+
+export default projectItems;