feat: split project into components
This commit is contained in:
Alvalen
parent
49be263937
commit
57d0b168df
3 changed files with 134 additions and 125 deletions
50
app/projects/(project-card)/index.jsx
Normal file
50
app/projects/(project-card)/index.jsx
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import Image from "next/image";
|
||||||
|
export default function projectCard({project, index}) {
|
||||||
|
return (
|
||||||
|
<Link href={"projects/" + project.slug} key={index}>
|
||||||
|
<motion.div
|
||||||
|
className="z-10 relative flex justify-center items-start flex-col mb-5 md:px-10 w-full h-auto bg-gray-400 group/tes py-20 px-5 md:py-2 aspect-video "
|
||||||
|
initial={{
|
||||||
|
opacity: 0,
|
||||||
|
x: -200,
|
||||||
|
}}
|
||||||
|
whileInView={{
|
||||||
|
opacity: 1,
|
||||||
|
x: 0,
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
type: "spring",
|
||||||
|
}}>
|
||||||
|
{" "}
|
||||||
|
{/* Add relative here */}
|
||||||
|
<Image
|
||||||
|
src={project.bg.src}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
|
||||||
|
<h4 className="text-white">{project.year}</h4>
|
||||||
|
</div>
|
||||||
|
<div className="transition-all ease duration-500 opacity-100 content text-center group-hover/tes:opacity-0 z-10">
|
||||||
|
<h1 className="text-3xl font-bold mb-3">{project.title}</h1>
|
||||||
|
<p>{project.desc}</p>
|
||||||
|
<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
|
||||||
|
{project.tech.split(",").map((t, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="m-1 px-4 py-2 bg-gray-600 text-white ">
|
||||||
|
{t}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
76
app/projects/data/projects.js
Normal file
76
app/projects/data/projects.js
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
|
||||||
|
import Trivia from "@/public/projects/main-project/trivia.png";
|
||||||
|
import SakuSenyum from "@/public/projects/main-project/saku-senyum.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";
|
||||||
|
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.",
|
||||||
|
year: "2023",
|
||||||
|
tech: "Javascript, React Js, Firebase, Daisy UI",
|
||||||
|
bg: ReactChatMain,
|
||||||
|
slug: "react-chat",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -10,88 +10,19 @@ import ReactChat1 from "@/public/projects/trivia/trivia1.png";
|
||||||
import ReactChat2 from "@/public/projects/trivia/trivia2.png";
|
import ReactChat2 from "@/public/projects/trivia/trivia2.png";
|
||||||
import ReactChat3 from "@/public/projects/trivia/trivia3.png";
|
import ReactChat3 from "@/public/projects/trivia/trivia3.png";
|
||||||
import ProjectAll from "@/public/img/projects.png";
|
import ProjectAll from "@/public/img/projects.png";
|
||||||
// main project image
|
|
||||||
import Trivia from "@/public/projects/main-project/trivia.png";
|
|
||||||
import SakuSenyum from "@/public/projects/main-project/saku-senyum.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 Hr from "@/components/Hr";
|
import Hr from "@/components/Hr";
|
||||||
|
import ProjectCard from "./(project-card)";
|
||||||
|
import { projects } from "./data/projects";
|
||||||
import FixedButon from "@/components/FixedButton";
|
import FixedButon from "@/components/FixedButton";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
|
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
const projects = [
|
const category = {
|
||||||
{
|
1: "Web Development",
|
||||||
title: "Generative Trivia",
|
2: "Mobile Development",
|
||||||
desc: "Generative Trivia is a web application that I created using Gemini AI API to generate trivia questions and answers.",
|
3: "Other",
|
||||||
year: "2024",
|
}
|
||||||
tech: "NextJS, Typescript, Gemini AI API, Tailwind CSS, Shadcn UI, Firebase",
|
|
||||||
bg: Trivia,
|
|
||||||
slug: "trivia",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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.",
|
|
||||||
year: "2023",
|
|
||||||
tech: "Javascript, React Js, Firebase, Daisy UI",
|
|
||||||
bg: ReactChatMain,
|
|
||||||
slug: "react-chat",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -300,55 +231,7 @@ export default function Page() {
|
||||||
<div className="w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10 cursor-pointer">
|
<div className="w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10 cursor-pointer">
|
||||||
{/* loop projeects data */}
|
{/* loop projeects data */}
|
||||||
{projects.map((project, index) => (
|
{projects.map((project, index) => (
|
||||||
<Link href={"projects/" + project.slug} key={index}>
|
<ProjectCard project={project} key={index} />
|
||||||
<motion.div
|
|
||||||
className="z-10 relative flex justify-center items-start flex-col mb-5 md:px-10 w-full h-auto bg-gray-400 group/tes py-20 px-5 md:py-2 aspect-video "
|
|
||||||
initial={{
|
|
||||||
opacity: 0,
|
|
||||||
x: -200,
|
|
||||||
}}
|
|
||||||
whileInView={{
|
|
||||||
opacity: 1,
|
|
||||||
x: 0,
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
type: "spring",
|
|
||||||
}}>
|
|
||||||
{" "}
|
|
||||||
{/* Add relative here */}
|
|
||||||
<Image
|
|
||||||
src={project.bg.src}
|
|
||||||
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}
|
|
||||||
/>
|
|
||||||
<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
|
|
||||||
<h4 className="text-white">
|
|
||||||
{project.year}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<div className="transition-all ease duration-500 opacity-100 content text-center group-hover/tes:opacity-0 z-10">
|
|
||||||
<h1 className="text-3xl font-bold mb-3">
|
|
||||||
{project.title}
|
|
||||||
</h1>
|
|
||||||
<p>{project.desc}</p>
|
|
||||||
<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
|
|
||||||
{project.tech
|
|
||||||
.split(",")
|
|
||||||
.map((t, index) => (
|
|
||||||
<span
|
|
||||||
key={index}
|
|
||||||
className="m-1 px-4 py-2 bg-gray-600 text-white ">
|
|
||||||
{t}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</Link>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{/* view in archive btn */}
|
{/* view in archive btn */}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue