blog desc, academic, simpliCity page improvements (unfinished)

17 files changed, 281 insertions, 179 deletions

diff --git a/assets/images/education/achieve/osaxv.png b/assets/images/education/achieve/osaxv.png
new file mode 100644
index 0000000..9339968
--- /dev/null
+++ b/assets/images/education/achieve/osaxv.png
diff --git a/assets/images/game-hero/boids_screenshot.png b/assets/images/game-hero/boids_screenshot.png
new file mode 100644
index 0000000..9d22225
--- /dev/null
+++ b/assets/images/game-hero/boids_screenshot.png
diff --git a/assets/images/game-hero/cargame_screenshot.jpg b/assets/images/game-hero/cargame_screenshot.jpg
new file mode 100644
index 0000000..3ddf4b6
--- /dev/null
+++ b/assets/images/game-hero/cargame_screenshot.jpg
diff --git a/assets/images/game-hero/learnsmpdotid.png b/assets/images/game-hero/learnsmpdotid.png
new file mode 100644
index 0000000..156a62b
--- /dev/null
+++ b/assets/images/game-hero/learnsmpdotid.png
diff --git a/assets/images/game-hero/simpliCityStore.png b/assets/images/game-hero/simpliCityStore.png
new file mode 100644
index 0000000..410c096
--- /dev/null
+++ b/assets/images/game-hero/simpliCityStore.png
diff --git a/assets/images/game-hero/simplicity_screenshot.png b/assets/images/game-hero/simplicity_screenshot.png
index 4b8c93e..442b6b0 100644
--- a/assets/images/game-hero/simplicity_screenshot.png
+++ b/assets/images/game-hero/simplicity_screenshot.png
diff --git a/assets/images/game-hero/simplicity_screenshot_old.png b/assets/images/game-hero/simplicity_screenshot_old.png
new file mode 100644
index 0000000..4b8c93e
--- /dev/null
+++ b/assets/images/game-hero/simplicity_screenshot_old.png
diff --git a/assets/images/game-hero/sumon_cover.png b/assets/images/game-hero/sumon_cover.png
new file mode 100644
index 0000000..7fdc146
--- /dev/null
+++ b/assets/images/game-hero/sumon_cover.png
diff --git a/assets/images/game-hero/ufoproto_screenshot.png b/assets/images/game-hero/ufoproto_screenshot.png
new file mode 100644
index 0000000..fc370f9
--- /dev/null
+++ b/assets/images/game-hero/ufoproto_screenshot.png
diff --git a/blog/post.html b/blog/post.html
index 815ef86..2e81e4e 100644
--- a/blog/post.html
+++ b/blog/post.html
@@ -24,6 +24,7 @@
 	<script defer src="/scripts/onload.js"></script>
 	<div class="floating-nav-container">
 		<div class="floating-nav">
+			<a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a>
 			<a href="/about/" class="link">About Me</a>
 			<a href="/projects/" class="link">Projects</a>
 			<a href="/blog/" class="link">(dev)Blog</a>
@@ -46,9 +47,10 @@
 				<div class="flex-container flex-container-column flex" style="gap: 7px; margin-top: 20px;">
 					<div id="tag-container" class="chip-container flex-container-normal ">
 					</div>
-			<h1 style="text-align: left; margin: 0;" id="title">Loading title...</h1>
-					<span style="color: rgba(0, 0, 0, 0.5);" id="date">Date</span><br>
-					<span>Written by <span class="colored-text" id="author">author</span></span>
+					<h1 style="text-align: left; margin: 0;" id="title">Loading title...</h1>
+					<span style="margin-bottom: 0.5rem;" id="description">Description</span><br>
+					<span class="half-opacity-text"><i class="fa-solid fa-calendar-days"></i> <span id="date">Date</span></span><br>
+					<span class="half-opacity-text"><i class="fa-solid fa-user"></i> Written by <span class="colored-text" id="author">Author</span></span>
 				</div>
 			</div>
 		</div>
diff --git a/data/posts.json b/data/posts.json
index 2713cc0..760dbfc 100644
--- a/data/posts.json
+++ b/data/posts.json
@@ -25,7 +25,7 @@
 	{
 	    "id"		: 2,
 	    "title"		: "Catatan Publik — Zoom Fisika untuk ASS",
-	    "description"	: "",
+	    "description"	: "ASS means Asesmen Sumatif Sekolah (Summative School Assesment)",
 	    "date"		: "Wed, 1 May 2024",
 	    "author"		: "altaf-creator",
 	    "tags"		: ["School"],
diff --git a/index.html b/index.html
index f3a7c79..6b146f6 100644
--- a/index.html
+++ b/index.html
@@ -1,162 +1,153 @@
-<!DOCTYPE html>

-<html lang="en">

-

-<head>

-	<meta charset="UTF-8">

-	<meta http-equiv="X-UA-Compatible" content="IE=edge">

-	<meta name="viewport" content="width=device-width, initial-scale=1.0">

-	<link rel="stylesheet" href="/style.css">

-	<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">

-	<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">

-	<link rel="me" href="https://mastodon.gamedev.place/@altaf">	

-	<title>This is altaf-creator</title>

-	<link rel="stylesheet" href="/packages/fontawesome-free-6.5.2-web/css/all.css">

-</head>

-

-<body onload="addNodes()">

-	<script defer src="/scripts/onload.js"></script>

-	<script defer src="/scripts/scroll.js"></script>

-	<div class="floating-nav-container">

-		<div class="floating-nav">

-			<a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a>

-			<a href="/about/" class="link">About Me</a>

-			<a href="/projects/" class="link">Projects</a>

-			<a href="/blog/" class="link">(dev)Blog</a>

-		</div>

-	</div>

-	<div class="sidebar" id="sidebar">

-		<a href="/">

-			<img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">

-		</a>

-		<span>altaf-creator</span>

-	</div>

-	<div class="sidebar-progress-container" id="progressContainer">

-	</div>

-	<section style="background-color: #8ACFE5; border-top: none;">

-		<div class="home-img"

-		style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_ocean.png); ">

-	</div>

-	<span class="home-title" style="z-index: 0;">Altaf</span>

-	<div class="home-img"

-	style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_island.png); ">

-</div>

-		<a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link">simpliCity

-			&#8599;</a>

-	</section>

-	<section>

-		<div class="center-grid">

-			<div class="div-sizing">

-				<span class="big-text">Hey there!</span>

-				<br>

-				<span>I'm a middle school student from <b class="colored-text">Indonesia</b> who likes to code as a <b class="colored-text">hobby</b>.</span>

-				<br>

-				<a href="about/" class="link" style="margin-top: 20px; display: inline-block;">Learn more about me →</a>

-			</div>

-		</div>

-	</section>

-	<section>

-		<div class="center-grid">

-			<div class="div-sizing" style="height: 100%;">

-				<div class="flex-container flex-container-column">

-					<h1>Project Highlights</h1>

-					<div class="flex-container flex" style="min-height: 600px;">

-						<div class="flex full-img-card"

-							style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">

-							<a href="/projects/simpliCity/" class="fill-div gradient-overlay">

-								<span>simpliCity</span>

-							</a>

-

-						</div>

-						<div class="flex full-img-card"

-							style="background-image: url(/assets/images/game-hero/tank_screenshot.png);">

-							<a href="https://altaf-creator.itch.io/tank-shooter" class="fill-div gradient-overlay">

-								<span>Tank Shooter</span>

-							</a>

-

-						</div>

-						<div class="flex full-img-card"

-							style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);">

-							<a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">

-								<span>MarkdownEditor</span>

-							</a>

-

-						</div>

-					</div>

-					<div style="margin: 5px; display: flex; justify-content: center; gap: 10px;">

-						<a href="projects/" class="button" style="margin: 0">View More</a>

-						<a href="https://git.altafcreator.com/" class="button" style="margin: 0">Source Code</a>

-					</div>

-				</div>

-			</div>

-		</div>

-	</section>

-	<section>

-		<div class="center-grid">

-			<div class="div-sizing">

