From 6587a3535a8fd6cbebb92b44f022a131ed1791b0 Mon Sep 17 00:00:00 2001
From: Shing Hung <yhung022@ucr.edu>
Date: Mon, 27 Jan 2025 11:25:42 -0800
Subject: [PATCH] fix mobile for Robocup page

---
 src/components/core/About.astro         |  4 +-
 src/components/core/Subtitle.astro      |  2 +-
 src/components/qp/Timeline.astro        | 65 ++++++++++++-------------
 src/components/robocub/Contacts.astro   | 12 ++---
 src/components/robocub/Join.astro       | 12 ++---
 src/components/robocub/Subteam.astro    | 16 ------
 src/components/robocub/Subteams.astro   | 16 +++---
 src/components/signal/Competition.astro | 15 +++---
 src/data/landing.js                     | 16 ------
 src/data/qpTimeline.json                | 62 ++++++++++++-----------
 src/data/roboTimeline.json              | 30 ++++++++++++
 src/layouts/Layout.astro                |  2 +-
 src/pages/quarterly.astro               |  3 +-
 src/pages/robocup.astro                 |  7 +--
 14 files changed, 127 insertions(+), 135 deletions(-)
 delete mode 100644 src/components/robocub/Subteam.astro
 delete mode 100644 src/data/landing.js
 create mode 100644 src/data/roboTimeline.json

diff --git a/src/components/core/About.astro b/src/components/core/About.astro
index 5633c44..15b5db9 100644
--- a/src/components/core/About.astro
+++ b/src/components/core/About.astro
@@ -4,14 +4,14 @@ const {title, text} = Astro.props;
 ---
 
 <div class="flex flex-col items-center text-white my-[10%]">
-    <div class="flex items-center text-[2.5vw] mb-[3%]">
+    <div class="flex items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]">
         <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
         <p class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black">
             {title}
         </p>
     </div>
 
-    <p class="w-[70%] text-[1.4vw] font-light ">
+    <p class="w-[70%] md:text-[1.4vw] text-[2vw] font-light ">
         {text}
     </p>
 </div>
\ No newline at end of file
diff --git a/src/components/core/Subtitle.astro b/src/components/core/Subtitle.astro
index 70857c4..6065c13 100644
--- a/src/components/core/Subtitle.astro
+++ b/src/components/core/Subtitle.astro
@@ -3,7 +3,7 @@ const {title} = Astro.props;
 import { LiaDotCircle } from "react-icons/lia";
 ---
 
-<div class="flex items-center text-[2.5vw] mb-[5%]">
+<div class="flex items-center md:text-[2.5vw] text-[4vw] mb-[5%]">
     <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
     <p>
         {title}
diff --git a/src/components/qp/Timeline.astro b/src/components/qp/Timeline.astro
index 97b38d8..2dc3b72 100644
--- a/src/components/qp/Timeline.astro
+++ b/src/components/qp/Timeline.astro
@@ -1,54 +1,51 @@
 ---
-import qpTimeline from "../../data/qpTimeline.json";
-const { events } = qpTimeline;
+const {timeline} = Astro.props;
 import Subtitle from "../core/Subtitle.astro";
 ---
 
-<div class="flex flex-col items-center mt-[10%] mb-[15%]">
+<div class="flex flex-col items-center md:mt-[10%] mt-[25%] md:mb-[15%] mb-[35%]">
     <Subtitle title="Timeline" />
 
     <div
-        class="relative flex items-center justify-between w-full max-w-[65vw] py-[10%] mt-[3%]"
+        class="relative flex items-center justify-between w-full md:max-w-[65vw] max-w-[85vw] py-[10%] md:mt-[3%] mt-[10%]"
     >
         <div
             class="absolute top-1/2 w-full h-[0.1vw] bg-gray-200 transform -translate-y-1/2"
         >
         </div>
 
