Merge branch 'dev'

TheNickOfTime · Apr 25, 2024 · f1a82ef · f1a82ef
2 parents 38d5256 + 84db7db
commit f1a82ef
Show file tree

Hide file tree

Showing 19 changed files with 381 additions and 363 deletions.
diff --git a/src/components/home/featured/featured-projects.scss b/src/components/home/featured/featured-projects.scss
@@ -1,7 +1,7 @@
 @import '/src/styles/colors';
 @import '/src/styles/responsive';
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: $small-max-width) {
 	#projects-title {
 		margin-bottom: 1rem;
 		display: flex;
@@ -16,15 +16,17 @@
 	}
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: $medium-min-width) {
 	#projects-title {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		gap: 2rem;
+		margin: 2rem 0 1rem 0;
 
 		h1 {
-			margin-bottom: 0.25em;
+			margin: 0;
+			padding-bottom: 0.25em;
 		}
 	}
 
@@ -34,18 +36,16 @@
 		border-radius: 2rem;
 		box-shadow: 0 0 0.5rem $background-primary inset;
 
-		#project-scroll {
-			#project-cards {
-				display: flex;
-				overflow: scroll;
-				align-items: flex-start;
-				gap: 2rem;
-				padding: 2rem;
-				padding-bottom: 4rem;
+		#project-cards {
+			display: flex;
+			overflow-x: scroll;
+			align-items: flex-start;
+			gap: 2rem;
+			padding: 2rem;
+			padding-bottom: 4rem;
 
-				.project-card {
-					min-width: 400px;
-				}
+			.project-card {
+				min-width: 400px;
 			}
 		}
 	}

diff --git a/src/components/home/featured/featured-projects.tsx b/src/components/home/featured/featured-projects.tsx
@@ -14,7 +14,7 @@ const ProjectCards = () => {
 	});
 
 	return (
-		<div id='project-scroll'>
+		<div id='projects-container'>
 			<div id='project-cards'>
 				{featuredProjects.map((project) => (
 					<ProjectCard project={project} />
@@ -33,9 +33,9 @@ export default function FeaturedProjects() {
 					See All Projects
 				</NavLink>
 			</div>
-			<div id='projects-container'>
-				<ProjectCards />
-			</div>
+			{/* <div id='projects-container'> */}
+			<ProjectCards />
+			{/* </div> */}
 		</div>
 	);
 }
diff --git a/src/components/home/hero/hero.scss b/src/components/home/hero/hero.scss
@@ -1,81 +1,61 @@
 @import '/src/styles/colors';
 @import '/src/styles/text';
 
-@media screen and (max-width: 900px) {
-	#hero-foreground {
-		#primary {
-			font-size: 2em !important;
-		}
-
-		#secondary {
-			font-size: 1em !important;
-		}
-	}
-}
-
 #hero {
 	position: relative;
-	// left: 0;
-	width: 100%;
-	max-width: 100%;
-	max-height: 50rem;
 	display: flex;
 	justify-content: center;
 
 	#hero-background {
 		position: absolute;
 		z-index: -1;
-		width: 100vw;
-		height: 100%;
-		background-color: $color-primary;
-	}
 
-	#hero-image {
-		max-width: 50%;
-		max-height: 100%;
-
-		margin-top: 5rem;
-		margin-left: 50%;
+		width: 100cqw;
+		height: 100%;
 
-		object-fit: scale-down;
+		background-color: $color-primary;
 	}
 
 	#hero-foreground {
-		position: absolute;
 		width: 100%;
-		height: 100%;
+		display: flex;
 
-		// margin-top: 5rem;
-		// margin-left: 25rem;
+		#hero-text {
+			container-type: size;
+			// container-name: hero-text;
 
-		display: flex;
-		// flex
+			min-width: 50%;
+			max-width: 50%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
 
-		flex-direction: column;
-		justify-content: center;
+			padding-left: 5%;
+			padding-bottom: 10%;
 
-		#inner {
-			width: 50%;
-			// text-shadow: 0 0 5px $background-shadow;
+			font-family: $font-secondary;
+			font-style: italic;
+			font-weight: 500;
+			font-size: 100%;
+			color: $background-secondary;
 
 			#primary {
-				color: $background-secondary;
-				font-family: $font-secondary;
-				font-weight: 500;
-				font-size: 6em;
-				font-style: italic;
-				text-align: center;
-				// text-shadow: 0 0 3rem $background-primary;
+				font-size: 20cqh;
+				text-align: left;
 			}
 
 			#secondary {
-				color: $background-tertiary;
-				font-size: 2em;
-				font-weight: 600;
+				font-size: 10cqw;
 				text-align: right;
-				font-style: italic;
-				// text-shadow: 0 0 1.5rem $background-primary;
+				margin-right: -20cqw;
 			}
 		}
+
+		#hero-image {
+			min-width: 50%;
+			max-width: 50%;
+			aspect-ratio: 1;
+			display: flex;
+		}
 	}
 }
