save

Author: LeoGytis

src/app/opengraph-image.png public/opengraph-image.pngsrc/app/opengraph-image.png renamed to public/opengraph-image.png

@@ -1,5 +1,6 @@
 'use client';
 import About from '@/components/About';
+import ArrowUp from '@/components/ArrowUp';
 import Education from '@/components/Education';
 import Experience from '@/components/Experience';
 import NavBar from '@/components/NavBar';
@@ -23,6 +24,7 @@ export default function Home() {
           <Projects />
         </main>
       </div>
+      <ArrowUp />
     </>
   );
 }

src/app/page.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+// import { FaArrowUp } from 'react-icons/fa';
+import { RiArrowUpDoubleLine } from 'react-icons/ri';
+import { animateScroll as scroll } from 'react-scroll';
+
+const ArrowUp = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    scroll.scrollToTop({
+      duration: 500,
+      smooth: true,
+    });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={`fixed bottom-8 right-8 p-3 rounded-full border border-secondary text-white transition-all duration-300 hover:shadow-border cursor-pointer group hover:bg-background ${
+        isVisible
+          ? 'opacity-100 translate-y-0'
+          : 'opacity-0 translate-y-10 pointer-events-none'
+      }`}
+    >
+      <RiArrowUpDoubleLine className="size-6 text-secondary group-hover:text-primary" />
+    </button>
+  );
+};
+
+export default ArrowUp;

src/components/ArrowUp.tsx

@@ -32,7 +32,7 @@ const SocialMediaLink = ({ icon: Icon, href }: SocialMediaLinkProps) => {
   return (
     <a
       href={href}
-      className="p-2 border rounded-full cursor-pointer group border-secondary hover:shadow-border hover:bg-background"
+      className="p-3 border rounded-full cursor-pointer group border-secondary hover:shadow-border hover:bg-background"
     >
       <Icon className="text-lg text-secondary group-hover:text-primary" />
     </a>