diff --git a/package.json b/package.json
index 04b3ef5..8a21119 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "next": "14.1.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-intersection-observer": "^8.29.1",
     "sharp": "^0.33.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d05e24a..e1def69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ dependencies:
   react-dom:
     specifier: ^18.3.1
     version: 18.3.1(react@18.3.1)
+  react-intersection-observer:
+    specifier: ^8.29.1
+    version: 8.29.1(react@18.3.1)
   sharp:
     specifier: ^0.33.4
     version: 0.33.4
@@ -2857,6 +2860,14 @@ packages:
       scheduler: 0.23.2
     dev: false
 
+  /react-intersection-observer@8.29.1(react@18.3.1):
+    resolution: {integrity: sha512-JLxJ4V0L73ailfvbYQ2/lfAyirtud1WsRsYnzHyVLMfQff1AIG1lWdC5XaGSK4yb9jZHVbbNsrVIO3PJm03koQ==}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0|| ^17.0.0
+    dependencies:
+      react: 18.3.1
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
diff --git a/public/images/projects/war.gif b/public/images/projects/war.gif
new file mode 100644
index 0000000..0df37bc
Binary files /dev/null and b/public/images/projects/war.gif differ
diff --git a/public/projects.json b/public/projects.json
index ca7dc80..e60d95b 100644
--- a/public/projects.json
+++ b/public/projects.json
@@ -1,15 +1,14 @@
 [
   {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
+    "name": "WAR",
+    "description": "Fully customizable Clan/Guild system with integrated Clan War",
+    "category": "Minecraft",
+    "imageUrl": "/images/projects/war.gif",
     "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
+      "Github": "https://github.com/MatzHilven/WAR"
     },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
+    "languages": ["Java"],
+    "tags": ["1.12", "Archived"]
   },
   {
     "name": "Project Beta",
@@ -37,1105 +36,5 @@
     "socials": {},
     "languages": ["Java"],
     "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-
-  {
-    "name": "Project Alpha",
-    "description": "Description for Project Alpha",
-    "category": "Web",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Java", "TypeScript"],
-    "tags": ["Frontend", "Backend"]
-  },
-  {
-    "name": "Project Beta",
-    "description": "Description for Project Beta",
-    "category": "Minecraft",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "Github": "https://github.com" },
-    "languages": ["Rust", "Go"],
-    "tags": ["1.8", "Fullstack"]
-  },
-  {
-    "name": "Project Gamma",
-    "description": "Description for Project Gamma",
-    "category": "Discord",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": { "YouTube": "https://youtube.com" },
-    "languages": ["TypeScript"],
-    "tags": ["Backend", "Archived"]
-  },
-  {
-    "name": "Project Delta",
-    "description": "Description for Project Delta",
-    "category": "Unity",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {},
-    "languages": ["Java"],
-    "tags": ["1.17", "Frontend"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
-  },
-  {
-    "name": "Project Epsilon",
-    "description": "Description for Project Epsilon",
-    "category": "Misc",
-    "imageUrl": "https://via.placeholder.com/150",
-    "socials": {
-      "Github": "https://github.com",
-      "YouTube": "https://youtube.com"
-    },
-    "languages": ["Go", "Rust"],
-    "tags": ["Fullstack", "Paper"]
   }
 ]
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4d6cf5a..6e31a38 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,12 +2,9 @@ import './globals.css'
 import '@mantine/core/styles.css'
 
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
 import React from 'react'
 import { ColorSchemeScript, MantineProvider } from '@mantine/core'
 
