diff --git a/src/components/Events.tsx b/src/components/Events.tsx index 9cbf996..ebf6024 100644 --- a/src/components/Events.tsx +++ b/src/components/Events.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from "react"; const Events = () => { return ( @@ -7,28 +7,46 @@ const Events = () => {

Event

[some brief description]

- + ./HOME
-

We Touch Grass.
We Meet People.

+

+ We Touch Grass. +
+ We Meet People. +

- 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. + 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.

- 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. + 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.

- + ./FUTURE_EVENTS - + ./PAST_EVENTS
@@ -45,34 +63,63 @@ const Events = () => {

[Event 1 Name]

-

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.

- +

+ 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. +

+ ./DETAILS
-
PLACEHOLDER
+
+ PLACEHOLDER +

[Event 2 Name]

-

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.

- +

+ 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. +

+ ./DETAILS
-
PLACEHOLDER
+
+ PLACEHOLDER +

Start Your Journey With Us

- + ./START_UR_JOURNEY
- ) -} + ); +}; -export default Events \ No newline at end of file +export default Events; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 2902d1b..0d2627c 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,93 +1,161 @@ -import React from 'react' +import React from "react"; const Footer = () => { const handleSocialClick = (platform: string, url: string) => { - alert(`You're being redirected to our ${platform} page.`) - window.open(url, '_blank') - } + alert(`You're being redirected to our ${platform} page.`); + window.open(url, "_blank"); + }; return ( - ) -} + ); +}; -export default Footer \ No newline at end of file +export default Footer; diff --git a/src/components/Home.tsx b/src/components/Home.tsx index ea9debb..2472866 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -1,16 +1,21 @@ -import React from 'react' -import { Link } from 'react-router-dom'; - +import React from "react"; +import { Link } from "react-router-dom"; const Home = () => { return (
- {/* Hero Section */}
-

SFU OS Dev Club

-

Join SFU Open Source Development Club and collaborate with tech, design, and business students on projects that make a real impact. Build, learn, and grow together as we drive positive change through technology.

+

+ SFU OS Dev Club +

+

+ Join SFU Open Source Development Club and collaborate with tech, + design, and business students on projects that make a real impact. + Build, learn, and grow together as we drive positive change through + technology. +

{
{/* Who Are We Section */} -
+

Who We Are

{/* Content Wrapper */} @@ -29,77 +37,141 @@ const Home = () => { {/* Left Side (text) */}

- 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. + 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.

- 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.. + 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..

{/* Right Side (button links) */}
- +

>

./PROJECTS - +

>

./EVENTS - +

>

./TEAMS
- {/* Our Value to You Section*/}
- -

Our Value to You

+

+ Our Value to You +

-
- - - + + + -

Real-World Experience

-

Tackle real-world challenges through hands-on projects.

+

+ Real-World Experience +

+

+ Tackle real-world + challenges through{" "} + hands-on projects. +

- - - -

Leadership Opportunities

-

Gain leadership experience by leading impactful projects.

+ + + +

+ Leadership Opportunities +

+

+ Gain leadership + experience by leading{" "} + impactful projects. +

- - - -

Networking

-

Connect and collaborate with a community of talented peers.

+ + + +

+ Networking +

+

+ Connect and collaborate + with a community of{" "} + talented peers. +

-
{/* Join Us CTA Banner Section */}
-

Start Your Journey With Us

+

+ Start Your Journey With Us +

- +

>

./START_UR_JOURNEY
- ) -} + ); +}; -export default Home \ No newline at end of file +export default Home; diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx index adaff0a..37dd23e 100644 --- a/src/components/Projects.tsx +++ b/src/components/Projects.tsx @@ -1,64 +1,71 @@ -import React, { useState } from 'react' -import Project from './Project' -import { ProjectType } from '../interfaces/project-type' -import { getBasePath } from '../utils/basePath'; +import React, { useState } from "react"; +import Project from "./Project"; +import { ProjectType } from "../interfaces/project-type"; +import { getBasePath } from "../utils/basePath"; 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: "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' - } + 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[] = [ { title: "SWE Resume Evaluator SaaS", - description: "SWE Resume Evaluator is a Software-as-a-Service (SaaS) web application that uses Naive Bayes classifiers to assess users' resumes for their suitability for various software engineering positions, such as SWE, ML, and QA.", + description: + "SWE Resume Evaluator is a Software-as-a-Service (SaaS) web application that uses Naive Bayes classifiers to assess users' resumes for their suitability for various software engineering positions, such as SWE, ML, and QA.", imgURL: "projects/swe-resume-evaluator.png", - githubURL: "https://github.com/sfuosdev/swe-resume-evaluator" + githubURL: "https://github.com/sfuosdev/swe-resume-evaluator", }, { title: "MACM316", - description: "Macm316 provides a visualization and plotting tool for numerical methods in Numerical Analysis.", + description: + "Macm316 provides a visualization and plotting tool for numerical methods in Numerical Analysis.", imgURL: "projects/macm316.png", - githubURL: "https://github.com/sfuosdev/Macm316" + githubURL: "https://github.com/sfuosdev/Macm316", }, { title: "PituPiPy", - description: "PituPiPy is a Python implementation of P2P (peer-to-peer) networking program that enables users to message and share files within in a P2P network pool.", + description: + "PituPiPy is a Python implementation of P2P (peer-to-peer) networking program that enables users to message and share files within in a P2P network pool.", imgURL: "projects/pitupipy.jpg", - githubURL: "https://github.com/sfuosdev/PituPiPy" + githubURL: "https://github.com/sfuosdev/PituPiPy", }, { title: "SFU-RMP", - description: "Chrome extension for SFU students to provide access to prof rating from RateMyProfessor.com on SFU course registration pages (goSFU, mySchedule)", + description: + "Chrome extension for SFU students to provide access to prof rating from RateMyProfessor.com on SFU course registration pages (goSFU, mySchedule)", imgURL: "projects/sfu-rmp.png", githubURL: "https://github.com/sfuosdev/SFU-RMP", - } + }, ]; const Projects = () => { const basePath = getBasePath(); - const [activeTab, setActiveTab] = useState('ONGOING'); + const [activeTab, setActiveTab] = useState("ONGOING"); const renderProjectsList = () => { let projectsList = []; - let message = ''; + let message = ""; - if (activeTab === 'ONGOING') { + if (activeTab === "ONGOING") { projectsList = onGoingProjectsList; - message = projectsList.length === 0 ? 'No ongoing projects at the moment.' : ''; + message = + projectsList.length === 0 ? "No ongoing projects at the moment." : ""; } else { projectsList = pastProjectsList; - message = projectsList.length === 0 ? 'No past projects available.' : ''; + message = projectsList.length === 0 ? "No past projects available." : ""; } if (projectsList.length === 0 && message) { @@ -81,35 +88,78 @@ const Projects = () => { {/* Hero Section */}
-

