Hotfix to the ScrollTo Component

IMXNOOBX · Apr 3, 2024 · ee9d039 · ee9d039
1 parent 52fb7ed
commit ee9d039
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/app/components/navbar/navlink/index.tsx b/app/components/navbar/navlink/index.tsx
@@ -11,6 +11,7 @@ export default function Button({ image, to, isActive = false, className, childre
  className={`flex transition-all duration-300 bg-transparent ${isActive ? 'py-2' : 'group-hover:py-2'}`}>
  <Image 
  src={image} 
+ priority={true}
  className={
  `select-none w-8 transition-all duration-300 border-opacity-0 border-indigo-500 rounded-xl ${ isActive ? 
  'rotate-0 shadow-[#5D5DFF_0px_0px_30px] bg-indigo-500/50 border-2 border-opacity-100 p-1 translate-y-3'

diff --git a/app/components/navbar/profiles/index.tsx b/app/components/navbar/profiles/index.tsx
@@ -8,7 +8,7 @@ const Profile = ({ to, pfp, applicationp, className, full }: { to: string, pfp:
  className={`group transition ease-in-out select-none relative p-1 cursor-pointer ${className}`}
  onClick={() => window.open(to, '_blank')}
  >
- <Image src={pfp} className={`w-full fill-current select-none hover:drop-shadow-2xl rounded-xl transition-all ease-in duration-300 group-hover:scale-105 aspect-square ${full && 'border-2 border-gray-700'}`} alt="icon" />
+ <Image src={pfp} priority={true} className={`w-full fill-current select-none hover:drop-shadow-2xl rounded-xl transition-all ease-in duration-300 group-hover:scale-105 aspect-square ${full && 'border-2 border-gray-700'}`} alt="icon" />
  <Image src={applicationp} className="h-6 w-6 absolute -bottom-1 select-none right-0 group-hover:-translate-x-10 group-hover:-translate-y-10 ease-out group-hover:rotate-full transition-all duration-300 drop-shadow-[#FFF_0px_0px_10px]" alt="icon" />
  </div>
  );

diff --git a/app/components/utils/ScrollTo.tsx b/app/components/utils/ScrollTo.tsx
@@ -50,7 +50,7 @@ export default function ScrollTo({ point }: { point: number | undefined }) {
  },
  scrolled: {
  opacity: 1,
- position: 'fixed',
+ // position: 'fixed',
  x: '-40px',
  bottom: '10%',
  left: '50%',
@@ -63,7 +63,7 @@ export default function ScrollTo({ point }: { point: number | undefined }) {
  }
  }}
  onClick={() => window.scrollTo({ top: scrolled ? 0 :point || window.innerHeight, behavior: 'smooth' })}
- className="overflow-hidden absolute bottom-20 left-1/2 flex items-center justify-center w-20 h-20 cursor-pointer z-50 select-none"
+ className="overflow-hidden fixed bottom-20 left-1/2 flex items-center justify-center w-20 h-20 cursor-pointer z-50 select-none"
  >
  <span className="absolute inline-flex h-10 w-10 bg-white/10 animate-ping rounded-full opacity-75"></span>
  <Image src={Scroll} alt="scroll" className="w-10 h-10" priority={true} />

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -1,4 +1,5 @@
 import ProjectCard from "@/app/projects/card/index";
+import ScrollTo from "@/app/components/utils/ScrollTo";
 
 async function getProjects(username: string = "") {
  if (!username)
@@ -21,6 +22,7 @@ export default async function Projects() {
 
  return (
  <div className="relative w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 text-white my-20 pb-20 sm:animate-fade-in">
+ <ScrollTo point={undefined} />
  {repos.map((repo: any, i: number) => (
  <div key={i}>
  <ProjectCard project={repo} index={i} />