Fix Navbar

- Update Projects page
PureNimble · Sep 28, 2024 · 267ad4d · 267ad4d
1 parent 894dcb2
commit 267ad4d
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 64 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -29,7 +29,8 @@ function AppContent({ darkMode, toggleDarkMode }) {
   const location = useLocation();
 
   const routesWithNavbar = [
-    { path: '/', path: '/projects' },
+    { path: '/' },
+    { path: '/projects' },
   ];
 
   const shouldShowNavbar = routesWithNavbar.some(route =>
@@ -38,7 +39,7 @@ function AppContent({ darkMode, toggleDarkMode }) {
 
   return (
     <div className={darkMode ? 'dark' : ''}>
-      <div className='bg-bkg-light dark:bg-bkg-dark min-h-screen flex flex-col'>
+      <div className='bg-bkg-light dark:bg-bkg-dark min-h-screen flex flex-col transition-colors duration-300'>
         {shouldShowNavbar && <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />}
         <main className='flex-grow'>
           <Routes>

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -6,7 +6,7 @@ import { RiGitRepositoryFill } from "react-icons/ri";
 
 const Navbar = ({ darkMode, toggleDarkMode }) => {
     return (
-        <header className='header bg-bkg-light dark:bg-bkg-dark flex justify-between items-center p-4'>
+        <header className='header bg-bkg-light dark:bg-bkg-dark flex justify-between items-center p-4 transition-colors duration-300'>
             <DarkModeToggleButton darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
             <NavLink to='/'>
                 <FaHome className='text-4xl text-content-dark dark:text-content-light' />

diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx
@@ -0,0 +1,29 @@
+import pureNimble from '../assets/pureNimbleLogo.png';
+import { FaGithubAlt } from "react-icons/fa";
+
+const ProjectCard = ({ title, description, url, date }) => {
+    return (
+        <a href={url} target="_blank" rel="noopener noreferrer" className="group">
+            <div className="bg-content-light dark:bg-content-dark rounded-lg shadow-lg overflow-hidden w-full transition-colors duration-300 hover:bg-gray-100 dark:hover:bg-gray-500">
+                <FaGithubAlt className='w-full h-64 scale-75 text-bkg-dark dark:text-bkg-light transition-transform duration-300 group-hover:scale-100' />
+                <div className="p-6">
+                    <h2 className="text-2xl font-bold text-accent1-light dark:text-accent1-dark mb-2 transition-colors duration-300 group-hover:text-content-dark dark:group-hover:text-content-light">
+                        {title}
+                    </h2>
+                    <p className="text-accent2-light dark:text-accent2-dark leading-tight mb-4 transition-colors duration-300 group-hover:text-content-dakr dark:group-hover:text-content-light">
+                        {description}
+                    </p>
+                    <div className="flex justify-between items-center">
+                        <div className="flex items-center">
+                            <img src={pureNimble} alt="Avatar" className="w-8 h-8 rounded-full mr-2 object-cover transition-transform duration-300" />
+                            <span className="text-accent1-light dark:text-accent1-dark font-semibold transition-colors duration-300 group-hover:text-content-dark dark:group-hover:text-content-light">PureNimble</span>
+                        </div>
+                        <span className="text-accent1-light dark:text-accent1-dark transition-colors duration-300 group-hover:text-content-dark dark:group-hover:text-content-light">{date}</span>
+                    </div>
+                </div>
+            </div>
+        </a>
+    );
+}
+
+export default ProjectCard;
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,11 +1,11 @@
 import DarkModeToggleButton from "./DarkModeToggleButton";
 import ProfileCard from "./ProfileCard";
 import Navbar from "./Navbar";
-import Card from "./Card";
+import ProjectCard from "./ProjectCard";
 
 export {
     Navbar,
     DarkModeToggleButton,
     ProfileCard,
-    Card
+    ProjectCard
 }
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -29,35 +29,32 @@ export const teamMembers = [
 export const projects = [
     {
         title: 'Lapr 1',
-        description: '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.',
-        image: 'https://via.placeholder.com/150',
-        github: 'https://github.com',
-
+        description: 'This repository contains relevant didactic artifacts for the integrative project to be developed in the first semester of the 2022-2023 academic year in the Bachelor\'s Degree in Engineering (LEI) at the Instituto Superior de Engenharia do Porto (ISEP).',
+        url: 'https://github.com/PureNimble/ISEP-LAPR1',
+        date: '2022-2023'
     },
     {
         title: 'Lapr 2',
-        description: '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.',
-        image: 'https://via.placeholder.com/150',
-        github: 'https://github.com',
-
+        description: 'This repository contains relevant didactic artifacts for the integrative project to be developed in the second semester of the 2022-2023 academic year in the Bachelor\'s Degree in Computer Engineering (LEI) at the Instituto Superior de Engenharia do Porto (ISEP).',
+        url: 'https://github.com/PureNimble/ISEP-LAPR2',
+        date: '2022-2023'
     },
     {
         title: 'Lapr 3',
-        description: '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.',
-        image: 'https://via.placeholder.com/150',
-        github: 'https://github.com',
+        description: 'This repository contains relevant didactic artifacts for the integrative project to be developed in the first semester of the 2023-2024 academic year in the Bachelor\'s Degree in Computer Engineering (LEI) at the Instituto Superior de Engenharia do Porto (ISEP).',
+        url: 'https://github.com/PureNimble/ISEP-LAPR3',
+        date: '2023-2024'
     },
     {
         title: 'Lapr 4',
-        description: '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.',
-        image: 'https://via.placeholder.com/150',
-        github: 'https://github.com',
+        description: 'As part of the LEI (Licenciatura Engenharia Informática) degree\'s integrative project at ISEP (Instituto Superior de Engenharia do Porto) for the 2023/2024 academic year, we are embarking on a project to develop a Minimum Viable Product (MVP) for Jobs4U aimed at automating their talent acquisition process.',
+        url: 'https://github.com/PureNimble/ISEP-LAPR4',
+        date: '2023-2024'
     },
     {
         title: 'HairDrop',
-        description: '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.',
-        image: 'https://via.placeholder.com/150',
-        github: 'https://github.com',
+        description: 'N/A',
+        url: 'https://github.com/PureNimble',
+        date: 'N/A'
     }
-
 ];
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
@@ -1,16 +1,34 @@
 import React from 'react';
-import { Card } from '../components';
+import { ProjectCard } from '../components';
 import { projects } from '../constants';
 
 function Projects() {
     return (
-        <div className="grid gap-8 gap-x-4 mt-8 lg:grid-cols-3 px-4 lg:px-8">
-
-            {projects.map(({ title, description, url }, index) => (
-                <Card title={title} description={description} url={url} />
-
-            ))}
-        </div>
+        <>
+            <main>
+                <section className="container px-4 py-10 mx-auto max-w-7xl">
+                    <header className="text-center">
+                        <h1 className="text-2xl font-semibold text-accent1-light capitalize lg:text-3xl dark:text-accent1-dark transition-colors duration-300">
+                            Our Projects
+                        </h1>
+                        <p className="max-w-2xl mt-4 mx-auto text-accent2-light dark:text-accent2-dark transition-colors duration-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>
+                    </header>
+                    <div className="grid gap-8 gap-x-8 mt-8 lg:grid-cols-3 lg:px-4">
+                        {projects.map(({ title, description, url, date }, index) => (
+                            <ProjectCard
+                                key={index}
+                                title={title}
+                                description={description}
+                                url={url}
+                                date={date}
+                            />
+                        ))}
+                    </div>
+                </section>
+            </main>
+        </>
     );
 }
 

diff --git a/src/pages/Team.jsx b/src/pages/Team.jsx
@@ -9,10 +9,10 @@ const Team = () => {
             <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">
+                        <h1 className="text-2xl font-semibold text-accent1-light capitalize lg:text-3xl dark:text-accent1-dark transition-colors duration-300">
                             Our Team
                         </h1>
-                        <p className="max-w-2xl mt-4 mx-auto text-accent2-light dark:text-accent2-dark">
+                        <p className="max-w-2xl mt-4 mx-auto text-accent2-light dark:text-accent2-dark transition-colors duration-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>
                     </header>

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,9 +1,9 @@
 import Team from "./Team";
-import PageNotFound from "./PageNotFound";
 import Projects from "./Projects";
+import PageNotFound from "./PageNotFound";
 
 export {
     Team,
-    PageNotFound,
-    Projects
+    Projects,
+    PageNotFound
 }