-			<h1 id="center">Academic History</h1>

-			</div>

-		</div>

-	</section>

-	<section>

-		<div class="center-grid">

-			<div class="div-sizing">

-				<h1 class="center">Blog Posts</h1>

-				<div class="flex-container flex-center">

-				<div class="card" tabindex="9999">

-						<img src="/assets/images/blog/33_cover.png"

-							alt="">

-						<div>

-							<div class="flex-container-normal"> <span class="colored-text">Devlog</span>,&nbsp;<span class="colored-text"> simpliCity</span></div>

-							<a href="blog/simpliCity/well-that-was-dumb/" class="link">This Week's Devlog: Well that was dumb. (33nd Week of 2023)</a>

-							<p>Wed, 16 August 2023</p>

-						</div>

-					</div>

-					<div class="card" tabindex="9999">

-						<img src="/assets/images/blog/beta0.2_cover.png"

-							alt="">

-						<div>

-							<div class="flex-container-normal"><span class="colored-text">simpliCity</span></div>

-							<a href="blog/simpliCity/beta02/" class="link">beta0.2: The Visual Update is Out!</a>

-							<p>Wed, 26 July 2023</p>

-						</div>

-					</div>

-				</div>

-				<div class="flex-container flex-center">

-					<a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a>

-				</div>

-			</div>

-		</div>

-	</section>

-	<section>

-		<div class="center-grid">

-			<div class="div-sizing">

-				<h1>Meta</h1>

-				<h2>Links</h2>

-				<ul>

-					<li><a class="link" href=""><i class="fa-solid fa-wrench"></i> altaf-projects<span class="desktop">: internal website for my projects</span></a>

-						<ul>

-							<li><a class="link" href="https://git.altafcreator.com/"><i class="fa-brands fa-git-alt"></i> git repositories<span class="desktop">: source code to all of my projects</span></a></li>

-						</ul>

-					</li>

-					<li><a class="link" href="https://discord.gg/Mg5WFqrHk3"><i class="fa-brands fa-discord"></i> <span class="desktop">Join our </span>Discord Server<span class="desktop">!</span></a></li>

-				</ul>

-				<h2>Contact Me!</h2>

-				<ul>

-					<li>For <b>business<span class="desktop"> inquiries</span></b>: <a href="mailto:business@altafcreator.com" class="link"><i class="fa-solid fa-envelope"></i> business@altafcreator.com</a></li>

-					<li>For <span class="desktop">contacting me </span><b>personal<span class="desktop">ly</span></b>: <a href="mailto:altaf@altafcreator.com" class="link"><i class="fa-solid fa-envelope"></i> altaf@altafcreator.com</a></li>

-				</ul>

-				<h2>Socials</h2>

-				<div class="container-social">

-					<a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button button-social" target="_blank"><i class="fa-brands fa-youtube"></i></a>

-					<a href="https://www.instagram.com/altafcreator" class="button button-social" target="_blank"><i class="fa-brands fa-instagram"></i></a>

-					<a href="https://twitter.com/altafcreator" class="button button-social" target="_blank"><i class="fa-brands fa-twitter"></i></a>

-					<a href="https://github.com/altaf-creator" class="button button-social" target="_blank"><i class="fa-brands fa-github"></i></a>

-					<a href="https://discord.gg/Mg5WFqrHk3" class="button button-social" target="_blank"><i class="fa-brands fa-discord"></i></a>

-					<a href="https://mastodon.gamedev.place/@altaf" class="button button-social" target="_blank"><i class="fa-brands fa-mastodon"></i></a>

-				</div>

-			</div>

-		</div>

-	</section>

-</body>

-

