From 0be22beae33703a09b28a921571dc35f1115c05e Mon Sep 17 00:00:00 2001
From: Alvalen <alvalen.shafel04@gmail.com>
Date: Sun, 3 Sep 2023 08:45:12 +0700
Subject: [PATCH] [feat] project archive page

---
 app/(root)/page.js           |   2 +
 app/globals.css              |  26 ++++
 app/projects/archive/page.js | 148 ++++++++++++++++++
 app/projects/layout.js       |  11 ++
 app/projects/page.js         | 291 +++++++++++++++++++++++++++++++++++
 components/Footer.jsx        |  36 +++++
 components/Navbar.js         |   6 +-
 7 files changed, 517 insertions(+), 3 deletions(-)
 create mode 100644 app/projects/archive/page.js
 create mode 100644 app/projects/layout.js
 create mode 100644 components/Footer.jsx

diff --git a/app/(root)/page.js b/app/(root)/page.js
index 138c571..199f9bd 100644
--- a/app/(root)/page.js
+++ b/app/(root)/page.js
@@ -129,7 +129,9 @@ const MyPage = () => {
 										done and currently working on.
 									</p>
 									<Button variation="primary">
+										<Link href="/projects">
 										Learn More
+										</Link>
 									</Button>
 								</div>
 							</div>
diff --git a/app/globals.css b/app/globals.css
index 963b6f7..e814308 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -16,6 +16,7 @@ html {
 		font-size: 14px !important;
 	}
 }
