Website: More Apply Page Improvements (#806)

Author: cchrischen

new-dti-website/components/apply/ApplicationTimeline.tsx

@@ -72,7 +72,11 @@ const getEndTime = ({ date, time }: DateTime): number => {
     endTime = extractEndTime(time);
   }
 
-  return parseDate(endDate, '11:59:59 PM', endTime).getTime();
+  return parseDate(
+    `${endDate}, ${config.semester.split(' ')[1]}`,
+    '11:59:59 PM',
+    endTime
+  ).getTime();
 };
 
 type RecruitmentEventProps = {
@@ -202,6 +206,7 @@ const TimelineNode: React.FC<RecruitmentEventProps> = ({
 
 const ApplicationTimeline = () => {
   const [cycle, setCycle] = useState<'freshmen' | 'upperclassmen'>('upperclassmen');
+  const [scroll, setScroll] = useState<number[]>([0, 0]);
   const timelineRef = useRef<HTMLDivElement>(null);
   const selectedNodeRef = useRef<HTMLDivElement>(null);
   const { width } = useScreenSize();
@@ -225,25 +230,43 @@ const ApplicationTimeline = () => {
   const scrollToIndex =
     nextEventIndex === sortedEvents.length ? nextEventIndex - 1 : nextEventIndex;
 
+  const onTabSwitch = (nextTab: 'freshmen' | 'upperclassmen') => {
+    if (nextTab === cycle) return;
+    const tabIndex = cycle === 'upperclassmen' ? 0 : 1;
+    setCycle(nextTab);
+    if (timelineRef.current) {
+      const newScroll = [...scroll];
+      newScroll[tabIndex] = timelineRef.current.scrollTop;
+      setScroll(newScroll);
+    }
+  };
+
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-      setCycle(cycle === 'freshmen' ? 'upperclassmen' : 'freshmen');
+    if (isFall && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+      onTabSwitch(cycle === 'freshmen' ? 'upperclassmen' : 'freshmen');
     }
   };
 
+  useEffect(() => {
+    if (timelineRef.current) {
+      timelineRef.current.scrollTop = scroll[cycle === 'upperclassmen' ? 0 : 1];
+    }
+  }, [cycle]);
+
   useEffect(() => {
     if (timelineRef.current && selectedNodeRef.current && width >= TABLET_BREAKPOINT) {
       const innerDiv = selectedNodeRef.current.getBoundingClientRect().top;
       const outerDiv = timelineRef.current.getBoundingClientRect().top;
       timelineRef.current.scrollTop += innerDiv - outerDiv;
+      setScroll([timelineRef.current.scrollTop, 0]);
     }
-  });
+  }, []);
 
   return (
-    <section id="Application Timeline" className="flex justify-center relative">
+    <section id="Application Timeline" className="flex justify-center relative z-10">
       <RedBlob intensity={0.5} className="left-[-150px] bottom-[-50px] z-0" />
       <SectionWrapper id={'Application Timeline'}>
-        <div className="relative z-10w-full">
+        <div className="relative w-full">
           <div className="flex flex-col gap-6 my-12 text-white md:px-0 xs:px-6">
             <p className="font-semibold md:text-[32px] xs:text-[24px]">This is DTI.</p>
             <p className="md:font-semibold lg:text-[28px] xs:text-[20px]">
@@ -264,12 +287,12 @@ const ApplicationTimeline = () => {
                     <Tab
                       isSelected={cycle === 'upperclassmen'}
                       text={'Upperclassmen'}
-                      onClick={() => setCycle('upperclassmen')}
+                      onClick={() => onTabSwitch('upperclassmen')}
                     />
                     <Tab
                       isSelected={cycle === 'freshmen'}
                       text={'Freshmen/Transfer'}
-                      onClick={() => setCycle('freshmen')}
+                      onClick={() => onTabSwitch('freshmen')}
                     />
                   </>
                 ) : (

new-dti-website/components/apply/RoleDescription.tsx

@@ -57,19 +57,19 @@ const RoleDescriptions = () => {
               );
             })}
           </div>
-          <div className="flex flex-col gap-5">
+          <div className="flex flex-col">
             {Object.keys(applications).map((application, index) => {
               const roleApplication = applications[application];
               return (
                 role === application && (
-                  <div key={index}>
+                  <div key={index} className="flex flex-col md:gap-6 xs:gap-4">
                     <h3
                       className="font-semibold lg:text-[32px] lg:leading-[38px] md:text-[24px] 
                     md:leading-[29px] xs:text-[22px]"
                     >
                       {roleApplication.roleName} Application
                     </h3>
-                    <div className="space-y-2">
+                    <div className="space-y-4">
                       <h3
                         className="font-semibold lg:text-[24px] lg:leading-[29px] md:text-[20px] 
                       md:leading-[24px] xs:text-[14px] xs:leading-[17px]"
@@ -87,7 +87,7 @@ const RoleDescriptions = () => {
                         ))}
                       </ul>
                     </div>
-                    <div className="space-y-2">
+                    <div className="space-y-4">
                       <h3
                         className="font-semibold lg:text-[24px] lg:leading-[29px] md:text-[20px] 
                       md:leading-[24px] xs:text-[14px] xs:leading-[17px]"

new-dti-website/components/apply/data/applications.json

@@ -5,6 +5,7 @@
     "skills": [
       "A curious, inventive and communicative investigator",
       "Eagerness to learn new technologies and applications",
+      "Conduct code reviews to ensure quality and consistency",
       "Experience in computer science or app/web development (specific technologies will be taught in DTI, so no expert knowledge required)"
     ],
     "responsibilities": [

new-dti-website/config.json

@@ -1,6 +1,6 @@
 {
-  "semester": "Fall 2024",
-  "applicationDeadline": "September 1, 2024 11:59:59 PM",
+  "semester": "Spring 2025",
+  "applicationDeadline": "January 30, 2025 11:59:59 PM",
   "freshmanAppDeadline": "October 24, 2024 11:59:59 PM",
   "applicationLink": "https://forms.gle/F9tFrW88a2Xoa9D49",
   "coffeeChatLink": "https://docs.google.com/spreadsheets/d/1jDrkQ61h41w0kw6gITUJJiJ-yQtE_WfBZbHvVow17ik",
@@ -15,25 +15,25 @@
       "link": "https://forms.gle/F9tFrW88a2Xoa9D49",
       "freshmen": { "date": "August 21", "isTentative": false },
       "upperclassmen": { "date": "August 21", "isTentative": false },
-      "spring": { "date": "", "isTentative": false }
+      "spring": { "date": "January 3", "isTentative": false }
     },
     {
       "title": "Information Session 1",
-      "description": "Come join us for a session to learn about DTI, our goals, and our subteams. There will be time to chat with DTI members of all roles after!",
+      "description": "Come join us for a session to learn about DTI, our goals, and our subteams. There will be time to chat with DTI members of all roles after! And if you can’t make this session, check out the Information Session 2 below.",
       "location": "Goldwin Smith Hall G26",
       "type": "info",
       "freshmen": { "date": "September 30", "isTentative": false, "time": "5-6PM" },
       "upperclassmen": { "date": "August 27", "isTentative": false, "time": "5-6PM" },
-      "spring": { "date": "", "isTentative": false }
+      "spring": { "date": "January 23", "isTentative": true }
     },
     {
       "title": "Information Session 2",
-      "description": "We're welcoming any and all students who are looking to make a difference through tech. Applicants are not considered on a rolling basis.",
+      "description": "Another session to learn about DTI and to chat with our members. All applicants are encouraged to attend one of the information sessions.",
       "location": "Goldwin Smith Hall G22",
       "type": "info",
       "freshmen": { "date": "October 12", "isTentative": false, "time": "11AM-12PM" },
       "upperclassmen": { "date": "September 2", "isTentative": false, "time": "6:30-7:30PM" },
-      "spring": { "date": "", "isTentative": false }
+      "spring": { "date": "January 28", "isTentative": true }
     },
     {
       "title": "Applications due",
@@ -43,42 +43,33 @@
       "link": "https://forms.gle/F9tFrW88a2Xoa9D49",
       "freshmen": { "date": "October 17", "isTentative": false },
       "upperclassmen": { "date": "September 4", "isTentative": false },
-      "spring": { "date": "", "isTentative": false }
+      "spring": { "date": "January 30", "isTentative": false }
     },
     {
       "title": "Behavioral Interviews",
-      "description": "Something something behaviorals.",
+      "description": "Prepare to talk about past projects, teamwork experiences, and your motivation for joining DTI.",
       "location": "Varying locations",
       "type": "interview",
       "freshmen": { "date": "October 22-24", "isTentative": true },
       "upperclassmen": { "date": "September 10-12", "isTentative": false },
-      "spring": { "date": "", "isTentative": false }
+      "spring": { "date": "February 1-3", "isTentative": true }
     },
     {
       "title": "Technical Interviews",
-      "description": "Something something technicals.",
+      "description": "Demonstrate your technical skills through problem-solving challenges relevant to your subteam.",
       "location": "Varying locations",
       "type": "interview",
       "freshmen": { "date": "October 26-28", "isTentative": true },
       "upperclassmen": { "date": "September 14-16", "isTentative": false },
-      "spring": { "date": "", "isTentative": false }
-    },
-    {
-      "title": "Freshmen Recruitment Event",
-      "description": "Get to know Cornell and DTI!",
-      "location": "Duffield Atrium",
-      "type": "info",
-      "freshmen": { "date": "October 1", "isTentative": false, "time": "4-5PM" },
-      "upperclassmen": { "date": "", "isTentative": false },
-      "spring": { "date": "", "isTentative": false }
+      "spring": { "date": "February 9-11", "isTentative": true }
     },
     {
       "title": "Offers extended",
       "description": "Offers get sent out!",
       "type": "offer",
       "freshmen": { "date": "October 30", "isTentative": false },
       "upperclassmen": { "date": "September 18", "isTentative": false },
-      "spring": { "date": "", "isTentative": false }
+      "spring": { "date": "February 12", "isTentative": false }
     }
   ],
   "trends_instructors": ["ow39", "sci24", "cc2785"]

new-dti-website/src/app/apply/page.tsx

@@ -76,10 +76,13 @@ const ApplyCoffeeChat = () => (
         Feel free to chat with any of us over email, coffee, lunch-we're happy to help!
       </p>
       <div className="flex md:flex-row xs:flex-col gap-3">
-        <a href={config.coffeeChatLink} className="primary-button">
+        <a href={config.coffeeChatLink} className="primary-button xs:w-full md:w-fit text-center">
           Coffee chat with us
         </a>
-        <a href={config.coffeeChatFormLink} className="secondary-button secondary-button--red">
+        <a
+          href={config.coffeeChatFormLink}
+          className="secondary-button secondary-button--red xs:w-full md:w-fit text-center"
+        >
           Don't know who to chat with?
         </a>
       </div>

new-dti-website/src/app/globals.css

@@ -256,6 +256,10 @@ summary {
   padding-right: 1rem;
 }
 
+summary::-webkit-details-marker {
+  display: none;
+}
+
 summary::after {
   content: '';
   width: 13px;