Merge pull request #21 from glovooker/ucenfotec-version

Added footer and sidebar
glovooker · Mar 3, 2024 · a4a357e · a4a357e
2 parents f1e6fd2 + e8c3196
commit a4a357e
Show file tree

Hide file tree

Showing 9 changed files with 362 additions and 316 deletions.
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -0,0 +1,26 @@
+import { FaGithub, FaLinkedin } from 'react-icons/fa';
+import { IconButton } from '..';
+
+export const Footer = () => {
+    const year = new Date().getFullYear(); // Dynamically get the current year
+
+    return (
+        <footer className="bg-glovooker-chamoisee-100 text-white text-center py-4">
+            <div className="container mx-auto flex justify-between items-center px-4">
+                <span className='text-xs md:text-base'>© { year } Gabriel Lobo. All rights reserved.</span>
+                <div className='flex'>
+                    <IconButton
+                        onClick={ () => window.open('https://github.com/glovooker') }
+                        bgColor="bg-[#171515]"
+                        icon={ <FaGithub className="h-5 w-5 md:h-8 md:w-8" /> }
+                    />
+                    <IconButton
+                        onClick={ () => window.open('https://www.linkedin.com/in/glovooker/') }
+                        bgColor="bg-[#0077B5]"
+                        icon={ <FaLinkedin className="h-5 w-5 md:h-8 md:w-8" /> }
+                    />
+                </div>
+            </div>
+        </footer>
+    );
+};
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx
@@ -4,112 +4,112 @@ import { DDMItem } from '../Header/Header';
 import { useTranslation } from 'react-i18next';
 
 interface Props {
-  forceOpen?: boolean;
-  items: DDMItem[];
+    forceOpen?: boolean;
+    items: DDMItem[];
 }
 
 const LanguageSwitch = (props: Props) => {
-  const { t } = useTranslation('header');
+    const { t } = useTranslation('header');
 
-  const [showList, setShowList] = useState(false);
-  const [selectedItem, setSelectedItem] = useState<DDMItem>(props.items[0]);
-  const panelResultElement = useRef<HTMLDivElement>(null);
-  const selectButton = useRef<HTMLButtonElement>(null);
-  const handleClickOutside = useCallback((event: any) => {
-    const myHTMLWrapper = panelResultElement.current;
-    const searchElement = selectButton.current;
-    if (
-      myHTMLWrapper &&
-      searchElement &&
-      !myHTMLWrapper.contains(event.target) &&
-      !searchElement.contains(event.target)
-    ) {
-      setShowList(false);
-    }
-  }, []);
+    const [showList, setShowList] = useState(false);
+    const [selectedItem, setSelectedItem] = useState<DDMItem>(props.items[0]);
+    const panelResultElement = useRef<HTMLDivElement>(null);
+    const selectButton = useRef<HTMLButtonElement>(null);
+    const handleClickOutside = useCallback((event: any) => {
+        const myHTMLWrapper = panelResultElement.current;
+        const searchElement = selectButton.current;
+        if (
+            myHTMLWrapper &&
+            searchElement &&
+            !myHTMLWrapper.contains(event.target) &&
+            !searchElement.contains(event.target)
+        ) {
+            setShowList(false);
+        }
+    }, []);
 
-  const handleLanguageChange = (lng: string) => {
-    i18next.changeLanguage(lng);
-  };
-
-  const handleLanguageSwitch = (item: DDMItem) => {
-    setSelectedItem(item);
-    handleLanguageChange(item.label);
-    setShowList(false);
-  };
+    const handleLanguageChange = (lng: string) => {
+        i18next.changeLanguage(lng);
+    };
 
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+    const handleLanguageSwitch = (item: DDMItem) => {
+        setSelectedItem(item);
+        handleLanguageChange(item.label);
+        setShowList(false);
     };
-  }, [handleClickOutside]);
 