-</html>

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="/style.css">
+	<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+	<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+	<link rel="me" href="https://mastodon.gamedev.place/@altaf">	
+	<title>This is altaf-creator</title>
+	<link rel="stylesheet" href="/packages/fontawesome-free-6.5.2-web/css/all.css">
+</head>
+
+<body onload="index();">
+	<script defer src="/scripts/onload.js"></script>
+	<script defer src="/scripts/scroll.js"></script>
+	<script defer src="/scripts/blog.js"></script>
+	<div class="floating-nav-container">
+		<div class="floating-nav">
+			<a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a>
+			<a href="/about/" class="link">About Me</a>
+			<a href="/projects/" class="link">Projects</a>
+			<a href="/blog/" class="link">(dev)Blog</a>
+		</div>
+	</div>
+	<div class="sidebar" id="sidebar">
+		<a href="/">
+			<img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
+		</a>
+		<span>altaf-creator</span>
+	</div>
+	<div class="sidebar-progress-container" id="progressContainer">
+	</div>
+	<section style="background-color: #8ACFE5; border-top: none;">
+		<div class="home-img"
+		style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_ocean.png); ">
+	</div>
+	<span class="home-title" style="z-index: 0;">Altaf</span>
+	<div class="home-img"
+	style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_island.png); ">
+</div>
+		<a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link">simpliCity
+			&#8599;</a>
+	</section>
+	<section>
+		<div class="center-grid">
+			<div class="div-sizing">
+				<span class="big-text">Hey there!</span>
+				<br>
+				<span>I'm a middle school student from <b class="colored-text">Indonesia</b> who likes to code as a <b class="colored-text">hobby</b>.</span>
+				<br>
+				<a href="about/" class="link" style="margin-top: 20px; display: inline-block;">Learn more about me →</a>
+			</div>
+		</div>
+	</section>
+	<section>
+		<div class="center-grid">
+			<div class="div-sizing" style="height: 100%;">
+				<div class="flex-container flex-container-column">
+					<h1>Project Highlights</h1>
+					<div class="flex-container flex" style="min-height: 600px;">
+						<div class="flex full-img-card"
+							style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">
+							<a href="/projects/simpliCity/" class="fill-div gradient-overlay">
+								<span>simpliCity</span>
+							</a>
+
+						</div>
+						<div class="flex full-img-card"
+							style="background-image: url(/assets/images/game-hero/tank_screenshot.png);">
+							<a href="https://altaf-creator.itch.io/tank-shooter" class="fill-div gradient-overlay">
+								<span>Tank Shooter</span>
+							</a>
+
+						</div>
+						<div class="flex full-img-card"
+							style="background-image: url(/assets/images/game-hero/learnsmpdotid.png);">
+							<a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">
+								<span>learnsmp.id</span>
+							</a>
+
+						</div>
+					</div>
+					<div style="margin: 5px; display: flex; justify-content: center; gap: 10px;">
+						<a href="projects/" class="button" style="margin: 0">View More</a>
+						<a href="https://git.altafcreator.com/" class="button" style="margin: 0">Source Code</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+	<section>
+		<div class="center-grid">
+			<div class="div-sizing">
+				<h1>Academic History & Achievements</h1>
+				<h2>Al Azhar 25 Junior High School</h2>
+				<ul>
+					<li>🥉 Bronze Medalist, OSA XV — IPA <span class="half-opacity-text">• National • January 2023</span></li>
+					<li>🥇 First Place, Alarm Robotic Competition — Creative JHS <span class="half-opacity-text">• Jakarta Metropolitan Area • March 2023</span></li>
+					<li>🏅 Fourth Place, ASEAN Robotic Day — Creative JHS <span class="half-opacity-text">• National • September 2023</span></li>
+					<li>🥇 First Place, Trans Studio Bandung Robotic Competition — Creative Senior <span class="half-opacity-text">• National • November 2023</span></li>
+				</ul>
+				<br>
+			</div>
+		</div>
+	</section>
+	<section>
+		<div class="center-grid">
+			<div class="div-sizing">
+				<h1 class="center">Blog Posts</h1>
+				<div class="flex-container flex-center" id="blog-container">
+				</div>
+				<div class="flex-container flex-center">
+					<a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a>
+				</div>
+			</div>
+		</div>
+	</section>
+	<section>
+		<div class="center-grid">
+			<div class="div-sizing">
+				<h1>Meta</h1>
+				<h2>Links</h2>
+				<ul>
+					<li><a class="link" href=""><i class="fa-solid fa-wrench"></i> altaf-projects<span class="desktop">: internal website for my projects</span></a>
+						<ul>
+							<li><a class="link" href="https://git.altafcreator.com/"><i class="fa-brands fa-git-alt"></i> git repositories<span class="desktop">: source code to all of my projects</span></a></li>
+						</ul>
+					</li>
+					<li><a class="link" href="https://discord.gg/Mg5WFqrHk3"><i class="fa-brands fa-discord"></i> <span class="desktop">Join our </span>Discord Server<span class="desktop">!</span></a></li>
+				</ul>
+				<h2>Contact Me!</h2>
+				<ul>
+					<li>For <b>business<span class="desktop"> inquiries</span></b>: <a href="mailto:business@altafcreator.com" class="link"><i class="fa-solid fa-envelope"></i> business@altafcreator.com</a></li>
+					<li>For <span class="desktop">contacting me </span><b>personal<span class="desktop">ly</span></b>: <a href="mailto:altaf@altafcreator.com" class="link"><i class="fa-solid fa-envelope"></i> altaf@altafcreator.com</a></li>
+				</ul>
+				<h2>Socials</h2>
+				<div class="container-social">
+					<a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button button-social" target="_blank"><i class="fa-brands fa-youtube"></i></a>
+					<a href="https://www.instagram.com/altafcreator" class="button button-social" target="_blank"><i class="fa-brands fa-instagram"></i></a>
+					<a href="https://twitter.com/altafcreator" class="button button-social" target="_blank"><i class="fa-brands fa-twitter"></i></a>
+					<a href="https://github.com/altaf-creator" class="button button-social" target="_blank"><i class="fa-brands fa-github"></i></a>
+					<a href="https://discord.gg/Mg5WFqrHk3" class="button button-social" target="_blank"><i class="fa-brands fa-discord"></i></a>
+					<a href="https://mastodon.gamedev.place/@altaf" class="button button-social" target="_blank"><i class="fa-brands fa-mastodon"></i></a>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+
+</html>
diff --git a/projects/index.html b/projects/index.html
index f8225cf..70e5b99 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -33,7 +33,7 @@
 				<div class="flex-container flex-container-column">

 					<span class="heading">Projects</span>

 					<a class="button center" href="//git.altafcreator.com" style="margin-left: auto; margin-right: auto;"><i class="fa-brands fa-git-alt"></i> Source Code to My Projects</a>