+
 @media (max-width: 768px) {
 	html {
 		font-size: 13px !important;
@@ -61,4 +62,29 @@ span {
 
 .active {
 	color: rgb(255, 235, 87);
+}
+
+td, th {
+	@apply py-2 px-3;
+}
+
+
+[title]:hover:after {
+	margin-left: 10px;
+	position: absolute;
+	content: attr(title);
+	padding: 0.5rem;
+	white-space: nowrap;
+	z-index: 1;
+	background-color: #333333;
+	color: #fff;
+	border-radius: 4px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	font-size: 14px;
+}
+
+[title]:hover:after {
+	opacity: 1;
+	transform: translateY(0);
+
 }
\ No newline at end of file
diff --git a/app/projects/archive/page.js b/app/projects/archive/page.js
new file mode 100644
index 0000000..c2d5f87
--- /dev/null
+++ b/app/projects/archive/page.js
@@ -0,0 +1,148 @@
+"use client"
+import { motion } from "framer-motion";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+
+const projects = [
+  {
+    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: "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/",
+  },
+];
+export default function Page () {
+  return (
+		<>
+			<main className="overflow-hidden">
+				<div className="h-screen w-screen  p-10 flex justify-center items-center flex-col mb-10">
+					<div className="flex justify-center items-center flex-col my-5 self-start ">
+						<motion.div
+							className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"
+							initial={{
+								opacity: 0,
+								x: -250,
+							}}
+							animate={{
+								opacity: 1,
+								x: 50,
+							}}
+							transition={{
+								delay: 0.5,
+								duration: 1,
+								type: "spring",
+							}}></motion.div>
+						<motion.div
+							className="bg-gray-700 w-28 h-1 rounded-full"
+							initial={{
+								opacity: 0,
+								x: 200,
+							}}
+							animate={{
+								opacity: 1,
+								x: 0,
+							}}
+							transition={{
+								delay: 0.5,
+								duration: 1,
+								type: "spring",
+							}}></motion.div>
+						<motion.h1
+							className="text-3xl font-bold mt-3"
+							initial={{
+								opacity: 0,
+								x: -200,
+							}}
+							animate={{
+								opacity: 1,
+								x: 0,
+							}}
+							transition={{
+								delay: 0.7,
+								duration: 1,
+								type: "spring",
+							}}>
+							Archive
+						</motion.h1>
+					</div>
+
+					<div className="mx-auto container md:px-10 grid grid-cols-1 mb-">
+						{/* invisible table */}
+						<table className="space-y-3">
+							<thead>
+								<tr className=" hover:shadow-md  transition-all ease duration-500">
+									<th className="text-start">Year</th>
+									<th className="text-start">Title</th>
+									<th className="text-start">Technology</th>
+									<th className="text-start">Link</th>
+								</tr>
+							</thead>
+							<tbody>
+								{projects.map((project, index) => (
+									<tr
+										key={index}
+										className="hover:shadow-md transition-all ease duration-500">
+										<td>{project.year}</td>
+										<td>{project.title}</td>
+										<td>{project.tech}</td>
+										<td>
+											<div>
+												{project.github && (
+													<a
+														href={project.github}
+														title="Link to GitHub">
+														<FontAwesomeIcon
+															icon={faGithub}
+															className="text-xl mr-2"
+														/>
+													</a>
+												)}
+												{project.preview && (
+													<a
+														href={
+															project.preview
+														}
+														title="Link to project preview">
+														<FontAwesomeIcon
+															icon={
+																faArrowUpRightFromSquare
+															}
+															className="text-xl"
+														/>
+													</a>
+												)}
+											</div>
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</main>
+		</>
+  );
+}
\ No newline at end of file
diff --git a/app/projects/layout.js b/app/projects/layout.js
new file mode 100644
index 0000000..22adb89
--- /dev/null
+++ b/app/projects/layout.js
@@ -0,0 +1,11 @@
+// generate layour with footer
+import Footer from "@/components/Footer";
+export default function Layout({ children }) {
+  return (
+    <>
+
+      {children}
+      <Footer />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/app/projects/page.js b/app/projects/page.js
index e69de29..09ccd7c 100644
--- a/app/projects/page.js
+++ b/app/projects/page.js
@@ -0,0 +1,291 @@
+"use client";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import Button from "@/components/Button";
+import Image from "next/image";
+
+// images
+import Me1 from "@/public/img/me1.jpg";
+import Me2 from "@/public/img/me2.jpg";
+import Me3 from "@/public/img/me3.jpg";
+export default function Page() {
+	// useEffect(() => {
+	// 	window.scrollTo(0, 0);
+	// }, []);
+
+	return (
+		<>
+			<main className="overflow-hidden">
+				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10">
+					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
+						<motion.div
+							initial={{ opacity: 1, scale: 1 }}
+							animate={{ opacity: 1, scale: 1.6 }}
+							transition={{ duration: 1, ease: "easeInOut" }}
+							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
+					</div>
+					<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
+						<h1 className="text-5xl md:text-8xl font-bold">
+							My Projects
+						</h1>
+						<div className="flex justify-center items-center flex-col my-5 ">
+							<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div>
+							<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div>
+						</div>
+						<p className="title  text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5">
+							List of my projects that I have done and currently
+							working on.
+						</p>
+						<motion.div
+							initial={{ opacity: 0, y: 100 }}
+							animate={{ opacity: 1, y: 0 }}
+							transition={{ duration: 1 }}
+							onClick={() => {
+								window.scrollTo({
+									top: 1000,
+									behavior: "smooth",
+								});
+							}}
+							className="">
+							<Button variation="primary">Scroll Down</Button>
+						</motion.div>
+					</div>
+				</div>
+				<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
+					<div className="flex justify-center items-center flex-col my-5 self-start ">
+						<div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div>
+						<div className="bg-gray-700 w-28 h-1 rounded-full translate-x-12"></div>
+						<h1 className="text-3xl font-bold mt-3">Hightlight</h1>
+					</div>
+				</div>
+				<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">
+								<motion.div
+									initial={{ opacity: 0, scale: 0.5, x: 100 }}
+									whileInView={{
+										opacity: 1,
+										scale: 1,
+										x: 0,
+									}}
+									transition={{ duration: 1 }}
+									className="w-full h-full">
+									<Image
+										src={Me1}
+										alt="Alvalens"
+										layout="fill"
+										objectFit="cover"
+										placeholder="blur"
+									/>
+								</motion.div>
+							</div>
+							<div className="absolute top-16 right-28 w-[30%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
+								<motion.div
+									initial={{
+										opacity: 0,
+										scale: 0.5,
+										x: -100,
+									}}
+									whileInView={{
+										opacity: 1,
+										scale: 1,
+										x: 0,
+									}}
+									transition={{ delay: 0.3, duration: 1 }}
+									className="w-full h-full">
+									<Image
+										src={Me2}
+										alt="Alvalens"
+										layout="fill"
+										objectFit="cover"
+										placeholder="blur"
+									/>
+								</motion.div>
+							</div>
+							<div className="absolute bottom-16 right-20 w-[40%]  aspect-square grayscale hover:grayscale-0 transition-all ease duration-300">
+								<motion.div
+									initial={{
+										opacity: 0,
+										scale: 0.5,
+										x: -100,
+									}}
+									whileInView={{
+										opacity: 1,
+										scale: 1,
+										x: 0,
+									}}
+									transition={{
+										delay: 0.5,
+										duration: 1,
+									}}
+									className="w-full h-full">
+									<Image
+										src={Me3}
+										alt="Alvalens"
+										layout="fill"
+										objectFit="cover"
+										placeholder="blur"
+									/>
+								</motion.div>
+							</div>
+						</div>
+					</div>
+					<motion.div
+						className="flex justify-center items-start flex-col mb-5 md:px-10"
+						initial={{
+							opacity: 0,
+							x: 200,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: 0,
+						}}
+						transition={{
+							delay: 0.5,
+							duration: 1,
+							type: "spring",
+						}}>
+						<h2 className="text-2xl font-bold tracking-wider mb-3">
+							React Chat WebApp
+						</h2>
+						<p className="text-gray-600 text-justify title text-lg">
+							React Chat WebApp is a chat application that I
+							created using ReactJS, Firebase, and TailwindCSS.
+							This is my second project using ReactJS and
+							Firebase. I created this project to learn more about
+							ReactJS and Firebase. I also use TailwindCSS to make
+							the UI more beautiful and responsive. In this
+							project i learn many things about react and
+							firebase, such as react hooks, react router,
+							firebase authentication, firebase firestore, and
+							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>
+					</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-center items-center flex-col my-5 self-start ">
+						<motion.div
+							className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"
+							initial={{
+								opacity: 0,
+								x: -200,
+							}}
+							whileInView={{
+								opacity: 1,
+								x: 0,
+							}}
+							transition={{
+								delay: 0.5,
+								duration: 1,
+								type: "spring",
+							}}></motion.div>
+						<motion.div
+							className="bg-gray-700 w-28 h-1 rounded-full"
+							initial={{
+								opacity: 0,
+								x: 200,
+							}}
+							whileInView={{
+								opacity: 1,
+								x: -50,
+							}}
+							transition={{
+								delay: 0.5,
+								duration: 1,
+								type: "spring",
+							}}></motion.div>
+						<motion.h1
+							className="text-3xl font-bold mt-3"
+							initial={{
+								opacity: 0,
+								x: -200,
+							}}
+							whileInView={{
+								opacity: 1,
+								x: 0,
+							}}
+							transition={{
+								delay: 0.7,
+								duration: 1,
+								type: "spring",
+							}}>
+							Other Note Worthy Projects
+						</motion.h1>
+					</div>
+				</div>
+				<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="relative flex justify-center items-start flex-col mb-5 md:px-10 w-full h-[400px] bg-gray-400 group/tes ">
+						<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
+							<h4 className="text-white">2023</h4>
+						</div>
+						<div className="transition-all ease duration-500 opacity-100 content text-center group-hover/tes:opacity-0">
+							<h1 className="text-3xl font-bold mb-3">
+								React Tools
+							</h1>
+							<p>
+								React Tools is my first project using ReactJS,
+								this project contain 3 main tools: Todo List,
+								Note, and Expense tracker.
+							</p>
+							<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
+								<span className="m-1 px-4 py-2 bg-gray-600 text-white ">
+									Javascript
+								</span>
+								<span className="m-1 px-4 py-2 bg-gray-600 text-white ">
+									React Js
+								</span>
+								<span className="m-1 px-4 py-2 bg-gray-600 text-white ">
+									Firebase
+								</span>
+								<span className="m-1 px-4 py-2 bg-gray-600 text-white ">
+									Tailwind CSS
+								</span>
+							</div>
+						</div>
+					</div>
+					<div className="relative flex justify-center items-start flex-col mb-5 md:px-10 w-full h-[400px] bg-gray-400 group/tes ">
+						<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
+							<h4 className="text-white">2023</h4>
+						</div>
+						<div className="transition-all ease duration-500 opacity-100 content text-center group-hover/tes:opacity-0">
+							<h1 className="text-3xl font-bold mb-3">
+								React Tools
+							</h1>
+							<p>
+								React Tools is my first project using ReactJS,
+								this project contain 3 main tools: Todo List,
+								Note, and Expense tracker.
+							</p>
+							<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
+								<span className="m-1 px-4 py-2 bg-gray-600 text-white ">
+									Javascript
+								</span>
+								<span className="m-1 px-4 py-2 bg-gray-600 text-white ">
+									React Js
+								</span>
+								<span className="m-1 px-4 py-2 bg-gray-600 text-white ">
+									Firebase
+								</span>
+								<span className="m-1 px-4 py-2 bg-gray-600 text-white ">
+									Tailwind CSS
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				{/* view in archive btn */}
+				<div className="flex justify-center items-center flex-col my-5 self-start ">
+				<Button variation="primary">
+					<Link href="projects/archive">
+					View In Archive
+					</Link>
+				</Button>
+				</div>
+
+			</main>
+		</>
+	);
+}
diff --git a/components/Footer.jsx b/components/Footer.jsx
new file mode 100644
index 0000000..4a382f4
--- /dev/null
+++ b/components/Footer.jsx
@@ -0,0 +1,36 @@
+"use client";
+import { motion } from "framer-motion";
+import Link from "next/link";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+
+export default function Footer() {
+	return (
+		<div className="flex justify-center items-center flex-col mt-5 self-start min-h-[50vh] bg-gray-200">
+			<Link href="/#contact">
+				<motion.h1
+					className="text-5xl font-bold mt-3 tracking-widest hover:underline"
+					initial={{
+						opacity: 0,
+						y: -200,
+					}}
+					whileInView={{
+						opacity: 1,
+						y: 0,
+					}}
+					transition={{
+						delay: 0.7,
+						duration: 1,
+						type: "spring",
+					}}>
+					Get In Touch{" "}
+					<FontAwesomeIcon
+						icon={faArrowRight}
+						className="text-5xl ml-2"
+					/>
+				</motion.h1>
+			</Link>
+		</div>
+	);
+}
diff --git a/components/Navbar.js b/components/Navbar.js
index 907950e..739934b 100644
--- a/components/Navbar.js
+++ b/components/Navbar.js
@@ -108,7 +108,7 @@ if (isMobile) {
         </motion.h2>
       </div>
     </Link>
-    <Link href="/project"> 
+    <Link href="/projects"> 
       <div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.3}>
         <motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
           Projects
@@ -141,14 +141,14 @@ const Navbar = () => {
 		<>
 			<nav
 				ref={navRef}
-				className={`navbar px-5 md:px-24 w-screen fixed inset-0 backdrop-blur-sm opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
+				className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${isNavOpen ? "bg-transparent" : "bg-gray-50"} inset-0 backdrop-blur-md opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
 				<div className="">
 					<h1 className="text-2xl">Alvalens</h1>
 				</div>
 				{/* toggler */}
 				<div className="flex flex-row items-center">
 					<button
-						className="burger button flex flex-col justify-center items-center space-y-1.5 z-50"
+						className="burger button flex flex-col justify-center items-center space-y-1.5 "
 						onClick={toggleNav}>
 						<div
 							className={`w-8 h-1 bg-black rounded-full transition-all ease-in duration-300 ${