Merge pull request #12 from Lissone/dev

Release v1.3.10
Lissone · Nov 17, 2024 · 8a6ee67 · 8a6ee67
2 parents acc8389 + 20ba61d
commit 8a6ee67
Show file tree

Hide file tree

Showing 57 changed files with 2,242 additions and 1,307 deletions.
diff --git a/README.md b/README.md
@@ -37,8 +37,6 @@ Everything in this project was developed with a lot of love, dedication and will
 
 ## Demonstration
 
-https://user-images.githubusercontent.com/57052110/227630290-5e0c5cd1-87ca-41de-a694-4d59280db573.mp4
-
 ## Requirements
 
 - [Nodejs](https://nodejs.org/en/)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "react-scroll": "^1.9.0",
     "react-switch": "^7.0.0",
     "react-toastify": "^10.0.5",
+    "react-typed": "^2.0.12",
     "styled-components": "^6.1.12",
     "yup": "^1.4.0"
   },

diff --git a/public/icons/freelance.svg b/public/icons/freelance.svg
diff --git a/src/components/layouts/FixedBorderLed/index.tsx b/src/components/layouts/FixedBorderLed/index.tsx
diff --git a/src/components/layouts/FixedBorderLed/styles.ts b/src/components/layouts/FixedBorderLed/styles.ts
diff --git a/src/components/layouts/FixedSocials/index.tsx b/src/components/layouts/FixedSocials/index.tsx
@@ -1,15 +1,14 @@
-import { SocialsContent } from '@interfaces/content';
+import { useData } from '@contexts/DataContext';
 
 import { SocialIcon } from '@components/shared/Icons/SocialIcon';
 import { Tooltip } from '@components/shared/Tooltip';
 
 import { Container, Content } from './styles';
 
