refactor: change the data retrival to only one json file

app/projects/(project-card)/index.jsx

@@ -22,13 +22,13 @@ export default function projectCard({project, index, activeCategory}){
 						{" "}
 						{/* Add relative here */}
 						<Image
-							src={project.bg.src}
+							src={project.thumbnail}
 							alt="Alvalens"
 							layout="fill"
 							objectFit="cover"
 							placeholder="blur"
 							className="bg-slate-950 opacity-10  group-hover/tes:opacity-100 transition-all ease duration-500"
-							blurDataURL={project.bg.blurDataURL}
+							blurDataURL={project.thumbnail}
 						/>
 						<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
 							<h4 className="text-white">{project.year}</h4>
@@ -37,9 +37,13 @@ export default function projectCard({project, index, activeCategory}){
 							<h1 className="text-3xl font-bold mb-3">
 								{project.title}
 							</h1>
-							<p>{project.desc}</p>
+							<p>
+								{project.desc[0].length > 125
+									? `${project.desc[0].slice(0, 125)}...`
+									: project.desc[0]}
+							</p>
 							<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
-								{project.tech.split(",").map((t, index) => (
+								{project.tech.map((t, index) => (
 									<span
 										key={index}
 										className="m-1 px-4 py-2 bg-gray-600 text-white ">

app/projects/[slug]/page.jsx

@@ -198,6 +198,7 @@ function Page({ params }) {
 							className="mb-5 h-auto max-h-screen max-w-7xl mx-auto"
 							width={1920}
 							height={1080}
+							blurDataURL={image}
 							layout="responsive"
 							objectFit="contain"
 						/>

app/projects/archive/page.jsx

@@ -6,110 +6,10 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import FixedButon from "@/components/FixedButton";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-const projects = [
+import Projects from "@/json/data.json"
-	{
+
-		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: "2024",
-		title: "Saku Senyum",
-		tech: "NextJS, TypeScript, TailwindCSS, ShadcnUI, Prisma, MySQL",
-	},
-	{
-		year: "2024",
-		title: "SIMADUN",
-		tech: "Laravel, Bootstrap, JQuery, MySQL, DataTables",
-	},
-	{
-		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",
-		tech: "Javascript, React Js, Firebase, Daisy UI",
-		github: "https://github.com/Alvalens/react-realtime-chat",
-		preview: "https://react-chat-rouge.vercel.app",
-	},
-	{
-		year: "2023",
-		title: "React Tools",
-		tech: "Javascript, React Js, TailwindCSS",
-		github: "https://github.com/Alvalens/react-tools",
-		preview: "react-tools-flax.vercel.app",
-	},
-	{
-		year: "2023",
-		title: "Aleph Discord Bot",
-		tech: "Python, Serp API, Discord.py",
-		github: "https://github.com/Alvalens/aleph-discord-bot",
-	},
-	{
-		year: "2023",
-		title: "LPTK CUP UM 2023",
-		tech: "PHP, Laravel, Bootstrap, MySQL, jQuery, DataTables",
-		github: "",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "NU INO Website",
-		tech: "PHP, Laravel, Livewire Bootstrap, MySQL, jQuery, DataTables",
-		github: "",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "Unmuh Jember Landing Page",
-		tech: "HTML, CSS, Javascript",
-		github: "https://github.com/Alvalens/unmuh-jember-landing-page",
-		preview: "https://alvalens.github.io/unmuh-jember-landing-page/",
-	},
-	{
-		year: "2022",
-		title: "Alvalens Website",
-		tech: "Javascript, Next Js, TailwindCSS",
-		github: "https://github.com/Alvalens/Alvalens-porto-1",
-		preview: "https://alvalens.my.id",
-	},
-	{
-		year: "2023",
-		title: "Python audio tranlator",
-		tech: "Python, Assembly AI",
-		github: "https://github.com/Alvalens/python-audio-translation",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "A4 Education website",
-		tech: "PHP, Laravel, Bootstrap, MySQL, jQuery, DataTables",
-		github: "https://github.com/Alvalens/A4",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "Cry Cast crypto forecast",
-		tech: "PHP, Laravel, Bootstrap, MySQL",
-		github: "https://github.com/Alvalens/cry-cast",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "Mini Harbor",
-		tech: "Python, Pygame",
-		github: "https://github.com/Alvalens/mini-harbor",
-		preview: "",
-	},
-];
 export default function Page () {
+	const projects = Projects.Projects
   return (
 		<>
 			<main className="overflow-hidden">
@@ -188,12 +88,14 @@ export default function Page () {
 										className="hover:shadow-md transition-all ease duration-500">
 										<td>{project.year}</td>
 										<td>{project.title}</td>
-										<td>{project.tech}</td>
+										<td>
+											{project.tech.map((t) => `${t}, `)}
+										</td>
 										<td>
 											<div className="flex flex-row justify-center items-center">
-												{project.github && (
+												{project.code && (
 													<a
-														href={project.github}
+														href={project.code}
 														title="Link to GitHub">
 														<FontAwesomeIcon
 															icon={faGithub}

app/projects/data/projects.js

@@ -1,93 +0,0 @@
-import Simadun from "@/public/image/projects/main-project/simadun.png";
-import Trivia from "@/public/image/projects/main-project/trivia.png";
-import SakuSenyum from "@/public/image/projects/main-project/saku-senyum.png";
-import LUDOang from "@/public/image/projects/main-project/ludo.png";
-import ReactChatMain from "@/public/image/projects/main-project/react-chat.png";
-import ReactTools from "@/public/image/projects/main-project/react-tools.png";
-import AlephBot from "@/public/image/projects/main-project/aleph-bot.png";
-import LPTK from "@/public/image/projects/web/lptk/lptk1.png";
-import NUINO from "@/public/image/projects/web/ino/ino1.png";
-
-export 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, Typescript, Gemini AI API, Tailwind CSS, Shadcn UI, Firebase",
-		bg: Trivia,
-		slug: "trivia",
-		category: 1,
-	},
-	{
-		title: "Saku Senyum",
-		desc: "A website for UMKM sales management. This project is a client project that I created as a Fullstack Developer.",
-		year: "2024",
-		tech: "NextJS, Typescript, Tailwind CSS, Shadcn UI, Prisma, MySQL",
-		bg: SakuSenyum,
-		slug: "saku-senyum",
-		category: 1,
-	},
-	{
-		title: "Simadun",
-		desc: "Simadun is a exam management system for doctoral that I created as a Fullstack Developer. This project created using Laravel, Bootstrap, and JQuery.",
-		year: "2024",
-		tech: "PHP, Laravel, Bootstrap, JQuery, MySQL, Datatables",
-		bg: Simadun,
-		slug: "simadun",
-		category: 1,
-	},
-	{
-		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",
-		category: 9,
-	},
-	{
-		title: "React Chat WebApp",
-		desc: "My second React project. This project is a realtime chat webapp that I created using ReactJS, Firebase, and TailwindCSS.",
-		year: "2023",
-		tech: "Javascript, React Js, Firebase, Daisy UI",
-		bg: ReactChatMain,
-		slug: "react-chat",
-		category: 1,
-	},
-	{
-		title: "React Tools",
-		desc: "My first React project. contain three main tools: Todo List, Note, and Expense Tracker that usefull for daily activity",
-		year: "2023",
-		tech: "Javascript, React Js, TailwindCSS",
-		bg: ReactTools,
-		slug: "react-tools",
-		category: 1,
-	},
-	{
-		title: "Aleph Discord Bot",
-		desc: "Discord bot that can search images on google and send the result to discord channel, with this bot you can search images on google without leaving discord.",
-		year: "2023",
-		tech: "Python, Serp API, Discord.py",
-		bg: AlephBot,
-		slug: "aleph-discord-bot",
-		category: 9,
-	},
-	{
-		title: "LPTK Cup 2023 Website",
-		desc: "LPTK Cup 2023 is a website for a competition that held by Universitas Negeri Malang. This is my second freelance project using Laravel.",
-		year: "2023",
-		tech: "PHP, Laravel, Bootstrap, JQuery, MySQL",
-		bg: LPTK,
-		slug: "lptk-cup-2023",
-		category: 1,
-	},
-	{
-		title: "NU INO Website",
-		desc: "My first freelance project. This project is a website for a School based on a JALAKAR curriculum. The website is built mainly using Laravel and Bootstrap.",
-		year: "2023",
-		tech: "PHP, Laravel, Livewire, Bootstrap, JQuery, MySQL",
-		bg: NUINO,
-		slug: "nu-ino-website",
-		category: 1,
-	},
-];

app/projects/page.jsx

@@ -3,17 +3,17 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
-import Image from "next/legacy/image";
+import Image from "next/image";
 
 // images
-import ReactChat1 from "@/public/projects/trivia/trivia1.png";
+import ReactChat1 from "@/public/image/projects/web/trivia/trivia1.png";
-import ReactChat2 from "@/public/projects/trivia/trivia2.png";
+import ReactChat2 from "@/public/image/projects/web/trivia/trivia2.png";
-import ReactChat3 from "@/public/projects/trivia/trivia3.png";
+import ReactChat3 from "@/public/image/projects/web/trivia/trivia3.png";
 import ProjectAll from "@/public/image/projects.png";
 
 import Hr from "@/components/Hr";
 import ProjectCard from "./(project-card)";
-import { projects } from "./data/projects";
+import Projects from "@/json/data.json";
 import FixedButon from "@/components/FixedButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
@@ -26,6 +26,8 @@ const category = {
 
 export default function Page() {
 	const [activeCategory, setActiveCategory] = useState(1);
+	const projects = Projects.Projects.filter	((item) => item.show === true
+	);
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
@@ -205,7 +207,7 @@ export default function Page() {
 					</motion.div>
 				</div>
 				<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
-					<div className="flex justify-start items-start flex-col my-5 self-start ">
+					<div className="flex justify-center items-center flex-col my-5 self-start">
 						<Hr variant="long"></Hr>
 						<motion.h1
 							className="text-3xl font-bold mt-3"
@@ -264,6 +266,7 @@ export default function Page() {
 						/>
 					))}
 				</div>
+
 				{/* view in archive btn */}
 				<motion.div
 					initial={{

json/data.json

@@ -1,6 +1,33 @@
 {
   "Projects": [
     {
+      "show": true,
+      "title": "Javanese Translation Website",
+      "desc": [
+        "A Javanese ngoko - krama translation website that I created as a collaborative project with my friends. The website is built using the original Transformer architecture by Vaswani et al. (2017). Built with Python, TensorFlow, Flask, HTML, and CSS, the website allows users to input text in Javanese krama and receive the corresponding ngoko translation.", 
+        "The website is designed to be simple to use, with a clean and modern interface that appeals to a wide audience. Users can input text in Javanese krama and receive the corresponding ngoko translation. The Project also provide ipynb file for the model training and the model itself."
+      ],
+      "year": "2024",
+      "preview": "",
+      "code": "https://github.com/Alvalens/web-javanese-translation",
+      "thumbnail": "/image/projects/ai/javanese-translation/javanese-translation-thumbnail.jpg",
+      "images": [
+        "/image/projects/ai/javanese-translation/javanese-translation1.png",
+        "/image/projects/ai/javanese-translation/javanese-translation2.png"
+      ],
+      "tech": [
+        "Transformers",
+        "Python",
+        "Tensorflow",
+        "Flask",
+        "HTML",
+        "CSS"
+      ], 
+      "slug": "trivia",
+      "category": 2
+    },
+    {
+      "show": true,
       "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.",
@@ -9,6 +36,7 @@
       "year": "2024",
       "preview": "https://generative-trivia.vercel.app/",
       "code": "https://github.com/Alvalens/generative-trivia",
+      "thumbnail": "/image/projects/web/trivia/trivia-thumbnail.png",
       "images": [
         "/image/projects/web/trivia/trivia1.png",
         "/image/projects/web/trivia/trivia2.png",
@@ -21,15 +49,18 @@
         "Firebase",
         "Gemini API"
       ], 
-      "slug": "trivia"
+      "slug": "trivia",
+      "category": 1
     },
     {
+      "show": true,
       "title": "Saku Senyum",
       "desc": [
         "Saku Senyum is a website that I created as a Fullstack Developer in PT Hafdzahmedia based on client request. The website is a sales management for UMKM or small business. The website is built using Next.js, TypeScript, Tailwind CSS, ShadCN UI, Prisma, and MySQL.",
         "The website has a few features such as a dashboard for the user to manage their business sales, a statistic page, and a sales report page. User can see their sales performance in a fancy chart to make it easier to understand. The user also can export their sales report to a PDF file which can be printed or saved to their device."
       ],
       "year": "2024",
+      "thumbnail": "/image/projects/web/saku-senyum/saku-senyum-thumbnail.png",
       "images": [
         "/image/projects/web/saku-senyum/saku-senyum1.png",
         "/image/projects/web/saku-senyum/saku-senyum2.png",
@@ -44,9 +75,11 @@
         "Prisma",
         "MySQL"
       ], 
-      "slug": "saku-senyum"
+      "slug": "saku-senyum",
+      "category": 1
     },
     {
+      "show": true,
       "title": "Simadun",
       "desc": [
         "Simadun is an Exam Management System developed for doctoral students in the Department of Electrical Engineering and Informatics Universitas Negeri Malang. The system facilitates the management of five different types of examinations, allowing students to apply for exams with ease. Professors and program heads can efficiently oversee the exam processes.",
@@ -54,6 +87,7 @@
         "With Simadun, students can submit their exam applications online, track their application status, and receive timely notifications regarding their exam schedules. Program heads and relevant lecturers have access to comprehensive dashboards where they can manage exam requests, allocate resources, and monitor overall exam logistics. "
       ],
       "year": "2024",
+      "thumbnail": "/image/projects/web/simadun/simadun-thumbnail.png",
       "images": [
         "/image/projects/web/simadun/simadun1.png",
         "/image/projects/web/simadun/simadun2.png",
@@ -70,9 +104,11 @@
         "DataTables"
 
       ], 
-      "slug": "simadun"
+      "slug": "simadun",
+      "category": 1
     },
     {
+      "show": true,
       "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.",
@@ -81,6 +117,7 @@
       "year": "2023",
       "preview": "https://github.com/Alvalens/ludo-game/releases/tag/pre-release",
       "code": "https://github.com/Alvalens/ludo-game",
+      "thumbnail": "/image/projects/other/LUDOang/ludo-thumbnail.png",
       "images": [
         "/image/projects/other/LUDOang/ludo1.png",
         "/image/projects/other/LUDOang/ludo2.png",
@@ -91,9 +128,33 @@
         "Pygame",
         "OpenGL"
       ], 
-      "slug": "ludoang"
+      "slug": "ludoang",
+      "category": 9
     },
     {
+      "show": true,
+      "title": "VICC Landing Page",
+      "desc": [
+        "This project is one of my freelance projects. This project is a landing page for Vocational Inter-cultural Camp event held by Vocational Faculty of Universitas Negeri Malang. The website is built using Next.js, Javascript, and Tailwind CSS.", "The website is mainly frontend project, which is already using responsive design. The website has a few features such carousel, and a few animations. The website also has a few pages such as home, topic, and speaker page."
+      ],
+      "year": "2023",
+      "preview": "https://inter-cultural-camp.vercel.app",
+      "thumbnail": "/image/projects/web/vicc/vicc-thumbnail.jpg",
+      "images": [
+        "/image/projects/web/vicc/vicc1.png",
+        "/image/projects/web/vicc/vicc2.png",
+        "/image/projects/web/vicc/vicc3.png"
+      ],
+      "tech": [
+        "JavaScript",
+        "NextJS",
+        "Tailwind CSS"
+      ],
+      "slug": "vicc",
+      "category": 1
+    },
+    {
+      "show": true,
       "title": "React Realtime Chat",
       "desc": [
         "My ambitious project that delves into the world of interactive web development using React. This project is a realtime chat application that allows users to create chat rooms and chat with other users in realtime. The application is built using React, Firebase, and Daisy UI.",
@@ -102,6 +163,7 @@
       "year": "2023",
       "preview": "https://react-chat-rouge.vercel.app",
       "code": "https://github.com/Alvalens/react-realtime-chat",
+      "thumbnail": "/image/projects/web/react-chat/chat-thumbnail.png",
       "images": [
         "/image/projects/web/react-chat/chat1.png",
         "/image/projects/web/react-chat/chat2.png",
@@ -115,9 +177,11 @@
         "Firebase",
         "Daisy UI"
       ],
-      "slug": "react-chat"
+      "slug": "react-chat",
+      "category": 1
     },
     {
+      "show": true,
       "title": "React Tools",
       "desc": [
         "React Tools is a groundbreaking and user-friendly project that brings together a comprehensive collection of tools and components crafted with cutting-edge technologies, including React, React Router, and TailwindCSS. What sets this project apart is that it's not just a suite of powerful features, but it's also a significant milestone as it marks my very first venture into the world of React development.",
@@ -129,6 +193,7 @@
       "year": "2023",
       "preview": "https://react-tools-flax.vercel.app",
       "code": "https://github.com/Alvalens/react-tools",
+      "thumbnail": "/image/projects/web/tools/tools-thumbnail.png",
       "images": [
         "/image/projects/web/tools/tools.png",
         "/image/projects/web/tools/tools1.png",
@@ -141,15 +206,18 @@
         "React Router",
         "TailwindCSS"
       ],
-      "slug": "react-tools"
+      "slug": "react-tools",
+      "category": 1
     },
     {
+      "show": true,
       "title": "Aleph Discord Bot",
       "desc": [
         "Aleph is a Discord bot that I created for my dircord server to use. The bot is built using Python and the discord.py library. The bot has image grabber feauture that takes argument (keywords) and returns an image from the internet.", "Other than that this bot has a few other features such as utility command to delete a messages, and a command to get the server's ping. This bot is still in development and I plan to add more features in the future."],
       "year": "2023",
       "preview": "",
       "code": "https://github.com/Alvalens/aleph-discord-bot",
+      "thumbnail": "/image/projects/other/bot/bot-thumbnail.png",
       "images": [
         "/image/projects/other/bot/bot1.png",
         "/image/projects/other/bot/bot2.png"
@@ -159,9 +227,11 @@
         "Discord.py",
         "Google Serp API"
       ],
-      "slug": "aleph-discord-bot"
+      "slug": "aleph-discord-bot",
+      "category": 9
     }, 
     {
+      "show": true,
       "title": "LPTK Cup 2023 Website",
       "desc": [
         "LPTK Cup UM is a website that I created for a competition held by  the Universitas Negeri Malang. The website is mainly built using Laravel and Bootstrap. The website has a few features such as a registration form, a login system, article system, file upload,  and a dashboard for the admin to manage the contents.",
@@ -170,6 +240,7 @@
       "year": "2023",
       "preview": "",
       "code": "",
+      "thumbnail": "/image/projects/web/lptk/lptk1.png",
       "images": [
         "/image/projects/web/lptk/lptk1.png",
         "/image/projects/web/lptk/lptk2.png",
@@ -184,15 +255,18 @@
         "jQuery",
         "DataTables"
       ],
-      "slug": "lptk-cup-2023"
+      "slug": "lptk-cup-2023",
+      "category": 1
     }, 
     {
+      "show": true,
       "title": "NU INO Website",
       "desc": [
         "My first freelance project. This project is a website for a School based on a JALAKAR curriculum. The website is built mainly using Laravel and Bootstrap.", "This website is LMS like system, have a user management, user auth, quiz and material for student and FAQ",  "In this project I learned how to work with a team and how to manage a project. I also learned new library such as livewire and alpine.js."],
       "year": "2023",
       "preview": "",
       "code": "",
+      "thumbnail": "/image/projects/web/ino/ino1.png",
       "images": [
         "/image/projects/web/ino/ino1.png",
         "/image/projects/web/ino/ino2.png",
@@ -207,7 +281,8 @@
         "jQuery",
         "DataTables"
       ],
-      "slug": "nu-ino-website"
+      "slug": "nu-ino-website",
+      "category": 1
     }
   ]
 }