added open hosue video, more tags, fix broken / link

5 files changed, 48 insertions, 9 deletions

diff --git a/www/assets/.DS_Store b/www/assets/.DS_Store
index ae1cb79..2322214 100644
--- a/www/assets/.DS_Store
+++ b/www/assets/.DS_Store
diff --git a/www/assets/images/video-hero/openhouse.png b/www/assets/images/video-hero/openhouse.png
new file mode 100644
index 0000000..1f8a3e6
--- /dev/null
+++ b/www/assets/images/video-hero/openhouse.png
diff --git a/www/index.html b/www/index.html
index bbcfae2..6771e16 100644
--- a/www/index.html
+++ b/www/index.html
@@ -93,7 +93,7 @@
 						</div>
 						<div class="flex full-img-card highlight-card"
 							style="background-image: url(/assets/images/video-hero/stringsoffreedom.png);">
-							<a href="/projects/video/?id=0" class="fill-div gradient-overlay">
+							<a href="/video/stringsoffreedom/" class="fill-div gradient-overlay">
 							</a>
 							<div class="img-card-titlebox">
 								<span class="img-card-subtitle"><i class="fa-solid fa-video"></i> Film</span>
diff --git a/www/projects/index.html b/www/projects/index.html
index cd1d0d1..6593c0d 100644
--- a/www/projects/index.html
+++ b/www/projects/index.html
@@ -88,7 +88,7 @@
 							<a href="/projects/shroud/" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

-								<span class="img-card-subtitle"><i class="fa-solid fa-globe"></i> Game</span>

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">Shroud</span>

 							</div>

 						</div>

@@ -135,6 +135,7 @@
 							<a href="https://altaf-creator.itch.io/tank-shooter" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">Tank Shooter</span>

 							</div>

 						</div>

@@ -143,6 +144,7 @@
 							<a href="https://alazharnotes.altafcreator.com" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-globe"></i> Website</span>

 								<span class="img-card-title">learnsmp.id</span>

 							</div>

 						</div>

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

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">Sum On!</span>

 							</div>

 						</div>

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

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">Depths of Knowledge</span>

 							</div>

 						</div>

@@ -167,6 +171,7 @@
 							<a href="https://altaf-creator.itch.io/farmers-universe" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">Farmer's Universe</span>

 							</div>

 						</div>

@@ -175,6 +180,7 @@
 							<a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-brands fa-microsoft"></i> Windows</span>

 								<span class="img-card-title">MarkdownEditor</span>

 							</div>

 						</div>

@@ -183,6 +189,7 @@
 							<a href="https://altaf-creator.github.io/OpenQuran/src/" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-globe"></i> Web App</span>

 								<span class="img-card-title">OpenQuran</span>

 							</div>

 						</div>

@@ -191,6 +198,7 @@
 							<a href="https://altafcreator.com" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-globe"></i> Website</span>

 								<span class="img-card-title">altafcreator.com</span>

 							</div>

 						</div>

@@ -218,6 +226,7 @@
 							<a href="/209.html" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">UFO with a Gravity Gun Prototype</span>

 							</div>

 						</div>

@@ -226,6 +235,7 @@
 							<a href="/209.html" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-flask"></i> Misc</span>

 								<span class="img-card-title">Boids Experiment</span>

 							</div>

 						</div>

@@ -234,6 +244,7 @@
 							<a href="https://simpliCity-Store.github.io/" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-globe"></i> Website</span>

 								<span class="img-card-title">simpliCity Store Mock-up</span>

 							</div>

 						</div>

@@ -242,6 +253,7 @@
 							<a href="https://play.unity.com/mg/other/webgl-flappy-duck-1-0" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">Flappy Duck</span>

 							</div>

 						</div>

@@ -250,6 +262,7 @@
 							<a href="/209.html" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">Road Obstacles</span>

 							</div>

 						</div>

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

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">Ball Run</span>

 							</div>

 						</div>

@@ -266,6 +280,7 @@
 							<a href="https://github.com/altaf-creator/Space-Shooter-Game" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-gamepad"></i> Game</span>

 								<span class="img-card-title">Space Shooter Game</span>

 							</div>

 						</div>

