v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: change the data retrival to only one json file

Browse source
This commit is contained in:
Alvalen 2025-01-15 13:52:51 +07:00
parent 415eede707
commit 4bbcdd3ce4
23 changed files with 110 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/projects/(project-card)/index.jsx
View file

@ -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 ">

1
app/projects/[slug]/page.jsx
View file

@ -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"
/>

114
app/projects/archive/page.jsx
View file

@ -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 = [
{
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: "",
},
];
import Projects from "@/json/data.json"
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}

93
app/projects/data/projects.js
View file

@ -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,
},
];

15
app/projects/page.jsx
View file

@ -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 ReactChat2 from "@/public/projects/trivia/trivia2.png";
import ReactChat3 from "@/public/projects/trivia/trivia3.png";
import ReactChat1 from "@/public/image/projects/web/trivia/trivia1.png";
import ReactChat2 from "@/public/image/projects/web/trivia/trivia2.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={{