Fixed & added scrollme button

components/scrollme.tsx

@@ -1,9 +1,38 @@
-import Link from "next/link";
+/* import Link from "next/link"; */
 import * as React from "react";
 import { SVGProps } from "react";
+import styled from "styled-components";
 
-const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => (
+const ScrollMeWrapper = styled.div`
-  <Link href={props.href}>
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  color: var(--fg-faded);
+
+  @media only screen and (max-height: 490px) {
+    display: none;
+  }
+
+  :hover {
+    cursor: pointer;
+  }
+
+  svg {
+    width: 1.2rem;
+    height: auto;
+  }
+`;
+
+const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => {
+  const handleScroll = () => {
+    const sectionRef = document.querySelector(props.href);
+    if (sectionRef) {
+	sectionRef.scrollIntoView({ behavior: "smooth" });
+    }
+  }
+
+  return (
+    <ScrollMeWrapper onClick={handleScroll}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         height="1em"
@@ -19,7 +48,8 @@ const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => (
           d="m2 2 15.77 17.369a2 2 0 0 0 2.96 0L36.5 2"
         />
       </svg>
-  </Link>
+    </ScrollMeWrapper>
   );
+};
 
 export default ScrollMe;

pages/index.tsx

@@ -148,7 +148,7 @@ const Page: NextPageWithLayout = () => {
             rel="noreferrer"
           />
         </LinkList>
-        {/*<ScrollMe href="#contact" />*/}
+	<ScrollMe href="#contact" />
       </Section>
 
       <Section>

styles/globals.css

@@ -36,7 +36,6 @@
 html {
   background: var(--bg);
   scroll-behavior: smooth;
-  scroll-snap-type: y mandatory;
 }
 
 section {