@@ -274,6 +289,7 @@
 							<a href="https:/altaf-creator.github.io/easy-math-game/" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-globe"></i> Web Game</span>

 								<span class="img-card-title">Easy Math Game</span>

 							</div>

 						</div>

@@ -282,6 +298,7 @@
 							<a href="https://github.com/altaf-creator/microbit-calculator" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-microchip"></i> Electronics</span>

 								<span class="img-card-title">micro:bit Calculator</span>

 							</div>

 						</div>

@@ -290,6 +307,7 @@
 							<a href="/209.html" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-microchip"></i> Electronics</span>

 								<span class="img-card-title">NurseBot</span>

 							</div>

 						</div>

@@ -298,6 +316,7 @@
 							<a href="/209.html" class="fill-div gradient-overlay">

 							</a>

 							<div class="img-card-titlebox">

+								<span class="img-card-subtitle"><i class="fa-solid fa-microchip"></i> Electronics</span>

 								<span class="img-card-title">Garbage Sorting Machine</span>

 							</div>

 						</div>

@@ -330,8 +349,8 @@
 							</div>

 						</div>

 					</div>

-					<div class="flex-container-normal flex video-gallery gap gap-top">

-						<div class="flex video-gallery-card narrow">

+					<div class="flex video-gallery gap gap-top">

+						<div class="video-gallery-card narrow">

 							<div>

 								<img src="/assets/images/video-hero/stringsoffreedom.png" alt="">

 								<a href="/video/stringsoffreedom/" class="video-play-cover">⏵</a>

@@ -341,7 +360,7 @@
 								<span>(2025) Top Winning Submission for Yellow Ribbon Arts Competition 2025.</span>

 							</div>

 						</div>

-						<div class="flex video-gallery-card narrow">

+						<div class="video-gallery-card narrow">

 							<div>

 								<img src="/assets/images/video-hero/minds.png" alt="">

 								<a href="/video/minds/" class="video-play-cover">⏵</a>

@@ -351,7 +370,7 @@
 								<span>(2025) Volunteer work with MINDS to promote their Charity Car Wash in 2025.</span>

 							</div>

 						</div>

-						<div class="flex video-gallery-card">

+						<div class="video-gallery-card">

 							<div>

 								<img src="/assets/images/video-hero/paperverse.png" alt="">

 								<a href="/video/paperverse/" class="video-play-cover">⏵</a>

@@ -361,7 +380,7 @@
 								<span>2026</span>

 							</div>

 						</div>

-						<div class="flex video-gallery-card">

+						<div class="video-gallery-card">

 							<div>

 								<img src="/assets/images/video-hero/eid2026.png" alt="">

 								<a href="/video/eid2026" class="video-play-cover">⏵</a>

@@ -371,7 +390,17 @@
 								<span>2026</span>

 							</div>

 						</div>

-						<div class="flex video-gallery-card">

+						<div class="video-gallery-card">

+							<div>

+								<img src="/assets/images/video-hero/openhouse.png" alt="">

+								<a href="/video/openhouse/" class="video-play-cover">⏵</a>

+							</div>

+							<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">

+								<a href="/video/openhouse/" class="link">Ngee Ann Open House 2025</a>

+								<span><i class="fa-solid fa-people-group"></i> 2025</span>

+							</div>

+						</div>

+						<div class="video-gallery-card">

 							<div>

 								<img src="/assets/images/video-hero/via3rp.png" alt="">

 								<a href="/video/s3via/" class="video-play-cover">⏵</a>

diff --git a/www/style.css b/www/style.css
index b48e6b8..bde18b8 100644
--- a/www/style.css
+++ b/www/style.css
@@ -944,8 +944,13 @@ li {
 	opacity: .5;

 }

 

+.video-gallery {

+	display: grid;

+	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

+}

+

 .video-gallery-card {

-	flex: 1 1 400px;

+/*	flex: 1 1 400px;*/

 	box-shadow: rgba(0, 0, 0, 0.15) 0 0 10px;

 }

 

@@ -1445,6 +1450,11 @@ li {
 	#full-video-player {

 		padding: 20px;

 	}

+

+	.video-gallery {

+		display: grid;

+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

+	}

 }