Skip to content

Commit

Permalink
Update page layout and navbar link behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@IMXNOOBX
IMXNOOBX committed Apr 1, 2024
1 parent a5b8e48 commit 5c09795
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 81 deletions.
135 changes: 74 additions & 61 deletions app/components/navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@ import Nightcattofpf from "@/public/assets/nightcatto.jpg";
import Github from "@/public/assets/github-white.svg";
import Discord from "@/public/assets/discord-white.svg";
import Openlayout from "@/public/assets/openlayout.svg";
import Et from "@/public/assets/et.png";
import Call from "@/public/assets/call.png";
import Home from "@/public/assets/home.png";
import Projects from "@/public/assets/projects.png";
// import Et from "@/public/assets/et.png";
// import Call from "@/public/assets/call.png";
// import Home from "@/public/assets/home.png";

import Menu from "@/public/assets/menu.png"

Expand All @@ -35,55 +36,55 @@ export default function Navbar() {
}, []);

useEffect(() => {
const handleScroll = () => {
if (window.scrollY >= threshold) {
setScrolled(true);
} else {
setScrolled(false);
}
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
const handleScroll = () => {
if (window.scrollY >= threshold) {
setScrolled(true);
} else {
setScrolled(false);
}
};

window.addEventListener("scroll", handleScroll);

return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);

return (
<nav className="w-full sticky top-0">
{/* Left side, navbar and routes buttons */}
{/* Check how i did it at: https://stackoverflow.com/questions/73884269/custom-group-states-in-tailwind-css */}
<div className={`lg:flex items-center relative transition-opacity overflow-hidden ${navOpen ? 'open' : 'close'}`}>
<motion.div
initial="hidden"
<motion.div
initial="hidden"
animate={scrolled ? "hidden" : "visible"}
variants={{
hidden: {
opacity: 0,
x: '-100%',
transition: {
duration: .5,
}
},
visible: {
opacity: 1,
x: 0,
width: 'auto',
transition: {
duration: .5,
}
},
}}>
hidden: {
opacity: 0,
x: '-100%',
transition: {
duration: .5,
}
},
visible: {
opacity: 1,
x: 0,
width: 'auto',
transition: {
duration: .5,
}
},
}}>
<div
// lg:w-2/6 lg:hover:w-full
className={`relative lg:w-full 2lg:w-auto transition-all duration-300 ease-in-out mr-auto group/nav m-4 bg-gray-600/10 backdrop-blur-lg rounded-2xl border-2 border-gray-700/50 p-2 z-10`}
// onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
// // (e.target as HTMLDivElement).style.transitionDelay = '0s';
// }}
// onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
// // (e.target as HTMLDivElement).style.transitionDelay = '1s';
// }}
// onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
// // (e.target as HTMLDivElement).style.transitionDelay = '0s';
// }}
// onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
// // (e.target as HTMLDivElement).style.transitionDelay = '1s';
// }}
>
<div className="flex">
<Image src={Pfp} className="w-14 rounded-xl border-2 [.open_&]:-translate-x-60 [.open_&]:rotate-full lg:[.open_&]:rotate-0 border-gray-700/50 transition duration-300 hover:scale-105 lg:[.open_&]:-translate-x-4 hover:shadow-lg" alt="icon" />
Expand All @@ -93,7 +94,7 @@ export default function Navbar() {
<h1 className="text-2xl font-bold text-white transition translate-x-10 lg:translate-x-0 lg:[.open_&]:translate-x-10">Universe</h1>
</div>
{/* Add random phoetical phrase */}
<p
<p
className={`text-gray-300 opacity-0 h-0 hidden lg:block w-10 cursor-pointer select-none
[.open_&]:w-full [.open_&]:h-auto transition duration-300 [.open_&]:opacity-100 xl:[.open_&]:translate-x-10
overflow-hidden truncate whitespace-nowrap xl:[.open_&]:mr-16 drop-shadow-[#FFF_0px_0px_5px] max-w-screen-sm overflow-x-auto
Expand All @@ -111,6 +112,12 @@ export default function Navbar() {
{/* Desktop nav buttons */}
<div className="hidden lg:flex ml-auto gap-4 mr-4 2lg:[.open_&]:translate-x-5 text-white lg:gap-6">
<Navlink
to="/projects"
className="my-auto w-0 [.open_&]:w-auto -translate-x-40 opacity-0 [.open_&]:translate-x-0 [.open_&]:opacity-100 transition-all duration-300 delay-75 [.open_&]:delay-300"
image={Projects}>
Projects
</Navlink>
{/* <Navlink
to="/"
className="my-auto w-0 [.open_&]:w-auto -translate-x-40 opacity-0 [.open_&]:translate-x-0 [.open_&]:opacity-100 transition-all duration-300 delay-75 [.open_&]:delay-300"
image={Et}>
Expand All @@ -127,7 +134,7 @@ export default function Navbar() {
className="my-auto w-0 [.open_&]:w-auto -translate-x-40 opacity-0 [.open_&]:translate-x-0 [.open_&]:opacity-100 transition-all duration-300 delay-150 [.open_&]:delay-100"
image={Home}>
Home
</Navlink>
</Navlink> */}
</div>
{/* Desktop Open/Close button */}
<div className="ml-auto hidden lg:block text-white transition duration-500 [.open_&]:rotate-180 2lg:[.open_&]:translate-x-14 animate-pulse [.open_&]:mx-0 [.open_&]:animate-none my-auto">
Expand All @@ -138,6 +145,12 @@ export default function Navbar() {
<div className="flex lg:hidden [.open_&]:w-full ml-auto mr-4">
<div className="hidden [.open_&]:flex mr-auto gap-8 transition-all [.open_&]:-translate-x-10 text-white">
<Navlink
to="/projects"
className="my-auto w-0 [.open_&]:w-auto -translate-x-40 opacity-0 [.open_&]:translate-x-0 [.open_&]:opacity-100 transition-all duration-300 delay-75 [.open_&]:delay-300"
image={Projects}>
Projects
</Navlink>
{/* <Navlink
to="/"
className="my-auto w-0 [.open_&]:w-auto -translate-x-40 opacity-0 [.open_&]:translate-x-0 [.open_&]:opacity-100 transition-all duration-300 delay-75 [.open_&]:delay-300"
image={Et}>
Expand All @@ -154,7 +167,7 @@ export default function Navbar() {
className="my-auto w-0 [.open_&]:w-auto -translate-x-40 opacity-0 [.open_&]:translate-x-0 [.open_&]:opacity-100 transition-all duration-300 delay-150 [.open_&]:delay-100"
image={Home}>
Home
</Navlink>
</Navlink> */}
</div>
<Image src={Menu} className="my-auto w-8 transition-all duration-300 [.open_&]:rotate-90" alt="Toggle Menu" onClick={() => setNavOpen(!navOpen)} />
</div>
Expand All @@ -163,26 +176,26 @@ export default function Navbar() {
</motion.div>

{/* Right side, quick social buttons */}
<motion.div
initial="hidden"
<motion.div
initial="hidden"
animate={scrolled ? "hidden" : "visible"}
variants={{
hidden: {
opacity: 0,
x: '100%',
transition: {
duration: .5,
}
},
visible: {
opacity: 1,
x: 0,
marginLeft: 'auto',
transition: {
duration: .6,
}
},
}}>
hidden: {
opacity: 0,
x: '100%',
transition: {
duration: .5,
}
},
visible: {
opacity: 1,
x: 0,
marginLeft: 'auto',
transition: {
duration: .6,
}
},
}}>
<div className={`w-auto hidden 2lg:flex m-4 bg-white/30 border-2 border-gray-200/50 text-black backdrop-blur-lg rounded-2xl p-2 relative z-10 transition duration-1000`}>
<div className="flex gap-4">
<Profile to="https://github.com/IMXNOOBX" pfp={Pfp} applicationp={Github} full={true} className="w-14" />
Expand Down
12 changes: 7 additions & 5 deletions app/components/navbar/navlink/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ import Image from "next/image";
export default function Button({ image, to, className, children }: { image: any, to: any, className: string, children: React.ReactNode }) {
return (
<div className={`group select-none cursor-pointer ${className}`}>
<div className="flex transition-all duration-300 bg-transparent group-hover:py-2">
<Image src={image} className={`select-none w-8 transition-all duration-300 rotate-45 border-opacity-0 group-hover:rotate-0 group-hover:shadow-[#5D5DFF_0px_0px_30px] group-hover:bg-indigo-500/50 group-hover:border-2 group-hover:border-opacity-100 border-indigo-500 rounded-xl group-hover:p-1 group-hover:translate-y-3`} alt="icon" />
<div className="flex absolute my-auto transition-all translate-x-3 duration-300 text-xs w-0 opacity-0 group-hover:text-base group-hover:w-full group-hover:opacity-100 group-hover:-translate-y-4 group-hover:translate-x-0 font-semibold justify-center whitespace-nowrap">
{children}
<Link href={to}>
<div className="flex transition-all duration-300 bg-transparent group-hover:py-2">
<Image src={image} className={`select-none w-8 transition-all duration-300 rotate-45 border-opacity-0 group-hover:rotate-0 group-hover:shadow-[#5D5DFF_0px_0px_30px] group-hover:bg-indigo-500/50 group-hover:border-2 group-hover:border-opacity-100 border-indigo-500 rounded-xl group-hover:p-1 group-hover:translate-y-3`} alt="icon" />
<div className="flex absolute my-auto transition-all translate-x-3 duration-300 text-xs w-0 opacity-0 group-hover:text-base group-hover:w-full group-hover:opacity-100 group-hover:-translate-y-4 group-hover:translate-x-0 font-semibold justify-center whitespace-nowrap">
{children}
</div>
</div>
</div>
</Link>
</div>
);
};
26 changes: 12 additions & 14 deletions app/projects/card/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import Image from "next/image";
import Teste from "@/public/assets/nightcatto.jpg"
import Fork from "@/public/assets/fork.png";
import { MotionDiv } from "@/app/components/utils/animation";
import Url from "@/app/components/utils/Url";

Expand All @@ -26,11 +27,11 @@ export default async function ProjectCard({ project, index }: { project: any, in
}
}}
>
<div className="bg-zinc-800/50 border border-zinc-700/50 backdrop-blur-lg p-4 rounded-2xl group animate-bounds-jump">
<div className={`bg-zinc-800/50 border ${project.archived ? 'border-yellow-400/50' : 'border-zinc-700/50'} backdrop-blur-lg p-4 rounded-2xl group animate-bounds-jump`}>
{/* Image and title block */}
<div className="relative flex overflow-hidden">
<Image className="rounded-lg w-full h-40 aspect-video" src={Teste} alt={project.name} />
<div className="absolute top-2 left-2 backdrop-blur-lg bg-zinc-800/30 border border-zinc-700/30 rounded-lg px-2 py-1">
<div className="absolute top-2 left-2 backdrop-blur-lg bg-zinc-800/30 border border-zinc-700/30 rounded-lg px-2 py-1">
{clean_name}
</div>
{project.stargazers_count > 0 && ( // Only show stars if there are any
Expand All @@ -40,21 +41,18 @@ export default async function ProjectCard({ project, index }: { project: any, in
)}
{/* Show on hover data, such as language, topics, license & etc */}
<div
className="absolute flex w-full m-2 bottom-2 opacity-0 transition delay-100 duration-300 translate-y-20 group-hover:opacity-100 group-hover:translate-y-0"
className="absolute flex w-full m-2 -ml-2 pl-4 bottom-2 opacity-0 transition delay-100 duration-300 translate-y-20 group-hover:opacity-100 group-hover:translate-y-0"
>
<div className="text-xs">
<div className="text-xs mt-auto">
{project.archived && <div className="text-yellow-300 drop-shadow-[#FFFF00_0px_0px_5px]">Archived</div>}
{project.language}
</div>
{/* <div>
{project.topics.slice(0, 3).map((topic: string, i: number) => (
<div key={i}>
{topic}
</div>
))}
</div> */}
<div className="ml-auto">
{project.watchers}
</div>
{project.forks != 0 && (
<div className="ml-auto flex items-center gap-1">
{project.forks}
<Image src={Fork} alt="forks" className="w-4 h-4" />
</div>
)}
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion app/projects/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default async function Projects() {
repos = repos.sort((r: any, o: any) => o.stargazers_count - r.stargazers_count)

return (
<div className="relative w-full grid grid-cols-3 gap-8 text-white mt-20 animate-fade-in">
<div className="relative w-full grid md:grid-cols-2 xl:grid-cols-3 gap-8 text-white my-20 pb-20 animate-fade-in">
{repos.map((repo: any, i: number) => (
<div key={i}>
<ProjectCard project={repo} index={i} />
Expand Down
Binary file added public/assets/fork.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/projects.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5c09795

Please sign in to comment.