Code-the-Change-YYC · burtonjong · Jun 4, 2025 · May 20, 2025 · May 28, 2025 · May 28, 2025
diff --git a/components/AlumniCarousel.jsx b/components/AlumniCarousel.jsx
@@ -7,8 +7,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import { rgbDataURL } from '../utils/blurImage';
 const CAROUSEL_CONTAINER = 'text-white rounded-lg w-[20rem] h-[44rem] shadow-2xl md:w-4/5 swiper-button-white';
-const ALUMNI_TILE =
-  'bg-[#7055FD] w-[20rem] h-[70rem] md:h-[44rem] rounded-lg items-center p-14 lg:p-10 flex flex-col shadow-2xl md:w-full md:flex-row';
+const ALUMNI_TILE = 'bg-[#7055FD] w-[20rem] h-[70rem] md:h-[44rem] rounded-lg items-center p-14 lg:p-10 flex flex-col shadow-2xl md:w-full md:flex-row';
 const ALUMNI_PROFILE = 'flex flex-col items-center mx-auto text-center md:p-10';
 
 const AlumniTile = ({ fullName, position, previousRole, testimonial, linkedin, profile }) => {

diff --git a/components/AlumniSection.jsx b/components/AlumniSection.jsx
@@ -152,6 +152,8 @@ const people  = [{
 },
 ];
 
+const TITLE_HEADER = "flex flex-row text-[1rem] md:text-[1.1rem] lg:text-[1.2rem] justify-center px-auto lg:px-10 md:px-16 gap-2 lg:pb-10 pb-5 overflow-auto scrollbar-webkit @support scrollbar-thin";
+
 const AlumniSection = () => {
   const [executives, setExecutives] = useState([]);
   const [activeTab, setActiveTab] = useState("Presidents");
@@ -166,20 +168,26 @@ const AlumniSection = () => {
   }, []);
 
   return (
-    <section className="bg-[#7055FD] p-20 md:min-h-screen h-full">
-      <div className="mb-20 flex flex-row justify-center">
+    <section className="bg-[#7055FD] lg:p-20 py-10 px-5 w-full h-full">
+      <div className="mb-8 flex flex-row justify-center">
         <Image src={GREEN_SIDE_LINES_DIR} width={30} height={30} alt="" className='pb-16'/>
         <Heading underlineType={UnderlineTypes.GREEN_SHORT_UNDERLINE} classes={"text-white"}>Alumni</Heading>
       </div>
-      <div>
+      <div className='px-5'>
         {teams.length > 0 && (
           <Tabs 
             value={activeTab}>
-            <TabsHeader className="flex flex-row justify-center gap-4 pb-20">
+            <TabsHeader 
+              className={TITLE_HEADER}
+              style={{
+                "--scrollbar-thumb-colour": "rgb(0, 211, 169)",
+                "--scrollbar-track-colour": "rgb(90, 68, 220)",
+              }}
+            >
               {teams.map((project) => (
-                <Tab className={`alumni-tab rounded-full p-2 font-medium text-white ${
+                <Tab className={`hover:bg-[#00BA95] hover:text-white rounded-full py-2 px-4 lg:mx-4 font-medium text-white transition-all duration-200 ${
                   activeTab === project
-                    ? 'bg-[#00D3A9]'
+                    ? 'bg-[#00BA95]'
                     : ''
                 }`} key={project} value={project} onClick={() => setActiveTab(project)}>
                   {project}

diff --git a/components/Avatar.jsx b/components/Avatar.jsx
@@ -13,7 +13,7 @@ const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, currRole, pr
 
   const colorTheme =
     teamIdentifier === PageIdentifiers.INTERNAL_LEVEL_CONTAINER
-      ? 'text-[#00D3A9]'
+      ? 'text-[#00BA95]'
       : teamIdentifier === PageIdentifiers.EXECUTIVE_LEVEL_CONTAINER
       ? 'text-[#7055FD]'
       : '';
@@ -32,6 +32,13 @@ const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, currRole, pr
           {currRole}
         </h2>
       )}
+      {(isPresidentAvatar && !isPresidentAvatar) && (
+        <h2
+          className={`text-[#7055FD] w-28 text-center text-xs sm:text-base hidden sm:block font-medium mb-2 ${classes}`}
+        >
+          {currRole}
+        </h2>
+      )}
       {(prevRole && !isPresidentAvatar) && (
         <h2
           className={`${colorTheme} w-28 text-center text-xs sm:text-base hidden sm:block font-medium mb-2 ${classes}`}

diff --git a/components/CoPresident.jsx b/components/CoPresident.jsx
@@ -4,11 +4,16 @@ import Carousel from './Carousel';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import Avatar from './Avatar';
-const CAROUSEL_CONTAINER = 'president-carousel text-white rounded-lg w-[20rem] h-full md:w-4/5 swiper-button-white flex justify-center items-center';
-const PRESIDENT_TILE =
-  'bg-[#A689FF] bg-opacity-50 w-[20rem] h-[70rem] md:h-[25rem] rounded-lg items-center p-14 lg:p-10 flex flex-col md:w-4/5 md:flex-row';
-
 
+const SWIPERS = 'swiper-button-white w-full h-full flex justify-center items-center relative';
+const CAROUSEL_CONTAINER = 'president-carousel text-white rounded-lg w-full max-w-[90%] h-full md:w-4/5 flex justify-center items-center';
+const PRESIDENT_TILE =
+  'bg-[#A689FF] bg-opacity-50 w-full h-full rounded-lg items-center px-4 md:pb-8 pb-16 mb-10 md:w-4/5 flex flex-col md:flex-row mx:auto';
+const TEXT = "my-10 md:pt-10 md:pb-6 pr-5 w-fit mx-auto text-center";
+const QUOTES = "md:text-[1.3rem] text-[1.2rem] font-light font-medium italic text-[#4833B2]";
+const QUOTATION_MARK = "text-[2rem] md:text-[2rem] font-extrabold";
+const PRESIDENT_YEAR = 'text-[#000000] font-bold text-4xl absolute top-6 left:right';
+const PRESIDENT_TILE_CONTAINER = 'bg-white md:rounded-3xl rounded-xl flex flex-col items-center md:px-2 px-8 py-20';
 
 const President = [[{
   name: "Jane Doe",
@@ -65,30 +70,36 @@ const PresidentTile = ({ name, linkedin, pfp, classes, testimonial, position, cu
   return (
     <div className={PRESIDENT_TILE}>
       <Avatar key={name} {...{name, linkedin, pfp, classes, position, currRole}}></Avatar>
-      <p className="text-[1.1rem] font-light italic leading-7 mx-auto md:ml-14 md:mb-24 md:text-[1.3rem] lg:text-[1.5rem] md:p-10 text-[#000000]">
-        <span className="text-[2rem] font-extrabold">&quot;</span>
-        {testimonial}
-        <span className="text-[2rem] font-extrabold">&quot;</span>
-      </p>
+      <div className={TEXT}>
+        <p className={QUOTES}>
+          <span className={QUOTATION_MARK}>&quot;  </span>
+          {testimonial}
+          <span className={QUOTATION_MARK}>  &quot;</span>
+        </p>
+      </div>
     </div>
   );
 };
 
 const CoPresident = () => {
   return (
-    <div className={CAROUSEL_CONTAINER}>
-      <Carousel className='president-carousel'>
-        {President.map((president) => (
-          <SwiperSlide key={president[0].name}>
-            <div className='bg-white w-full rounded-3xl h-full flex flex-col justify-center items-center gap-10 py-20'>
-              <div className='text-[#000000] text-4xl absolute top-5 left-32'>{president[0].year}</div>
-              <PresidentTile {...president[0]} />
-              {president[1] && <PresidentTile {...president[1]} />}
-            </div>
-          </SwiperSlide>
-        ))}
-      </Carousel>
+    <div className={SWIPERS}>
+      <div className={CAROUSEL_CONTAINER}>
+        <Carousel className='president-carousel'>
+          {President.map(([pres1, pres2], index) => (
+            <SwiperSlide key={pres1.name + index}>
+              <div className={PRESIDENT_TILE_CONTAINER}>
+                <div className={PRESIDENT_YEAR}>{pres1.year}</div>
+                <PresidentTile {...pres1} />
+                {pres2 && <PresidentTile {...pres2} />}
+              </div>
+            </SwiperSlide>
+          ))}
+        </Carousel>
+      </div>
     </div>
   );
 };
+
 export default CoPresident;
+
diff --git a/components/InternalTeam.jsx b/components/InternalTeam.jsx
@@ -6,6 +6,8 @@ import Heading from './Heading';
 import { UnderlineTypes } from '../utils/underlineType';
 import { PageIdentifiers } from '../utils/flags';
 
+const TABS_STYLES = "flex flex-row text-[1rem] md:text-[1.1rem] lg:text-[1.2rem] justify-center px-auto lg:px-10 md:px-16 gap-2 lg:pb-10 pb-5 overflow-auto scrollbar-webkit @support scrollbar-thin";
+
 const positionToGroupMap = {
   'Jr VP Marketing': 'Marketing',
   'VP Marketing': 'Marketing',
@@ -56,17 +58,22 @@ const InternalTeam = () => {
       </div>
       {groups.length > 0 && (
         <Tabs value={activeTab}>
-          <TabsHeader className="overflow-x-auto grid place-items-center">
+          <TabsHeader 
+            className={TABS_STYLES}
+            style={{
+              "--scrollbar-thumb-colour": "rgb(0, 211, 169)",
+              "--scrollbar-track-colour": "rgb(235, 235, 235)",
+            }}
+          >
             <div className="flex flex-row gap-2">
               {groups.map((group) => (
-                <Tab key={group} value={group} onClick={() => setActiveTab(group)}>
-                  <div
-                    className={`rounded-full px-4 py-2 font-medium hover:bg-[#00D3A9] hover:text-white transition-all duration-200
-              ${activeTab === group ? 'bg-[#00D3A9] text-white' : 'text-black'}
-            `}
-                  >
-                    {group}
-                  </div>
+                <Tab className={`flex-1 min-w-max rounded-full lg:mx-4 px-4 py-2 font-medium hover:bg-[#00BA95] hover:text-white transition-all duration-200 ${
+                  activeTab === group 
+                    ? 'bg-[#00BA95] text-white' 
+                    : 'text-black'
+                }`} key={group} value={group} onClick={() => setActiveTab(group)}
+                >
+                  {group}
                 </Tab>
               ))}
             </div>

diff --git a/components/MeetOurTeam.jsx b/components/MeetOurTeam.jsx
@@ -22,7 +22,7 @@ const Button = ({ classes = '', children, targetRef }) => {
           window.scrollTo({ top: y, behavior: 'smooth' });
         }
       }}
-      className={`cursor-pointer rounded-full text-white border-white py-2 px-8 bg-brightPink border-4 text-3xl font-bold w-48 ${classes}`}
+      className={`cursor-pointer rounded-full text-white border-white py-2 px-8 bg-brightPink border-4 text-3xl font-semibold w-48 ${classes}`}
     >
       {children}
     </button>
@@ -32,6 +32,7 @@ const Button = ({ classes = '', children, targetRef }) => {
 const MeetOurAmazingTeam = () => {
   const internalRef = useRef(null);
   const technicalRef = useRef(null);
+  const alumniRef = useRef(null);
 
   return (
     <div>
@@ -60,6 +61,9 @@ const MeetOurAmazingTeam = () => {
             <Button targetRef={technicalRef} timeout={1000}>
               Technical
             </Button>
+            <Button targetRef={alumniRef} timeout={1000}>
+              Alumni
+            </Button>
           </div>
         </div>
       </div>
@@ -70,7 +74,7 @@ const MeetOurAmazingTeam = () => {
       <section id="technical" ref={technicalRef} className="h-screen p-12 bg-[#bcfbe4]">
         <TechnicalTeam />
       </section>
-      <section>
+      <section id="alumni" ref={alumniRef} className='min-h-screen'>
         <AlumniSection />
       </section>
     </div>

diff --git a/components/TechnicalTeam.jsx b/components/TechnicalTeam.jsx
@@ -6,6 +6,8 @@ import Heading from './Heading';
 import { UnderlineTypes } from '../utils/underlineType';
 import { PageIdentifiers } from '../utils/flags';
 
+const TABS_STYLES = "flex flex-row text-[1rem] md:text-[1.1rem] lg:text-[1.2rem] justify-center px-auto lg:px-10 md:px-16 gap-2 lg:pb-10 pb-5 overflow-auto scrollbar-webkit @support scrollbar-thin";
+
 const TechnicalTeam = () => {
   const [executives, setExecutives] = useState([]);
   const [projects, setProjects] = useState([]);
@@ -34,17 +36,21 @@ const TechnicalTeam = () => {
       </div>
       {projects.length > 0 && (
         <Tabs value={activeTab}>
-          <TabsHeader className="overflow-x-auto grid place-items-center">
+          <TabsHeader 
+            className={TABS_STYLES}
+            style={{
+              "--scrollbar-thumb-colour": "#7559fc",
+              "--scrollbar-track-colour": "#9FDEC8",
+            }}
+          >
             <div className="flex flex-row gap-2 whitespace-nowrap">
               {projects.map((position) => (
-                <Tab key={position} value={position} onClick={() => setActiveTab(position)}>
-                  <div
-                    className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-200
-                  ${activeTab === position ? 'bg-[#7559fc] text-white' : 'text-black'}
-                  `}
-                  >
-                    {position}
-                  </div>
+                <Tab className={`rounded-full lg:mx-4 max-w-[12rem] hover:bg-[#7559fc] hover:text-white py-2 px-4 lg:mx-4 font-medium text-black transition-all duration-200 ${
+                  activeTab === position
+                    ? 'bg-[#7559fc] text-white'
+                    : 'text-black'
+                }`} key={position} value={position} onClick={() => setActiveTab(position)}>
+                  {position}
                 </Tab>
               ))}
             </div>

diff --git a/package.json b/package.json
@@ -27,11 +27,11 @@
     "tailwind-scrollbar-hide": "^1.1.7"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.21",
     "eslint": "8.20.0",
     "eslint-config-next": "12.2.3",
-    "postcss": "^8.4.14",
-    "tailwindcss": "^3.3.6"
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17"
   },
   "engines": {
     "node": "^18.16.1"

diff --git a/pages/index.js b/pages/index.js
@@ -57,7 +57,7 @@ export default function Home() {
             objectFit="cover"
           />
         </div>
-        <h1 className="text-stroke-outside text-7xl -mt-20 md:m-0 md:text-9xl font-black w-3/4 md:text-center text-[#7055FD] stroke-white drop-shadow-lg">
+        <h1 className="text-stroke-outside text-7xl -mt-20 md:m-0 md:text-9xl font-bold w-3/4 md:text-center text-[#7055FD] stroke-white drop-shadow-lg">
           Coding a better world together.
         </h1>
       </div>

diff --git a/postcss.config.js b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/public/fonts/Omnes Bold.ttf b/public/fonts/Omnes Bold.ttf
diff --git a/styles/globals.css b/styles/globals.css
@@ -3,6 +3,14 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'Omnes';
+  src: url('/fonts/Omnes Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+
 .text-stroke-outside {
   -webkit-text-stroke: 3px white;
 }
@@ -22,36 +30,48 @@
   color: white;
 }
 
-.alumni-tab {
-  max-width: 200px;
+.technical-section {
+  background-color: #bcfbe4;
 }
 
-.alumni-tab:hover {
-  background-color: #00D3A9;
-  color: white;
+.president-carousel {
+  position: relative;
 }
 
-.alumni-tab {
-  max-width: 200px;
+.president-carousel .swiper-button-next {
+  color: white;
 }
 
-.alumni-tab:hover {
-  background-color: #00D3A9;
+.president-carousel .swiper-button-prev {
   color: white;
+  left: 0.1rem; 
 }
 
-.technical-section {
-  background-color: #bcfbe4;
+@media (min-width: 768px) {
+  .president-carousel .swiper-button-prev {
+    left: 1rem;
+  }
 }
 
-.president-carousel {
-  position: relative;
+@media (min-width: 1024px) {
+  .president-carousel .swiper-button-prev {
+    left: 1.5rem;
+  }
 }
 
 .president-carousel .swiper-button-next {
   color: white;
+  right: 0.1rem; 
 }
 
-.president-carousel .swiper-button-prev {
-  color: white;
+@media (min-width: 768px) {
+  .president-carousel .swiper-button-next {
+    right: 1rem; 
+  }
+}
+
+@media (min-width: 1024px) {
+  .president-carousel .swiper-button-next {
+    right: 1.5rem;
+  }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,4 @@ module.exports = { @@
         tailwindcss: {},
         autoprefixer: {},
       },
-    }
+    };