diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/about/index.html | 24 | ||||
| -rw-r--r-- | www/assets/.DS_Store | bin | 6148 -> 6148 bytes | |||
| -rw-r--r-- | www/scripts/video.js | 12 | ||||
| -rw-r--r-- | www/style.css | 33 |
4 files changed, 61 insertions, 8 deletions
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 & 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 Binary files differindex 2322214..ae1cb79 100644 --- a/www/assets/.DS_Store +++ b/www/assets/.DS_Store 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;
|