From e944308db6de30153fdb86a67d6c913186fe8d89 Mon Sep 17 00:00:00 2001
From: altaf-creator <dev@altafcreator.com>
Date: Sun, 31 May 2026 10:45:44 +0800
Subject: youtube videos, events, about me wip

---
 www/about/index.html |  24 ++++++++++++++++++++----
 www/assets/.DS_Store | Bin 6148 -> 6148 bytes
 www/scripts/video.js |  12 ++++++++----
 www/style.css        |  33 +++++++++++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 8 deletions(-)

(limited to 'www')

diff --git a/www/about/index.html b/www/about/index.html
index e5aacf6..5e006e9 100644
--- a/www/about/index.html
+++ b/www/about/index.html
@@ -49,10 +49,10 @@
 						<span class="heading">About Me</span>
 						<p>
 							Hey there! I'm <b class="colored-text">Altaf</b>. I am a scholar studying abroad in <b class="colored-text">Singapore</b> from
-							<b class="colored-text">Indonesia</b> who likes to <b class="colored-text">create</b> and <b class="colored-text">tinker</b> (mostly with computers).
+							<b class="colored-text">Indonesia</b> who likes to <b class="colored-text">create</b> and <b class="colored-text">tinker</b> with computers, usually.
 						</p>
 						<p>
-							I'm mostly a <span class="colored-text">game developer</span> and <span class="colored-text">web developer</span>, but I
+							I'm mainly a <span class="colored-text">game developer</span> and <span class="colored-text">web developer</span>, but I
 							also like to make other things like desktop apps, and robots.<br>I'm still constantly learning and trying new things!
 						</p>
 					</div>
@@ -93,8 +93,24 @@
 	<section>
 		<div class="center-grid">
 			<div class="div-sizing">
-				<h1>Academics &amp; Achievements</h1>
-				<p>Under construction.</p>
+				<h1>Community and Events</h1>
+				<h2>Infocomm (Media Creation) CCA Vice President</h2>
+				<h2>Tinkertanker Internship</h2>
+			</div>
+		</div>
+	</section>
+	<section>
+		<div class="center-grid">
+			<div class="div-sizing">
+				<h1>Academics and Achievements</h1>
+				<h2>National Youth Tech Championship 2025</h2>
+				<h2>NOI 2026 (and 2025)</h2>
+				<h2>NOAI 2026</h2>
+				<h2>Temasek Engineering Olympiad 2026</h2>
+				<h2>Trans Studio Bandung Robotic Competition</h2>
+				<h2>Alarm Robotic Competition</h2>
+				<h2>ASEAN Robotic Day</h2>
+				<h2></h2>
 			</div>
 		</div>
 	</section>
diff --git a/www/assets/.DS_Store b/www/assets/.DS_Store
index 2322214..ae1cb79 100644
Binary files a/www/assets/.DS_Store and b/www/assets/.DS_Store differ
diff --git a/www/scripts/video.js b/www/scripts/video.js
index 9f32e96..bb5bb80 100644
--- a/www/scripts/video.js
+++ b/www/scripts/video.js
@@ -1,4 +1,6 @@
 const video = document.getElementById("video");
+const videoParent = document.getElementById("video-parent");
+const videoSection = document.getElementById("video-section");
 const videoControlsProgress = document.getElementById("video-controls-progress");
 const videoControlsPlay = document.getElementById("video-controls-play");
 const videoControlsVolume = document.getElementById("video-controls-mutetoggle");
@@ -55,13 +57,15 @@ function toggleMaximisation() {
 	if (videoMaximised) {
 		videoMaximised = false;
 		videoControlsMaximise.innerHTML = `<i class="fa-solid fa-maximize"></i>`;
-		video.exitFullscreen();
-		video.controls = false;
+		videoParent.classList.remove("video-fullscreen");
+		videoSection.appendChild(videoParent);
+		document.exitFullscreen();
 	} else {
 		videoMaximised = true;
 		videoControlsMaximise.innerHTML = `<i class="fa-solid fa-minimize"></i>`;
-		video.requestFullscreen();
-		video.controls = true;
+		videoParent.classList.add("video-fullscreen");
+		document.body.appendChild(videoParent);
+		document.documentElement.requestFullscreen();
 	}
 }
 
diff --git a/www/style.css b/www/style.css
index 8bd39b9..8883fa0 100644
--- a/www/style.css
+++ b/www/style.css
@@ -154,6 +154,10 @@ section {
 	box-sizing: border-box;
 }
 
+section:first-of-type {
+	border-top: none;
+}
+
 hr {
 	border: none;
 	background-color: black;
@@ -1053,6 +1057,29 @@ li {
 	transition-delay: 0s;
 }
 
+.video-fullscreen {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: black;
+	z-index: 10003;
+	height: 100vh;
+	width: 100vw;
+}
+
+.video-fullscreen > .video {
+	clip-path: none;
+	background-color: black;
+	height: 100vh;
+	width: 100vw;
+}
+
+.shadow-filter:has(.video-fullscreen) {
+	filter: none;
+}
+
 .video-controls:hover {
 	opacity: 1;
 	transition-delay: 0s;
@@ -1318,6 +1345,12 @@ li {
 	bottom: 20px;
 }
 
+#iframe-yt {
+	width: 100%;
+	aspect-ratio: 16/9;
+	clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px));
+}
+
 @media only screen and (max-width: 600px) {
 	.desktop {
 		visibility: collapse !important;
-- 
cgit v1.2.3