-const inter = Inter({ subsets: ['latin'] })
-
 export const metadata: Metadata = {
   title: 'Matz Hilven',
   description: 'todo',
@@ -23,7 +20,7 @@ export default function RootLayout({
       <head>
         <ColorSchemeScript />
       </head>
-      <body className={inter.className}>
+      <body className="dark">
         <div className="bg-bg">
           <MantineProvider>{children}</MantineProvider>
         </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 824df0a..ce71969 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
-import { Project, Tag, projectsSchema } from '@/typings/project'
+import React, { useState, useEffect, useMemo } from 'react'
 import { ProjectCard } from '@/components/ProjectCard'
 import projectsData from '../../public/projects.json'
+import { projectsSchema, Project } from '@/typings/project'
+import { useInView } from 'react-intersection-observer'
 
 const Page = () => {
   const parsedProjects = projectsSchema.safeParse(projectsData)
@@ -16,63 +17,60 @@ const Page = () => {
   const projects: Project[] = parsedProjects.data
 
   const [currentPage, setCurrentPage] = useState(1)
-  const [itemsPerPage, setItemsPerPage] = useState<number>(4)
-  const [filterTag, setFilterTag] = useState<Tag | null>(null)
+  const [itemsPerPage] = useState<number>(12)
+  const [filterTag, setFilterTag] = useState<string | null>(null)
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
 
+  const { ref, inView } = useInView({
+    threshold: 1.0,
+  })
+
   const handleFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setFilterTag(
-      event.target.value === 'All' ? null : (event.target.value as Tag)
-    )
-    setCurrentPage(1) // Reset to the first page when filter changes
+    setFilterTag(event.target.value === 'All' ? null : event.target.value)
+    setCurrentPage(1)
   }
 
   const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     setSortOrder(event.target.value as 'asc' | 'desc')
-    setCurrentPage(1) // Reset to the first page when sort order changes
+    setCurrentPage(1)
   }
 
+  const filteredAndSortedProjects = useMemo(() => {
+    let updatedProjects = filterTag
+      ? projects.filter(project => project.tags.includes(filterTag))
+      : projects
+
+    updatedProjects = [...updatedProjects].sort((a, b) => {
+      if (sortOrder === 'asc') {
+        return a.name.localeCompare(b.name)
+      } else {
+        return b.name.localeCompare(a.name)
+      }
+    })
+
+    return updatedProjects
+  }, [projects, filterTag, sortOrder])
+
+  const visibleProjects = useMemo(() => {
+    return filteredAndSortedProjects.slice(0, currentPage * itemsPerPage)
+  }, [filteredAndSortedProjects, currentPage, itemsPerPage])
+
   useEffect(() => {
-    const handleResize = () => {
-      const cardWidth = 240 // Width of a single card (adjust as needed)
-      const windowWidth = window.innerWidth
-      const newItemsPerPage = Math.floor(windowWidth / cardWidth)
-      setItemsPerPage(newItemsPerPage > 0 ? newItemsPerPage : 1)
+    if (
+      inView &&
+      currentPage * itemsPerPage < filteredAndSortedProjects.length
+    ) {
+      setCurrentPage(prevPage => prevPage + 1)
     }
-
-    handleResize()
-
-    window.addEventListener('resize', handleResize)
-
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-
-  const filteredProjects = filterTag
-    ? projects.filter(project => project.tags.includes(filterTag))
-    : projects
-
-  const sortedProjects = [...filteredProjects].sort((a, b) => {
-    if (sortOrder === 'asc') {
-      return a.name.localeCompare(b.name)
-    } else {
-      return b.name.localeCompare(a.name)
-    }
-  })
-
-  const indexOfLastItem = currentPage * itemsPerPage
-  const indexOfFirstItem = indexOfLastItem - itemsPerPage
-  const currentProjects = sortedProjects.slice(
-    indexOfFirstItem,
-    indexOfLastItem
-  )
-
-  const totalPages = Math.ceil(sortedProjects.length / itemsPerPage)
+  }, [inView, currentPage, itemsPerPage, filteredAndSortedProjects.length])
 
   return (
-    <div className="flex min-h-screen flex-col items-center p-4 md:p-8">
-      <div className="mb-8 text-2xl font-bold">Matz Hilven</div>
+    <div className="flex min-h-screen flex-col items-center bg-white p-4 text-gray-900 dark:bg-gray-900 dark:text-gray-100 md:p-8">
       <div className="mb-4 flex gap-4">
-        <select onChange={handleFilterChange} className="rounded border p-2">
+        <select
+          onChange={handleFilterChange}
+          className="rounded border border-gray-300 bg-white p-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+        >
           <option value="All">All Tags</option>
           {[...new Set(projects.flatMap(project => project.tags))].map(tag => (
             <option key={tag} value={tag}>
@@ -80,32 +78,20 @@ const Page = () => {
             </option>
           ))}
         </select>
-        <select onChange={handleSortChange} className="rounded border p-2">
+        <select
+          onChange={handleSortChange}
+          className="rounded border border-gray-300 bg-white p-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+        >
           <option value="asc">Sort by Name (A-Z)</option>
           <option value="desc">Sort by Name (Z-A)</option>
         </select>
       </div>
-      <div className="mx-4 flex flex-wrap justify-center gap-4">
-        {currentProjects.map((project: Project, index: number) => (
+      <div className="m-8 flex flex-wrap justify-center gap-6">
+        {visibleProjects.map((project, index) => (
           <ProjectCard project={project} key={index} />
         ))}
       </div>
-      <div className="mt-4 flex gap-4">
-        <button
-          onClick={() => setCurrentPage(currentPage - 1)}
-          disabled={currentPage === 1}
-          className="rounded border px-4 py-2 disabled:opacity-50"
-        >
-          Previous
-        </button>
-        <button
-          onClick={() => setCurrentPage(currentPage + 1)}
-          disabled={currentPage === totalPages}
-          className="rounded border px-4 py-2 disabled:opacity-50"
-        >
-          Next
-        </button>
-      </div>
+      <div ref={ref}></div>
     </div>
   )
 }
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index cfde2e0..00de45b 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -6,6 +6,9 @@ import {
   IconBrandRust,
   IconBrandGolang,
   IconBrandTypescript,
+  IconDiamond,
+  IconBrandKotlin,
+  IconBrandPython,
 } from '@tabler/icons-react'
 
 type Props = {
@@ -13,20 +16,24 @@ type Props = {
 }
 
 const socialIcons: Record<Social, React.JSX.Element> = {
-  Github: <IconBrandGithub className="h-5 w-5" />,
-  YouTube: <IconBrandYoutube className="h-5 w-5" />,
+  Github: <IconBrandGithub />,
+  YouTube: <IconBrandYoutube />,
 }
 
 const languageIcons: Record<Language, React.JSX.Element> = {
-  Java: <IconCoffee className="h-5 w-5" />,
-  Rust: <IconBrandRust className="h-5 w-5" />,
-  Go: <IconBrandGolang className="h-5 w-5" />,
-  TypeScript: <IconBrandTypescript className="h-5 w-5" />,
+  Java: <IconCoffee color="#b07219" />,
+  Rust: <IconBrandRust color="#dea584" />,
+  Go: <IconBrandGolang color="#00ADD8" />,
+  Ruby: <IconDiamond color="#701516" />,
+  Kotlin: <IconBrandKotlin color="#7f52ff" />,
+  TypeScript: <IconBrandTypescript color="#3178C6" />,
+  Python: <IconBrandPython color="#306998" />,
 }
 
 const tagStyles: Record<Tag, string> = {
   '1.8': 'text-orange-500 border-orange-500',
   '1.17': 'text-orange-500 border-orange-500',
+  '1.12': 'text-orange-500 border-orange-500',
   Paper: 'text-blue-500 border-blue-500',
   Bungee: 'text-blue-500 border-blue-500',
   Frontend: 'text-cyan-500 border-cyan-500',
@@ -37,48 +44,51 @@ const tagStyles: Record<Tag, string> = {
 
 export const ProjectCard = ({ project }: Props) => {
   return (
-    <div className="h-80 w-80 transform overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105">
+    <div className="relative flex h-80 w-64 flex-col overflow-hidden rounded-lg bg-white shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-800">
       <img
         src={project.imageUrl}
         alt={project.name}
-        className="h-40 w-full object-cover"
+        className="h-32 w-full rounded-t-lg object-cover"
       />
-      <div className="flex flex-grow flex-col justify-between p-4">
+      <div className="flex flex-1 flex-col p-2 text-center">
         <div>
-          <div className="mb-2 text-xl font-bold">{project.name}</div>
-          <div className="mb-2 flex flex-wrap gap-2">
+          <div className="truncate text-xl font-bold text-gray-900 dark:text-gray-100">
+            {project.name}
+          </div>
+          <div className="mt-2 flex flex-wrap justify-center gap-2">
             {project.tags.map(tag => (
               <span
                 key={tag}
-                className={`rounded-full border px-2 py-1 text-xs font-semibold ${tagStyles[tag] || 'border-gray-500 text-gray-500'}`}
+                className={`rounded-full border px-2 py-1 text-xs ${tagStyles[tag]} dark:border-opacity-50`}
               >
                 {tag}
               </span>
             ))}
           </div>
-          <div className="text-sm text-gray-700">{project.description}</div>
         </div>
-        <div className="mt-4 flex items-center justify-between">
-          <div className="flex space-x-4">
-            {Object.entries(project.socials).map(([social, url]) => (
+        <div className="mt-2 flex-1 overflow-hidden text-ellipsis text-gray-600 dark:text-gray-400">
+          {project.description}
+        </div>
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 flex items-center justify-between bg-white p-2 dark:bg-gray-800">
+        <div className="flex gap-2">
+          {project.socials &&
+            Object.entries(project.socials).map(([social, url]) => (
               <a
                 key={social}
                 href={url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-gray-700"
+                className="hover:animate-jump transition-colors"
               >
                 {socialIcons[social as Social]}
               </a>
             ))}
-          </div>
-          <div className="flex space-x-2">
-            {project.languages.map(language => (
-              <span key={language} className="text-xl text-gray-700">
-                {languageIcons[language]}
-              </span>
-            ))}
-          </div>
+        </div>
+        <div className="flex gap-2">
+          {project.languages.map(language => (
+            <div key={language}>{languageIcons[language]}</div>
+          ))}
         </div>
       </div>
     </div>
diff --git a/src/typings/project.ts b/src/typings/project.ts
index 94b53dc..6fab279 100644
--- a/src/typings/project.ts
+++ b/src/typings/project.ts
@@ -7,12 +7,16 @@ export const LanguageSchema = z.union([
   z.literal('Java'),
   z.literal('Rust'),
   z.literal('Go'),
+  z.literal('Ruby'),
+  z.literal('Kotlin'),
   z.literal('TypeScript'),
+  z.literal('Python'),
 ])
 export type Language = z.infer<typeof LanguageSchema>
 
 export const TagSchema = z.union([
   z.literal('1.8'),
+  z.literal('1.12'),
   z.literal('1.17'),
   z.literal('Paper'),
   z.literal('Bungee'),
@@ -36,7 +40,7 @@ export const ProjectSchema = z.object({
   name: z.string(),
   description: z.string(),
   category: CategorySchema,
-  imageUrl: z.string().url(),
+  imageUrl: z.string(),
   socials: z.record(SocialSchema, z.string().url()).optional(),
   languages: z.array(LanguageSchema),
   tags: z.array(TagSchema),
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0a87ca9..70c2aeb 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,26 +18,24 @@ const config = {
       },
     },
     extend: {
+      dropShadow: {
+        glow: [
+          '0 0px 20px rgba(255,255, 255, 0.35)',
+          '0 0px 65px rgba(255, 255,255, 0.2)',
+        ],
+      },
       keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
+        jump: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
         },
       },
       animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-      colors: {
-        bg: '#F9FAFB',
+        jump: 'jump 0.4s ease-in-out',
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [],
 } satisfies Config
 
 export default config