From cdcdf0c7de864374c092ffbc9b4ced28c8259841 Mon Sep 17 00:00:00 2001
From: sam-shervin <samshervin.sebastian@gmail.com>
Date: Sun, 31 Mar 2024 04:05:01 +0530
Subject: [PATCH] improvements in responsiveness

---
 .github/workflows/automatedpr.yml | 24 ------------------------
 pnpm-lock.yaml                    |  1 -
 src/components/countdown.tsx      | 16 ++++++++--------
 src/components/footer.tsx         |  2 +-
 src/components/header.tsx         | 13 +++++--------
 src/components/pages/FAQ.tsx      | 10 ++++------
 src/components/pages/about.tsx    |  4 ++--
 src/components/pages/timeline.tsx | 16 +++++++++-------
 src/pages/index.tsx               |  2 +-
 9 files changed, 30 insertions(+), 58 deletions(-)
 delete mode 100644 .github/workflows/automatedpr.yml
 delete mode 100644 pnpm-lock.yaml

diff --git a/.github/workflows/automatedpr.yml b/.github/workflows/automatedpr.yml
deleted file mode 100644
index 2a5fedc..0000000
--- a/.github/workflows/automatedpr.yml
+++ /dev/null
@@ -1,24 +0,0 @@
-name: Push to Forked Repository
-
-on:
-  push:
-    branches:
-      - sam-patch
-
-jobs:
-  push_to_forked_repo:
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout Repository
-      uses: actions/checkout@v2
-
-    - name: Push to Forked Repository
-      run: |
-        git config --global user.email "samshervin.sebastian@gmail.com"
-        git config --global user.name "sam-shervin"
-        git checkout sam-patch
-        git config pull.rebase false
-        git remote add hackhub-24-testdeploy https://github.com/sam-shervin/hackhub-24-testdeploy
-        git pull hackhub-24-testdeploy master --allow-unrelated-histories
-        git push hackhub-24-testdeploy sam-patch:master
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
deleted file mode 100644
index d3190d7..0000000
--- a/pnpm-lock.yaml
+++ /dev/null
@@ -1 +0,0 @@
-#delete this before you work next time
\ No newline at end of file
diff --git a/src/components/countdown.tsx b/src/components/countdown.tsx
index 127f565..27e57f8 100644
--- a/src/components/countdown.tsx
+++ b/src/components/countdown.tsx
@@ -64,27 +64,27 @@ export default function Countdown({
 			<section className="font-offbittrialbold">
 				<section className="flex justify-center sm:text-[2em] text-7xl gap-16 sm:gap-6 mt-20 ">
 					<div className="flex flex-col items-center">
-						<p className="text-9xl sm:text-[2em]">{timeLeft.days}</p>
-						<p className="text-custom_red font-offbittrial sm:text-[1em] text-6xl">
+						<p className="text-9xl sm:text-[120%]">{timeLeft.days}</p>
+						<p className="text-custom_red font-offbittrial sm:text-[80%] text-6xl">
 							days
 						</p>
 					</div>
 
 					<div className="flex flex-col items-center">
-						<p className="text-9xl sm:text-[2em]">{timeLeft.hours}</p>
-						<p className="text-custom_lightblue font-offbittrial sm:text-[1em] text-6xl">
+						<p className="text-9xl sm:text-[120%]">{timeLeft.hours}</p>
+						<p className="text-custom_lightblue font-offbittrial sm:text-[80%] text-6xl">
 							hours
 						</p>
 					</div>
 					<div className="flex flex-col items-center">
-						<p className="text-9xl sm:text-[2em]">{timeLeft.minutes}</p>
-						<p className="text-custom_white font-offbittrial sm:text-[1em] text-6xl">
+						<p className="text-9xl sm:text-[120%]">{timeLeft.minutes}</p>
+						<p className="text-custom_white font-offbittrial sm:text-[80%] text-6xl">
 							minutes
 						</p>
 					</div>
 					<div className="flex flex-col items-center">
-						<p className="text-9xl sm:text-[2em]">{timeLeft.seconds}</p>
-						<p className="text-custom_red font-offbittrial text-6xl sm:text-[1em]">
+						<p className="text-9xl sm:text-[120%]">{timeLeft.seconds}</p>
+						<p className="text-custom_red font-offbittrial text-6xl sm:text-[80%]">
 							seconds
 						</p>
 					</div>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 337a52b..a2d122a 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -11,7 +11,7 @@ import devto from "../assets/socialmedia/devto.png";
 
 const Footer = () => {
 	return (
-		<div className="relative z-0 mx-32 backdrop-blur-md">
+		<div className="relative z-0 lg:mx-32 md:mx-32 sm:mx-12 backdrop-blur-md">
 			<section
 				id="contact"
 				className="h-0.5 bg-gradient-to-r from-[#CF1259] to-[#7161EF] my-4 "
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 70e5f5e..0667acd 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,12 +1,9 @@
 import React, { useState, useEffect } from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
 
 const Navbar = ({ buttons }: { buttons: string[] }): JSX.Element => {
 	const [currentButton, setCurrentButton] = useState<string | null>(buttons[0]); // Set the first button as initially highlighted
 	const buttonRefs = React.useRef<{ [key: string]: HTMLElement | null }>({});
-	const [isDesktop, setDesktop] = useState(false);
 	const [isRadialNavbarOpen, setRadialNavbarOpen] = useState(false);
 
 	const openRadialNavbar = () => {
@@ -85,7 +82,7 @@ const Navbar = ({ buttons }: { buttons: string[] }): JSX.Element => {
 				<nav className="sm:hidden md:hidden justify-center flex flex-nowrap font-normal text-[20px] w-screen">
 					{buttons.map((button) => {
 						return (
-							<Link href={`#${button.toLowerCase()}`} key={button}>
+							<a href={`#${button.toLowerCase()}`} key={button}>
 								<section
 									className={`px-16 py-5 
 									`}
@@ -93,7 +90,7 @@ const Navbar = ({ buttons }: { buttons: string[] }): JSX.Element => {
 								>
 									{button}
 								</section>
-							</Link>
+							</a>
 						);
 					})}
 				</nav>
@@ -115,7 +112,7 @@ const Navbar = ({ buttons }: { buttons: string[] }): JSX.Element => {
 					>
 						{buttons.map((button) => {
 							return (
-								<Link href={`#${button.toLowerCase()}`} key={button}>
+								<a href={`#${button.toLowerCase()}`} key={button}>
 									<section
 										onClick={openRadialNavbar}
 										className={`px-16 py-6 hover:bg-black hover:bg-opacity-10 rounded-md 
@@ -124,7 +121,7 @@ const Navbar = ({ buttons }: { buttons: string[] }): JSX.Element => {
 									>
 										{button}
 									</section>
-								</Link>
+								</a>
 							);
 						})}
 					</motion.section>
diff --git a/src/components/pages/FAQ.tsx b/src/components/pages/FAQ.tsx
index 07da525..e11b6ea 100644
--- a/src/components/pages/FAQ.tsx
+++ b/src/components/pages/FAQ.tsx
@@ -56,15 +56,14 @@ export default function FAQ(): JSX.Element {
 		<>
 			<motion.section
 				id="faqs"
-				className="relative mt-10 w-full flex py-20 font-bold text-[5rem] min-h-screen"
+				className="relative mt-10 w-full flex py-20 font-bold text-[5rem] sm:text-[80%] min-h-screen sm:justify-center"
 			>
-				<div className="w-[80%] ml-24 p-4 z-10">
+				<div className="w-[80%] ml-24 sm:ml-0 z-10 sm:text-center">
 					<section className={`${spaceGrotesk.className} font-regular`}>
 						FAQs
 					</section>
 					<section className={`${spaceGrotesk.className} ml-[-1rem]`}>
 						{faqs.map((faq, index) => (
-
 							<motion.section
 								initial={{ opacity: 0 }}
 								animate={{ opacity: 1 }}
@@ -77,7 +76,7 @@ export default function FAQ(): JSX.Element {
 								key={index}
 							>
 								<section
-									className="text-[2.1rem] font-normal flex justify-between"
+									className="text-[2.1rem] sm:text-[40%] font-normal flex justify-between"
 									onClick={() => toggleTopic(index)}
 								>
 									<section>{faq.topic}</section>
@@ -87,7 +86,6 @@ export default function FAQ(): JSX.Element {
 									/>
 								</section>
 								{selectedTopic === index && (
-
 									<motion.section
 										initial={{ opacity: 0 }}
 										animate={{
@@ -98,7 +96,7 @@ export default function FAQ(): JSX.Element {
 											delay: 0,
 											ease: "easeInOut",
 										}}
-										className={` font-extralight text-[1.2rem] pt-4 pb-24 pr-24 `}
+										className={` font-extralight text-[1.2rem] sm:text-[25%] pt-4 pb-24 sm:pr-0`}
 									>
 										<p>{faq.description}</p>
 									</motion.section>
diff --git a/src/components/pages/about.tsx b/src/components/pages/about.tsx
index bf51111..ee66444 100644
--- a/src/components/pages/about.tsx
+++ b/src/components/pages/about.tsx
@@ -17,7 +17,7 @@ export default function About(): JSX.Element {
 		<>
 			<div className="lg:w-[70%] sm:w-[95%] md:w-[90%] lg:ml-24 pb-24 p-12 z-10 backdrop-blur-lg rounded-[3rem] border border-custom_red shadow-2xl shadow-custom_darkblue md:self-center sm:self-center">
 				<section
-					className={`flex py-4 ${spaceGrotesk.className} md:text-[70%] sm:text-[50%] sm:justify-center`}
+					className={`flex py-4 ${spaceGrotesk.className} md:text-[70%] sm:text-[40%] sm:justify-center`}
 				>
 					<section className="text-custom_white font-glitch about-shadow mr-8">
 						About
@@ -31,7 +31,7 @@ export default function About(): JSX.Element {
 				</section>
 
 				<section
-					className={`text-[1.5rem] font-normal self-start sm:text-center sm:text-[1rem]`}
+					className={`text-[1.5rem] font-normal self-start sm:text-center sm:text-[20%]`}
 				>
 					Welcome to IEEE Computer Society VIT Chennai, where innovation meets
 					impact. This event is a vibrant arena for budding technologists,
diff --git a/src/components/pages/timeline.tsx b/src/components/pages/timeline.tsx
index 0c64299..1a6f17e 100644
--- a/src/components/pages/timeline.tsx
+++ b/src/components/pages/timeline.tsx
@@ -50,7 +50,7 @@ export default function Timeline(): JSX.Element {
 
 				<div className="p-4 flex w-screen flex-col items-center justify-center z-10">
 					<section className={`flex py-4 ${spaceGrotesk.className}`}>
-						<section className="text-custom_white text-start w-screen ml-[3em]">
+						<section className="text-custom_white text-start w-screen ml-[3em] sm:text-center sm:ml-0">
 							Timeline
 						</section>
 					</section>
@@ -59,24 +59,26 @@ export default function Timeline(): JSX.Element {
 					>
 						<section className="">
 							{times.map((time, index) => (
-								<section className={`justify-center w-screen rounded-lg p-12`}>
+								<section
+									className={`justify-center w-screen rounded-lg p-12 sm:p-0`}
+								>
 									<section
 										className={`${
 											index % 2 == 0
-												? "ml-[25em] mr-[4em] border-custom_red"
-												: "ml-[4em] mr-[25em] border-custom_lightblue"
-										} border rounded-lg p-12 backdrop-brightness-125 backdrop-blur-lg shadow-2xl shadow-custom_darkblue`}
+												? "ml-[25em] mr-[4em] sm:ml-[1em] sm:mr-[1em] border-custom_red"
+												: "ml-[4em] mr-[25em] sm:ml-[1em] sm:mr-[1em] border-custom_lightblue"
+										} border rounded-lg p-12 backdrop-brightness-125 sm:m-6 backdrop-blur-lg shadow-2xl shadow-custom_darkblue`}
 									>
 										<section
 											className={`${
 												index % 2 == 0
 													? "text-custom_red"
 													: "text-custom_lightblue"
-											} text-[3rem] font-normal self-start"`}
+											} text-[3rem] sm:text-[130%] font-normal self-start"`}
 										>
 											{time.topic}
 										</section>
-										<section className="text-[1.5rem] font-normal mt-12 text-end">
+										<section className="sm:text-[90%] font-normal sm:mt-6 mt-12 text-end">
 											{time.description}
 										</section>
 									</section>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6eb0307..278a480 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -146,7 +146,7 @@ export default function Home() {
 							delay: 2,
 							ease: "easeInOut",
 						}}
-						className={`${roboto.className} absolute left-[6rem] top-[-19rem] text-[20rem] z-1 gradient-border`}
+						className={`${roboto.className} sm:hidden absolute left-[6rem] top-[-19rem] text-[20rem] z-1 gradient-border`}
 					>
 						×
 					</motion.p>