Initial commit

astaltin · Mar 21, 2024 · a026a32 · a026a32
1 parent f53d79f
commit a026a32
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 8 deletions.
diff --git a/images/aotErudite.jpg b/images/aotErudite.jpg
diff --git a/images/auCitHandbook.jpg b/images/auCitHandbook.jpg
diff --git a/images/personalWebsite.png b/images/personalWebsite.png
diff --git a/images/studentSuccess.png b/images/studentSuccess.png
diff --git a/index.html b/index.html
@@ -19,9 +19,7 @@
 		></script>
 		<script src="script.js" defer></script>
 	</head>
-	<body
-		class="overflow-lg-hidden d-flex flex-column justify-content-between container-md fs-5 font-monospace"
-	>
+	<body class="d-flex flex-column container-md fs-5 font-monospace">
 		<nav class="mb-5 py-2">
 			<ul
 				class="nav nav-underline justify-content-end"
@@ -90,7 +88,7 @@
 						<p class="fs-2">An aspiring full stack developer</p>
 
 						<button
-							class="btn btn-lg btn-primary rounded-pill px-5"
+							class="btn btn-lg btn-danger rounded-pill px-5"
 							onclick="projectsTab()"
 						>
 							My Projects
@@ -104,23 +102,131 @@
 					/>
 				</div>
 			</section>
+
 			<section
-				class="tab-pane fade"
+				class="tab-pane fade mb-5"
 				id="projects"
 				role="tabpanel"
 				aria-labelledby="projects-tab"
 				tabindex="0"
 			>
-				projects
+				<div class="card border border-0 py-5 bg-transparent">
+					<div class="row g-0">
+						<div
+							class="col-md-6 mb-3 mb-md-0 me-md-3"
+							style="transform: rotate(-1deg)"
+						>
+							<img
+								src="./images/personalWebsite.png"
+								class="img-fluid rounded"
+							/>
+						</div>
+
+						<div class="col">
+							<div class="card-body">
+								<h1 class="card-title fw-bold mb-3">
+									Personal Website
+								</h1>
+
+								<p class="card-text">
+									This project was one of my favorites so far because
+									of how fun it was to make.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="card border border-0 py-5 bg-transparent">
+					<div class="row g-0">
+						<div
+							class="col-md-6 order-md-2 mb-3 mb-md-0 ms-md-3"
+							style="transform: rotate(1deg)"
+						>
+							<img
+								src="./images/studentSuccess.png"
+								class="img-fluid rounded"
+							/>
+						</div>
+
+						<div class="col">
+							<div class="card-body text-end">
+								<h1 class="card-title fw-bold mb-3">Student Success</h1>
+
+								<p class="card-text">
+									Student Success is an organizing app specifically
+									designed for students. It enables you to stay on top
+									of your studies and reach your full potential.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="card border border-0 py-5 bg-transparent">
+					<div class="row g-0">
+						<div
+							class="col-md-6 mb-3 mb-md-0 me-md-3 d-flex justify-content-center"
+							style="transform: rotate(-1deg)"
+						>
+							<img
+								src="./images/auCitHandbook.jpg"
+								class="img-fluid rounded img-thumbnail rounded"
+								width="300"
+							/>
+						</div>
+
+						<div class="col">
+							<div class="card-body">
+								<h1 class="card-title fw-bold mb-3">AU CIT Handbook</h1>
+
+								<p class="card-text">
+									The AU CIT Handbook is a companion app specifically
+									designed for CIT students. It familiarizes students
+									with the department, helping them navigate their
+									journey to adapt to their environment.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="card border border-0 py-5 bg-transparent">
+					<div class="row g-0">
+						<div
+							class="col-md-6 order-md-2 mb-3 mb-md-0 ms-md-3 d-flex justify-content-center"
+							style="transform: rotate(1deg)"
+						>
+							<img
+								src="./images/aotErudite.jpg"
+								class="img-fluid rounded"
+								width="300"
+							/>
+						</div>
+
+						<div class="col">
+							<div class="card-body text-end">
+								<h1 class="card-title fw-bold mb-3">AOT Erudite</h1>
+
+								<p class="card-text">
+									AOT Erudite is a companion app for people who like
+									AOT or Attack on Titan.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
 			</section>
+
 			<section
 				class="tab-pane fade"
 				id="about"
 				role="tabpanel"
 				aria-labelledby="about-tab"
 				tabindex="0"
 			>
-				about
+				<h1 class="fw-bold">References</h1>
+				<a href="https://astaltin.jobs180.com/" class="text-danger">Edward Gulmayo - Jobs180</a>
 			</section>
 		</main>
 	</body>

diff --git a/style.css b/style.css
diff --git a/test.html b/test.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+		<link
+			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+			rel="stylesheet"
+			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+			crossorigin="anonymous"
+		/>
+		<script
+			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+			integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+			crossorigin="anonymous"
+			defer
+		></script>
+	</head>
+	<body class="m-2 mt-5 container-md mx-auto font-monospace fs-5">
+		<div class="card border border-0 py-5 bg-transparent">
+			<div class="row g-0">
+				<div
+					class="col-md-6 mb-3 mb-md-0 me-md-3"
+					style="
+						transform: rotate(-1deg);
+						box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+					"
+				>
+					<img src="./images/122445.png" class="img-fluid rounded" />
+				</div>
+
+				<div class="col">
+					<div class="card-body">
+						<h1 class="card-title fw-bold mb-3">Personal website</h1>
+
+						<p class="card-text">
+							This project was one of my favorites so far because of how
+							fun it was to make.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="card border border-0 py-5 bg-transparent">
+			<div class="row g-0">
+				<div
+					class="col-md-6 order-md-2 mb-3 mb-md-0 ms-md-3"
+					style="
+						transform: rotate(1deg);
+						box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+					"
+				>
+					<img src="./images/122445.png" class="img-fluid rounded" />
+				</div>
+
+				<div class="col">
+					<div class="card-body text-end">
+						<h1 class="card-title fw-bold mb-3">Personal website</h1>
+
+						<p class="card-text">
+							This project was one of my favorites so far because of how
+							fun it was to make.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+	</body>
+</html>