-interface FixedSocialsProps {
-  readonly socials: SocialsContent[];
-}
+export function FixedSocials() {
+  const { data } = useData();
+  const { socials } = data;
 
-export function FixedSocials({ socials }: FixedSocialsProps) {
   return (
     <Container>
       <Content>

diff --git a/src/components/layouts/FixedSocials/styles.ts b/src/components/layouts/FixedSocials/styles.ts
@@ -5,12 +5,10 @@ export const Container = styled.div`
   margin-left: 5rem;
 
   position: fixed;
-
   bottom: -1rem;
   left: 0;
-  right: 90.5rem;
 
-  z-index: 100;
+  z-index: 2;
 
   @media (max-width: 920px) or (max-height: 500px) {
     display: none;
@@ -30,11 +28,17 @@ export const Content = styled.div`
 
     &:hover {
       transform: scale(1.08);
-      filter: brightness(0.9);
+
+      svg {
+        color: var(--red-400);
+        filter: drop-shadow(0 0 .675rem rgba(202, 62, 71, 0.7));
+      }
     }
 
     svg {
       color: var(--gray-600);
+
+      transition: 0.3s all;
     }
   }
 

diff --git a/src/components/layouts/Header/index.tsx b/src/components/layouts/Header/index.tsx
@@ -1,70 +1,54 @@
-import { useState } from 'react';
-import { FiMenu } from 'react-icons/fi';
+import { FiExternalLink, FiMenu } from 'react-icons/fi';
+import { IoMdClose } from 'react-icons/io';
 
-import { HeaderButtons } from '@interfaces/content';
+import { useData } from '@contexts/DataContext';
 
 import { Books } from '@components/shared/Icons/Books';
 import { Home } from '@components/shared/Icons/Home';
 import { Skills } from '@components/shared/Icons/Skills';
 import { Suitcase } from '@components/shared/Icons/Suitcase';
+import { LanguageSwitch } from '@components/shared/LanguageSwitch';
+import { NavLink } from '@components/shared/NavLink';
 
-import { NavLink } from './NavLink';
 import {
   Buttons,
   Container,
   Content,
   Hamburguer,
-  LanguageSwitch,
   Menu,
   Navigation,
   ResumeButton,
 } from './styles';
 
 interface HeaderProps {
-  readonly language: string;
-  readonly resumeCv: string;
-  readonly resumeButtonLabel: string;
-  readonly headerButtons: HeaderButtons;
-  readonly toggleContentLanguage: () => void;
-  readonly setIsOverlayActive: (value: boolean) => void;
+  readonly hamburguerIsOpen: boolean;
+  readonly handleHamburguerClick: () => void;
 }
 
 export function Header({
-  language,
-  resumeCv,
-  resumeButtonLabel,
-  headerButtons,
-  toggleContentLanguage,
-  setIsOverlayActive,
+  hamburguerIsOpen, handleHamburguerClick,
 }: HeaderProps) {
-  const [hamburguerIsOpen, setHamburguerIsOpen] = useState(false);
-
-  const handleHamburguerClick = () => {
-    setHamburguerIsOpen(!hamburguerIsOpen);
-    setIsOverlayActive(!hamburguerIsOpen);
-  };
+  const { data } = useData();
+  const { headerButtons, sharedButtons } = data;
 
   return (
     <Container>
       <Content>
         <img src="/logo.svg" alt="Logo" />
 
         <Hamburguer onClick={handleHamburguerClick}>
-          <FiMenu size={30} />
+          {hamburguerIsOpen ? <IoMdClose size={30} /> : <FiMenu size={30} />}
         </Hamburguer>
 
-        <Menu $isOpen={hamburguerIsOpen}>
+        <Menu>
           <Navigation>
             <NavLink to="presentation" tooltip={headerButtons.presentationButtonTooltip}>
               <Home />
             </NavLink>
             <NavLink to="about" tooltip={headerButtons.aboutButtonTooltip}>
               <Skills />
             </NavLink>
-            <NavLink
-              to="work-experiences"
-              tooltip={headerButtons.workExperiencesButtonTooltip}
-            >
+            <NavLink to="work-experiences" tooltip={headerButtons.workExperiencesButtonTooltip}>
               <Suitcase />
             </NavLink>
             <NavLink to="projects" tooltip={headerButtons.projectsButtonTooltip}>
@@ -73,58 +57,15 @@ export function Header({
           </Navigation>
 
           <Buttons>
-            <LanguageSwitch
-              checked={language === 'en-us'}
-              onChange={toggleContentLanguage}
-              handleDiameter={26}
-              width={100}
-              height={40}
-              borderRadius={40}
-              offColor="#313131"
-              onColor="#313131"
-              onHandleColor="#CA3E47"
-              offHandleColor="#CA3E47"
-              boxShadow="0rem 0rem 0.625rem #CA3E47"
-              activeBoxShadow="0rem 0rem 0.625rem #CA3E47"
-              uncheckedIcon={
-                <div
-                  style={{
-                    ...languageSwitchDefaultStyle,
-                    paddingRight: 14,
-                    color: 'var(--gray-300)',
-                  }}
-                >
-                  BR
-                </div>
-              }
-              checkedIcon={
-                <div
-                  style={{
-                    ...languageSwitchDefaultStyle,
-                    paddingLeft: 14,
-                    color: 'var(--gray-500)',
-                  }}
-                >
-                  EN
-                </div>
-              }
-            />
+            <LanguageSwitch />
 
-            <ResumeButton href={resumeCv} target="_blank" rel="noopener noreferrer">
-              {resumeButtonLabel}
+            <ResumeButton href={sharedButtons.resumeCv} target="_blank" rel="noopener noreferrer">
+              {sharedButtons.resumeButtonLabel}
+              <FiExternalLink size={22} />
             </ResumeButton>
           </Buttons>
         </Menu>
       </Content>
     </Container>
   );
 }
-
-const languageSwitchDefaultStyle = {
-  height: '100%',
-  fontSize: 18,
-  fontWeight: 700,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-};