m2-front-end-101/project-portfolio/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- ANCHOR Bootstrap 5.3.3 -->
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
			crossorigin="anonymous"
		/>
		<title>Portfolio of a Python Webdev Student 🐍</title>
		<!-- ANCHOR Custom CSS -->
		<link rel="stylesheet" href="./assets/styles.css" />
	</head>
	<body>
		<!-- SECTION Body -->
		<div class="container">
			<!-- SECTION hero -->
			<header class="vh-100 py-3">
				<div class="h-100 row">
					<div
						class="col-12 col-md-5 pe-4 d-flex justify-content-end align-items-center"
					>
						<img
							src="./assets/img/me-avatar.png"
							alt=""
							class="img-fluid avatar"
						/>
						<div class="circle-1"></div>
					</div>

					<div
						class="col-12 col-md-7 d-flex flex-column justify-content-center"
					>
						<div class="wrap-text">
							<h1>Hi, I am Armin<span>😀</span></h1>
						</div>
						<p class="w-75">
							I <span>create</span> engaging web pages and
							<span>apps</span> with a focus on customized UI and interactivity.
						</p>
					</div>
				</div>
			</header>
			<!-- !SECTION hero -->

			<main>
				<!-- SECTION projects -->
				<div class="air-gap-small"></div>
				<section id="projects">
					<h2 class="wrap-text">projects</h2>
					<hr />
					<div class="air-gap-medium"></div>
					<div id="projectsContainer"></div>
				</section>
				<!-- !SECTION projects -->

				<!-- SECTION skills -->
				<div class="air-gap-medium"></div>
				<section id="skills">
					<h2 class="wrap-text">skills</h2>
					<hr />
					<div class="air-gap-small"></div>
					<div id="skillsContainer" class="row"></div>
				</section>
				<!-- !SECTION skills -->

				<!-- SECTION contact -->
				<div class="air-gap-medium"></div>
				<section id="contact">
					<h2 class="wrap-text">let's contact</h2>
					<hr />
					<div class="air-gap-medium"></div>
					<div class="container">
						<div class="px-2">
							<form class="row" id="contactForm">
								<div class="col-12 col-lg-6">
									<input
										type="text"
										class="form-control card contact-card px-2 py-3"
										placeholder="Your email"
										id="contactFormEmailInput"
									/>
									<div class="air-gap-small"></div>
								</div>

								<div class="col-12 col-lg-6">
									<textarea
										class="form-control card contact-card px-2 py-3 h-45"
										placeholder="Write me a message"
										id="contactFormMessageInput"
									></textarea>

									<div class="d-flex justify-content-end">
										<button
											role="button"
											type="submit"
											id="sendContactFormBtn"
											class="btn card skill-card d-flex flex-row align-items-center px-2 my-4"
										>
											<div class="circle-3 px- bg-color-em2"></div>
											<h4 class="card-text p-2 overflow-scroll">Send</h4>
										</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</section>
				<!-- !SECTION contact -->

				<!-- SECTION social-networks -->
				<div class="air-gap-small"></div>
				<section id="social-networks">
					<h2 class="wrap-text">Social</h2>
					<hr />
					<div class="air-gap-medium"></div>

					<div
						class="d-flex w-75 flex-wrap justify-content-around m-auto gap-5"
					>
						<a
							href="https://github.com/armincano/"
							target="_blank"
							class="rrss-link"
							><img
								src="./assets/icons/github.svg"
								class="footer-img"
								alt="github"
						/></a>
						<a
							href="https://www.linkedin.com/in/armincano/"
							target="_blank"
							class="rrss-link"
							><img
								src="./assets/icons/linkedin.svg"
								class="footer-img"
								alt="linkedin"
						/></a>
						<a
							href="mailto:arminescano@gmail.com"
							target="_blank"
							class="rrss-link"
						>
							<img
								src="./assets/icons/email.svg"
								class="footer-img"
								alt="email"
							/>
						</a>
					</div>
				</section>
				<!-- !SECTION social-networks -->
			</main>
			
			<!-- SECTION footer -->
			<div class="air-gap-large"></div>
			<footer id="footer" class="text-center">
				<p>
					Created with ❤️ in Villarrica, Chile<br />© August, 2024 by Armin Cano
				</p>
				<div class="air-gap-small"></div>
			</footer>
			<!-- !SECTION footer -->
		</div>
		<!-- !SECTION Body -->

		<!-- ANCHOR Bootstrap 5.3.3 JS Bundle -->
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
			crossorigin="anonymous"
		></script>
		<!-- ANCHOR jQuery 3.7.1 -->
		<script
			src="https://code.jquery.com/jquery-3.7.1.min.js"
			integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
			crossorigin="anonymous"
		></script>
		<!-- ANCHOR Custom script -->
		<script src="./assets/script.js"></script>
	</body>
</html>