Merge pull request #9 from sfuosdev/feature/issue-8/projects-section

Completes Issue 8 by implementing Projects Page
sfuosdev · Nov 25, 2024 · d84261a · d84261a
2 parents 8b8d2cb + 463cf34
commit d84261a
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 55 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/projects/course-compass.jpg b/public/projects/course-compass.jpg
diff --git a/public/projects/financial-fast-feed.jpg b/public/projects/financial-fast-feed.jpg
diff --git a/src/components/Project.tsx b/src/components/Project.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+type ProjectProps = {
+  title: string;
+  description: string;
+  imgURL: string;
+  githubURL: string;
+};
+
+const Project: React.FC<ProjectProps> = ({
+  title,
+  description,
+  imgURL,
+  githubURL
+}) => {
+  return (
+    <div className="flex flex-col md:flex-row rounded-lg md:justify-between overflow-hidden">
+      <div className="md:w-1/2">
+        <div className="flex flex-row justify-start items-start space-x-4">
+            <h3 className="text-2xl font-bold mb-4 text-center">{title}</h3>
+            <a href={githubURL} target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" className="bi bi-github hover:fill-primary-light transition-all duration-300" viewBox="0 0 16 16">
+                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
+                </svg>
+            </a>
+        </div>
+        <p className="mb-4">{description}</p>
+        <a href="#" className="inline-flex items-center px-4 py-2 btn btn-primary text-center text-white transition duration-300 cursor-pointer">
+            ./DETAILS
+        </a>
+      </div>
+      <div className="md:w-1/2 bg-gray-700 w-full max-w-[325px] flex items-center justify-center mt-8 md:mt-0">
+        <img src={imgURL} alt={title} className="w-full object-cover rounded-md" />
+      </div>
+    </div>
+  );
+};
+
+export default Project;
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
@@ -1,75 +1,119 @@
-import React from 'react'
+import React, { useState } from 'react'
+import Project from './Project'
+import { ProjectType } from '../interfaces/project-type'
+
+const onGoingProjectsList: ProjectType[] = [
+  {
+    title: 'Financial Fast Feed',
+    description: 'Financial Fast Feed aggregates and summarizes news from 9 different financial sources, including Crypto, Economic, and Stock Market updates. Powered by GPT-3.5, it offers quick insights into market trends and financial news, helping users stay informed with concise summaries from diverse perspectives.',
+    imgURL: 'projects/financial-fast-feed.jpg',
+    githubURL: 'https://github.com/sfuosdev/financial-fast-feed'
+  },
+  {
+    title: 'CourseCompass',
+    description: 'Course Compass is a platform designed to help students select courses and plan their degrees. By providing course ratings, reviews, and calendars, students can make informed decisions and share insights with others. Built with Next.js, React, MongoDB, and Tailwind CSS, the project emphasizes team collaboration and version control best practices.',
+    imgURL: 'projects/course-compass.jpg',
+    githubURL: 'https://github.com/JoaoIshida/CourseCompass'
+  }
+];
+
+const pastProjectsList: ProjectType[] = [
+];
 
 const Projects = () => {
+  const [activeTab, setActiveTab] = useState('ONGOING');
+
+  const renderProjectsList = () => {
+    let projectsList = [];
+    let message = '';
+
+    if (activeTab === 'ONGOING') {
+      projectsList = onGoingProjectsList;
+      message = projectsList.length === 0 ? 'No ongoing projects at the moment.' : '';
+    } else {
+      projectsList = pastProjectsList;
+      message = projectsList.length === 0 ? 'No past projects available.' : '';
+    }
+
+    if (projectsList.length === 0 && message) {
+      return <p>{message}</p>;
+    }
+
+    return projectsList.map((project, index) => (
+      <Project
+        key={index}
+        title={project.title}
+        description={project.description}
+        imgURL={project.imgURL}
+        githubURL={project.githubURL}
+      />
+    ));
+  };
+
   return (
-    <div className="space-y-12">
-      <section className="bg-gray-700 py-20 text-center">
-        <div className="container mx-auto px-4">
-          <h1 className="text-6xl font-bold mb-4">Projects</h1>
-          <p className="text-xl mb-8">[some brief description]</p>
-          <a href="/" className="inline-flex items-center px-6 py-3 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300">
-            ./HOME
+    <div className="mt-[60px] md:mt-[80px]">
+      {/* Hero Section */}
+      <section className="bg-gradient-2 py-32 flex flex-col justify-center items-start">
+        <div className="container mx-auto px-6 sm:px-12">
+          <h1 className="text-6xl font-bold font-club mb-6 text-white">Projects</h1>
+          <p className="text-xl mb-10 text-white">
+          Dive into the groundbreaking projects shaping innovation and collaboration at SFU Open Source Development Club. Our open-source initiatives empower students, advance technology, and contribute to a thriving global developer community.
+          </p>
+          <a href="/" className="btn btn-primary flex flex-row px-4 py-2 rounded w-56 text-white transition duration-300">
+            <p className="mr-4">&gt;</p>./HOME
           </a>
         </div>
       </section>
 
-      <section className="container mx-auto px-4 py-12">
-        <h2 className="text-4xl font-bold mb-8">We Are Not All About Coding</h2>
-        <div className="flex flex-col md:flex-row justify-between items-start">
-          <div className="md:w-1/2 mb-8 md:mb-0">
-            <p className="text-lg mb-4">
-              We are a student club at SFU aimed at bringing together talented individuals from tech, design, and business. Our primary goal is to collaborate on projects that contribute to the community while providing valuable learning opportunities for our members.
-            </p>
-            <p className="text-lg">
-              Join us at the SFU Open Source Development Club and be part of a community dedicated to making a positive impact through technology and collaboration.
+      {/* Projects and Beyond Section */}
+      <section id="about" className="container mx-auto flex flex-col w-full py-16 px-4">
+        <h2 className="section-title text-left font-club">Empowering Developers and Beyond</h2>
+
+        {/* Content Wrapper */}
+        <div className="flex flex-col space-y-8 md:flex-row md:space-x-8 md:space-y-0">
+          {/* Left Side (text) */}
+          <div className="md:w-1/2">
+            <p className="text-lg mb-6">
+              At the <strong className="text-primary">SFU Open Source Development Club</strong>, we believe in fostering a community where developers can grow not only their <strong className="text-primary">technical skills</strong> but also their <strong className="text-primary">leadership</strong>, <strong className="text-primary">collaboration</strong>, and <strong className="text-primary">problem-solving abilities</strong>. Our initiatives go beyond writing code—whether it's through engaging <strong className="text-primary">workshops</strong>, <strong className="text-primary">mentorship opportunities</strong>, or contributions to meaningful <strong className="text-primary">projects</strong>, we aim to empower members to make an <strong className="text-primary">impact</strong> in the tech world and beyond. Together, we create an environment that nurtures <strong className="text-primary">innovation</strong>, <strong className="text-primary">inclusivity</strong>, and <strong className="text-primary">continuous learning</strong>.
             </p>
           </div>
-          <div className="md:w-1/2 space-y-4">
-            <a href="#" className="block w-full px-6 py-3 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300 text-center">
-              ./ONGOING_PROJS
+
+          {/* Right Side (button links) */}
+          <div className="md:w-1/2 flex flex-col items-start md:items-end space-y-6">
+            <a href="#projects-section" className="flex flex-row px-4 py-2 rounded w-full max-w-[325px] btn btn-primary text-left text-white transition duration-300" onClick={() => setActiveTab('ONGOING')}>
+              <p className="mr-4">&gt;</p>./ONGOING_PROJS
             </a>
-            <a href="#" className="block w-full px-6 py-3 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300 text-center">
-              ./PAST_PROJS
+            <a href="#projects-section" className="flex flex-row px-4 py-2 rounded w-full max-w-[325px] btn btn-primary text-left text-white transition duration-300" onClick={() => setActiveTab('PAST')}>
+              <p className="mr-4">&gt;</p>./PAST_PROJS
             </a>
           </div>
         </div>
       </section>
 
-      <section className="container mx-auto px-4 py-12">
-        <h2 className="text-4xl font-bold mb-8">Our Projects</h2>
+      {/* Our Projects Section */}
+      <section id="projects-section" className="container mx-auto px-4 py-12">
+        <h2 className="section-title text-left font-club">Our Projects</h2>
         <div className="flex space-x-4 mb-8">
-          <span className="px-4 py-2 bg-gray-700 rounded-full">PAST</span>
-          <span className="px-4 py-2 bg-purple-600 rounded-full">ONGOING</span>
+          <span className={`px-4 py-2 btn text-center text-white transition duration-300 cursor-pointer ${activeTab === 'ONGOING' ? 'bg-[#D55FFF]' : 'bg-[#636C9E]'}`} onClick={() => setActiveTab('ONGOING')}>ONGOING</span>
+          <span className={`px-4 py-2 btn text-center text-white transition duration-300 cursor-pointer ${activeTab === 'PAST' ? 'bg-[#D55FFF]' : 'bg-[#636C9E]'}`} onClick={() => setActiveTab('PAST')}>PAST</span>
         </div>
-        <div className="space-y-8">
-          <div className="flex flex-col md:flex-row bg-gray-800 rounded-lg overflow-hidden">
-            <div className="md:w-2/3 p-6">
-              <h3 className="text-2xl font-bold mb-4">[Proj 1 Name]</h3>
-              <p className="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-              <a href="#" className="inline-flex items-center px-4 py-2 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300">
-                ./DETAILS
-              </a>
-            </div>
-            <div className="md:w-1/3 bg-gray-700 flex items-center justify-center text-2xl">PLACEHOLDER</div>
-          </div>
-          <div className="flex flex-col md:flex-row bg-gray-800 rounded-lg overflow-hidden">
-            <div className="md:w-2/3 p-6">
-              <h3 className="text-2xl font-bold mb-4">[Proj 2 Name]</h3>
-              <p className="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-              <a href="#" className="inline-flex items-center px-4 py-2 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300">
-                ./DETAILS
-              </a>
-            </div>
-            <div className="md:w-1/3 bg-gray-700 flex items-center justify-center text-2xl">PLACEHOLDER</div>
-          </div>
+
+        <div className="space-y-12">
+          {renderProjectsList()}
         </div>
+
       </section>
 
-      <section className="container mx-auto px-4 py-12 text-center">
-        <h2 className="text-4xl font-bold mb-8">Start Your Journey With Us</h2>
-        <a href="#" className="inline-flex items-center px-6 py-3 bg-teal-500 text-white rounded-full hover:bg-teal-600 transition duration-300">
-          ./START_UR_JOURNEY
-        </a>
+      {/* Join Us CTA Banner Section */}
+      <section className="py-24 text-center">
+        <div className="container mx-auto px-4">
+          <h2 className="text-4xl font-bold font-club mb-6 text-white">Start Your Journey With Us</h2>
+          <div className="flex justify-center">
+            <a href="/projects" className="flex flex-row px-4 py-2 rounded w-full max-w-[255px] btn btn-primary text-left text-white transition duration-300">
+              <p className="mr-4">&gt;</p>./START_UR_JOURNEY
+            </a>
+          </div>
+        </div>
       </section>
     </div>
   )

diff --git a/src/interfaces/project-type.ts b/src/interfaces/project-type.ts
@@ -0,0 +1,6 @@
+export interface ProjectType {
+    title: string;
+    description: string;
+    imgURL: string;
+    githubURL: string;
+}