smooth scrolling

src/components/AboutSection.tsx

@@ -13,13 +13,14 @@ function AboutSection() {
         </span>
       </StyledSectionHeader>
 
-      <div style={{ display: 'flex' }}>
+      <div>
         <StyledAboutItem>
           <img src="question.svg" alt="" />
           <h2>MYSELF</h2>
         </StyledAboutItem>
+
+        <div>test</div>
       </div>
-      <p>test</p>
     </StyledAbout>
   );
 }

src/components/LandingSection.tsx

@@ -3,7 +3,7 @@ import { StyledBrandName, StyledLanding, StyledLandingWrapper } from './styles/L
 
 export default function LandingSection() {
   return (
-    <StyledLanding>
+    <StyledLanding id="landing">
       <StyledLandingWrapper>
         <Logo />
 

src/components/Navbar.tsx

@@ -12,6 +12,14 @@ interface NavLink {
   href: string;
 }
 
+function scrollToSection(e: React.MouseEvent, href: string) {
+  e.preventDefault();
+
+  document.querySelector(href)!.scrollIntoView({
+    behavior: 'smooth',
+  });
+}
+
 function NavlinkList(props: { navlinks: NavLink[] }) {
   const { t } = useTranslation();
 
@@ -19,7 +27,7 @@ function NavlinkList(props: { navlinks: NavLink[] }) {
     <>
       <StyledNavlinkList>
         {props.navlinks.map((navlink) => (
-          <StyledNavlink key={navlink.title} href={navlink.href}>
+          <StyledNavlink key={navlink.title} href={navlink.href} onClick={(e) => scrollToSection(e, navlink.href)}>
             {t(`navbar.${navlink.title}`)}
           </StyledNavlink>
         ))}
@@ -68,7 +76,9 @@ export default function Navbar() {
 
   return (
     <StyledNavbar>
-      <StyledNavlinkBrand>{t('navbar.title')}</StyledNavlinkBrand>
+      <StyledNavlinkBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
+        {t('navbar.title')}
+      </StyledNavlinkBrand>
       <NavlinkList navlinks={navlinks} />
     </StyledNavbar>
   );

src/components/styles/Global.styled.ts

@@ -32,7 +32,7 @@ export const GlobalStyles = createGlobalStyle`
 
    section {
       min-height: 100vh;
-      padding: 1em 2em;
+      padding: 3.5em 2em;
    }
 
    a {

src/components/styles/Navbar.styled.ts

@@ -1,16 +1,20 @@
 import { styled } from 'styled-components';
 
 export const StyledNavbar = styled.nav`
+  position: sticky;
+  top: 0;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 3.5em;
 
   color: white;
+  background-color: ${({ theme }) => theme.colors.nav};
   padding: 0.75em 2em;
 `;
 
-export const StyledNavlinkBrand = styled.div`
+export const StyledNavlinkBrand = styled.a`
   opacity: 0.85;
   font-weight: 700;
   color: ${({ theme }) => theme.colors.primary};

src/theme.ts

@@ -2,6 +2,7 @@ export const theme = {
   colors: {
     primary: 'lightseagreen',
     bg: '#242424',
+    nav: '#1b1b1b',
   },
   fonts: {
     primary: 'Inter, system-ui, Arial, sans-serif',