diff --git a/src/components/home/hero/hero.tsx b/src/components/home/hero/hero.tsx
@@ -4,12 +4,18 @@ export default function Hero() {
 	return (
 		<div id='hero'>
 			<div id='hero-background' />
-			<img id='hero-image' src='/hero.png' alt='hero-portrait' />
 			<div id='hero-foreground'>
-				<div id='inner'>
+				<div id='hero-text'>
 					<div id='primary'>Hello there!</div>
 					<div id='secondary'>I'm Nick, a Developer.</div>
 				</div>
+				<div id='hero-image'>
+					<img
+						src='/profile/profile_transparent.png'
+						alt='hero-portrait'
+						loading='eager'
+					/>
+				</div>
 			</div>
 		</div>
 	);

diff --git a/src/components/index/banner/banner.scss b/src/components/index/banner/banner.scss
@@ -1,7 +1,8 @@
 @import '/src/styles/colors';
+@import '/src/styles/general';
 
 #banner {
-	width: 100vw;
+	width: 100%;
 	padding: 0 2rem;
 	display: flex;
 	align-items: center;

diff --git a/src/components/index/banner/banner.tsx b/src/components/index/banner/banner.tsx
@@ -14,6 +14,7 @@ export default function Banner({ children }: PropsWithChildren) {
 				<p id='banner-text'>{children}</p>
 				<FontAwesomeIcon
 					id='banner-button'
+					className='button'
 					icon={faXmark}
 					onClick={() => setIsOpen(false)}
 				/>

diff --git a/src/components/index/footer/footer.scss b/src/components/index/footer/footer.scss
@@ -3,11 +3,7 @@
 @import '/src/styles/text';
 
 #footer {
-	// height: 25rem;
-	$margin: min(100vw, calc((100vw - $large-max-width) / 2));
-
-	// position: relative;
-	width: 100vw;
+	width: 100%;
 	margin-top: 10rem;
 	padding: 2rem 0;
 
@@ -18,28 +14,6 @@
 
 	background-color: #0e0e0e;
 
-	// #footer-main {
-	// 	width: 100%;
-	// 	// max-width: $large-max-width;
-	// 	// margin: 0 auto;
-	// 	// padding-top: 2rem;
-	// 	display: flex;
-
-	// 	#footer-hero {
-	// 		width: 15rem;
-	// 		aspect-ratio: 1;
-	// 		background-color: $background-primary;
-	// 		border-radius: 2rem;
-	// 		overflow: hidden;
-
-	// 		img {
-	// 			width: 100%;
-	// 			height: 100%;
-	// 			object-fit: cover;
-	// 		}
-	// 	}
-	// }
-
 	#footer-copyright {
 		text-align: center;
 		font-size: 2rem;

diff --git a/src/components/index/navigation/navigation.scss b/src/components/index/navigation/navigation.scss
@@ -1,7 +1,54 @@
 @import '/src/styles/colors';
 @import '/src/styles/text';
+@import '/src/styles/responsive';
 
-@media screen and (max-width: 767px) {
+#navigation {
+	font-family: $font-secondary;
+
+	.navigation-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 2rem;
+	}
+
+	#navigation-button {
+		padding: 0.25rem 1.75rem 0.5rem 1.75rem;
+		font-size: 2rem;
+		background-color: $text-primary;
+		color: $background-primary;
+		font-weight: 600;
+	}
+
+	#navigation-links {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		.navigation-link {
+			margin: 0;
+			padding: 0.25rem 1.75rem 0.5rem 1.75rem;
+
+			border-radius: 5rem;
+			color: $text-primary;
+
+			&[aria-current='page'] {
+				background-color: $text-primary;
+				color: $background-primary;
+
+				font-weight: 600;
+			}
+
+			&:not([aria-current='page']):hover {
+				// outline: 0.25rem solid white;
+				background-color: $background-secondary;
+			}
+		}
+	}
+}
+
+@media screen and (max-width: $small-max-width) {
 	#navigation {
 		margin: 2rem 0;
 		font-size: 2rem;
@@ -32,7 +79,7 @@
 	}
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: $medium-min-width) {
 	#navigation {
 		margin: 5rem 0;
 		font-size: 2.5rem;
@@ -53,49 +100,3 @@
 		}
 	}
 }
-
-#navigation {
-	font-family: $font-secondary;
-
-	.navigation-container {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		gap: 2rem;
-	}
-
-	#navigation-button {
-		padding: 0.25rem 1.75rem 0.5rem 1.75rem;
-		font-size: 2rem;
-		background-color: $text-primary;
-		color: $background-primary;
-		font-weight: 600;
-
-		// &.expanded {
-		// 	background-color: transparent;
-		// 	color: $text-primary;
-		// }
-	}
-
-	#navigation-links {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-
-		.navigation-link {
-			margin: 0;
-			padding: 0.25rem 1.75rem 0.5rem 1.75rem;
-
-			border-radius: 5rem;
-			color: $text-primary;
-
-			&[aria-current='page'] {
-				background-color: $text-primary;
-				color: $background-primary;
-
-				font-weight: 600;
-			}
-		}
-	}
-}