Projects

+

+ Projects +

- 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. + 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.

- +

>

./HOME
{/* Projects and Beyond Section */} -
-

Empowering Developers and Beyond

+
+

+ Empowering Developers and Beyond +

{/* Content Wrapper */}
{/* Left Side (text) */}

- At the SFU Open Source Development Club, we believe in fostering a community where developers can grow not only their technical skills but also their leadership, collaboration, and problem-solving abilities. Our initiatives go beyond writing code—whether it's through engaging workshops, mentorship opportunities, or contributions to meaningful projects, we aim to empower members to make an impact in the tech world and beyond. Together, we create an environment that nurtures innovation, inclusivity, and continuous learning. + At the{" "} + + SFU Open Source Development Club + + , we believe in fostering a community where developers can grow + not only their{" "} + technical skills but + also their leadership,{" "} + collaboration, and{" "} + + problem-solving abilities + + . Our initiatives go beyond writing code—whether it's through + engaging workshops,{" "} + mentorship opportunities + , or contributions to meaningful{" "} + projects, we aim to + empower members to make an{" "} + impact in the tech world + and beyond. Together, we create an environment that nurtures{" "} + innovation,{" "} + inclusivity, and{" "} + continuous learning.

{/* Right Side (button links) */}
- setActiveTab('ONGOING')}> + setActiveTab("ONGOING")} + >

>

./ONGOING_PROJS - setActiveTab('PAST')}> + setActiveTab("PAST")} + >

>

./PAST_PROJS
@@ -117,32 +167,51 @@ const Projects = () => {
{/* Our Projects Section */} -
+

Our Projects

- setActiveTab('ONGOING')}>ONGOING - setActiveTab('PAST')}>PAST -
- -
- {renderProjectsList()} + setActiveTab("ONGOING")} + > + ONGOING + + setActiveTab("PAST")} + > + PAST +
+
{renderProjectsList()}
{/* Join Us CTA Banner Section */}
-

Start Your Journey With Us

+

+ Start Your Journey With Us +

- +

>

