projects section

src/components/Navbar.tsx

@@ -1,11 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import {
-  StyledLangButton,
-  StyledNavbar,
-  StyledNavlink,
-  StyledNavlinkBrand,
-  StyledNavlinkList,
-} from './styles/Navbar.styled';
+import { StyledLangButton, StyledNavbar, StyledNavBrand, StyledNavlinksWrapper } from './styles/Navbar.styled';
 
 interface NavLink {
   title: string;
@@ -20,21 +14,23 @@ function scrollToSection(e: React.MouseEvent, href: string) {
   });
 }
 
-function NavlinkList(props: { navlinks: NavLink[] }) {
+function Navlinks(props: { navlinks: NavLink[] }) {
   const { t } = useTranslation();
 
   return (
-    <>
-      <StyledNavlinkList>
+    <StyledNavlinksWrapper>
+      <ul>
         {props.navlinks.map((navlink) => (
-          <StyledNavlink key={navlink.title} href={navlink.href} onClick={(e) => scrollToSection(e, navlink.href)}>
-            {t(`navbar.${navlink.title}`)}
-          </StyledNavlink>
+          <li key={navlink.title}>
+            <a href={navlink.href} onClick={(e) => scrollToSection(e, navlink.href)}>
+              {t(`navbar.${navlink.title}`)}
+            </a>
+          </li>
         ))}
+      </ul>
 
-        <LanguageChoice />
-      </StyledNavlinkList>
-    </>
+      <LanguageChoice />
+    </StyledNavlinksWrapper>
   );
 }
 
@@ -46,9 +42,9 @@ function LanguageChoice() {
   }
 
   return (
-    <>
-      <StyledLangButton onClick={changeLanguage}>{i18n.language}</StyledLangButton>
-    </>
+    <StyledLangButton aria-description="Change language" onClick={changeLanguage}>
+      {i18n.language}
+    </StyledLangButton>
   );
 }
 
@@ -63,11 +59,11 @@ const navlinks = [
   },
   {
     title: 'projects',
-    href: '#',
+    href: '#projects',
   },
   {
     title: 'contact',
-    href: '#',
+    href: '#contact',
   },
 ];
 
@@ -76,10 +72,11 @@ export default function Navbar() {
 
   return (
     <StyledNavbar>
-      <StyledNavlinkBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
+      <StyledNavBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
         {t('navbar.title')}
-      </StyledNavlinkBrand>
-      <NavlinkList navlinks={navlinks} />
+      </StyledNavBrand>
+
+      <Navlinks navlinks={navlinks} />
     </StyledNavbar>
   );
 }