-  return (
-    <div className='w-44'>
-      <div className='mt-1 ml-10 relative'>
-        <button
-          type='button'
-          ref={ selectButton }
-          onClick={ () => setShowList(!showList) }
-          className='relative w-full bg-transparent rounded-md pl-3 pr-10 py-3 text-right border-2 border-white text-white focus:border-gray-300 focus:text-gray-300 cursor-pointer sm:text-md'
-        >
-          <span className='flex items-center justify-end'>
-            <span className='ml-3 block truncate'>
-              { t(selectedItem?.label) }
-            </span>
-          </span>
-          <span className='ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none'>
-            <svg
-              className='h-5 w-5 text-white focus:text-gray-300'
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 0 20 20'
-              fill='currentColor'
-              aria-hidden='true'
-            >
-              <path
-                fillRule='evenodd'
-                d='M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z'
-                clipRule='evenodd'
-              />
-            </svg>
-          </span>
-        </button>
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [handleClickOutside]);
+
+    return (
+        <div className='w-44'>
+            <div className='mt-1 ml-10 relative'>
+                <button
+                    type='button'
+                    ref={ selectButton }
+                    onClick={ () => setShowList(!showList) }
+                    className='relative w-full bg-transparent rounded-md pl-3 pr-10 py-3 text-right border-2 border-white text-white focus:border-gray-300 focus:text-gray-300 cursor-pointer sm:text-md'
+                >
+                    <span className='flex items-center justify-center'>
+                        <span className='ml-3 block truncate'>
+                            { t(selectedItem?.label) }
+                        </span>
+                    </span>
+                    <span className='ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none'>
+                        <svg
+                            className='h-5 w-5 text-white focus:text-gray-300'
+                            xmlns='http://www.w3.org/2000/svg'
+                            viewBox='0 0 20 20'
+                            fill='currentColor'
+                            aria-hidden='true'
+                        >
+                            <path
+                                fillRule='evenodd'
+                                d='M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z'
+                                clipRule='evenodd'
+                            />
+                        </svg>
+                    </span>
+                </button>
 
-        { (showList || props.forceOpen) && (
-          <div
-            ref={ panelResultElement }
-            className='absolute mt-1 w-full z-10 rounded-md bg-white shadow-lg'
-          >
-            <ul
-              tabIndex={ -1 }
-              role='listbox'
-              aria-labelledby='listbox-label'
-              aria-activedescendant='listbox-item-3'
-              className='max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm'
-            >
-              { props.items.map((item) => {
-                return (
-                  <li
-                    key={ item.label }
-                    onClick={ () => handleLanguageSwitch(item) }
-                    id='listbox-item-1'
-                    role='option'
-                    className='text-glovooker-chamoisee-100 cursor-pointer select-none hover:bg-glovooker-chamoisee-100 hover:text-white relative py-2 pl-3 pr-9'
-                  >
-                    <div className='flex items-center'>
-                      <span className='ml-3 block font-normal truncate'>
-                        { t(item.label) }
-                      </span>
+                { (showList || props.forceOpen) && (
+                    <div
+                        ref={ panelResultElement }
+                        className='absolute mt-1 w-full z-10 rounded-md bg-white shadow-lg'
+                    >
+                        <ul
+                            tabIndex={ -1 }
+                            role='listbox'
+                            aria-labelledby='listbox-label'
+                            aria-activedescendant='listbox-item-3'
+                            className='max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm'
+                        >
+                            { props.items.map((item) => {
+                                return (
+                                    <li
+                                        key={ item.label }
+                                        onClick={ () => handleLanguageSwitch(item) }
+                                        id='listbox-item-1'
+                                        role='option'
+                                        className='text-glovooker-chamoisee-100 cursor-pointer select-none hover:bg-glovooker-chamoisee-100 hover:text-white relative py-2 pl-3 pr-9'
+                                    >
+                                        <div className='flex items-center'>
+                                            <span className='ml-3 block font-normal truncate'>
+                                                { t(item.label) }
+                                            </span>
+                                        </div>
+                                    </li>
+                                );
+                            }) }
+                        </ul>
                     </div>
-                  </li>
-                );
-              }) }
-            </ul>
-          </div>
-        ) }
-      </div>
-    </div>
-  );
+                ) }
+            </div>
+        </div>
+    );
 };
 export default LanguageSwitch;
diff --git a/src/labels/labels.ts b/src/labels/labels.ts
@@ -3,6 +3,8 @@ const resources = {
         header: {
             logo_alt: 'Glovooker Logo',
             home: 'Inicio',
+            about: 'Sobre mí',
+            projects: 'Proyectos',
             es: 'Español',
             en: 'Inglés',
         },
@@ -150,6 +152,8 @@ const resources = {
         header: {
             logo_alt: 'Glovooker Logo',
             home: 'Home',
+            about: 'About me',
+            projects: 'Projects',
             es: 'Spanish',
             en: 'English',
         },

diff --git a/src/layout/basicLayout.tsx b/src/layout/basicLayout.tsx
@@ -1,31 +1,41 @@
 import { useTranslation } from 'react-i18next';
 
 import { Header, HeaderLink } from '../components/Header/Header';
+import { Footer } from '../components/Footer/Footer';
 
 type ChildrenComponent = () => JSX.Element; // Define the type for the Children component
 
 export const withBasicLayout = (Children: ChildrenComponent) => () => {
-  const { t } = useTranslation('header');
+    const { t } = useTranslation('header');
 
-  const headerLinks: HeaderLink[] = [
-    {
-      label: `${ t('home') }`,
-      link: '#hero',
-    },
-  ];
+    const headerLinks: HeaderLink[] = [
+        {
+            label: `${ t('home') }`,
+            link: '#hero',
+        },
+        {
+            label: `${ t('about') }`,
+            link: '#about',
+        },
+        {
+            label: `${ t('projects') }`,
+            link: '#portfolio',
+        },
+    ];
 
-  return (
-    <div className='flex min-w-screen min-h-screen overflow-x-hidden'>
-      <Header
-        links={ headerLinks }
-        hideGitHubLink={ true }
-        alignRight={ true }
-        isFat={ true }
-        forceMenuOpenInMobile={ false }
-      />
-      <main className='w-screen'>
-        <Children />
-      </main>
-    </div>
-  );
+    return (
+        <div className='flex flex-col min-w-screen min-h-screen overflow-x-hidden'>
+            <Header
+                links={ headerLinks }
+                hideGitHubLink={ true }
+                alignRight={ true }
+                isFat={ true }
+                forceMenuOpenInMobile={ false }
+            />
+            <main className='w-screen'>
+                <Children />
+            </main>
+            <Footer />
+        </div>
+    );
 };
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter as Router, HashRouter } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 import './index.css';
 import './i18n';
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+    document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
-    <HashRouter>
-      <App />
-    </HashRouter>
-  </React.StrictMode>
+    <React.StrictMode>
+        <Router>
+            <App />
+        </Router>
+    </React.StrictMode>
 );
