first draft of the timeline

config/timeline.config.ts

@@ -0,0 +1,86 @@
+export type TimelineItem = {
+  title: string;
+  date: string;
+  description: string;
+};
+
+export const timeline: TimelineItem[] = [
+  {
+    title: 'ACM UTD is charted',
+    date: 'Circa 1996',
+    description: 'ACM v1, the first ACM chapter at UTD',
+  },
+  {
+    title: 'Computer Science Association is formed',
+    date: 'Fall 2012',
+    description: 'Another organization is formed at UTD',
+  },
+  {
+    title: 'ACM merges with CSSA',
+    date: 'Summer 2013',
+    description: 'The two organizations merge to create a larger ACM',
+  },
+  {
+    title: 'ACM creates the first Hack_UTD',
+    date: 'January 17, 2015',
+    description: 'The first of our many hackathons. This also marks the beginning of ACM v2',
+  },
+  {
+    title: 'ACM Projects becomes a division',
+    date: 'Fall 2016',
+    description: 'The first projects cohort creates various projects',
+  },
+  {
+    title: 'ACM Labs starts its first projects',
+    date: 'Fall 2017',
+    description: 'Labs is a precursor to what would later become ACM Development',
+  },
+  {
+    title: 'ACM Ignite Launches',
+    date: 'Circa 2018',
+    description:
+      'ACM Ignite was a year-long program that would later be transformed into modern-day ACM Research',
+  },
+  {
+    title: 'ACM Education becomes a division',
+    date: 'Circa 2018',
+    description: 'The education program begins with brand new programs for beginners',
+  },
+  {
+    title: 'ACM Education starts the mentor program',
+    date: 'January 2020',
+    description: 'The mentor program is started to help students with their projects',
+  },
+  {
+    title: 'ACM Education starts the technical interview prep program (TIP)',
+    date: 'Fall 2020',
+    description:
+      'The technical interview prep program is started to help students with their interviews. The creation of TIP and the mentor program marks the beginning of ACM v3',
+  },
+  {
+    title: 'ACM Development becomes a division',
+    date: 'May 2020',
+    description:
+      'ACM Development is born to create and maintain platforms for ACM and UTD students',
+  },
+  {
+    title: 'ACM Research becomes a division',
+    date: 'Fall 2020',
+    description: 'ACM Research begins its first cohort of research participants',
+  },
+  {
+    title: 'ACM Media becomes a division',
+    date: 'September 2020',
+    description: 'ACM Media is born to create and maintain the media for ACM',
+  },
+  {
+    title: 'ACM Community becomes a division',
+    date: 'Spring 2022',
+    description: 'ACM Community is born to create and connect with the community',
+  },
+  {
+    title: 'You join ACM!!!',
+    date: '?????',
+    description: 'You can become part of our family!',
+  },
+];

package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-dropdown-menu": "^2.1.13",
     "@radix-ui/react-hover-card": "^1.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.7",
     "@radix-ui/react-slot": "^1.1.2",
     "@tanstack/react-query": "^5.85.9",

src/app/about/page.tsx

@@ -3,6 +3,7 @@ import { aboutPageData } from '../../../config/about.config';
 import Divisions from '@/components/About/Divisions';
 import AboutHeader from '@/components/About/AboutHeader';
 import { AboutPageData } from '../../../lib/types';
+import Timeline from '@/components/About/Timeline';
 
 export default function About() {
   const { divisionDescription, divisions }: AboutPageData = aboutPageData;
@@ -12,6 +13,7 @@ export default function About() {
       <AboutHeader />
       <div className="flex flex-col items-center md:gap-y-36">
         <Divisions data={divisions} description={divisionDescription} />
+        <Timeline />
       </div>
     </div>
   );

src/components/About/Divisions.tsx

@@ -12,23 +12,22 @@ export default function Divisions({ data, description }: DivisionsProps) {
   const values = Object.values(data);
 
   const divisionCards = keys.map((division: string, index: number) => (
-    <DivisionCard
-      key={division}
-      division={division}
-      divisionData={values[index]}
-    />
+    <DivisionCard key={division} division={division} divisionData={values[index]} />
   ));
 
   return (
-    <div className="flex h-full items-center justify-center bg-[url(/assets/about/about-divisions-bg.png)] bg-contain bg-center bg-no-repeat">
+    <div
+      className="flex h-full items-center justify-center bg-[url(/assets/about/about-divisions-bg.png)] bg-contain bg-center bg-no-repeat"
+      id="divisions"
+    >
       <div className="mx-auto w-full max-w-[120rem] px-4 sm:px-6">
         <div className="flex flex-col items-center p-6 text-primary md:p-0">
           <h1 className="mb-2 text-5xl font-medium">Divisions</h1>
           <p className="mb-10 max-w-4xl text-center text-xl">{description}</p>
-          <div className="grid w-full place-items-center grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="grid w-full grid-cols-1 place-items-center gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {divisionCards.slice(0, 6)}
           </div>
-          <div className="mt-4 flex max-sm:flex-wrap sm:flex-row w-full justify-center gap-4">
+          <div className="mt-4 flex w-full justify-center gap-4 max-sm:flex-wrap sm:flex-row">
             {divisionCards.slice(6)}
           </div>
         </div>

src/components/About/Timeline.tsx

@@ -0,0 +1,31 @@
+import { timeline } from '../../../config/timeline.config';
+import TimelineItemComponent from './TimelineItem';
+
+export default function Timeline() {
+  return (
+    <div
+      className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16"
+      id="our-journey"
+    >
+      <div className="mb-8 text-center sm:mb-12 lg:mb-16">
+        <h2 className="mb-2 text-3xl font-bold text-white sm:mb-4 sm:text-4xl md:text-5xl">
+          Our Journey
+        </h2>
+        <p className="mx-auto max-w-2xl px-2 text-base text-gray-300 sm:text-lg">
+          Fun fact: ACM UTD is the 77th student chapter of ACM founded. ACM&apos;s history is a
+          little long, but what do you expect with the largest CS organization at UTD?
+        </p>
+      </div>
+
+      <div className="relative">
+        <div className="absolute bottom-0 left-6 top-0 w-0.5 bg-gradient-to-b from-blue-500 via-purple-500 to-pink-500 sm:left-8 md:left-1/2 md:-translate-x-1/2 md:transform"></div>
+
+        <div className="space-y-8 sm:space-y-10 lg:space-y-12">
+          {timeline.map((item, index) => (
+            <TimelineItemComponent key={index} item={item} index={index} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}