./START_UR_JOURNEY
- ) -} + ); +}; -export default Projects \ No newline at end of file +export default Projects; diff --git a/src/components/Resources.tsx b/src/components/Resources.tsx index 3a2479f..d82b151 100644 --- a/src/components/Resources.tsx +++ b/src/components/Resources.tsx @@ -1,98 +1,146 @@ -import React from 'react' -import { Github, FileText } from 'lucide-react' +import React from "react"; +import { Github, FileText } from "lucide-react"; const Resources = () => { return (
- {/* Hero Section */}
-

Resources

+

+ Resources +

- Access our curated collection of programming resources, tutorials, and documentation to support your learning journey. + Access our curated collection of programming resources, tutorials, + and documentation to support your learning journey.

- +

>

./HOME
-
-
-
- {/* Collaborate with Us Column */} -
-

Collaborate with Us

- - - - - GitHub - +
+
+
+ {/* Collaborate with Us Column */} +
+

+ Collaborate with Us +

+ + + + + GitHub + - - - - - Discord - -
+ + + + + Discord + +
- {/* Learn and Explore Column */} -
-

Learn and Explore

- - - - - Documentation - + {/* Learn and Explore Column */} +
-
{/* Join Us CTA Banner Section */}
-

Start Your Journey With Us

+

+ Start Your Journey With Us +

- ) -} + ); +}; -export default Resources \ No newline at end of file +export default Resources; diff --git a/src/components/Teams.tsx b/src/components/Teams.tsx index 4c8aea9..de1b573 100644 --- a/src/components/Teams.tsx +++ b/src/components/Teams.tsx @@ -1,5 +1,5 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { getBasePath } from '../utils/basePath'; +import React, { useEffect, useRef, useState } from "react"; +import { getBasePath } from "../utils/basePath"; const Teams = () => { const basePath = getBasePath(); @@ -8,15 +8,16 @@ const Teams = () => { const [isScrolledRight, setIsScrolledRight] = useState(false); const scrollLeft = () => { - scrollContainerRef.current?.scrollBy({ left: -300, behavior: 'smooth' }); + scrollContainerRef.current?.scrollBy({ left: -300, behavior: "smooth" }); }; const scrollRight = () => { - scrollContainerRef.current?.scrollBy({ left: 300, behavior: 'smooth' }); + scrollContainerRef.current?.scrollBy({ left: 300, behavior: "smooth" }); }; const handleScroll = () => { - const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current!; + const { scrollLeft, scrollWidth, clientWidth } = + scrollContainerRef.current!; setIsScrolledLeft(scrollLeft === 0); setIsScrolledRight(scrollLeft + clientWidth >= scrollWidth); }; @@ -24,10 +25,10 @@ const Teams = () => { useEffect(() => { const container = scrollContainerRef.current; if (container) { - container.addEventListener('scroll', handleScroll); + container.addEventListener("scroll", handleScroll); handleScroll(); // Initial check } - return () => container?.removeEventListener('scroll', handleScroll); + return () => container?.removeEventListener("scroll", handleScroll); }, []); return ( @@ -35,11 +36,19 @@ const Teams = () => { {/* Hero Section */}
-

Meet Our Executive Team

+

+ Meet Our Executive Team +

- Get to know the passionate leaders driving innovation and collaboration at SFU Open Source Development Club. Our executive team is dedicated to empowering students, fostering open-source contributions, and building a vibrant developer community at SFU. + Get to know the passionate leaders driving innovation and + collaboration at SFU Open Source Development Club. Our executive + team is dedicated to empowering students, fostering open-source + contributions, and building a vibrant developer community at SFU.

- +

>

./HOME
@@ -48,87 +57,165 @@ const Teams = () => { {/* Team Section */}
{/* Presidents */} -

Presidents

+

+ Presidents +

-
- - Daniel Pham + + Daniel Pham -

Daniel Pham

+

+ Daniel Pham +

Co-President

-

Daniel brings a deep commitment to open-source software and business, aiming to empower students to contribute to impactful projects.

+

+ Daniel brings a deep commitment to open-source software and + business, aiming to empower students to contribute to impactful + projects. +

- +
- - Tommy Oh + + Tommy Oh -

Tommy (Kanggeon) Oh

+

+ Tommy (Kanggeon) Oh +

Co-President

-

With a passion for technology and community, Tommy focuses on creating an inclusive space for developers of all levels at SFU.

+

+ With a passion for technology and community, Tommy focuses on + creating an inclusive space for developers of all levels at SFU. +

-
{/* Directors */} -

Directors

+

+ Directors +

-
- - Sean Wotherspoon + + Sean Wotherspoon -

Sean Wotherspoon

+

+ Sean Wotherspoon +

Director of Technology

-

Sean leads the technical direction, ensuring innovative solutions and high-quality standards in club projects.

+

+ Sean leads the technical direction, ensuring innovative solutions + and high-quality standards in club projects. +

- +
- - Daniel Ahn + + Daniel Ahn -

Daniel Ahn

-

Director of Communications

-

Daniel oversees all communications, helping to keep the community informed and engaged in upcoming events.

+

+ Daniel Ahn +

+

+ Director of Communications +

+

+ Daniel oversees all communications, helping to keep the community + informed and engaged in upcoming events. +

-
{/* Dhruv Gupta */}
- - + +
-

Dhruv Gupta

+

+ Dhruv Gupta +

Director of Strategy

-

Dhruv develops and executes the club's strategic plans, driving growth and sustainability for future initiatives.

+

+ Dhruv develops and executes the club's strategic plans, driving + growth and sustainability for future initiatives. +

- +
- - Jeeya Parasbhai Khavadia + + Jeeya Parasbhai Khavadia -

Jeeya Parasbhai Khavadia

+

+ Jeeya Parasbhai Khavadia +

Director of Events

-

Jeeya plans and organizes events that bring members together to learn, network, and build impactful projects.

+

+ Jeeya plans and organizes events that bring members together to + learn, network, and build impactful projects. +

-
-
{/* Join Us CTA Banner Section */}
-

Start Your Journey With Us

+

+ Start Your Journey With Us +