diff --git a/src/App.tsx b/src/App.tsx
index 875b13fe..fce83ee5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import Route from './components/HashRouter/Route'
 import AboutPage from './components/AboutPage'
 import SkillSet from './components/AboutPage/SkillSet'
 import GithubStats from './components/AboutPage/Github'
+import Projects from './components/Projects'
 // import logo from './logo.svg';
 // import './App.css';
 
@@ -23,6 +24,7 @@ function App () {
         <SkillSet />
         <GithubStats />
         </>} />
+        <Route path='#/projects' component={<Projects />} />
     </HashRouter>
   )
 }
diff --git a/src/components/Projects/index.tsx b/src/components/Projects/index.tsx
new file mode 100644
index 00000000..35f44ae4
--- /dev/null
+++ b/src/components/Projects/index.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react"
+import "./style.css"
+import { LuGitFork, LuGlobe } from "react-icons/lu"
+/**
+ * 
+ * @param param0 
+ * @returns 
+ */
+export function Card({ title, description, image,alt, Badges, svn_link} : {
+    title: string ,
+    description: string,
+    image?: string,
+    alt?: string,
+    Badges?: any,
+    svn_link: string
+}) {
+    return <div style={{ background: "var(--surface0)"}}className="card md:w-80 shadow-xl">
+{image ? 
+    <figure><img src={image} alt={alt || "No Alt"} /></figure>: null}
+    <div className="card-body">
+      <h2 className="card-title text-center text-highlight">
+<a href={svn_link}>{title}</a>
+        {/* <div className="badge badge-secondary">NEW</div> */}
+      </h2>
+      <p>{description}</p>
+      <div className="card-actions justify-end">
+        {/* <div className="badge badge-outline">Fashion</div> 
+        <div className="badge badge-outline">Products</div> */}
+       {Badges ? Badges : ""}
+      </div>
+    </div>
+  </div>
+}
+// oh boy i cannot WAIT for myself to add projects in via git
+export default function Projects() {
+    // most projects should be loaded via github
+    // otherwise they will all be concacted with the github.json file
+    const [githubData, setGithubData] = useState ([])
+const [translateY, setTranslateY] = useState(0)
+// if(translateY > -50) {
+//     setTimeout(() => {
+// setTranslateY(translateY - 10)
+//     }, 40)
+// }
+    const fetchData = () => {
+      return Promise.all([fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100`)
+            .then((response) => response.json()),fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100?page=2`)
+            .then((response) => response.json())])
+
+            .then((data) => 
+                {
+                // console.log([...data[0], ...data[1]])
+                const idsThatAreFound:any = {}
+                const items = [...data[0], ...data[1]].filter(function(item, pos, self) {
+                    if(idsThatAreFound[item.id]) return false;
+                    idsThatAreFound[item.id] = true
+                    return true;
+                })
+                .filter(e => e.topics.includes('github-include-on-site'))
+                console.log(items)
+                //@ts-ignore
+                    setGithubData(items)
+                })
+    }
+    useEffect (() => {
+      fetchData()
+    }, [])
+    return <>
+<div className="hero min-h-screen">
+  <div className="hero-content flex-col lg:flex-row duration-1000 text-center" style={{ transform: `translateY(${translateY}%)`}}>
+    {/* <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg" className="max-w-sm rounded-lg shadow-2xl" /> */}
+    <div>
+      <h1 className="text-5xl font-bold text-highlight lg:mt-20">Projects</h1>
+      {/* <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
+      <button className="btn btn-primary">Get Started</button> */}
+    <div className="grid flex grid-cols-2 md:gap-6 gap-2 text-center mt-5 duration-1000" style={{ transform: `translateY(${-translateY}%)` }}>
+{githubData.map((d: any) => {
+return  <Card title={d.name} description={d.description} key={d.id}  svn_link={d.html_url} Badges={<>
+<div className="inline-flex">
+
+<a  target="_blank" href={d.html_url + '/fork'} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="btn btn-change rounded-full mauve"><LuGitFork /></a>
+{d.homepage ? 
+    <a  target="_blank" href={d.homepage} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="btn btn-change rounded-full mauve"><LuGlobe /></a>
+: null}
+</div>
+<div className="md:inline-flex">
+{d.topics.filter((e:string) => !e.includes('github-include-on-site')).map((topic:string) => {
+    return <div className="badge badge-outline">{topic}</div>
+})}
+</div>
+</>}/>
+
+})}
+    </div>
+    </div>
+  </div>
+</div>
+</>
+}
\ No newline at end of file
diff --git a/src/components/Projects/style.css b/src/components/Projects/style.css
new file mode 100644
index 00000000..aaffa296
--- /dev/null
+++ b/src/components/Projects/style.css
@@ -0,0 +1,13 @@
+.cool-up-animation {
+animation: up 1.5s ease-in-out .1s 1;
+/* animation: name duration timing-function delay iteration-count direction fill-mode; */
+}
+@keyframes up {
+0% {
+    transform: translateY(20%);
+}    
+100% {
+    transform: translateY(-80%);
+
+}
+}
\ No newline at end of file