Click Logo, Text Scaling

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"
   }
-}
+}

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 {

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";
 
@@ -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>
@@ -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

src/components/NavBar.jsx

@@ -36,20 +36,48 @@ 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);
 
   const toggleDropdown = () => {
     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>
 

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 {

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;
+  }
 }

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

src/components/faq.css

@@ -15,18 +15,20 @@
   .faq-question {
     cursor: pointer;
     padding: 10px;
-    background-color: #a020f0;
+    background-color: #612685;
     border: 1px solid #a020f0;
     border-radius: 4px;
     font-weight: bold;
     display: flex;
     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;
+  }
+}
 

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.",
     },
   ];