some testing

lai-huy · Jan 11, 2025 · 6e11d82 · 6e11d82
1 parent d522701
commit 6e11d82
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 106 deletions.
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -42,3 +42,14 @@ span.visually-hidden {
 	display: none;
 	visibility: hidden;
 }
+
+div {
+	&.page {
+		display: flex;
+	}
+
+	&.content {
+		margin-left: 60px;
+		width: calc(100% - 60px);
+	}
+}
diff --git a/src/app/home.scss b/src/app/home.scss
@@ -3,13 +3,11 @@ button.btn-hover {
 	border: none;
 	border-radius: 50px;
 	cursor: pointer;
-	height: 115px;
 	-o-transition: all 0.4s ease-in-out;
 	margin: 5px;
 	text-align: center;
 	transition: all 0.4s ease-in-out;
 	-webkit-transition: all 0.4s ease-in-out;
-	width: 115px;
 
 	&:hover {
 		background-position: 100% 0;
@@ -103,6 +101,19 @@ div {
 		font-family: "Ubuntu", sans-serif;
 	}
 
+	span {
+		&.about {
+			background: #a09abcbf;
+		}
+
+		&.name {
+			background: #800000bf;
+			text-align: center;
+			font-weight: bold;
+			font-family: "Ubuntu", sans-serif;
+		}
+	}
+
 	p {
 		&.about {
 			background: #d4bebebf;
@@ -167,18 +178,20 @@ div {
 		}
 
 		span {
-			&.about {
-				background: #a09abcbf;
-			}
-
 			&.name {
-				background: #800000bf;
-				text-align: center;
-				font-weight: bold;
 				font-size: 48pt;
-				font-family: "Ubuntu", sans-serif;
 			}
 		}
+
+		button.btn-hover {
+			width: 115px;
+			height: 115px;
+		}
+
+		svg.devicon {
+			width: 85px;
+			height: 85px;
+		}
 	}
 
 	&.mobile {
@@ -215,6 +228,16 @@ div {
 				font-size: 24pt;
 			}
 		}
+
+		button.btn-hover {
+			width: 57px;
+			height: 57px;
+		}
+
+		svg.devicon {
+			width: 42px;
+			height: 42px;
+		}
 	}
 }
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import "./globals.scss";
 import type { Metadata } from "next";
-import { Navbar } from "./navigation/nav";
 
 export const metadata: Metadata = {
 	metadataBase: new URL("https://lai-huy.github.io"),
@@ -35,10 +34,7 @@ export default function RootLayout({
 	return (
 		<html lang="en">
 			<body className="antialiased">
-				<main className="">
-					<Navbar />
-					{children}
-				</main>
+				<main className="">{children}</main>
 			</body>
 		</html>
 	);

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,6 +5,8 @@ import Link from "next/link";
 import { GithubOriginal, LinkedinOriginal } from "devicons-react";
 import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Navbar } from "./navigation/nav";
+import { userAgent } from "next/server";
 
 const mcs: string =
 	"https://catalog.tamu.edu/graduate/colleges-schools-interdisciplinary/engineering/computer-science/mcs/#programrequirementstext";
@@ -42,103 +44,108 @@ export default function Home() {
 	const isMobile = isMobileDevice();
 
 	return (
-		<div
-			className={`background ${isMobile ? "mobile" : "desktop"}`}
-			role="main"
-		>
-			<header className="name">
-				<h1>
-					<span className="name">Huy Quang Lai</span>
-				</h1>
-			</header>
-			<a href="#about" className="skip-link">
-				Skip to about me
-			</a>
-			<div className="about" role="heading" aria-level={2}>
-				<span className="about">About Me</span>
-			</div>
-			<div id="about">
-				<p className="about">
-					Howdy! I am a student at{" "}
-					<Link href="https://www.tamu.edu/">
-						Texas A&M University
-					</Link>{" "}
-					currently studying for a Master of Computer Science.
-				</p>
-			</div>
+		<div className="page">
+			<Navbar />
+			<div
+				className={`content background ${
+					isMobile ? "mobile" : "desktop"
+				}`}
+				role="main"
+			>
+				<header className="name">
+					<h1>
+						<span className="name">Huy Quang Lai</span>
+					</h1>
+				</header>
+				<a href="#about" className="skip-link">
+					Skip to about me
+				</a>
+				<div className="about" role="heading" aria-level={2}>
+					<span className="about">About Me</span>
+				</div>
+				<div id="about">
+					<p className="about">
+						Howdy! I am a student at{" "}
+						<Link href="https://www.tamu.edu/">
+							Texas A&M University
+						</Link>{" "}
+						currently studying for a Master of Computer Science.
+					</p>
+				</div>
 
-			<a href="#prog" className="skip-link">
-				Skip to MCS Requirements
-			</a>
-			<div id="prog">
-				<p className="prog_req">
-					Learn more about the MCS <Link href={mcs}>here</Link>.
-				</p>
-			</div>
+				<a href="#prog" className="skip-link">
+					Skip to MCS Requirements
+				</a>
+				<div id="prog">
+					<p className="prog_req">
+						Learn more about the MCS <Link href={mcs}>here</Link>.
+					</p>
+				</div>
 
-			<div id="about">
-				<p className="about">
-					I received my Bachelor of Science in Computer Science from{" "}
-					<Link href="https://www.tamu.edu/">
-						Texas A&M University
-					</Link>{" "}
-					.<br />I also have a Minor in Cybersecurity and a Minor in
-					Mathematics.
-				</p>
-			</div>
+				<div id="about">
+					<p className="about">
+						I received my Bachelor of Science in Computer Science
+						from{" "}
+						<Link href="https://www.tamu.edu/">
+							Texas A&M University
+						</Link>{" "}
+						.<br />I also have a Minor in Cybersecurity and a Minor
+						in Mathematics.
+						<br />
+						{navigator.userAgent}
+					</p>
+				</div>
 
-			<a href="#prog" className="skip-link">
-				Skip to BS Requirements
-			</a>
-			<div id="prog">
-				<p className="prog_req">
-					Learn more about the BS in Computer Science{" "}
-					<Link href={bs_cs}>here</Link>.<br />
-					Learn more about the Minor in Cybersecurity{" "}
-					<Link href={cyber_minor}>here</Link>.<br />
-					Learn more about the Minor in Mathematics{" "}
-					<Link href={math_minor}>here</Link>.
-				</p>
-			</div>
+				<a href="#prog" className="skip-link">
+					Skip to BS Requirements
+				</a>
+				<div id="prog">
+					<p className="prog_req">
+						Learn more about the BS in Computer Science{" "}
+						<Link href={bs_cs}>here</Link>.<br />
+						Learn more about the Minor in Cybersecurity{" "}
+						<Link href={cyber_minor}>here</Link>.<br />
+						Learn more about the Minor in Mathematics{" "}
+						<Link href={math_minor}>here</Link>.
+					</p>
+				</div>
 
-			<a href="#social" className="skip-link">
-				Skip to my online profiles.
-			</a>
-			<div id="social">
-				<p className="links">
-					<button
-						aria-label="Go to my GitHub profile"
-						className="btn-hover github"
-						onClick={handleGithubClick}
-					>
-						<GithubOriginal
-							size={isMobile ? 40 : 85}
-							className="devicon github"
-						/>
-					</button>
+				<a href="#social" className="skip-link">
+					Skip to my online profiles.
+				</a>
+				<div id="social">
+					<p className="links">
+						<button
+							aria-label="Go to my GitHub profile"
+							className="btn-hover github"
+							onClick={handleGithubClick}
+						>
+							<GithubOriginal
+								size=""
+								className="devicon github"
+							/>
+						</button>
 
-					<button
-						aria-label="Go to my LinkedIn profile"
-						className="btn-hover linkedin"
-						onClick={handleLinkedinClick}
-					>
-						<LinkedinOriginal
-							size={isMobile ? 40 : 85}
-							className="devicon"
-						/>
-					</button>
+						<button
+							aria-label="Go to my LinkedIn profile"
+							className="btn-hover linkedin"
+							onClick={handleLinkedinClick}
+						>
+							<LinkedinOriginal size="" className="devicon" />
+						</button>
 
-					<button
-						aria-label="Send me an email"
-						className="btn-hover email"
-						onClick={handleEmailClick}
-					>
-						<FontAwesomeIcon
-							icon={faEnvelope}
-							className="devicon"
-						/>
-					</button>
-				</p>
+						<button
+							aria-label="Send me an email"
+							className="btn-hover email"
+							onClick={handleEmailClick}
+						>
+							<FontAwesomeIcon
+								icon={faEnvelope}
+								className="devicon"
+							/>
+						</button>
+					</p>
+				</div>
 			</div>
 		</div>
 	);