diff --git a/public/placeholder.png b/public/placeholder.png
new file mode 100644
index 0000000..ed6df8c
Binary files /dev/null and b/public/placeholder.png differ
diff --git a/src/app/portfolio/bruh/page.tsx b/src/app/portfolio/bruh/page.tsx
new file mode 100644
index 0000000..08056e8
--- /dev/null
+++ b/src/app/portfolio/bruh/page.tsx
@@ -0,0 +1,14 @@
+import Link from "next/link"
+
+export default function Sonion() {
+  return (<>
+    <Link href="/portfolio">
+    <div className="fixed w-screen h-screen left-0 top-0 z-10000 items-center flex justify-center backdrop-brightness-50">
+        <div className="space-y-2 max-w-3/5 p-5 bg-blue-950 border-2 border-solid border-gray-600 rounded-4xl z-10001 font-[Bitcount] text-gray-50 flex flex-col text-center justify-center items-center">
+          <h1 className="text-5xl">Where are you trying to go 🥀</h1>
+          <p className="text-xl">click anywhere to return to the portfolio</p>
+      </div>
+      </div>
+    </Link>
+  </>)
+}
\ No newline at end of file
diff --git a/src/app/portfolio/layout.tsx b/src/app/portfolio/layout.tsx
new file mode 100644
index 0000000..5233a95
--- /dev/null
+++ b/src/app/portfolio/layout.tsx
@@ -0,0 +1,30 @@
+import Project from "@/components/project_card";
+import { nextjs_tag, typescript_tag } from "@/types/tags";
+
+export default function Portfolio({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      {children}
+      <div className="flex flex-col space-y-10">
+        <Project
+          tags={[nextjs_tag, typescript_tag]}
+          title="Periodicbrake.fr (this website)"
+          desc="Yeah i think it deserves to be here, so what?"
+          imgsrc="/scrot.png"
+          link="/portfolio/bruh"
+        />
+        <Project
+          tags={[nextjs_tag, typescript_tag]}
+          title="Hollowdex"
+          desc="Sum hollow knight enemy collection shi"
+          imgsrc="/placeholder.png"
+          link="/portfolio/ongoingmaintenance/"
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/app/portfolio/ongoingmaintenance/page.tsx b/src/app/portfolio/ongoingmaintenance/page.tsx
new file mode 100644
index 0000000..d46bdff
--- /dev/null
+++ b/src/app/portfolio/ongoingmaintenance/page.tsx
@@ -0,0 +1,14 @@
+import Link from "next/link"
+
+export default function Sonion() {
+  return (<>
+    <Link href="/portfolio">
+    <div className="fixed w-screen h-screen left-0 top-0 z-10000 items-center flex justify-center backdrop-brightness-50">
+        <div className="space-y-2 max-w-3/5 p-5 bg-blue-950 border-2 border-solid border-gray-600 rounded-4xl z-10001 font-[Bitcount] text-gray-50 flex flex-col text-center justify-center items-center">
+          <h1 className="text-5xl">The page or project you are trying to reach is currently under maintenance</h1>
+          <p className="text-xl">click anywhere to return to the portfolio</p>
+      </div>
+      </div>
+    </Link>
+  </>)
+}
\ No newline at end of file
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 3a09d9a..6b1eed0 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -1,7 +1,3 @@
 export default function Portfolio() {
-  return (
-    <>
-      
-    </>
-  )
-}
\ No newline at end of file
+  return <></>;
+}
diff --git a/src/app/portfolio/underconstruction/page.tsx b/src/app/portfolio/underconstruction/page.tsx
new file mode 100644
index 0000000..5642af8
--- /dev/null
+++ b/src/app/portfolio/underconstruction/page.tsx
@@ -0,0 +1,14 @@
+import Link from "next/link"
+
+export default function Sonion() {
+  return (<>
+    <Link href="/portfolio">
+    <div className="fixed w-screen h-screen left-0 top-0 z-10000 items-center flex justify-center backdrop-brightness-50">
+        <div className="space-y-2 max-w-3/5 p-5 bg-blue-950 border-2 border-solid border-gray-600 rounded-4xl z-10001 font-[Bitcount] text-gray-50 flex flex-col text-center justify-center items-center">
+          <h1 className="text-5xl">The page or project you are trying to reach is currently under construction</h1>
+          <p className="text-xl">click anywhere to return to the portfolio</p>
+      </div>
+      </div>
+    </Link>
+  </>)
+}
\ No newline at end of file
diff --git a/src/components/project_card.tsx b/src/components/project_card.tsx
new file mode 100644
index 0000000..c730a45
--- /dev/null
+++ b/src/components/project_card.tsx
@@ -0,0 +1,48 @@
+import TagType from "@/types/tags";
+import Tag from "@/components/tags";
+import Image from "next/image";
+import Link from "next/link";
+
+interface ProjectInt {
+  tags: TagType[];
+  title: string;
+  desc: string;
+  imgsrc: string;
+  link: string;
+}
+
+export default function Project({
+  tags,
+  title,
+  desc,
+  imgsrc,
+  link,
+}: ProjectInt) {
+  return (
+    <>
+      <Link href={link} className="rounded-4xl">
+        <div
+          id="card_container"
+          className="bg-blue-950 flex flex-col space-y-4 w-200 border-solid border-2 border-gray-600 px-5 py-5 rounded-4xl hover:border-blue-900 transition-all duration-500 hover:shadow-[0_0_20px_rgba(30,58,138,0.5)]"
+        >
+          <Image
+            src={imgsrc}
+            alt="project image"
+            width={1920}
+            height={1080}
+            className="w-full rounded-3xl"
+          />
+          <div className="ml-3">
+            <h1 className="font-[Bitcount] text-gray-50 text-4xl">{title}</h1>
+            <p className="font-[Bitcount] text-gray-50 text-xl">{desc}</p>
+          </div>
+          <div className="flex flex-row space-x-5">
+            {tags.map((tag, index) => (
+              <Tag key={index} tag={tag} />
+            ))}
+          </div>
+        </div>
+      </Link>
+    </>
+  );
+}