feat: add new project

app/projects/[slug]/page.jsx

@@ -68,7 +68,7 @@ function Page({ params }) {
 			</FixedButon>
 			<div className="min-h-screen flex justify-center items-center">
 				<div className="mx-auto grid grid-cols-1 md:grid-cols-2  mt-10 md:mt-0">
-					<div className="flex justify-center items-start flex-col mb-5 space-y-10 mx-auto">
+					<div className="min-h-screen sm:min-h-0 flex justify-center items-start flex-col mb-5 space-y-10 mx-auto">
 						<div>
 							<h2 className="uppercase font-normal text-lg tracking-[8px] text-neutral-400">
 								Project
@@ -147,14 +147,15 @@ function Page({ params }) {
 				</div>
 			</div>
 			{/* images */}
-			<div className="mx-auto grid grid-cols-1 p-5 md:p-20  w-full h-auto">
+			<div className="mx-auto grid grid-cols-1 p-5 md:p-20 w-full">
-				<div className="w-full h-auto aspect-video">
+				<div className="w-full h-auto text-center flex flex-col justify-center ">
 					{data.images.map((image, index) => (
 						<Image
 							key={index}
 							src={image}
 							alt={`Project Image ${index + 1}`}
-							className="w-full h-full mb-5"
+							className="mb-5 max-h-screen w-auto"
+							layout="responsive"
 							width={1920}
 							height={1080}
 						/>

app/projects/archive/page.jsx

@@ -7,6 +7,13 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import FixedButon from "@/components/FixedButton";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 const projects = [
+	{
+		year: "2023",
+		title: "LUDOang",
+		tech: "Python, Pygame, OpenGL",
+		github: "https://github.com/Alvalens/ludo-game",
+		preview: "https://github.com/Alvalens/ludo-game/releases/tag/pre-release"
+	},
 	{
 		year: "2023",
 		title: "React Realtime Chat",

app/projects/page.jsx

@@ -11,6 +11,7 @@ import ReactChat2 from "@/public/projects/react-chat2.png";
 import ReactChat3 from "@/public/projects/react-chat3.png";
 import ProjectAll from "@/public/img/projects-all.jpg";
 // main project image
+import LUDOang from "@/public/projects/main-project/ludo.png";
 import ReactChatMain from "@/public/projects/main-project/react-chat.png";
 import ReactTools from "@/public/projects/main-project/react-tools.png";
 import AlephBot from "@/public/projects/main-project/aleph-bot.png";
@@ -25,6 +26,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 const projects = [
+	{
+		title: "LUDOang",
+		desc: "LUDOang is a game created using python and pygame. This game is inspired by LUDO game.",
+		year: "2023",
+		tech: "Python, Pygame, OpenGL",
+		bg: LUDOang,
+		slug: "ludoang",
+	},
 	{
 		title: "React Chat WebApp",
 		desc: "My second React project. This project is a realtime chat webapp that I created using ReactJS, Firebase, and TailwindCSS.",
@@ -84,7 +93,6 @@ const projects = [
 ];
 
 export default function Page() {
-
 	useEffect(() => {
 		window.scrollTo(0, 0);
 	}, []);
@@ -122,8 +130,11 @@ export default function Page() {
 						</h1>
 						<Hr />
 						<p className="title  text-xl mt-4 tracking-wider text-gray-900 leading-[1.7rem] mb-5">
-							List of my projects that I have done and 								<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent"> currently
+							List of my projects that I have done and{" "}
-							working on.</span>
+							<span className="bg-transparent md:bg-gray-100 bg-opacity-50 xl:bg-transparent">
+								{" "}
+								currently working on.
+							</span>
 						</p>
 						<motion.div
 							initial={{ opacity: 0, y: 100 }}

json/data.json

@@ -1,5 +1,26 @@
 {
   "Projects": [
+    {
+      "title": "LUDOang",
+      "desc": [
+        "LUDOang is a game that my team and I created for a final project in my university. The game is built python, pygame, and OpenGL. The game is a 2D game that is inspired by a Ludo game. The game has a few features such randomZone, and a 3D dice.",
+        "RandomZone is a feature that allows the player to get a random number of steps. The 3D dice is a feature that allows the player to roll a 3D dice. The game also has a few other features menuy screen and also loading screen.", "Beside that the game also has a audio theme that will play when the game is started. The game also has a few sound effects such as dice roll sound, and a sound when the player win the game."
+      ],
+      "year": "2023",
+      "preview": "https://github.com/Alvalens/ludo-game/releases/tag/pre-release",
+      "code": "https://github.com/Alvalens/ludo-game",
+      "images": [
+        "/projects/LUDOang/ludo1.png",
+        "/projects/LUDOang/ludo2.png",
+        "/projects/LUDOang/ludo3.png"
+      ],
+      "tech": [
+        "Python",
+        "Pygame",
+        "OpenGL"
+      ], 
+      "slug": "ludoang"
+    },
     {
       "title": "React Realtime Chat",
       "desc": [