-					<div class="flex-container flex" style="height: 800px;">

+					<div class="flex-container flex" id="top-project-highlight">

 						<div class="flex full-img-card"

 							style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">

 							<a href="/projects/simpliCity/" class="fill-div gradient-overlay">

@@ -48,15 +48,21 @@
 							</a>

 

 						</div>

-						<div class="flex full-img-card"

-							style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);">

+						<div class="flex full-img-card top-gallery-card"

+							style="background-image: url(/assets/images/game-hero/learnsmpdotid.png);">

 							<a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">

-								<span>MarkdownEditor</span>

+								<span>learnsmp.id</span>

 							</a>

 						</div>

 					</div>

 					<div class="flex-container-normal flex">

 						<div class="flex full-img-card gallery-card"

+							style="background-image: url(/assets/images/game-hero/sumon_cover.png);">

+							<a href="https://ldjam.com/events/ludum-dare/55/sum-on" class="fill-div gradient-overlay">

+								<span>Sum On!</span>

+							</a>

+						</div>

+						<div class="flex full-img-card gallery-card"

 							style="background-image: url(/assets/images/game-hero/depths-of-knowledge_cover.png); ">

 							<a href="https://altaf-creator.itch.io/depths-of-knowledge" class="fill-div gradient-overlay">

 								<span>Depths of Knowledge</span>

@@ -69,18 +75,54 @@
 							</a>

 						</div>

 						<div class="flex full-img-card gallery-card"

+							style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);">

+							<a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">

+								<span>MarkdownEditor</span>

+							</a>

+						</div>

