diff --git a/src/assets/img/medium/tripvisor.png b/src/assets/img/medium/tripvisor.png
new file mode 100644
index 0000000..4980a34
Binary files /dev/null and b/src/assets/img/medium/tripvisor.png differ
diff --git a/src/assets/img/original/tripvisor.png b/src/assets/img/original/tripvisor.png
new file mode 100644
index 0000000..3bc2cca
Binary files /dev/null and b/src/assets/img/original/tripvisor.png differ
diff --git a/src/components/SectionHeader.tsx b/src/components/SectionHeader.tsx
index cdcbcee..fb9038e 100644
--- a/src/components/SectionHeader.tsx
+++ b/src/components/SectionHeader.tsx
@@ -7,7 +7,7 @@ interface SectionHeaderProps {
 
 export function SectionHeader({ title, subtitle }: SectionHeaderProps) {
   return (
-    <div className="flex flex-col items-center justify-center h-24 mt-8">
+    <div className="flex flex-col items-center justify-center h-24 mt-16">
       <p className="text-4xl font-bold">{title}</p>
       <p className="text-md ">{subtitle}</p>
       <Divider className="m-2" />
diff --git a/src/data/projects.tsx b/src/data/projects.tsx
new file mode 100644
index 0000000..f139efa
--- /dev/null
+++ b/src/data/projects.tsx
@@ -0,0 +1,71 @@
+import tripvisor from "../assets/img/medium/tripvisor.png";
+
+const projectsData = {
+  projects: [
+    {
+      title: "Distributed File-Sharing Service",
+      description: "Developed a cross-platform peer-to-peer file-sharing service in Go, utilizing consistent hashing in a distributed ring. Designed efficient mechanisms for file lookup, caching, replication, and consistency between peers.",
+      image: "https://via.placeholder.com/150",
+      skills: ["Go", "Distributed Systems", "Consistent Hashing"],
+      // githubUrl: "https://github.com/DarthAV",
+    },
+    {
+      title: "Scalable File Storage Server/Client",
+      description: "Developed a scalable file-sharing application in C using POSIX APIs, enabling concurrent handling of hundreds of clients with non-blocking I/O and epoll. Implemented a custom text-based protocol for client-server communication, supporting CRUD operations, over binary data-transmission protocols.",
+      image: "https://via.placeholder.com/150",
+      skills: ["C", "POSIX APIs", "Non-blocking I/O", "epoll"],
+      // githubUrl: "https://github.com/DarthAV",
+    },
+    {
+      title: "GPU Optimized Parallel Convolutional Layer",
+      description: "Developed a highly optimized parallel convolutional layer for deep learning using CUDA C++ to run on NVIDIA GPUs. Leveraged GPU parallelism to accelerate matrix operations, achieving significant speedup in convolution operations. Integrated memory management and kernel optimization techniques to enhance performance and reduce overhead.",
+      image: "https://via.placeholder.com/150",
+      skills: ["CUDA C++", "GPU Parallelism", "Deep Learning"],
+      // githubUrl: "https://github.com/DarthAV",
+    },
+    {
+      title: "CrimeTrack Los Angeles",
+      description: "Built a React and Express.js web application that allows Los Angeles residents and tourists to access and visualize comprehensive crime data. Integrated OpenStreetMap API and MySQL (GCP SQL) to filter crime by location, date, and type on an interactive map, aiding users in making informed safety decisions. Enabled registered users to report recent crimes to provide real-time insights on city safety.",
+      image: "https://via.placeholder.com/150",
+      skills: ["React", "Express.js", "OpenStreetMap API", "MySQL"],
+      githubUrl: "https://github.com/DarthAV",
+    },
+    {
+      title: "AI Chess Agent",
+      description: "Created an AI-based chess engine using Python capable of playing chess against human opponents or other engines. Implemented alpha-beta pruning, minimax algorithm, and heuristics to evaluate game states and optimize decisions.",
+      image: "https://via.placeholder.com/150",
+      skills: ["Python", "AI", "Alpha-beta Pruning", "Minimax Algorithm"],
+      // githubUrl: "https://github.com/DarthAV",
+    },
+    {
+      title: "E-commerce Market (HackIllinois 2024 Project)",
+      description: "Developed a React and Flask web app that streamlines buying, selling, and renting within the University of Illinois community, with secure Google OAuth integration for user authentication. Designed an intuitive interface with Chakra UI and incorporated a Levenshtein Distance algorithm for precise results. Utilized SQLite for data storage, enabling users to seamlessly manage their listing and connect with customers.",
+      image: "https://via.placeholder.com/150",
+      skills: ["React", "Flask", "Google OAuth", "Chakra UI", "SQLite"],
+      githubUrl: "https://github.com/DarthAV/HackIllinois24",
+    },
+    {
+      title: "TripVisor",
+      description: "Developed a mobile app in React Native and TypeScript to help users plan road trips with interactive maps and route-building capabilities. Integrated Google Maps, Places, and Routes APIs to allow users to add, reorder, and view detailed stop information, including suggested breaks and night-stay options. Leveraged Azure Cosmos DB for NoSQL storage, allowing users to save trip data across devices via Google Account linkage, streamlining the travel planning experience.",
+      image: tripvisor,
+      skills: ["React Native", "TypeScript", "Google Maps API", "Azure Cosmos DB"],
+      // githubUrl: "https://github.com/DarthAV",
+    },
+    {
+      title: "Portfolio Website",
+      description: "Developed a personal portfolio website using React and styled with HeroUI to showcase projects and professional achievements. Designed responsive layouts to ensure a seamless user experience across different screen sizes and devices. Optimized the website for fast load times and search engine visibility (SEO).",
+      image: "https://via.placeholder.com/150",
+      skills: ["React", "HeroUI", "SEO"],
+      githubUrl: "https://github.com/DarthAV/DarthAV.github.io",
+    },
+    {
+      title: "Road Object Image Segmentation for Self-Driving Cars",
+      description: "Developed an image segmentation system in Python and TensorFlow for detecting road objects in vehicular systems. Leveraged the YOLOv3 model “DarkNet”, achieving high segmentation accuracy on a realtime video feed.",
+      image: "https://via.placeholder.com/150",
+      skills: ["Python", "TensorFlow", "YOLOv3", "Image Segmentation"],
+      // githubUrl: "https://github.com/DarthAV",
+    },
+  ],
+};
+
+export default projectsData;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index c0c9f15..0f98435 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -5,6 +5,7 @@ import { Education } from "./sections/Education";
 import { Experience } from "./sections/Experience";
 import { Intro } from "./sections/Intro";
 import { Skills } from "./sections/Skills";
+import { Projects } from "./sections/Projects";
 import { Visited } from "./sections/Visited";
 
 export function Home() {
@@ -19,6 +20,7 @@ export function Home() {
         <Education />
         <Experience />
         <Skills />
+        <Projects />
         {/* <Visited /> */}
       </div>
       <ScrollTop />
diff --git a/src/pages/sections/Projects.tsx b/src/pages/sections/Projects.tsx
new file mode 100644
index 0000000..7eaf40e
--- /dev/null
+++ b/src/pages/sections/Projects.tsx
@@ -0,0 +1,203 @@
+import { Card, CardBody, CardFooter, CardHeader, Chip, Image } from "@heroui/react";
+import { SectionHeader } from "../../components/SectionHeader";
+import projectsData from "../../data/projects";
+import { useState } from "react";
+
+interface ProjectCardProps {
+    title: string;
+    description: string;
+    image?: string;
+    skills: string[];
+    githubUrl?: string;
+}
+
+function ProjectCard({
+    title,
+    description,
+    image,
+    skills,
+    githubUrl,
+}: ProjectCardProps) {
+    const [showDetails, setShowDetails] = useState(false);
+
+    return (
+        <Card isBlurred className="min-h-80 w-72">
+            <CardHeader className="flex flex-col min-h-60 items-center">
+                {!showDetails && image && (
+                    <Image
+                        alt={title + " image"}
+                        height={150}
+                        width={275}
+                        radius="sm"
+                        src={image}
+                        className="mb-4"
+                    />
+                )}
+                <div className="flex flex-col items-center">
+                    <p className="text-lg text-center line-clamp-2 h-14">{title}</p>
+                    {showDetails && (
+                        <p className="text-sm text-center">{description}</p>
+                    )}
+
+                </div>
+            </CardHeader>
+            <CardBody className="flex flex-col items-center">
+                <div className="flex flex-wrap gap-2 mt-2">
+                    {skills.map((skill, index) => (
+                        <Chip key={index} size="sm" variant="flat">
+                            {skill}
+                        </Chip>
+                    ))}
+                </div>
+            </CardBody>
+            <CardFooter>
+                <div className="flex justify-between w-full">
+                    <button
+                        onClick={() => setShowDetails((prev) => !prev)}
+                        className="text-sm text-blue-500"
+                    >
+                        {showDetails ? "Hide Details" : "Show Details"}
+                    </button>
+                    {githubUrl && (
+                        <a
+                            href={githubUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-sm text-blue-500"
+                        >
+                            View on GitHub
+                        </a>
+                    )}
+                </div>
+            </CardFooter>
+        </Card >
+    );
+}
+
+const ScrollableCards = ({ items }: { items: ProjectCardProps[] }) => {
+    return (
+        <div className="flex overflow-x-auto space-x-4 p-4">
+            {items.map((item, idx) => (
+                <div key={idx} className="flex-shrink-0">
+                    <ProjectCard
+                        title={item.title}
+                        description={item.description}
+                        image={item.image}
+                        skills={item.skills}
+                        githubUrl={item.githubUrl}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+}
+
+/*
+const InfiniteMovingCards = ({
+    items,
+    direction = "left",
+    speed = "fast",
+    pauseOnHover = true,
+    className,
+}: {
+    items: {
+        title: string;
+        description: string;
+        image: string;
+        skills: string[];
+        githubUrl: string;
+    }[];
+    direction?: "left" | "right";
+    speed?: "fast" | "normal" | "slow";
+    pauseOnHover?: boolean;
+    className?: string;
+}) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const scrollerRef = React.useRef<HTMLUListElement>(null);
+
+    useEffect(() => {
+        addAnimation();
+    }, []);
+    const [start, setStart] = useState(false);
+    function addAnimation() {
+        if (containerRef.current && scrollerRef.current) {
+            const scrollerContent = Array.from(scrollerRef.current.children);
+
+            scrollerContent.forEach((item) => {
+                const duplicatedItem = item.cloneNode(true);
+                if (scrollerRef.current) {
+                    scrollerRef.current.appendChild(duplicatedItem);
+                }
+            });
+
+            getDirection();
+            getSpeed();
+            setStart(true);
+        }
+    }
+    const getDirection = () => {
+        if (containerRef.current) {
+            if (direction === "left") {
+                containerRef.current.style.setProperty(
+                    "--animation-direction",
+                    "forwards"
+                );
+            } else {
+                containerRef.current.style.setProperty(
+                    "--animation-direction",
+                    "reverse"
+                );
+            }
+        }
+    };
+    const getSpeed = () => {
+        if (containerRef.current) {
+            if (speed === "fast") {
+                containerRef.current.style.setProperty("--animation-duration", "20s");
+            } else if (speed === "normal") {
+                containerRef.current.style.setProperty("--animation-duration", "40s");
+            } else {
+                containerRef.current.style.setProperty("--animation-duration", "80s");
+            }
+        }
+    };
+    return (
+        <div
+            ref={containerRef}
+            className={cn(
+                "scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
+                className
+            )}
+        >
+            <ul
+                ref={scrollerRef}
+                className={cn(
+                    "flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
+                    start && "animate-scroll",
+                    pauseOnHover && "hover:[animation-play-state:paused]"
+                )}
+            >
+                {items.map((item, idx) => (
+                    <ProjectCard
+                        title={item.title}
+                        description={item.description}
+                        image={item.image}
+                        skills={item.skills}
+                        githubUrl={item.githubUrl}
+                    />
+                ))}
+            </ul>
+        </div>
+    );
+};
+*/
+
+export function Projects() {
+    return (
+        <div className="justify-evenly">
+            <SectionHeader title="Projects" subtitle="My Personal Projects" />
+            {/* <InfiniteMovingCards items={projectsData.projects} direction="left" speed="slow" /> */}
+            <ScrollableCards items={projectsData.projects} />
+        </div>
+    );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 91ced4d..9e027d6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,10 +6,21 @@ module.exports = {
     './src/**/*.{html,js,ts,jsx,tsx}',
     "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"
   ],
+  darkMode: "class",
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        scroll: "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
+      },
+      keyframes: {
+        scroll: {
+          to: {
+            transform: "translate(calc(-50% - 0.5rem))",
+          },
+        },
+      },
+    },
   },
-  darkMode: "class",
   plugins: [
     heroui({
       addCommonColors: true,