feat add new project

app/projects/archive/page.jsx

@@ -7,12 +7,20 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import FixedButon from "@/components/FixedButton";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 const projects = [
+	{
+		year: "2024",
+		title: "Generative Trivia",
+		tech: "NextJS, Gemini AI, TailwindCSS, ShadcnUI, Firebase",
+		github: "https://github.com/Alvalens/generative-trivia",
+		preview: "https://generative-trivia.vercel.app/",
+	},
 	{
 		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"
+		preview:
+			"https://github.com/Alvalens/ludo-game/releases/tag/pre-release",
 	},
 	{
 		year: "2023",

app/projects/page.jsx

@@ -6,18 +6,18 @@ import Button from "@/components/Button";
 import Image from "next/legacy/image";
 
 // images
-import ReactChat1 from "@/public/projects/react-chat.png";
+import ReactChat1 from "@/public/projects/trivia/trivia1.png";
-import ReactChat2 from "@/public/projects/react-chat2.png";
+import ReactChat2 from "@/public/projects/trivia/trivia2.png";
-import ReactChat3 from "@/public/projects/react-chat3.png";
+import ReactChat3 from "@/public/projects/trivia/trivia3.png";
 import ProjectAll from "@/public/img/projects-all.jpg";
 // main project image
+import Trivia from "@/public/projects/main-project/trivia.png";
 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";
 import LPTK from "@/public/projects/lptk/lptk1.png";
 import NUINO from "@/public/projects/ino/ino1.png";
-import UnmuhJember from "@/public/projects/unmuh/unmuh1.png";
 import Porto from "@/public/projects/porto/porto1.png";
 
 import Hr from "@/components/Hr";
@@ -26,6 +26,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 const projects = [
+	{
+		title: "Generative Trivia",
+		desc: "Generative Trivia is a web application that I created using Gemini AI API to generate trivia questions and answers.",
+		year: "2024",
+		tech: "NextJS, Gemini AI API, Tailwind CSS, Shadcn UI, Firebase",
+		bg: Trivia,
+		slug: "trivia",
+	},
 	{
 		title: "LUDOang",
 		desc: "LUDOang is a game created using python and pygame. This game is inspired by LUDO game.",
@@ -74,14 +82,6 @@ const projects = [
 		bg: NUINO,
 		slug: "nu-ino-website",
 	},
-	{
-		title: "Unmuh Jember Landing Page",
-		desc: "Landing page for Universitas Muhammadiyah Jember. This web is made for competition held by Universitas Muhammadiyah Jember.",
-		year: "2023",
-		tech: "HTML, CSS, Javascript",
-		bg: UnmuhJember,
-		slug: "unmuh-jember-landing-page",
-	},
 	{
 		title: "My First Portofolio Website",
 		desc: "My first portofolio website that i created using HTML, CSS, and Javascript. This website is the reason why i learn web development.",
@@ -161,7 +161,7 @@ export default function Page() {
 				<div className="relative w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10">
 					<div className="flex justify-center items-start flex-col mb-5 ">
 						<div className="images relative w-full  aspect-square">
-							<div className="absolute top-28 left-10 w-[50%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
+							<div className="absolute top-28 left-10 h-[40%]  aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150 z-10">
 								<motion.div
 									initial={{ opacity: 0, scale: 0.5, x: 100 }}
 									whileInView={{
@@ -176,10 +176,11 @@ export default function Page() {
 										layout="fill"
 										objectFit="cover"
 										placeholder="blur"
+										className="rat"
 									/>
 								</motion.div>
 							</div>
-							<div className="absolute top-16 right-28 w-[30%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
+							<div className="absolute top-16 right-28 h-[30%]  aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
 								<motion.div
 									initial={{
 										opacity: 0,
@@ -203,7 +204,7 @@ export default function Page() {
 									/>
 								</motion.div>
 							</div>
-							<div className="absolute bottom-16 right-20 w-[40%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
+							<div className="absolute bottom-16 right-20 h-[35%]  aspect-video grayscale hover:grayscale-0 transition-all ease duration-300 hover:scale-150">
 								<motion.div
 									initial={{
 										opacity: 0,
@@ -246,29 +247,26 @@ export default function Page() {
 							type: "spring",
 						}}>
 						<h2 className="text-2xl font-bold tracking-wider mb-3">
-							React Chat WebApp
+							Generative Trivia
 						</h2>
 						<p className="text-gray-600 text-justify title text-lg">
-							React Chat WebApp is a chat application that I
+							A generative trivia website built with Next.js,
-							created using ReactJS, Firebase, and TailwindCSS.
+							Firebase, NextAuth, Google OAuth, and TypeScript.
-							This is my second project using ReactJS and
+							Users can generate trivia questions for predefined
-							Firebase. I created this project to learn more about
+							school subjects and answer them with a unique
-							ReactJS and Firebase. I also use TailwindCSS to make
+							interactive input style. The application supports
-							the UI more beautiful and responsive. In this
+							user authentication with Google and stores data in
-							project i learn many things about react and
+							Firestore. You can see the source code of this
-							firebase, such as react hooks, react router,
+							project on my github account or preview the project
-							firebase authentication, firebase firestore, and
+							by clicking the button below.
-							firebase storage. You can see the source code of
-							this project on my github account or preview the
-							project by clicking the button below.
 						</p>{" "}
 						<div className="mt-3">
 							<Button variation="primary">
-								<Link href="projects/react-chat ">More</Link>
+								<Link href="projects/trivia">More</Link>
 							</Button>
 							<Button variation="secondary">
 								<a
-									href="https://react-chat-rouge.vercel.app/"
+									href="https://generative-trivia.vercel.app/"
 									target="_blank"
 									rel="noopener noreferrer">
 									Preview

json/data.json

@@ -1,5 +1,28 @@
 {
   "Projects": [
+    {
+      "title": "Generative Trivia",
+      "desc": [
+        "A generative trivia website built with Next.js, Firebase, NextAuth, Google OAuth, and TypeScript. Users can generate trivia questions for predefined school subjects and answer them with a unique interactive input style. The application supports user authentication with Google and stores data in Firestore.",
+        "The project is a culmination of my passion for web development and my desire to create a fun and interactive learning platform. The website is designed to be user-friendly and engaging, with a clean and modern interface that appeals to a wide audience. The trivia questions are generated using the Gemini API, which provides a diverse range of questions for users to answer."
+      ],
+      "year": "2023",
+      "preview": "https://generative-trivia.vercel.app/",
+      "code": "https://github.com/Alvalens/generative-trivia",
+      "images": [
+        "/projects/trivia/trivia1.png",
+        "/projects/trivia/trivia2.png",
+        "/projects/trivia/trivia3.png"
+      ],
+      "tech": [
+        "NextJS",
+        "Shadcn UI",
+        "Tailwind CSS",
+        "Firebase",
+        "Gemini API"
+      ], 
+      "slug": "trivia"
+    },
     {
       "title": "LUDOang",
       "desc": [
@@ -137,27 +160,6 @@
       ],
       "slug": "nu-ino-website"
     },
-    {
-      "title": "Unmuh Jember Landing Page",
-      "desc": [
-        "Unmuh Jember landing page is a website that I created for a competition held by Universitas Muhammadiyah Jember. The website is built natively using HTML, CSS, and JavaScript. The website has a few features such as a registration form, a login system, and a dashboard for the admin to manage the contents.",
-        "This project is my first freelance project and my first project using JavaScript. I learned a lot about how to use JavaScript and how to use it to create a website. I also learned how to work with a team and how to manage a project."
-      ],
-      "year": "2023",
-      "preview": "https://alvalens.github.io/unmuh-jember-landing-page/",
-      "code": "https://github.com/Alvalens/unmuh-jember-landing-page",
-      "images": [
-        "/projects/unmuh/unmuh1.png",
-        "/projects/unmuh/unmuh2.png",
-        "/projects/unmuh/unmuh3.png"
-      ],
-      "tech": [
-        "HTML",
-        "CSS",
-        "JavaScript"
-      ],
-      "slug": "unmuh-jember-landing-page"
-    },
     {
       "title": "My First Portofolio Website",
       "desc": [