Update Team page

- Update Navbar - Add Dark Mode colors
PureNimble · Sep 27, 2024 · d5fdc7e · d5fdc7e
1 parent 8080376
commit d5fdc7e
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 69 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,24 +1,53 @@
-import React, { useState } from 'react';
-import { Team, PageNotFound } from './pages';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { Navbar } from './components';
+import React from 'react';
+import { BrowserRouter, Routes, Route, useLocation, matchPath } from 'react-router-dom';
+import Navbar from './components/Navbar';
+import Team from './pages/Team';
+import PageNotFound from './pages/PageNotFound';
+import "@theme-toggles/react/css/Classic.css";
 
 function App() {
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = React.useState(() => {
+    const savedMode = localStorage.getItem('darkMode');
+    return savedMode ? JSON.parse(savedMode) : false;
+  });
 
   const toggleDarkMode = () => {
-    setDarkMode(!darkMode);
+    setDarkMode(prevMode => {
+      const newMode = !prevMode;
+      localStorage.setItem('darkMode', JSON.stringify(newMode));
+      return newMode;
+    });
   };
 
+  return (
+    <BrowserRouter>
+      <AppContent darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+    </BrowserRouter>
+  );
+}
+
+function AppContent({ darkMode, toggleDarkMode }) {
+  const location = useLocation();
+
+  const routesWithNavbar = [
+    { path: '/' },
+  ];
+
+  const shouldShowNavbar = routesWithNavbar.some(route =>
+    matchPath(route.path, location.pathname)
+  );
+
   return (
     <div className={darkMode ? 'dark' : ''}>
-      <BrowserRouter>
-        <Navbar toggleDarkMode={toggleDarkMode} />
-        <Routes>
-          <Route path="/" element={<Team />} />
-          <Route path="*" element={<PageNotFound />} />
-        </Routes>
-      </BrowserRouter>
+      <div className='bg-bkg-light dark:bg-bkg-dark min-h-screen flex flex-col'>
+        {shouldShowNavbar && <Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />}
+        <main className='flex-grow'>
+          <Routes>
+            <Route path="/" element={<Team />} />
+            <Route path="*" element={<PageNotFound />} />
+          </Routes>
+        </main>
+      </div>
     </div>
   );
 }

diff --git a/src/components/DarkModeToggleButton.jsx b/src/components/DarkModeToggleButton.jsx
@@ -15,7 +15,7 @@ const DarkModeToggleButton = ({ toggleDarkMode }) => {
     }, []);
 
     return (
-        <Around className='text-4xl text-amber-400 dark:text-gray-500' ref={buttonRef} onToggle={toggleDarkMode} />
+        <Around className='text-4xl text-amber-400 dark:text-content-light' ref={buttonRef} onToggle={toggleDarkMode} />
     );
 }
 

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,21 +1,19 @@
-import { NavLink } from "react-router-dom";
-import { DarkModeToggleButton } from ".";
-import "@theme-toggles/react/css/Classic.css";
-import { FaHome } from "react-icons/fa";
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { FaHome } from 'react-icons/fa';
+import DarkModeToggleButton from './DarkModeToggleButton';
+import { RiGitRepositoryFill } from "react-icons/ri";
 
 const Navbar = ({ toggleDarkMode }) => {
     return (
-        <header className='header bg-gray-400 dark:bg-gray-700'>
+        <header className='header bg-bkg-light dark:bg-bkg-dark flex justify-between items-center p-4'>
+            <DarkModeToggleButton toggleDarkMode={toggleDarkMode} />
             <NavLink to='/'>
-                <FaHome className='text-4xl text-black dark:text-white' />
+                <FaHome className='text-4xl text-content-dark dark:text-content-light' />
+            </NavLink>
+            <NavLink to='/projects'>
+                <RiGitRepositoryFill className='text-3xl font-semibold text-content-dark dark:text-content-light' />
             </NavLink>
-            <nav className='flex text-lg gap-7 font-medium'>
-                <NavLink to='/error' className={({ isActive }) => isActive ? "text-blue-600 dark:text-blue-500 no-select" : "text-black dark:text-white no-select"}>
-                    Error
-                </NavLink>
-            </nav>
-            <DarkModeToggleButton toggleDarkMode={toggleDarkMode} />
-
         </header>
     );
 };

