diff --git a/components/scrollme.tsx b/components/scrollme.tsx index dd18a73..3e4eff2 100644 --- a/components/scrollme.tsx +++ b/components/scrollme.tsx @@ -1,25 +1,55 @@ -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 & { href: string }) => ( - - - - - -); +const ScrollMeWrapper = styled.div` + 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 & { href: string }) => { + const handleScroll = () => { + const sectionRef = document.querySelector(props.href); + if (sectionRef) { + sectionRef.scrollIntoView({ behavior: "smooth" }); + } + } + + return ( + + + + + + ); +}; export default ScrollMe; diff --git a/pages/index.tsx b/pages/index.tsx index 9a4930a..ea5682e 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -148,7 +148,7 @@ const Page: NextPageWithLayout = () => { rel="noreferrer" /> - {/**/} +
diff --git a/styles/globals.css b/styles/globals.css index 06a274d..eb4035b 100755 --- a/styles/globals.css +++ b/styles/globals.css @@ -36,7 +36,6 @@ html { background: var(--bg); scroll-behavior: smooth; - scroll-snap-type: y mandatory; } section {