From f0eb048f483fb3a854480345aa145a21a4407449 Mon Sep 17 00:00:00 2001
From: Jacob <jacoblaity@me.com>
Date: Thu, 27 Feb 2025 16:10:32 +0000
Subject: [PATCH 1/3] Logo click, Text Scaling

Click on logo to scroll to top
Improved mobile text scaling so its more readable
---
 src/App.css               | 35 +++++++++++------------------------
 src/App.jsx               |  4 ++--
 src/components/NavBar.jsx |  8 +++++++-
 src/components/about.css  | 25 +++++++++++++++++++++----
 src/components/about.jsx  | 22 ++++++++++++++--------
 5 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/src/App.css b/src/App.css
index 43cd49a..583d303 100644
--- a/src/App.css
+++ b/src/App.css
@@ -65,6 +65,11 @@ footer {
   animation: roll 2s ease-in-out;
 }
 
+p {
+  font-size: clamp(16px, 1.5vw, 20px); /* Adjusts based on screen width */
+  line-height: 1.6;
+}
+
 @keyframes roll {
   0% {
     transform: rotateX(0deg) rotateY(0deg);
@@ -113,29 +118,6 @@ footer {
   margin: 10px 0;
 }
 
-.typewriter {
-  display: inline-block;
-  font-size: 2.5vw;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.blinker {
-  display: inline-block;
-  color: #800080;
-  animation: blink 1s step-end infinite;
-}
-
-@keyframes blink {
-  from,
-  to {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
 @media (min-width: 768px) {
   .about-section {
     flex-direction: row;
@@ -370,7 +352,12 @@ footer {
 .header {
   align-items: center;
   justify-content: center;
-  font-size: 5em;
+  font-size: clamp(3rem, 12vw, 6rem);
+}
+
+.tagline {
+  text-align: center;
+  font-size: clamp(1rem, 3vw, 2rem); 
 }
 
 .header2 {
diff --git a/src/App.jsx b/src/App.jsx
index 77ee0b9..e762355 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -11,12 +11,12 @@ function App() {
   return (
     <>
       <NavBar />
-
+    
       <h1 className="header">
         <span style={{ color: "white" }}>Uni</span>CS
       </h1>
 
-      <p style={{ textAlign: "center", fontSize: "3vw" }}>
+      <p className="tagline">
         University of Manchester <br />
         Computer Science Society{" "}
       </p>
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index d081fd0..3ea5280 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -59,6 +59,7 @@ const UnderConstruction = () => {
     </div>
   );
 };
+
 const NavBar = () => {
   const [showDropdown, setShowDropdown] = useState(false);
 
@@ -66,6 +67,10 @@ const NavBar = () => {
     setShowDropdown(!showDropdown);
   };
 
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
   return (
     <nav className="navbar">
       <UnderConstruction />
@@ -73,7 +78,7 @@ const NavBar = () => {
         <Dropdown pages={pages} setShowDropdown={setShowDropdown} />
       ) : (
         <div className="navbar-content">
-          <div className="logo-container">
+          <div className="logo-container" onClick={scrollToTop} style={{ cursor: "pointer" }}>
             <img src="logo.png" id="logo" alt="UniCS logo" />
           </div>
 
@@ -100,4 +105,5 @@ const NavBar = () => {
   );
 };
 
+
 export default NavBar;
diff --git a/src/components/about.css b/src/components/about.css
index 133e7cd..87800d2 100644
--- a/src/components/about.css
+++ b/src/components/about.css
@@ -1,12 +1,17 @@
-.typewriter {
+.typewriter-container {
+  height: calc(clamp(6px, 4vw, 50px) * 1.5); /* Height based on font size with some extra space */
+  display: flex;
+  align-items: center;
+}
+
+.typewriter-text {
   display: inline-block;
-  font-size: 2.5vw;
-  overflow: hidden;
-  white-space: nowrap;
+  font-size: clamp(6px, 4vw, 50px);
 }
 
 .blinker {
   display: inline-block;
+  font-size: clamp(6px, 4vw, 50px);
   color: #800080;
   animation: blink 1s step-end infinite;
 }
@@ -26,7 +31,19 @@
 }
 
 @media (max-width: 800px) {
+  .instagram-embed {
+    margin-bottom: 80px; 
+  }
   .instagram-embed blockquote {
     max-width: 300px;
   }
+  .typewriter-container {
+    height: calc(5vw * 1.5); 
+    min-height: 50px;
+    padding-top: 50px;
+  }
+  .typewriter-text {
+    font-size: 5vw; 
+    min-height: 50px;
+  }
 }
diff --git a/src/components/about.jsx b/src/components/about.jsx
index 9d3c66d..936aadb 100644
--- a/src/components/about.jsx
+++ b/src/components/about.jsx
@@ -14,14 +14,20 @@ const About = () => {
   return (
     <div id="about" className="about-section">
       <div className="about-content">
-        
-        <h2 className="typewriter">
-          <Typewriter
-            onInit={(typewriter) => {
-              typewriter.typeString("Hello World!").start();
-            }}
-          />
-        </h2>
+      <div className="typewriter-container">
+          <h2 className="typewriter">
+            <Typewriter
+              options={{
+                strings: ['Hello World!', 'Welcome!'],
+                loop: true,
+                autoStart: true,
+                pauseFor: 5000,
+                wrapperClassName: "typewriter-text",
+                cursorClassName: "blinker"
+              }}
+            />
+          </h2>
+        </div>
         <hr className="about-line" />
         <p style={{ color: "#000000" }}>
           UniCS is the University of Manchester&#39;s tech society. We are a big

From 14f95a8e188985d8f22ddd6a3b087d9bcb5e2118 Mon Sep 17 00:00:00 2001
From: Jacob <jacoblaity@me.com>
Date: Thu, 27 Feb 2025 16:10:32 +0000
Subject: [PATCH 2/3] Logo click, Text Scaling

Click on logo to scroll to top
Improved mobile text scaling so its more readable
---
 src/App.css               | 35 +++++++++++------------------------
 src/App.jsx               |  4 ++--
 src/components/NavBar.jsx | 31 ++++++++++++++++++++++++++++++-
 src/components/about.css  | 25 +++++++++++++++++++++----
 src/components/about.jsx  | 22 ++++++++++++++--------
 5 files changed, 78 insertions(+), 39 deletions(-)

diff --git a/src/App.css b/src/App.css
index 728a543..eabf2b8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -65,6 +65,11 @@ footer {
   animation: roll 2s ease-in-out;
 }
 
+p {
+  font-size: clamp(16px, 1.5vw, 20px); /* Adjusts based on screen width */
+  line-height: 1.6;
+}
+
 @keyframes roll {
   0% {
     transform: rotateX(0deg) rotateY(0deg);
@@ -113,29 +118,6 @@ footer {
   margin: 10px 0;
 }
 
-.typewriter {
-  display: inline-block;
-  font-size: 2.5vw;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.blinker {
-  display: inline-block;
-  color: #800080;
-  animation: blink 1s step-end infinite;
-}
-
-@keyframes blink {
-  from,
-  to {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
 @media (min-width: 768px) {
   .about-section {
     flex-direction: row;
@@ -305,7 +287,12 @@ footer {
 .header {
   align-items: center;
   justify-content: center;
-  font-size: 5em;
+  font-size: clamp(3rem, 12vw, 6rem);
+}
+
+.tagline {
+  text-align: center;
+  font-size: clamp(1rem, 3vw, 2rem); 
 }
 
 .header2 {
diff --git a/src/App.jsx b/src/App.jsx
index 73bf1e5..f1488da 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,12 +25,12 @@ function App() {
   return (
     <>
       <NavBar />
-
+    
       <h1 className="header">
         <span style={{ color: "white" }}>Uni</span>CS
       </h1>
 
-      <p style={{ textAlign: "center", fontSize: "3vw" }}>
+      <p className="tagline">
         University of Manchester <br />
         Computer Science Society{" "}
       </p>
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index 44f3de0..d9fcbc2 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -36,6 +36,30 @@ const pages = [
   },
 ];
 
+const UnderConstruction = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsVisible(true), 600);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="under-construction-banner">
+      <div className="under-construction-icon">
+        <FontAwesomeIcon icon={faCog} spin className="icon-left" />
+        <FontAwesomeIcon icon={faCog} className="reverse-spin icon-right" />
+      </div>
+      <div className="under-construction-icon-small">
+        <FontAwesomeIcon icon={faCog} spin className="icon-small" />
+      </div>
+      <span>Website under construction!</span>
+    </div>
+  );
+};
+
 const NavBar = () => {
   const [showDropdown, setShowDropdown] = useState(false);
 
@@ -43,13 +67,17 @@ const NavBar = () => {
     setShowDropdown(!showDropdown);
   };
 
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
   return (
     <nav className="navbar">
       {showDropdown ? (
         <Dropdown pages={pages} setShowDropdown={setShowDropdown} />
       ) : (
         <div className="navbar-content">
-          <div className="logo-container">
+          <div className="logo-container" onClick={scrollToTop} style={{ cursor: "pointer" }}>
             <img src="logo.png" id="logo" alt="UniCS logo" />
           </div>
 
@@ -76,4 +104,5 @@ const NavBar = () => {
   );
 };
 
+
 export default NavBar;
diff --git a/src/components/about.css b/src/components/about.css
index 133e7cd..87800d2 100644
--- a/src/components/about.css
+++ b/src/components/about.css
@@ -1,12 +1,17 @@
-.typewriter {
+.typewriter-container {
+  height: calc(clamp(6px, 4vw, 50px) * 1.5); /* Height based on font size with some extra space */
+  display: flex;
+  align-items: center;
+}
+
+.typewriter-text {
   display: inline-block;
-  font-size: 2.5vw;
-  overflow: hidden;
-  white-space: nowrap;
+  font-size: clamp(6px, 4vw, 50px);
 }
 
 .blinker {
   display: inline-block;
+  font-size: clamp(6px, 4vw, 50px);
   color: #800080;
   animation: blink 1s step-end infinite;
 }
@@ -26,7 +31,19 @@
 }
 
 @media (max-width: 800px) {
+  .instagram-embed {
+    margin-bottom: 80px; 
+  }
   .instagram-embed blockquote {
     max-width: 300px;
   }
+  .typewriter-container {
+    height: calc(5vw * 1.5); 
+    min-height: 50px;
+    padding-top: 50px;
+  }
+  .typewriter-text {
+    font-size: 5vw; 
+    min-height: 50px;
+  }
 }
diff --git a/src/components/about.jsx b/src/components/about.jsx
index 9d3c66d..936aadb 100644
--- a/src/components/about.jsx
+++ b/src/components/about.jsx
@@ -14,14 +14,20 @@ const About = () => {
   return (
     <div id="about" className="about-section">
       <div className="about-content">
-        
-        <h2 className="typewriter">
-          <Typewriter
-            onInit={(typewriter) => {
-              typewriter.typeString("Hello World!").start();
-            }}
-          />
-        </h2>
+      <div className="typewriter-container">
+          <h2 className="typewriter">
+            <Typewriter
+              options={{
+                strings: ['Hello World!', 'Welcome!'],
+                loop: true,
+                autoStart: true,
+                pauseFor: 5000,
+                wrapperClassName: "typewriter-text",
+                cursorClassName: "blinker"
+              }}
+            />
+          </h2>
+        </div>
         <hr className="about-line" />
         <p style={{ color: "#000000" }}>
           UniCS is the University of Manchester&#39;s tech society. We are a big

From 3108ce7d0bde5e7dc80de9bde8d768913364e824 Mon Sep 17 00:00:00 2001
From: Jacob <jacoblaity@me.com>
Date: Thu, 6 Mar 2025 17:54:53 +0000
Subject: [PATCH 3/3] FAQ Filled out and responsive

"
---
 package.json                               |  4 ++--
 src/App.jsx                                |  5 +++--
 src/components/NavBar.jsx                  |  1 -
 src/components/TimeLineFolder/TimeLine.css |  8 ++++----
 src/components/faq.css                     | 22 ++++++++++++++++++----
 src/components/faq.jsx                     | 20 ++++++++++----------
 6 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 70a10ed..9b7ac82 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,9 @@
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@headlessui/react": "^2.2.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.474.0",
@@ -40,4 +40,4 @@
     "globals": "^15.11.0",
     "vite": "^5.4.11"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.jsx b/src/App.jsx
index f1488da..de06833 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,7 @@ import NavBar from "./components/NavBar";
 import Bee from "./Bee";
 import Committee from "./components/Committee";
 import Timeline from "./components/TimeLineFolder/TimeLine";
-import faq from "./components/faq";
+import Faq from "./components/faq";
 import ConnectWithUs from "./components/ConnectWithUs";
 import "./components/Logo.css";
 
@@ -59,8 +59,9 @@ function App() {
         <p>More information about May Ball coming soon!</p>
       </div>
       
-      <Timeline/>
+      <Timeline />
       <Committee />
+      <Faq />
 
       <h2 id="sponsors" className="header2">
         SPONSORS
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index d9fcbc2..4ebd240 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -104,5 +104,4 @@ const NavBar = () => {
   );
 };
 
-
 export default NavBar;
diff --git a/src/components/TimeLineFolder/TimeLine.css b/src/components/TimeLineFolder/TimeLine.css
index a42039b..48a18d5 100644
--- a/src/components/TimeLineFolder/TimeLine.css
+++ b/src/components/TimeLineFolder/TimeLine.css
@@ -27,7 +27,7 @@
   -webkit-overflow-scrolling: touch;
   padding: 0 2rem;
   margin: 0 auto;
-  max-width: 1200px;
+  max-width: 100%;
 }
 
 .timeline-content {
@@ -37,6 +37,7 @@
   display: inline-block;
   margin: 0 auto;
   opacity: 0;
+  width: 100%;
 }
 
 .timeline-line-segment {
@@ -51,7 +52,7 @@
 .timeline-event-container {
   position: relative;
   height: 600px;
-  min-width: max-content;
+  min-width: 100%;
   margin: 0 auto;
 }
 
@@ -67,7 +68,6 @@
 }
 
 
-
 .timeline-event-wrapper {
   position: absolute;
   width: 260px; /* Reduced from 300px */
@@ -506,7 +506,7 @@
 
   .modal-image-section,
   .modal-info-section {
-    width: 100%;
+    width: 10%;
   }
 
   .modal-image-section {
diff --git a/src/components/faq.css b/src/components/faq.css
index fa75429..bf33a2f 100644
--- a/src/components/faq.css
+++ b/src/components/faq.css
@@ -15,7 +15,7 @@
   .faq-question {
     cursor: pointer;
     padding: 10px;
-    background-color: #a020f0;
+    background-color: #612685;
     border: 1px solid #a020f0;
     border-radius: 4px;
     font-weight: bold;
@@ -23,10 +23,12 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 0;
+    text-align: left;
+    font-size: clamp(16px, 1.5vw, 20px);
   }
   
   .faq-question.open {
-    background-color: #612685;
+    background-color: #a020f0;
   }
   
   .faq-answer {
@@ -44,7 +46,19 @@
   }
   
   .faq-answer.open {
-    max-height: 500px; /* Adjust as needed */
+    max-height: 500px;
     opacity: 1;
-  }                                     
+    font-size: clamp(16px, 1.5vw, 20px)
+  }    
+  
+/* Mobile screens */
+@media (max-width: 768px) {
+  .faq-answer {
+      text-align: center; /* Center text for mobile screens */
+  }
+  .faq-question{
+      text-align: center;
+      flex-direction: column;
+  }
+}
   
\ No newline at end of file
diff --git a/src/components/faq.jsx b/src/components/faq.jsx
index 3d3f42f..2d0b48b 100644
--- a/src/components/faq.jsx
+++ b/src/components/faq.jsx
@@ -15,24 +15,24 @@ const Faq = () => {
 
   const faqData = [
     {
-      question: "Question 1?",
-      answer: "Answer 1.",
+      question: "How can I contact you?",
+      answer: 'Click on "Join Us" or see our "Contact Us" section.',
     },
     {
-      question: "Question 2?",
-      answer: "Answer 2.",
+      question: "How to learn about UniCS events?",
+      answer: "Check our social media (Instagram at the top) to catch up with our events or view our timeline on this site.",
     },
     {
-      question: "Question 3?",
-      answer: "Answer 3.",
+      question: "How to become part of the UniCS team?",
+      answer: "Keep an eye on our social media and posters for recruitment announcements.",
     },
     {
-      question: "Question 4?",
-      answer: "Answer 4.",
+      question: "I am not a Computer Science student, can I still join?",
+      answer: "100%. UniCS is open to all students. We have many events and workshops geared at helping beginners.",
     },
     {
-      question: "Question 5?",
-      answer: "Answer 5.",
+      question: "Is it free to join UniCS?",
+      answer: "Yes! It is completely free of charge to become a member and is super quick and easy.",
     },
   ];