diff --git a/src/components/ProfileCard.jsx b/src/components/ProfileCard.jsx
@@ -1,13 +1,26 @@
 import React from 'react';
+import { FaGithub, FaLinkedin } from 'react-icons/fa';
 
-const ProfileCard = ({ name, role, image }) => {
+const ProfileCard = ({ name, role, image, github, linkedin }) => {
     return (
-        <div>
-            <img className="object-cover rounded-xl aspect-square" src={image} alt="" />
-            <h1 className="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white">{name}</h1>
-            <p className="mt-2 text-gray-500 capitalize dark:text-gray-300">{role}</p>
+        <div className="bg-content-light dark:bg-content-dark text-accent1-light dark:text-accent1-dark p-8 rounded-xl shadow-md">
+            <div className="flex justify-center items-center">
+                <img className="w-40 h-40 object-cover rounded-full" src={image} alt={`Profile picture of ${name}`} />
+            </div>
+            <div className="text-center">
+                <h1 className="mt-4 text-2xl font-semibold capitalize">{name}</h1>
+                <p className="mt-2 capitalize">{role}</p>
+            </div>
+            <div className="flex mt-4 space-x-4 justify-center items-center">
+                <a href={github} aria-label={`GitHub Profile of ${name}`} target="_blank" rel="noopener noreferrer">
+                    <FaGithub className="text-4xl text-accent1-light dark:text-accent1-dark" />
+                </a>
+                <a href={linkedin} aria-label={`LinkedIn Profile of ${name}`} target="_blank" rel="noopener noreferrer">
+                    <FaLinkedin className="text-4xl text-accent1-light dark:text-accent1-dark" />
+                </a>
+            </div>
         </div>
     );
 }
 
-export default ProfileCard;
+export default ProfileCard;
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -3,15 +3,22 @@ export const teamMembers = [
         name: 'Vasco Sousa',
         role: 'CEO',
         image: 'https://github.com/vscosousa.png',
+        github: 'https://github.com/vscosousa',
+        linkedin: 'https://linkedin.com/in/vscosousa/'
+
     },
     {
-        name: 'João Pinto',
+        name: 'Rafael Araújo',
         role: 'CEO',
-        image: 'https://github.com/joaopinto15.png',
+        image: 'https://github.com/ReyFow.png',
+        github: 'https://github.com/ReyFow',
+        linkedin: 'https://linkedin.com/in/rafaraujo589/'
     },
     {
-        name: 'Rafael Araújo',
+        name: 'João Pinto',
         role: 'CEO',
-        image: 'https://github.com/ReyFow.png',
+        image: 'https://github.com/joaopinto15.png',
+        github: 'https://github.com/joaopinto15',
+        linkedin: 'https://linkedin.com/in/joaopinto15/'
     },
 ];