diff --git a/src/sections/AboutMe.tsx b/src/sections/AboutMe.tsx
@@ -34,9 +34,9 @@ const AboutMe: React.FC<AboutMeProps> = (props) => {
         <section
             id="about"
             ref={ props.reference }
-            className="bg-glovooker-green-100 overflow-hidden relative lg:flex lg:items-center"
+            className="bg-glovooker-green-100 overflow-hidden relative flex flex-col lg:flex-row lg:items-center"
         >
-            <div className="py-12 px-16 md:px-8 lg:py-20 lg:px-20 z-20 justify-center w-1/2">
+            <div className="py-12 px-16 md:px-8 lg:py-20 lg:px-20 z-20 justify-center lg:w-1/2">
                 <h2 className="text-3xl md:text-4xl font-circularblack text-white mb-10 max-w-3xl">
                     <span className="block">{ t(props.title) }</span>
                 </h2>
@@ -51,7 +51,7 @@ const AboutMe: React.FC<AboutMeProps> = (props) => {
                 </div>
             </div>
 
-            <div className="flex items-center p-8 lg:p-24 justify-center w-1/2">
+            <div className="flex items-center p-8 lg:p-24 justify-center lg:w-1/2">
                 <img src={ aboutMe1 } className="rounded-lg 3xl:w-1/2" alt="Tree" />
                 {/* <div>
                     <img src={ aboutMe3 } className="rounded-lg mb-8" alt="Tree" />

diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
@@ -3,10 +3,6 @@ import { TitleLoop } from '../components/TitleLoop/TitleLoop';
 import { useTranslation } from 'react-i18next';
 import { RefObject } from 'react';
 import { SectionsReferences } from '../pages/Home';
-import { FaGithub, FaLinkedin } from 'react-icons/fa';
-import { IconButton } from '../components';
-import VideoEmbed from '../components/InterviewPreview/InterviewPreview';
-import YouTubeEmbed from '../components/InterviewPreview/InterviewPreview';
 import InterviewPreview from '../components/InterviewPreview/InterviewPreview';
 
 interface Props {
@@ -47,16 +43,6 @@ const Hero: React.FC<Props> = (props) => {
                                 bgColor="bg-glovooker-green-100"
                                 onClick={ props.sectionsRef.portfolioRef.scrollTo }
                             />
-                            <IconButton
-                                onClick={ () => window.open('https://github.com/glovooker') }
-                                bgColor="bg-[#171515]"
-                                icon={ <FaGithub className="h-8 w-8" /> }
-                            />
-                            <IconButton
-                                onClick={ () => window.open('https://www.linkedin.com/in/glovooker/') }
-                                bgColor="bg-[#0077B5]"
-                                icon={ <FaLinkedin className="h-8 w-8" /> }
-                            />
                         </div>
                     </div>
                 </div>

diff --git a/src/sections/Portfolio.tsx b/src/sections/Portfolio.tsx
@@ -12,7 +12,7 @@ const Portfolio: React.FC<PortfolioProps> = ({ withSearch = false, reference })
     const { t } = useTranslation('portfolio');
 
     return (
-        <section ref={ reference } className="w-full bg-glovooker-blue-100 p-10">
+        <section ref={ reference } id='portfolio' className="w-full bg-glovooker-blue-100 p-10">
             <div className="header font-circularblack flex items-end justify-between mb-12">
                 <div className="title">
                     <p className="text-5xl font-bold text-white mb-4">{ t('title') }</p>