-        {
-            events.map((event, index) => (
+        {timeline.map((event, index) => (
+            <div
+                class="relative flex flex-col items-center"
+                style={`flex: 1`}
+            >
                 <div
-                    class="relative flex flex-col items-center"
-                    style={`flex: 1`}
+                    class={`absolute ${
+                        index % 2 === 0 ? "bottom-0 mb-[70%]" : "top-0 mt-[70%]"
+                    } flex flex-col items-center`}
                 >
-                    <div
-                        class={`absolute ${
-                            index % 2 === 0 ? "bottom-0 mb-[70%]" : "top-0 mt-[70%]"
-                        } flex flex-col items-center`}
-                    >
-                        <div class="text-center">
-                            <div class="font-bold text-ieee-yellow text-[1.4vw]">
-                                {event.week}
-                            </div>
-                            <div class="text-[1.1vw] text-gray-300 max-w-[10vw]">
-                                {event.description}
-                            </div>
+                    <div class="text-center">
+                        <div class="font-bold text-ieee-yellow md:text-[1.4vw] text-[2vw]">
+                            {event.week}
+                        </div>
+                        <div class="md:text-[1.1vw] text-[1.5vw] text-gray-300 md:max-w-[10vw] max-w-[15vw]">
+                            {event.description}
                         </div>
                     </div>
-
-                    <div
-                        class={`absolute ${
-                            index % 2 === 1
-                                ? "h-[5vw] top-1/2"
-                                : "h-[5vw] bottom-1/2"
-                        } w-[0.1vw] bg-white`}
-                    />
-
-                    <div class="absolute top-1/2 transform -translate-y-1/2">
-                        <div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" />
-                    </div>
                 </div>
-            ))
-        }
+
+                <div
+                    class={`absolute ${
+                        index % 2 === 1
+                            ? "h-[5vw] top-1/2"
+                            : "h-[5vw] bottom-1/2"
+                    } w-[0.1vw] bg-white`}
+                />
+
+                <div class="absolute top-1/2 transform -translate-y-1/2">
+                    <div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" />
+                </div>
+            </div>
+        ))}
     </div>
 </div>
diff --git a/src/components/robocub/Contacts.astro b/src/components/robocub/Contacts.astro
index 3dbf361..77eca49 100644
--- a/src/components/robocub/Contacts.astro
+++ b/src/components/robocub/Contacts.astro
@@ -8,29 +8,29 @@ import { LiaDotCircle } from "react-icons/lia";
 <div class="flex justify-center my-[10%]">
     <div class="w-1/2 flex justify-between">
         <div>
-            <div class="flex items-center text-[2.5vw]">
+            <div class="flex items-center md:text-[2.5vw] text-[4vw]">
                 <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
                 <p>
                     Contacts
                 </p>
             </div>
-            <p class="text-[1.1vw] ml-[5%] text-nowrap">
+            <p class="md:text-[1.1vw] text-[1.5vw] ml-[5%] text-nowrap">
                 To stay up to date, join discord server
             </p>
         </div>
         <div class="flex">
             <Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="mr-[20%] flex flex-col items-center">
-                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
+                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] md:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
                     <FaDiscord />
                 </div>
-                <p class="text-[1.3vw] font-semibold">Facebook</p>
+                <p class="md:text-[1.3vw] text-[2vw] font-semibold">Facebook</p>
             </Link>
 
             <Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="flex flex-col items-center">
-                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
+                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] ms:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
                     <RiInstagramFill />
                 </div>
-                <p class="text-[1.3vw] font-semibold">Instagram</p>
+                <p class="md:text-[1.3vw] text-[2vw] font-semibold">Instagram</p>
             </Link>
         </div>
     </div>
diff --git a/src/components/robocub/Join.astro b/src/components/robocub/Join.astro
index 107ec5d..36384d7 100644
--- a/src/components/robocub/Join.astro
+++ b/src/components/robocub/Join.astro
@@ -9,20 +9,20 @@ import robocup from "../../images/robocup.webp";
     <Image
         src={robocup}
         alt="robocub competition image"
-        class="w-3/5 rounded-[2vw] object-cover aspect-[8/5] opacity-40"
+        class="md:w-3/5 w-[90%] rounded-[2vw] object-cover aspect-[8/5] opacity-40"
     />
     <Link
         href="/"
         target="_blank"
-        className="absolute aspect-[8/5] w-3/5 p-[5%] group -bottom-[3%]"
+        className="absolute aspect-[8/5] md:w-3/5 w-[90%] p-[5%] group -bottom-[3%]"
     >
         <div class="w-full flex justify-end items-center h-4/5">
-            <p class="text-[4.5vw] font-bold w-fit">
+            <p class="md:text-[4.5vw] text-[7vw] font-bold w-fit">
                 We Are<br />
                 Hiring
             </p>
         </div>
