diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png index baf936a..50e8cd0 100644 Binary files a/public/favicon/android-chrome-192x192.png and b/public/favicon/android-chrome-192x192.png differ diff --git a/public/favicon/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png index 33515c4..b1106a0 100644 Binary files a/public/favicon/android-chrome-512x512.png and b/public/favicon/android-chrome-512x512.png differ diff --git a/public/favicon/apple-touch-icon.png b/public/favicon/apple-touch-icon.png index facdb18..7dc6f0d 100644 Binary files a/public/favicon/apple-touch-icon.png and b/public/favicon/apple-touch-icon.png differ diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png index bdc5ed7..c9a2cd0 100644 Binary files a/public/favicon/favicon-16x16.png and b/public/favicon/favicon-16x16.png differ diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png index 0797739..92bcf15 100644 Binary files a/public/favicon/favicon-32x32.png and b/public/favicon/favicon-32x32.png differ diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico index 2558173..306527d 100644 Binary files a/public/favicon/favicon.ico and b/public/favicon/favicon.ico differ diff --git a/src/assets/images/Website_Team/AbhishekPatawari.png b/src/assets/images/Website_Team/AbhishekPatawari.png new file mode 100644 index 0000000..998ff68 Binary files /dev/null and b/src/assets/images/Website_Team/AbhishekPatawari.png differ diff --git a/src/assets/images/Website_Team/AchyutShukla.png b/src/assets/images/Website_Team/AchyutShukla.png new file mode 100644 index 0000000..8eebaff Binary files /dev/null and b/src/assets/images/Website_Team/AchyutShukla.png differ diff --git a/src/assets/images/Website_Team/AnkushDutta.png b/src/assets/images/Website_Team/AnkushDutta.png new file mode 100644 index 0000000..f2e3dc4 Binary files /dev/null and b/src/assets/images/Website_Team/AnkushDutta.png differ diff --git a/src/assets/images/Website_Team/JaneDoe.png b/src/assets/images/Website_Team/JaneDoe.png new file mode 100644 index 0000000..f0a4db1 Binary files /dev/null and b/src/assets/images/Website_Team/JaneDoe.png differ diff --git a/src/assets/images/Website_Team/JayTrivedi.png b/src/assets/images/Website_Team/JayTrivedi.png new file mode 100644 index 0000000..f493286 Binary files /dev/null and b/src/assets/images/Website_Team/JayTrivedi.png differ diff --git a/src/assets/images/Website_Team/JohnDoe.png b/src/assets/images/Website_Team/JohnDoe.png new file mode 100644 index 0000000..1060ccb Binary files /dev/null and b/src/assets/images/Website_Team/JohnDoe.png differ diff --git a/src/assets/images/Website_Team/JoshDoe.png b/src/assets/images/Website_Team/JoshDoe.png new file mode 100644 index 0000000..c728ffd Binary files /dev/null and b/src/assets/images/Website_Team/JoshDoe.png differ diff --git a/src/assets/images/Website_Team/MiranFirdausi.png b/src/assets/images/Website_Team/MiranFirdausi.png new file mode 100644 index 0000000..8aef6b1 Binary files /dev/null and b/src/assets/images/Website_Team/MiranFirdausi.png differ diff --git a/src/assets/images/Website_Team/MitikshaPaliwal.png b/src/assets/images/Website_Team/MitikshaPaliwal.png new file mode 100644 index 0000000..b058b65 Binary files /dev/null and b/src/assets/images/Website_Team/MitikshaPaliwal.png differ diff --git a/src/assets/images/Website_Team/RectangleGreen.png b/src/assets/images/Website_Team/RectangleGreen.png new file mode 100644 index 0000000..517956c Binary files /dev/null and b/src/assets/images/Website_Team/RectangleGreen.png differ diff --git a/src/assets/images/Website_Team/RectangleRed.png b/src/assets/images/Website_Team/RectangleRed.png new file mode 100644 index 0000000..2b87163 Binary files /dev/null and b/src/assets/images/Website_Team/RectangleRed.png differ diff --git a/src/assets/images/Website_Team/RectangleYellow.png b/src/assets/images/Website_Team/RectangleYellow.png new file mode 100644 index 0000000..27dcfe4 Binary files /dev/null and b/src/assets/images/Website_Team/RectangleYellow.png differ diff --git a/src/components/AboutUs/index.jsx b/src/components/AboutUs/index.jsx index 8332497..7b9fafc 100644 --- a/src/components/AboutUs/index.jsx +++ b/src/components/AboutUs/index.jsx @@ -174,7 +174,7 @@ export default function AboutSection() { ref={paragraphRef} className="text-xl md:text-4xl md:leading-snug font-poppins font-semibold" > - Codex is the coding club at + CodeX is the coding club at Symbiosis Institute of Technology diff --git a/src/components/WebsiteTeam/TeamMember.jsx b/src/components/WebsiteTeam/TeamMember.jsx new file mode 100644 index 0000000..0c664c0 --- /dev/null +++ b/src/components/WebsiteTeam/TeamMember.jsx @@ -0,0 +1,121 @@ +import PropTypes from "prop-types"; +import LinkedInIcon from "@/assets/images/Teams/linkedin.svg"; +import GithubIcon from "@/assets/images/Teams/github.svg"; +import InstagramIcon from "@/assets/images/Teams/instagram.svg"; +import RectangleRed from "@/assets/images/Website_Team/RectangleRed.png"; +import RectangleGreen from "@/assets/images/Website_Team/RectangleGreen.png"; +import RectangleYellow from "@/assets/images/Website_Team/RectangleYellow.png"; +import MiranFirdausiImage from "@/assets/images/Website_Team/MiranFirdausi.png"; +import AchyutShuklaImage from "@/assets/images/Website_Team/AchyutShukla.png"; +import MitikshaPaliwalImage from "@/assets/images/Website_Team/MitikshaPaliwal.png"; +import AnkushDuttaImage from "@/assets/images/Website_Team/AnkushDutta.png"; +import AbhishekPatawariImage from "@/assets/images/Website_Team/AbhishekPatawari.png"; +import JayTrivediImage from "@/assets/images/Website_Team/JayTrivedi.png"; + +const images = { + 1: MiranFirdausiImage, + 2: AchyutShuklaImage, + 3: MitikshaPaliwalImage, + 4: AnkushDuttaImage, + 5: AbhishekPatawariImage, + 6: JayTrivediImage, +}; + +const bgimages = { + 1: RectangleRed, + 2: RectangleGreen, + 3: RectangleYellow, + 4: RectangleGreen, + 5: RectangleRed, + 6: RectangleYellow, +}; + +function TeamMember({ member, className }) { + const { name, batch, description, linkedin, instagram, github, id } = member; + const image = images[id]; + + return ( +
+
+
+
+ + Linkedin + + + Github + + + Instagram + +
+
+
+ background + {name} +
+

+ {name} +

+

+ {batch} +

+

+ {description} +

+
+
+ ); +} + +TeamMember.propTypes = { + member: PropTypes.shape({ + name: PropTypes.string.isRequired, + batch: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + linkedin: PropTypes.string.isRequired, + instagram: PropTypes.string.isRequired, + github: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, + }).isRequired, + className: PropTypes.isRequired, +}; + +export default TeamMember; diff --git a/src/components/WebsiteTeam/index.jsx b/src/components/WebsiteTeam/index.jsx new file mode 100644 index 0000000..19d026f --- /dev/null +++ b/src/components/WebsiteTeam/index.jsx @@ -0,0 +1,89 @@ +import { useEffect, useRef } from "react"; +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; +import TeamMember from "@/components/WebsiteTeam/TeamMember"; +import teamMembersData from "./teamsdata.json"; + +gsap.registerPlugin(ScrollTrigger); + +function WebsiteTeam() { + const sectionRef = useRef(null); + + useEffect(() => { + const rows = sectionRef.current.querySelectorAll(".team-row"); + + rows.forEach((row) => { + gsap.fromTo( + row, + { opacity: 0, y: 100 }, + { + opacity: 1, + y: 0, + scrollTrigger: { + trigger: row, + start: "top 90%", + end: "bottom 70%", + toggleActions: "play none none reverse", + }, + }, + ); + }); + + return () => { + ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); + }; + }, []); + + const teamMembers = teamMembersData.map((member) => ( + + )); + + return ( +
+
+
+
+
+
+ + Special Thanks + +
+ + {" "} + to the + + + {" "} + Awesome Team + +
+
+ + {" "} + Who Helped Create +
this + + + {" "} + Amazing Website + +
+
+
+ {teamMembers.slice(0, 2)} +
+
+
+ {teamMembers.slice(2, 6)} +
+
+
+
+ ); +} + +export default WebsiteTeam; diff --git a/src/components/WebsiteTeam/teamsdata.json b/src/components/WebsiteTeam/teamsdata.json new file mode 100644 index 0000000..5007863 --- /dev/null +++ b/src/components/WebsiteTeam/teamsdata.json @@ -0,0 +1,50 @@ +[ + { + "name": "Miran Firdausi", + "batch": "2022-26", + "linkedin": "https://www.linkedin.com/in/miran-firdausi/", + "instagram": "http://instagram.com/mirvn.zzz", + "github": "https://github.com/Miran-Firdausi", + "id": 1 + }, + { + "name": "Achyut Shukla", + "batch": "2020-24", + "linkedin": "https://www.linkedin.com/in/achyut07/", + "instagram": "https://www.instagram.com/__achyut.07__/", + "github": "https://github.com/Achyut-0705", + "id": 2 + }, + { + "name": "Mitiksha Paliwal", + "batch": "2023-27", + "linkedin": "https://www.linkedin.com/in/mitiksha-paliwal/", + "instagram": "https://www.instagram.com/_paliwal28/", + "github": "https://github.com/Mitiksha-28", + "id": 3 + }, + { + "name": "Ankush Dutta", + "batch": "2023-27", + "linkedin": "https://www.linkedin.com/in/ankushdutta/", + "instagram": "https://instagram.com/_ehdee_", + "github": "https://github.com/gendelta", + "id": 4 + }, + { + "name": "Abhishek Patawari", + "batch": "2023-27", + "linkedin": "https://www.linkedin.com/in/abhishek-patawari-ab7510288/", + "instagram": "https://www.instagram.com/abhishek_patawari1100/", + "github": "https://github.com/Dios-001", + "id": 5 + }, + { + "name": "Jay Trivedi", + "batch": "2022-26", + "linkedin": "https://www.linkedin.com/in/jay-trivedi-work/", + "instagram": "https://www.instagram.com/jay.triveedi/", + "github": "https://github.com/Jayu1214", + "id": 6 + } +] \ No newline at end of file diff --git a/src/pages/Gallery/Gallery.jsx b/src/pages/Gallery/Gallery.jsx index 31d0c5a..afcb8d9 100644 --- a/src/pages/Gallery/Gallery.jsx +++ b/src/pages/Gallery/Gallery.jsx @@ -161,47 +161,52 @@ export default function Gallery() { return ( -
- -
- {images.map((image, index) => ( -
openModal(index)} - onKeyDown={(e) => { - if (e.key === "Enter" || e.key === " ") { - openModal(index); - } - }} - tabIndex={0} // Makes the div focusable - key={image.src} - className="cursor-pointer" - > + +
+ {images.map((image, index) => ( +
openModal(index)} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + openModal(index); + } + }} + tabIndex={0} // Makes the div focusable + key={image.src} + className="cursor-pointer" + > + {`Gallery +
+ ))} + + {modalOpen ? ( +
+
{`Gallery -
- ))} - - {modalOpen ? ( -
-
- +
+

+ {images[selectedImageIndex].caption} +

+

+ Date: {images[selectedImageIndex].date} +

+
+
- {`Selected -
-

- {images[selectedImageIndex].caption} -

-

- Date: {images[selectedImageIndex].date} -

-
- ) : null} -
+ + + +
+ ) : null}
); diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx index 33e9c0c..7083143 100644 --- a/src/pages/Home/index.jsx +++ b/src/pages/Home/index.jsx @@ -7,6 +7,7 @@ import AboutSection from "@/components/AboutUs"; import TeamMember from "../Teams/TeamMember"; import teamMembersData from "../Teams/teamsdata.json"; import Heading from "@/components/Heading"; +import WebsiteTeam from "@/components/WebsiteTeam"; function Home() { const { setCursorVariantText, setCursorVariantDefault } = @@ -49,6 +50,7 @@ function Home() {
+ ); } diff --git a/tailwind.config.js b/tailwind.config.js index f26839c..16b8c2c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -23,6 +23,8 @@ export default { text: { light: "#F7F7F7", dark: "#232323", + websiteteamlight: "#B6B6B6", + websiteteamyellow: "#FFC686", }, gradient: { light: "#383838",