chore: responsiveness improvements

src/components/Navbar.tsx

@@ -1,24 +1,29 @@
 import { useTranslation } from 'react-i18next';
 import { StyledLangButton, StyledNavbar, StyledNavBrand, StyledNavlinksWrapper } from './styles/Navbar.styled';
+import { FaBookOpen, FaUser } from 'react-icons/fa';
 
 interface NavLink {
   title: string;
   href: string;
+  icon: JSX.Element;
 }
 
 const navlinks = [
   {
     title: 'about',
     href: '#about',
+    icon: <FaUser />,
   },
   {
     title: 'projects',
     href: '#projects',
+    icon: <FaBookOpen />,
   },
-  {
-    title: 'contact',
-    href: '#contact',
-  },
+  // {
+  //   title: 'contact',
+  //   href: '#contact',
+  //   icon: <FaRegComment />,
+  // },
 ];
 
 export default function Navbar() {
@@ -43,7 +48,10 @@ function Navlinks(props: { navlinks: NavLink[] }) {
       <ul>
         {props.navlinks.map((navlink) => (
           <li key={navlink.title}>
-            <a href={navlink.href}>{t(`navbar.${navlink.title}`)}</a>
+            <a href={navlink.href}>
+              {navlink.icon}
+              {t(`navbar.${navlink.title}`)}
+            </a>
           </li>
         ))}
       </ul>

src/components/styles/About.styled.ts

@@ -1,16 +1,16 @@
 import { styled } from 'styled-components';
+import { deviceSize } from '../../common/deviceSizes';
 
 export const StyledAbout = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
   .about-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 3em;
 
-    img {
-      border-radius: 1em;
-      max-width: 100%;
-    }
-
     .about-content {
       h2 {
         font-size: 1.5em;
@@ -26,6 +26,15 @@ export const StyledAbout = styled.section`
     }
   }
 
+  .about-gif {
+    width: 100%;
+
+    img {
+      border-radius: 1em;
+      width: 100%;
+    }
+  }
+
   .about-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -55,4 +64,10 @@ export const StyledAbout = styled.section`
       font-size: 1.2em;
     }
   }
+
+  @media screen and (max-width: ${deviceSize.md}) {
+    .about-grid {
+      grid-template-columns: 1fr;
+    }
+  }
 `;

src/components/styles/Global.styled.ts

@@ -30,7 +30,7 @@ export const GlobalStyles = createGlobalStyle`
 
 
       @media screen and (max-width: ${deviceSize.md}) {
-         font-size: calc(1vw + 0.6rem);
+         /* font-size: calc(0.8vw + 0.6rem); */
       }
    }
    
@@ -39,6 +39,7 @@ export const GlobalStyles = createGlobalStyle`
       margin: 0 auto;
       max-width: 1200px;
       padding: 0 1em;
+      overflow-x: hidden;
    }
 
    .text {
@@ -56,7 +57,7 @@ export const GlobalStyles = createGlobalStyle`
 
    section {
       min-height: 100vh;
-      padding: 3.5em 0;
+      padding: 5em 0;
    }
 
    a {

src/components/styles/Navbar.styled.ts

@@ -16,7 +16,7 @@ export const StyledNavbar = styled.nav`
     margin: 0 auto;
 
     color: white;
-    padding: 0.75em 2em;
+    padding: 0.5em 1em;
     max-width: 1900px;
   }
 `;
@@ -37,9 +37,21 @@ export const StyledNavlinksWrapper = styled.div`
     display: flex;
     align-items: center;
     list-style: none;
-    gap: 0.5em;
+    gap: 1em;
     font-weight: bold;
   }
+
+  ul > li > a  {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+
+  @media screen and (max-width: 600px) {
+    ul > li > a {
+      display: none;
+    }
+  }
 `;
 
 export const StyledLangButton = styled.button`

src/components/styles/Projects.styled.ts

@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+import { deviceSize } from '../../common/deviceSizes';
 
 export const StyledProjects = styled.section`
   h3.sub-header {
@@ -10,7 +11,6 @@ export const StyledProjects = styled.section`
   .showcase-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    flex-direction: column;
     gap: 2em;
   }
 
@@ -114,4 +114,18 @@ export const StyledProjects = styled.section`
       }
     }
   }
+
+  @media screen and (max-width: ${deviceSize.md}) {
+    .showcase-container {
+      grid-template-columns: 1fr;
+    }
+
+    .other-projects-container {
+      grid-template-columns: 1fr;
+
+      .project-card:first-child {
+        grid-column: 1;
+      }
+    }
+  }
 `;

src/components/styles/SectionHeader.styled.ts

@@ -16,7 +16,8 @@ export const StyledSectionHeader = styled.h1`
     position: absolute;
     top: calc(100% + 3px);
     left: 0;
-    width: 15em;
+    width: 100%;
+    max-width: 15em;
     height: 3px;
     background-color: #fff;
   }