[feat] project archive page
This commit is contained in:
Alvalen
parent
1c83ce9fac
commit
0be22beae3
7 changed files with 517 additions and 3 deletions
|
|
@ -129,7 +129,9 @@ const MyPage = () => {
|
||||||
done and currently working on.
|
done and currently working on.
|
||||||
</p>
|
</p>
|
||||||
<Button variation="primary">
|
<Button variation="primary">
|
||||||
|
<Link href="/projects">
|
||||||
Learn More
|
Learn More
|
||||||
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ html {
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
html {
|
html {
|
||||||
font-size: 13px !important;
|
font-size: 13px !important;
|
||||||
|
|
@ -62,3 +63,28 @@ span {
|
||||||
.active {
|
.active {
|
||||||
color: rgb(255, 235, 87);
|
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);
|
||||||
|
|
||||||
|
}
|
||||||
148
app/projects/archive/page.js
Normal file
148
app/projects/archive/page.js
Normal file
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
11
app/projects/layout.js
Normal file
11
app/projects/layout.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
// generate layour with footer
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
export default function Layout({ children }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
{children}
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
36
components/Footer.jsx
Normal file
36
components/Footer.jsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -108,7 +108,7 @@ if (isMobile) {
|
||||||
</motion.h2>
|
</motion.h2>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/project">
|
<Link href="/projects">
|
||||||
<div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.3}>
|
<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"}>
|
<motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
|
||||||
Projects
|
Projects
|
||||||
|
|
@ -141,14 +141,14 @@ const Navbar = () => {
|
||||||
<>
|
<>
|
||||||
<nav
|
<nav
|
||||||
ref={navRef}
|
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="">
|
<div className="">
|
||||||
<h1 className="text-2xl">Alvalens</h1>
|
<h1 className="text-2xl">Alvalens</h1>
|
||||||
</div>
|
</div>
|
||||||
{/* toggler */}
|
{/* toggler */}
|
||||||
<div className="flex flex-row items-center">
|
<div className="flex flex-row items-center">
|
||||||
<button
|
<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}>
|
onClick={toggleNav}>
|
||||||
<div
|
<div
|
||||||
className={`w-8 h-1 bg-black rounded-full transition-all ease-in duration-300 ${
|
className={`w-8 h-1 bg-black rounded-full transition-all ease-in duration-300 ${
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue