Feature/6 mobile friendly

app/[locale]/page.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 
 import HeroSection from "../../components/HeroSection";
-import ContactSection from "../../components/ContactSection";
+import ContactSection from "../../components/ContactSection/ContactSection";
 import WorkExperienceSection from "../../components/WorkExperienceSection";
 import { Locale } from "../../types";
 import SkillsSection from "../../components/SkillsSection";
 import EducationSection from "../../components/EducationSection";
-import LanguagesSection from "../../components/LanguagesSection";
+import LanguagesSection from "../../components/LanguagesSection/LanguagesSection";
 import Image from "next/image";
 import { getImagePath } from "../../utils/imagePath";
 

components/ContactSection/ContactSection.styles.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import styled from "styled-components";
+import { media } from "../../styles/media";
+
+export const ContactSectionWrapper = styled.section`
+  display: flex;
+
+  ${media.tablet`
+    flex-direction: column
+  `}
+`;

components/ContactSection/ContactSection.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { montserratExtraBold } from "../../styles/fonts";
+import { getTranslations } from "../../lib/getTranslations";
+
+import { Locale } from "../../types";
+import ContactInformation from "../ContactInformation";
+import { ContactSectionWrapper } from "./ContactSection.styles";
+
+export default function ContactSection({ locale }: { locale: Locale }) {
+  const translations = getTranslations(locale);
+
+  return (
+    <ContactSectionWrapper>
+      <div className="section-first-column">
+        <h2 className={montserratExtraBold.className}>
+          {translations.contact.title}
+        </h2>
+      </div>
+      <div>
+        <ContactInformation locale={locale} />
+      </div>
+    </ContactSectionWrapper>
+  );
+}

components/ContactSection/index.ts

@@ -0,0 +1 @@
+export { default } from "./ContactSection";

components/EducationSection/EducationSection.styles.ts

@@ -1,17 +1,27 @@
-"use client"
+"use client";
 import styled from "styled-components";
+import { media } from "../../styles/media";
 
 export const EducationSectionWrapper = styled.section`
   position: relative;
 
+  display: flex;
+
+  ${media.tablet`
+      flex-direction: column
+  `}
+
   &::before {
     content: "";
     position: absolute;
     top: 300px;
     left: -350px;
-    width:  215%;
+    width: 215%;
     height: 860px;
-    background: linear-gradient(rgba(251, 168, 28, 0.084), rgba(224, 86, 136, 0.0315));
+    background: linear-gradient(
+      rgba(251, 168, 28, 0.084),
+      rgba(224, 86, 136, 0.0315)
+    );
     filter: blur(300px);
     transform: rotate(-22deg);
     z-index: -1;

components/EducationSection/EducationSection.tsx

@@ -9,9 +9,9 @@ export default function EducationSection({ locale }: { locale: Locale }) {
   const translations = getTranslations(locale);
 
   return (
-    <EducationSectionWrapper className="d-flex">
-      <div>
-        <h2 className={`${montserratExtraBold.className} section-first-column`}>
+    <EducationSectionWrapper>
+      <div className="section-first-column">
+        <h2 className={montserratExtraBold.className}>
           {translations.education.title}
         </h2>
       </div>

components/ExperienceItem/ExperienceItem.styles.ts

@@ -1,21 +1,26 @@
-"use client"
+"use client";
 
 import styled from "styled-components";
 
 export const ExperienceItemArticle = styled.article`
-    margin-bottom: 40px;
-    .company-title {
+  margin-bottom: 40px;
+
+  h5 {
+    font-weight: 700;
+
+    &.company-title {
       font-weight: 300;
     }
+  }
 
-    ul {
-      color: rgba(255, 255, 255, 0.7);
-      font-weight: 300;
-      font-size: 20px;
-      padding-left: 20px;
-      li {
-        padding-top: 16px;
-        line-height: 28px;
-      }
+  ul {
+    color: ${({ theme }) => theme.colors.textMuted};
+    font-size: 20px;
+    padding-left: 20px;
+    font-weight: 400;
+    li {
+      padding-top: 16px;
+      line-height: 28px;
     }
+  }
 `;

components/Button/Button.styles.ts → components/Header/DownloadPdfButton.styles.ts

@@ -1,6 +1,7 @@
-"use client"
+"use client";
 
 import styled from "styled-components";
+import { media } from "../../styles/media";
 
 export const PrimaryButton = styled.button`
   background-color: ${({ theme }) => theme.colors.brand};
@@ -11,9 +12,17 @@ export const PrimaryButton = styled.button`
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.3s ease;
+  max-height: 60px;
+  white-space: nowrap;
 
   &:hover {
     background-color: rgba(107, 107, 241, 1);
     box-shadow: 5px 5px 20px rgba(84, 84, 212, 0.75);
   }
+
+  ${media.mobile`
+    white-space: nowrap;
+    padding: 12px 16px;
+    max-height: 48px;
+  `}
 `;

components/Header/DownloadPdfButton.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Locale } from "../../types";
+import { getImagePath } from "../../utils/imagePath";
+import Image from "next/image";
+import { getTranslations } from "../../lib/getTranslations";
+import useIsMobile from "../../hooks/useIsMobile";
+import { PrimaryButton } from "./DownloadPdfButton.styles";
+
+export default function DownloadPdfButton({ locale }: { locale: Locale }) {
+  const translations = getTranslations(locale);
+
+  const isMobile = useIsMobile();
+
+  console.log("isMobile", isMobile);
+  return (
+    <PrimaryButton className="btn btn-primary btn-lg ml-1">
+      {isMobile ? (
+        <span className="pe-1 fw-light">CV</span>
+      ) : (
+        translations.downloadCv
+      )}
+      {isMobile && (
+        <Image
+          src={getImagePath("/download.png")}
+          alt={"download icon for the PDF file"}
+          width={20}
+          height={20}
+          priority
+          unoptimized
+        />
+      )}
+    </PrimaryButton>
+  );
+}

components/Header/Header.styles.tsx

@@ -1,8 +1,27 @@
 "use client";
 
 import styled from "styled-components";
+import { media } from "../../styles/media";
 
 export const StyledHeader = styled.header`
-  max-width: ${({ theme }) => theme.maxWidth.desktop};
-  height: 60px;
+  max-width: ${({ theme }) => theme.breakpoints.desktop};
+  min-height: 60px;
+
+  ${media.mobile`
+    min-height: 76px;
+  `}
+`;
+
+export const ImageWrapper = styled.div`
+  width: 100%;
+  max-width: 80px;
+  margin-bottom: 12px;
+  img {
+    width: 100%;
+    height: auto;
+  }
+
+  ${media.mobile`
+      max-width: 56px; 
+  `}
 `;

components/Header/Header.tsx

@@ -2,30 +2,33 @@ import LanguageSwitcher from "./LanguageSwitcher";
 import { getTranslations } from "../../lib/getTranslations";
 import { Locale } from "../../types";
 import Image from "next/image";
-import Button from "../Button";
-import { StyledHeader } from "./Header.styles";
-import { CONTACT_INFO } from "../../config";
+
+import { ImageWrapper, StyledHeader } from "./Header.styles";
 import { getImagePath } from "../../utils/imagePath";
 
+import DownloadPdfButton from "./DownloadPdfButton";
+
 export default function Header({ locale }: { locale: Locale }) {
   const translations = getTranslations(locale);
 
   return (
     <StyledHeader className="mx-auto d-flex justify-content-between">
       <div className="d-flex flex-column justify-content-between">
-        <Image
-          src={getImagePath("/glasses.png")}
-          alt={translations.images.logoAlt}
-          width={80}
-          height={16}
-          priority
-          unoptimized
-        />
+        <ImageWrapper>
+          <Image
+            src={getImagePath("/glasses.png")}
+            alt={translations.images.logoAlt}
+            width={80}
+            height={16}
+            priority
+            unoptimized
+          />
+        </ImageWrapper>
         <h3 className="m-0">{translations.name}</h3>
       </div>
       <div className="d-flex">
         <LanguageSwitcher locale={locale} />
-        <Button>{translations.downloadCv}</Button>
+        <DownloadPdfButton locale={locale} />
       </div>
     </StyledHeader>
   );

components/Header/LanguageSwitcher.styles.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 
 import styled from "styled-components";
+import { media } from "../../styles/media";
 
 export const StyledLanguageSwitcher = styled(Link)`
   background-color: transparent;
@@ -17,4 +18,10 @@ export const StyledLanguageSwitcher = styled(Link)`
       transform: scale(1.1);
     }
   }
+
+  ${media.mobile`
+     width: 48px;
+     height: 48px;
+     justify-content: center;
+  `}
 `;

components/Header/LanguageSwitcher.tsx

@@ -10,7 +10,7 @@ export default function LanguageSwitcher({ locale }: { locale: Locale }) {
   return (
     <StyledLanguageSwitcher
       href={`/${nextLocale}`}
-      className="language-switcher mx-1 align-items-center btn btn-light d-flex p-3 border-0"
+      className="language-switcher mx-1 align-items-center btn btn-light d-flex p-2 p-lg-3 border-0"
     >
       <Image
         src={getImagePath(flagSrc)}