personal_portfolio.scss

@import 'variables';
@import 'mixins';

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background: black;
	color: white;
}

html,
body {
	overflow-x: hidden;
	font-family: $primary-font;
}

#navbar {
	position: fixed;
	top: 0;
	background-color: rgba(0, 0, 0, 0.671);
	width: 100%;
	padding: 0.8em;
	z-index: 999;

	ul {
		list-style: none;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.nav-link {
		font-family: $header-font;
		font-weight: 900;
		text-decoration: none;
		font-size: 2em;
		color: white;
		margin: 1em;
	}

	li:hover {
		cursor: pointer;
		.rainbow-code {
			@include rainbow-text();
		}
	}
	.rainbow-code {
		display: inline-block;
		visibility: hidden;
	}
}

#welcome-section {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	font-size: 1.8em;
	background: url('media/bgImage.png') no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	#welcome-background {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		height: 80%;
		background-color: rgba(0, 0, 0, 0.671);
	}
	#welcome-text {
		text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.76);
		font-size: 2em;
		text-align: center;
		.welcome-text-name {
			font-size: 3.5em;
			font-family: $handwriting-font;
		}

		.typing {
			@include rainbow-text();
		}
		.social-media-icons {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 0.5em;
			i {
				padding: 10px;
				text-shadow: 0px 6px 10px rgba(122, 122, 122, 0.692);
				transition: all ease-in-out 150ms;
			}

			a:nth-child(1) {
				color: #1da1f2;
			}
			a:nth-child(2) {
				color: rgb(32, 243, 127);
			}
			a:nth-child(3) {
				color: rgb(247, 82, 82);
			}
			a:nth-child(4) {
				color: rgb(247, 170, 82);
			}

			i:hover {
				margin-top: -15px;
				text-shadow: 0px 14px 10px rgba(92, 90, 90, 0.76);
			}
		}
	}
}

h2 {
	padding-top: 2em;
	font-family: $header-font;
	font-size: 3em;
	margin: 2em 0;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.76);
	.rainbow-code {
		@include rainbow-text();
	}
}

#about,
#work,
#projects {
	margin: 5%;
}

#about {
	.flex-container {
		@include flex(row);
		img {
			width: 20%;
			margin-bottom: 2em;
		}
		.about-me-blurb {
			font-size: 1.8em;
			padding: 0 2em;
			h1.handwritten-text{
				font-size: 5rem;
				font-family: $handwriting-font;
			}
			p.handwritten-text {
				font-size: 3rem;
				font-family: $handwriting-font;
			}
		}
	}
}

#work {
	font-size: 1.5em;
	.container {
		ul {
			margin-left: 1em;
			li {
				padding: 1em;
				a {
					color: white;
				}
			}
		}
	}
}

#projects {
	.flex-container {
		display: grid;
		gap: 5em;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(auto, 1fr);
		justify-content: center;
		.showcase,
		.showcase--inverted {
			position: relative;
			.image {
				border-radius: 20px;
				display: block;
				width: 100%;
				height: auto;
			}
			.description {
				@include flex(column);
				font-size: 1em;
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				white-space: nowrap;
				.projectLinks {
					@include flex(row);
					a {
						color: white;
						margin: 0.5em;
						color: white;
						padding: 0.25em 0.5em;
						text-decoration: none;
						border: 1px solid white;
						transition: background 250ms;
						&:hover {
							background: rgba(0, 0, 0, 0.6);
						}
					}
				}
				.tool-icons {
					font-size: 1.5em;
				}
			}
		}
		.showcase {
			.overlay {
				border-radius: 20px;
				position: absolute;
				bottom: 0;
				left: 100%;
				right: 0;
				background-color: rgba(0, 0, 0, 0.671);
				overflow: hidden;
				width: 0;
				height: 100%;
				transition: 0.5s ease;
			}
			&:hover {
				.overlay {
					width: 100%;
					left: 0;
				}
			}
		}
		.showcase--inverted {
			.overlay {
				border-radius: 20px;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0, 0, 0, 0.671);
				overflow: hidden;
				width: 0;
				height: 100%;
				transition: 0.5s ease;
			}
			&:hover {
				.overlay {
					width: 100%;
				}
			}
		}
	}
}
.made-by-text {
	font-family: $header-font;
	text-align: center;
	margin-bottom: 1em;
}

footer {
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 999;
	#arrow-up {
		color: $green-color;
		position: absolute;
		right: 0em;
		bottom: 0em;
		font-size: 5rem;
		cursor: pointer;
		display: none;
	}

	.bounce {
		animation: bounce 2s infinite;
	}

	@keyframes bounce {
		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-30px);
		}
		60% {
			transform: translateY(-15px);
		}
	}
}

// media queries
@include breakpoint-max(medium) {
	.nav-link {
		font-size: 1.2em;
	}
	#navbar {
		padding: 0.7em;
		.nav-link {
			font-size: 1.2em;
		}
	}
	#welcome-section {
		font-size: 1.1em;
	}
	h2 {
		font-size: 2.2em;
	}
	#about {
		.flex-container {
			.about-me-blurb {
				font-size: 1.4em;
				h1.handwritten-text {
					font-size: 2.2em;
				}
				p.handwritten-text {
					font-size: 1.8em;
				}
			}
		}
	}
	#work {
		font-size: 1.3em;
	}
	#projects {
		.flex-container {
			grid-template-columns: repeat(2, 1fr);
		}
		.description {
			font-size: 0.8em;
		}
	}
	footer {
		#arrow-up {
			font-size: 4rem;
		}
	}
}
@include breakpoint-max(small) {
	#navbar {
		padding: 0.6em;
		ul {
			justify-content: space-around;
			.nav-link {
				font-size: 0.8em;
			}
		}
	}
	#welcome-section {
		font-size: 0.6em;
	}
	h2 {
		font-size: 1.7em;
	}
	#about {
		.flex-container {
			@include flex(column);
			.about-me-blurb {
				font-size: 1em;
				h1.handwritten-text {
					font-size: 2em;
				}
				p.handwritten-text {
					font-size: 1.6em;
				}
			}
		}
	}
	#work {
		font-size: 1em;
	}

	#projects {
		.flex-container {
			@include flex(column);
		}
		.description {
			font-size: 0.5em;
		}
	}
	.made-by-text {
		font-size: 0.8em;
	}
	footer {
		#arrow-up {
			font-size: 3rem;
		}
	}
}