improve responsiveness of mobile menu, intro section texts and mobile social media

Author: Infvyr

app/sections/introduction/index.jsx

@@ -16,10 +16,10 @@ export function WelcomeSection() {
 
 	let [count, setCount] = useState(0);
 	const [text] = useState([
-		"build Flutter apps for Android and iOS",
+		"build Flutter apps for Android/iOS",
 		"convert design into modern UI",
 		"build interactive UI using React",
-		"develop complex websites using Next.js"
+		"develop websites using Next.js"
 	]);
 
 	const onClick = (e) => scrollToEl(e);
@@ -59,7 +59,7 @@ export function WelcomeSection() {
 						<div className="mt-3 relative flex flex-col overflow-hidden">
 							<p
 								ref={ref}
-								className="text-2xl transform-none opacity-100"
+								className="text-[17px] md:text-2xl transform-none opacity-100"
 								style={{
 									transform: isInView ? "none" : "translateX(-200px)",
 									opacity: isInView ? 1 : 0,
@@ -70,7 +70,16 @@ export function WelcomeSection() {
 								<span
 									className="absolute flex flex-col transition-all duration-500 ease-in-expo"
 									style={{
-										top: count === 0 ? "0" : count === 1 ? "-100%" : count === 2 ? "-200%" : "0",
+										top:
+											count === 0
+												? "0"
+												: count === 1
+												? "-100%"
+												: count === 2
+												? "-200%"
+												: count === 3
+												? "-300%"
+												: "0",
 										left: "13px"
 									}}
 								>
@@ -130,6 +139,7 @@ function TextElement({ element }) {
 		<span
 			tabIndex="0"
 			ref={ref}
+			className="text-[17px] md:text-2xl"
 			style={{
 				transform: isInView ? "none" : "translateX(-200px)",
 				opacity: isInView ? 1 : 0,

components/Header.jsx

@@ -13,7 +13,7 @@ export function AppHeader() {
 					<Logo />
 					{isMobile ? <MobileMenu /> : <Menu />}
 					<div className="flex items-center gap-5">
-						<ConnectMedia />
+						{!isMobile && <ConnectMedia />}
 						<ThemeSwitcher />
 					</div>
 				</div>

components/MobileMenu.jsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { BsGrid } from "react-icons/bs";
 import { ConnectMedia, Menu } from "components";
 import {
@@ -10,7 +10,6 @@ import {
 	exitMobile,
 	initial,
 	initialMobile,
-	menuMobileHeight,
 	transition
 } from "utils";
 import { m, AnimatePresence, domAnimation, LazyMotion } from "framer-motion";
@@ -22,9 +21,14 @@ export function MobileMenu() {
 	const onClose = () => setIsOpen(false);
 	const onOpen = () => setIsOpen(true);
 
+	useEffect(() => {
+		document.body.style.overflow = isOpen ? "hidden" : "auto";
+	}, [isOpen]);
+
 	return (
 		<LazyMotion features={domAnimation}>
 			<m.button
+				className="p-2"
 				onClick={onOpen}
 				title="Open menu"
 				initial={initial}
@@ -38,7 +42,7 @@ export function MobileMenu() {
 			<AnimatePresence>
 				{isOpen && (
 					<m.div
-						className={`bg-black/90 fixed left-0 right-0 top-[${menuMobileHeight}] min-h-screen z-50`}
+						className={`backdrop-blur-md fixed left-0 right-0 top-0 min-h-screen z-50`}
 						initial={initialMobile}
 						animate={animateMobile}
 						exit={exitMobile}
@@ -52,7 +56,7 @@ export function MobileMenu() {
 								<IoMdClose size="24" />
 							</button>
 						</header>
-						<div className="px-10">
+						<div className="px-6 py-10">
 							<Menu onClick={onClose} />
 						</div>
 					</m.div>

utils/theme-config.js

@@ -1,54 +1,6 @@
 const navigationHeight = 80;
-const menuMobileHeight = "68px";
-const footerHeight = 110;
 
-// const colors = {
-// 	brand: {
-// 		100: "#fbf8f3",
-// 		300: "#7928CA",
-// 		400: "#FF0080",
-// 		500: "#232332"
-// 	},
-// 	blue: {
-// 		300: "#71c5ee",
-// 		700: "#025091"
-// 	}
-// };
-
-// const Buttons = {
-// 	Button: {
-// 		variants: {
-// 			solid: (props) => ({
-// 				bg: props.colorMode === "dark" ? "blue.600" : "blue.500",
-// 				color: "white",
-// 				_hover: {
-// 					bg: props.colorMode === "dark" ? "blue.700" : "blue.600"
-// 				}
-// 			})
-// 		}
-// 	}
-// };
-
-// const Headings = {
-// 	Heading: {
-// 		baseStyle: {
-// 			fontWeight: "extrabold"
-// 		},
-// 		variants: {
-// 			brand: (props) => ({
-// 				bgGradient:
-// 					props.colorMode === "dark"
-// 						? "linear(to-l, gray.300, gray.50)"
-// 						: "linear(to-l, gray.600, gray.900)",
-// 				bgClip: "text"
-// 			})
-// 		},
-// 		defaultProps: {
-// 			variant: "brand"
-// 		}
-// 	}
-// };
 const blurDataUrl =
 	"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8WQ8AAlcBas53/MIAAAAASUVORK5CYII=";
 
-export { navigationHeight, menuMobileHeight, footerHeight, blurDataUrl };
+export { navigationHeight, blurDataUrl };