+						<div class="flex full-img-card gallery-card"

 							style="background-image: url(/assets/images/game-hero/quran_screenshot.png); ">

 							<a href="https://altaf-creator.github.io/OpenQuran/src/" class="fill-div gradient-overlay">

 								<span>OpenQuran</span>

 							</a>

 						</div>

 						<div class="flex full-img-card gallery-card"

+							style="background-image: url(/assets/images/game-hero/file.png); ">

+							<a href="https://altaf-creator.github.io/OpenQuran/src/" class="fill-div gradient-overlay">

+								<span>Unfinished Habit Tracker</span>

+							</a>

+						</div>

+						<div class="flex full-img-card gallery-card"

+							style="background-image: url(/assets/images/game-hero/ufoproto_screenshot.png);">

+							<a href="https://altaf-creator.itch.io/depths-of-knowledge" class="fill-div gradient-overlay">

+								<span>UFO with a Gravity Gun Prototype</span>

+							</a>

+						</div>

+						<div class="flex full-img-card gallery-card"

+							style="background-image: url(/assets/images/game-hero/boids_screenshot.png);">

+							<a href="https://altaf-creator.itch.io/depths-of-knowledge" class="fill-div gradient-overlay">

+								<span>(failed (?)) Boids Experiment</span>

+							</a>

+						</div>

+						<div class="flex full-img-card gallery-card"

+							style="background-image: url(/assets/images/game-hero/simpliCityStore.png); ">

+							<a href="https://simpliCity-Store.github.io/" class="fill-div gradient-overlay">

+								<span>simpliCity Store Mock-up</span>

+							</a>

+						</div>

+						<div class="flex full-img-card gallery-card"

 							style="background-image: url(/assets/images/game-hero/duck_screenshot.png); ">

 							<a href="https://play.unity.com/mg/other/webgl-flappy-duck-1-0" class="fill-div gradient-overlay">

 								<span>Flappy Duck</span>

 							</a>

 						</div>

 						<div class="flex full-img-card gallery-card"

+							style="background-image: url(/assets/images/game-hero/cargame_screenshot.jpg);">

+							<a href="https://play.unity.com/mg/other/webgl-builds-153175" class="fill-div gradient-overlay">

+								<span>Road Obstacles</span>

+							</a>

+						</div>

+						<div class="flex full-img-card gallery-card"

 							style="background-image: url(/assets/images/game-hero/ball_screenshot.png); ">

 							<a href="https://play.unity.com/mg/other/webgl-builds-153175" class="fill-div gradient-overlay">

 								<span>Ball Run</span>

@@ -110,6 +152,18 @@
 								<span>C Wordle</span>

 							</a>

 						</div>

+						<div class="flex full-img-card gallery-card"

+							style="background-image: url(/assets/images/game-hero/wordle_screenshot.png); ">

+							<a href="" class="fill-div gradient-overlay">

+								<span>NurseBot</span>

+							</a>

+						</div>

+						<div class="flex full-img-card gallery-card"

+							style="background-image: url(/assets/images/game-hero/wordle_screenshot.png); ">

+							<a href="" class="fill-div gradient-overlay">

+								<span>Garbage Sorting Machine</span>

+							</a>

+						</div>

 					</div>

 				</div>

 			</div>

diff --git a/projects/simpliCity/index.html b/projects/simpliCity/index.html
index a816a3c..df3179f 100644
--- a/projects/simpliCity/index.html
+++ b/projects/simpliCity/index.html
@@ -32,9 +32,9 @@
 	</div>

 	<div class="sidebar-progress-container" id="progressContainer">

 	</div>

-	<div class="banner-top-bar flex-container">

-	<a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a>

-	<img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt="">

+	<div class="bottom-bar flex-container">

+		<a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a>

+		<img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt="">

 	</div>

 	<section style="border-top: none; overflow: hidden;" id="simpliCity-img">

 	<video src="/assets/videos/trailer_simpliCity.mp4" class="banner-video" id="video" onended="stopVideo('video')"></video>

diff --git a/scripts/blog.js b/scripts/blog.js
index 65fc02e..bbded40 100644
--- a/scripts/blog.js
+++ b/scripts/blog.js
@@ -11,9 +11,10 @@ function postList(n = 0) {
 			}
 
 			// i ❤ for loops