diff --git a/src/pages/PageNotFound.jsx b/src/pages/PageNotFound.jsx
@@ -7,16 +7,16 @@ function PageNotFound() {
     const goHome = () => navigate('/');
 
     return (
-        <section className="bg-white dark:bg-gray-900">
+        <section>
             <div className="container flex items-center min-h-screen px-6 py-12 mx-auto">
                 <div className="flex flex-col items-center max-w-sm mx-auto text-center">
                     <p className="p-3 text-sm font-medium text-blue-500 rounded-full bg-blue-50 dark:bg-gray-800">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="w-6 h-6">
                             <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                         </svg>
                     </p>
-                    <h1 className="mt-3 text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Page not found</h1>
-                    <p className="mt-4 text-gray-500 dark:text-gray-400">The page you are looking for doesn't exist. Here are some helpful links:</p>
+                    <h1 className="mt-3 text-2xl font-semibold text-accent1-light dark:text-accent1-dark md:text-3xl">Page not found</h1>
+                    <p className="mt-4 text-accent2-light dark:text-accent2-dark">The page you are looking for doesn't exist. Here are some helpful links:</p>
 
                     <div className="flex items-center w-full mt-6 gap-x-3 shrink-0 sm:w-auto">
                         <button onClick={goBack} className="flex items-center justify-center w-1/2 px-5 py-2 text-sm text-gray-700 transition-colors duration-200 bg-white border rounded-lg gap-x-2 sm:w-auto dark:hover:bg-gray-800 dark:bg-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:border-gray-700">
@@ -26,7 +26,7 @@ function PageNotFound() {
                             <span>Go back</span>
                         </button>
 
-                        <button onClick={goHome} className="w-1/2 px-5 py-2 text-sm tracking-wide text-white transition-colors duration-200 bg-blue-500 rounded-lg shrink-0 sm:w-auto hover:bg-blue-600 dark:hover:bg-blue-500 dark:bg-blue-600">
+                        <button onClick={goHome} className="w-1/2 px-5 py-2 text-sm tracking-wide text-accent1-dark transition-colors duration-200 bg-blue-500 rounded-lg shrink-0 sm:w-auto hover:bg-blue-600 dark:hover:bg-blue-500 dark:bg-blue-600">
                             Take me home
                         </button>
                     </div>

diff --git a/src/pages/Team.jsx b/src/pages/Team.jsx
@@ -5,34 +5,32 @@ import "@theme-toggles/react/css/Classic.css";
 
 const Team = () => {
     return (
-        <div>
-            <section className="bg-white dark:bg-gray-900">
-                <div className="container px-6 py-10 mx-auto">
-                    <div className="xl:flex xl:items-center xl:-mx-4">
-                        <div className="xl:w-1/2 xl:mx-4">
-                            <h1 className="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white">
-                                Our Team
-                            </h1>
-
-                            <p className="max-w-2xl mt-4 text-gray-500 dark:text-gray-300">
-                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo incidunt ex placeat modi magni quia error alias, adipisci rem similique, at omnis eligendi optio eos harum.
-                            </p>
-                        </div>
-
-                        <div className="grid grid-cols-1 gap-8 mt-8 xl:mt-0 xl:mx-4 xl:w-1/2 md:grid-cols-2">
-                            {teamMembers.map((member, index) => (
-                                <ProfileCard
-                                    key={index}
-                                    name={member.name}
-                                    role={member.role}
-                                    image={member.image}
-                                />
-                            ))}
-                        </div>
+        <>
+            <main>
+                <section className="container px-6 py-10 mx-auto">
+                    <header className="text-center">
+                        <h1 className="text-2xl font-semibold text-accent1-light capitalize lg:text-3xl dark:text-accent1-dark">
+                            Our Team
+                        </h1>
+                        <p className="max-w-2xl mt-4 mx-auto text-accent2-light dark:text-accent2-dark">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo incidunt ex placeat modi magni quia error alias, adipisci rem similique, at omnis eligendi optio eos harum.
+                        </p>
+                    </header>
+                    <div className="grid gap-8 mt-8 lg:grid-cols-3">
+                        {teamMembers.map(({ name, role, image, github, linkedin }, index) => (
+                            <ProfileCard
+                                key={index}
+                                name={name}
+                                role={role}
+                                image={image}
+                                github={github}
+                                linkedin={linkedin}
+                            />
+                        ))}
                     </div>
-                </div>
-            </section>
-        </div>
+                </section>
+            </main>
+        </>
     );
 };
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,7 +5,26 @@ export default {
   ],
   darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        bkg: {
+          light: "hsl(200, 20%, 99%)",
+          dark: "hsl(200, 10%, 25%)",
+        },
+        content: {
+          light: "hsl(200, 20%, 92%)",
+          dark: "hsl(200, 5%, 35%)",
+        },
+        accent1: {
+          light: "hsl(200, 100%, 10%)",
+          dark: "hsl(200, 15%, 75%)",
+        },
+        accent2: {
+          light: "hsl(200, 30%, 30%)",
+          dark: "hsl(200, 10%, 61%)",
+        },
+      },
+    },
   },
   plugins: [],
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ const DarkModeToggleButton = ({ toggleDarkMode }) => { @@
         }, []);
         return (
-            <Around className='text-4xl text-amber-400 dark:text-gray-500' ref={buttonRef} onToggle={toggleDarkMode} />
+            <Around className='text-4xl text-amber-400 dark:text-content-light' ref={buttonRef} onToggle={toggleDarkMode} />
         );
     }
@@ Expand Down @@