-        <div class="text-[1vw] pt-[3%]">
+        <div class="md:text-[1vw] text-[1.5vw] md:pt-[3%]">
             <p>
                 Join a community of beginner to experienced engineers from
                 different disciplines and backgrounds
@@ -33,10 +33,10 @@ import robocup from "../../images/robocup.webp";
             </p>
         </div>
         <div
-            class="flex w-full justify-end items-end text-[3.5vw] mt-[3%] group-hover:text-ieee-yellow duration-300"
+            class="flex w-full justify-end items-end md:text-[3.5vw] text-[6vw] mt-[3%] group-hover:text-ieee-yellow duration-300"
         >
             <p
-                class="mr-[2%] w-fit py-[1%] px-[2%] text-[1.2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light"
+                class="mr-[2%] w-fit py-[1%] px-[2%] md:text-[1.2vw] text-[2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light"
             >
                 Application form
             </p>
diff --git a/src/components/robocub/Subteam.astro b/src/components/robocub/Subteam.astro
deleted file mode 100644
index e698960..0000000
--- a/src/components/robocub/Subteam.astro
+++ /dev/null
@@ -1,16 +0,0 @@
----
-import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6";
-import { LuBrainCircuit } from "react-icons/lu";
-const { title, list } = Astro.props;
----
-
-<div
-    class="px-[10%] flex flex-col justify-center items-center w-[20vw] h-[38vh] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]"
->
-    <p class="text-[1.5vw] mb-[10%] font-semibold pt-[10%]">
-        {title}
-    </p>
-    <ul class="text-[1vw] font-light">
-        {list.map((item: string) => <li>&#8226; {item}</li>)}
-    </ul>
-</div>
diff --git a/src/components/robocub/Subteams.astro b/src/components/robocub/Subteams.astro
index 95bcb17..17321a2 100644
--- a/src/components/robocub/Subteams.astro
+++ b/src/components/robocub/Subteams.astro
@@ -1,6 +1,5 @@
 ---
 import Subtitle from "../core/Subtitle.astro";
-import Subteam from "./Subteam.astro";
 import subteams from "../../data/subteams.json";
 import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
 import { FaGear, FaMicrochip, FaCode } from "react-icons/fa6";
@@ -11,9 +10,9 @@ const duplicatedSubteams = [...subteams, ...subteams, ...subteams];
 const centerIndex = Math.floor(subteams.length); // center in the middle
 ---
 
-<div class="flex flex-col items-center my-[10%] relative">
+<div class="flex flex-col items-center md:my-[10%] my-[20%] relative overflow-x-clip">
     <Subtitle title="Subteams" />
-    <div class="relative w-[75vw] h-[50vh] mt-[3%]">
+    <div class="relative md:w-[75vw] w-[85vw] h-[25vw] mt-[8%] md:mt-[5%]">
         <div id="carousel" class="absolute w-full h-full flex justify-center">
             {
                 duplicatedSubteams.map((subteam, index) => {
@@ -27,7 +26,7 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
 
                     return (
                         <div
-                            class="carousel-item absolute transition-all duration-500"
+                            class="carousel-item absolute transition-all duration-500 md:w-[20vw] w-[25vw]"
                             style={{
                                 transform: `translateX(${distance * 12}vw) scale(${
                                     Math.abs(distance) === 0
@@ -43,17 +42,16 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
                                         : Math.abs(distance) === 1
                                           ? 20
                                           : 10,
-                                width: "20vw",
                             }}
                             data-index={index}
                         >
                             <div class="relative">
                                 <div class="relative w-full h-full backdrop-blur-md overflow-hidden rounded-[2vw]">
-                                    <div class="px-[10%] flex flex-col justify-center items-center w-[20vw] h-[38vh] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]">
-                                        <p class="text-[1.5vw] mb-[10%] font-semibold pt-[10%]">
+                                    <div class="px-[10%] flex flex-col justify-center items-center md:w-[20vw] w-[25vw] md:h-[22vw] h-[28vw] bg-gradient-to-b from-ieee-blue-100/25 to-ieee-black backdrop-blur rounded-[2vw] border-white/40 border-[0.1vw]">
+                                        <p class="md:text-[1.5vw] text-[2vw] mb-[10%] font-semibold pt-[10%]">
                                             {subteam.title}
                                         </p>
-                                        <ul class="text-[1vw] font-light">
+                                        <ul class="md:text-[1vw] text-[1.5vw] font-light">
                                             {subteam.list.map(
                                                 (item: string) => (
                                                     <li>&#8226; {item}</li>
@@ -62,7 +60,7 @@ const centerIndex = Math.floor(subteams.length); // center in the middle
                                         </ul>
                                     </div>
                                 </div>
-                                <div class="-top-[10%] left-1/2 -translate-x-1/2 w-fit p-[5%] shadow-ieee-blue-300 text-[3.2vw] bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 rounded-full absolute">
+                                <div class="-top-[10%] left-1/2 -translate-x-1/2 w-fit p-[5%] shadow-ieee-blue-300 md:text-[3.2vw] text-[4.5vw] bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 rounded-full absolute">
                                     {subteam.title === "Mechanical" && (
                                         <FaGear />
                                     )}
diff --git a/src/components/signal/Competition.astro b/src/components/signal/Competition.astro
index b3fb76b..cd904d8 100644
--- a/src/components/signal/Competition.astro
+++ b/src/components/signal/Competition.astro
@@ -5,25 +5,24 @@ const {picture, name, description, link} = Astro.props;
 ---
 <div class = "text-white relative my-[3%]" >
     
-    <img src = {picture} alt = "signal" class = "w-full object-cover aspect-[1512/526] opacity-25">
+    <img src = {picture} alt = "signal" class = "w-full object-cover md:aspect-[1300/526] aspect-[2/1] opacity-25">
 
-    <div class = "w-full flex justify-evenly absolute bottom-[28%] ml-[5%]">
-
-        <div class = "flex items-center text-[2.5vw] font-extralight">
-            <LiaDotCircle className=" mr-[1vw] text-[2.5vw]"/>
+    <div class = "w-full flex justify-evenly absolute bottom-[20%] left-[4%]">
+        <div class = "flex items-center md:text-[2.5vw] text-[4vw]">
+            <LiaDotCircle className=" mr-[1vw] md:text-[2.6vw]"/>
             <p>
                 Competition
             </p>
         </div>
     
-        <div class = "text-[1.5vw] font-extralight tracking-wider">
-            <p class = "w-[35vw] mb-[3%] mt-[40vh]">
+        <div class = "md:text-[1.6vw] text-[2.2vw] tracking-wider">
+            <p class = "w-[35vw] md:mt-[25vw] mt-[35vw]">
                 {name}
             </p>
             <p class = "mb-[5%]">
                 {description}
             </p>
-            <Link href = {link} target="_blank" className="text-[1vw] border-white/70 border-[0.1vw] py-[3%] px-[15%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
+            <Link href = {link} target="_blank" className="md:text-[1.2vw] text-[2vw] font-light border-white/70 border-[0.1vw] py-[1.5%] px-[9%] rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
                 Link
             </Link>
         </div>
diff --git a/src/data/landing.js b/src/data/landing.js
deleted file mode 100644
index aceb92f..0000000
--- a/src/data/landing.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
-
-export const landing = [
-    {
-        "icon": <FaDiscord />,
-        "link": "https://discord.gg/XxfjqZSjca"
-    },
-    {
-        "icon": <FaFacebook />,
-        "link": "https://www.facebook.com/ieeeucsd"
-    },
-    {
-        "icon": <FaInstagram />,
-        "link": "https://www.instagram.com/ieee.ucsd"
-    }
-];
diff --git a/src/data/qpTimeline.json b/src/data/qpTimeline.json
index 0432116..1bf5f85 100644
--- a/src/data/qpTimeline.json
+++ b/src/data/qpTimeline.json
@@ -1,32 +1,30 @@
-{
-  "events": [
-    {
-      "week": "Week 1",
-      "description": "Submit Applications"
-    },
-    {
-      "week": "Week 2",
-      "description": "QP groups are formed, QP Kickoff"
-    },
-    {
-      "week": "Week 3",
-      "description": "Mentor Assignments"
-    },
-    {
-      "week": "Week 4",
-      "description": "Workathon #1"
-    },
-    {
-      "week": "Week 6",
-      "description": "Workathon #2, Milestone #1"
-    },
-    {
-      "week": "Week 8",
-      "description": "Workathon #3, Milestone #2"
-    },
-    {
-      "week": "Week 9/10",
-      "description": "Final submission, QP Showcase!"
-    }
-  ]
-}
+[
+  {
+    "week": "Week 1",
+    "description": "Submit Applications"
+  },
+  {
+    "week": "Week 2",
+    "description": "QP groups are formed, QP Kickoff"
+  },
+  {
+    "week": "Week 3",
+    "description": "Mentor Assignments"
+  },
+  {
+    "week": "Week 4",
+    "description": "Workathon #1"
+  },
+  {
+    "week": "Week 6",
+    "description": "Workathon #2, Milestone #1"
+  },
+  {
+    "week": "Week 8",
+    "description": "Workathon #3, Milestone #2"
+  },
+  {
+    "week": "Week 9/10",
+    "description": "Final submission, QP Showcase!"
+  }
+]
diff --git a/src/data/roboTimeline.json b/src/data/roboTimeline.json
new file mode 100644
index 0000000..51a1983
--- /dev/null
+++ b/src/data/roboTimeline.json
@@ -0,0 +1,30 @@
+[
+  {
+    "week": "Fall W1 - W3",
+    "description": "Submit Applications"
+  },
+  {
+    "week": "Fall W4 - W9",
+    "description": "QP groups are formed, QP Kickoff"
+  },
+  {
+    "week": "Week 3",
+    "description": "Mentor Assignments"
+  },
+  {
+    "week": "Week 4",
+    "description": "Workathon #1"
+  },
+  {
+    "week": "Week 6",
+    "description": "Workathon #2, Milestone #1"
+  },
+  {
+    "week": "Week 8",
+    "description": "Workathon #3, Milestone #2"
+  },
+  {
+    "week": "Week 9/10",
+    "description": "Final submission, QP Showcase!"
+  }
+]
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9c9a4ac..ef69432 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -14,7 +14,7 @@ import InView from "../components/core/InView.astro";
         <title>Astro Basics</title>
     </head>
     <InView />
-    <body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip">
+    <body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip w-screen">
         <Navbar />
         <main class="w-[95%]">
             <slot />
diff --git a/src/pages/quarterly.astro b/src/pages/quarterly.astro
index 99802bc..c8eff9e 100644
--- a/src/pages/quarterly.astro
+++ b/src/pages/quarterly.astro
@@ -11,6 +11,7 @@ import qpborder from "../images/qpborder.webp";
 import Join from "../components/qp/Join.astro";
 import Carousel from "../components/qp/Carousel.astro";
 import Timeline from "../components/qp/Timeline.astro";
+import qpTimeline from "../data/qpTimeline.json"
 ---
 
 <Layout>
@@ -38,7 +39,7 @@ import Timeline from "../components/qp/Timeline.astro";
         text="Getting started on hardware development or want to make your own project? Need something to put on your resume? IEEE's Quarterly Projects aims to provide students with project experience in a span of 10 weeks. During QP, students will acquire skills used in the industry such as C++ and the prototyping process with the assistance of our mentors. At the end of the quarter, students will demonstrate their projects at QP Showcase in front of other students, professors, and industry professionals!"
     />
     <Steps />
-    <Timeline />
+    <Timeline timeline={qpTimeline} />
     <PastProjects />
     <Mentorship />
     <Join />
diff --git a/src/pages/robocup.astro b/src/pages/robocup.astro
index 9c2694b..557ef9e 100644
--- a/src/pages/robocup.astro
+++ b/src/pages/robocup.astro
@@ -12,6 +12,7 @@ import Contacts from "../components/robocub/Contacts.astro";
 import Subteams from "../components/robocub/Subteams.astro";
 import Timeline from "../components/qp/Timeline.astro";
 import Competition from "../components/signal/Competition.astro";
+import roboTimeline from "../data/roboTimeline.json"
 ---
 
 <Layout>
@@ -34,19 +35,19 @@ import Competition from "../components/signal/Competition.astro";
         <Link
             href="/"
             target="_blank"
-            className="mb-[10%] z-10 cursor-pointer px-[2%] py-[0.5%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
+            className="mb-[10%] z-10 cursor-pointer px-[2%] py-[0.5%] md:text-[1.2vw] text-[2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
         >
             Past Team Description Paper
         </Link>
     </div>
     <Competition
-        picture="../public/robocup.webp"
+        picture="/robocup.webp"
         name="Preparing for Salvador 2025"
         description="Recently the team went to our first ever competition in Germany!"
         link="https://www.google.com/"
     />
     <Subteams />
-    <Timeline />
+    <Timeline timeline={roboTimeline}/>
     <Join />
     <Questions faq={faq} />
     <Contacts />