-			for (var i = n - 1; i >= 0; i--) {
-				console.log("dkfjlaafjsdk" + i)
-				postCard(data.posts[i]);
+			for (var i = data.posts.length - 1; i >= 0; i--) {
+				if (i >= data.posts.length - n) {
+					postCard(data.posts[i]);
+				}
 			}
 		});
 }
@@ -80,12 +81,14 @@ function loadPost(n) {
 			var date = document.getElementById("date");
 			var author = document.getElementById("author");
 			var tags = document.getElementById("tag-container");
+			var description = document.getElementById("description");
 			var content = document.getElementById("content");
 
 			banner.src = post.banner;
 			title.innerHTML = post.title;
 			date.innerHTML = post.date;
 			author.innerHTML = post.author;
+			description.innerHTML = post.description;
 			post.tags.forEach(createTags);
 			tags.innerHTML = evaluatedTags;
 
diff --git a/scripts/onload.js b/scripts/onload.js
index 9d9226e..10dcf1d 100644
--- a/scripts/onload.js
+++ b/scripts/onload.js
@@ -18,3 +18,8 @@ function blog(n) {
     // addNodes is called in loadPost(n);

     loadPost(n);

 }

+

+function index() {

+	postList(2);

+	addNodes();

+}

diff --git a/style.css b/style.css
index aa827f4..ba52255 100644
--- a/style.css
+++ b/style.css
@@ -112,6 +112,10 @@ li {
 	-webkit-text-fill-color: transparent;

 }

 

+.half-opacity-text {

+	color: rgba(0, 0, 0, 0.5);

+}

+

 .floating-nav-container {

 	display: block;

 	position: fixed;

@@ -297,6 +301,24 @@ li {
 	flex-wrap: wrap;

 }

 

+.horizontal-scroll {

+	overflow-x: scroll;

+	overflow-y: hidden;

+}

+

+.carousel-container {

+	flex-direction: row;

+	flex-wrap: nowrap;

+	height: 240px;

+	width: 100%;

+	gap: 10px;

+}

+

+.carousel-container > img {

+	height: 100%;

+	clip-path: polygon(0 10.00px, 10px 10px, 10.00px 0, calc(100% - 10.00px) 0, calc(100% - 10px) 10px, 100% 10.00px, 100% calc(100% - 10.00px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10.00px) 100%, 10.00px 100%, 10px calc(100% - 10px), 0 calc(100% - 10.00px));

+}

+

 .flex-center {

 	flex-direction: column;

 	place-items: center;

@@ -398,8 +420,14 @@ li {
 	color: white;

 }

 

-.banner-top-bar > img {

+.bottom-bar > img {

 	height: 40px;

+	transition: height .4s;

+}

+

+.bottom-bar > img:hover {

+	height: 45px;

+	transition: height .4s;

 }

 

 .banner-bottom-bar > i {

@@ -407,14 +435,14 @@ li {
 	display: inline-block;

 }

 

-.banner-top-bar {

+.bottom-bar {

 	position: fixed;

 	z-index: 3;

 	height: 69px;

 	width: 100%;

 	background-color: #0008;

 	backdrop-filter: blur(10px);

-	top: 0;

+	bottom: 0;

 	left: 70px;

 	color: white;

 	box-sizing: border-box;

@@ -589,6 +617,10 @@ li {
 	background: linear-gradient(180deg, transparent calc(100% - 1px), #ffffff79 0);

 }

 

+#top-project-highlight {

+	height: 800px;

+}

+

 @media only screen and (max-width: 600px) {

 	.desktop {

 		visibility: collapse;

@@ -644,4 +676,19 @@ li {
 	.banner-video {

 		width: 100%;

 	}

+

+	.div-sizing {

+		max-width: calc(100vw - 30px);

+	}

+}

+

+

+@media only screen and (max-width: 1000px) {

+	.flex {

+		flex-direction: column;

+	}

+

+	#top-project-highlight {

+		height: 280vh;

+	}

 }