major changes to /about/, event reflections, project reflections, video reflectionsHEADmaster

1 files changed, 255 insertions, 142 deletions

diff --git a/www/about/index.html b/www/about/index.html
index 039b31b..5eb2362 100644
--- a/www/about/index.html
+++ b/www/about/index.html
@@ -85,164 +85,277 @@
 	<section>

 		<div class="center-grid">

 			<div class="div-sizing">

-				<h1>Passion</h1>

-				<p>Under construction.</p>

+				<div class="timeline timeline-before">

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<p>Since little, I've always liked making things, from making things with cardboard, to tinkering with computers and electronics. Even making ROBLOX games!</p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<p>Around the age of 10-12, I've started learning programming more seriously. I started off with game devleopment and web development, and also did some desktop programming.</p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<p>At the same time, I also explored other creative media such as videography and others. Programming still remained as my main thing.</p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<div class="flex-container horizontal-scroll carousel-container" style="height: 200px;">

+								<img src="/assets/images/game-hero/space_hero.png" alt="Space Shooter Game. ">

+								<img src="/assets/images/game-hero/ball_screenshot.png" alt="">

+								<img src="/assets/images/game-hero/cargame_screenshot.jpg" alt="">

+								<img src="/assets/images/game-hero/duck_screenshot.png" alt="">

+							</div>

+							<p class="half-opacity-text">During these times, I learnt and experimented with Unity game development and web development mostly.</p>

+						</div>

+					</div>

+				</div>

 			</div>

 		</div>

 	</section>

 	<section>

 		<div class="center-grid">

 			<div class="div-sizing">

-				<h1>Community and Events</h1>

-				<h2>Infocomm (Media Creation) CCA Vice President</h2>

-				<h2>Tinkertanker Internship</h2>

+				<div class="timeline">

+					<div class="timeline-milestone">

+						<h1 class="colored-text">2022</h1>

+						<span class="timeline-milestone-left">Middle School</span>

+						<span class="timeline-milestone-right">Indonesia</span>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-code"></i> Project</span>

+							<h2>Tank Shooter</h2>

+							<p>Created and published my first major game project. A 2D pixel art arcade shooter game.</p>

+							<p><a class="link" href="https://altaf-creator.itch.io/tank-shooter"><i class="fa-brands fa-itch-io"></i> / Tank Shooter &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-code"></i> Project</span>

+							<h2>simpliCity</h2>

+							<p>The original Unity project for simpliCity, "Sandbox Game", was created. This is a major project that I'm still working on!</p>

+							<p><a class="link" href="/projects/simpliCity/">View simpliCity &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-milestone">

+						<h1 class="colored-text">2023</h1>

+						<span class="timeline-milestone-left">Middle School</span>

+						<span class="timeline-milestone-right">Indonesia</span>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>Alarm (Al-Azhar Rawamangun) Robotics Competition</h2>

+							<p><b>1st place, Team</b></p>

+							<p>My first major robotics competition. Our team of 3 paritcipated in the creative category. A metropolitan-wide private competition.</p>

+							<p><a class="link" href="/event/alarm_id/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>ASEAN Robotics Day</h2>

+							<p><b>4th place, Team</b></p>

+							<p>Created a new robot with the theme of environmental sustainability. Our team of 5 participated in the creative category. A public nation-wide and theoretically ASEAN region-wide competition.</p>

+							<p><a class="link" href="/event/aseanrd_id/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>Trans Studio Bandung Robotics Competition</h2>

+							<p><b>1st place, Team</b></p>

+							<p>Our team of 3 refined our previous robot for the creative category. A pretty major public nation-wide competition.</p>

+							<p><a class="link" href="/event/tsb_id/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-milestone">

+						<h1 class="colored-text">2024</h1>

+						<span class="timeline-milestone-left">Middle School</span>

+						<span class="timeline-milestone-right">Indonesia</span>

+					</div>

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-graduation-cap"></i> Opportunity</span>

+							<h2>MOE Singapore ASEAN Scholarship for Indonesia</h2>

+							<p>I've been granted the opportunity to study in Singapore independently for my Upper Secondary to Junior College years from this scholarship.</p>

+						</div>

+					</div>

+					<div class="timeline-milestone">

+						<h1 class="colored-text">2025</h1>

+						<span class="timeline-milestone-left">Secondary 3</span>

+						<span class="timeline-milestone-right">Singapore</span>

+					</div>

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Leadership</span>

+							<h2>CCA Vice President for Infocomm (Media Creation) Club</h2>

+							<p>Became one of the presidents for Ngee Ann Secondary School's Infocomm (Media Creation) Club CCA. (Achievements)</p>

+							<p><a class="link" href="/event/infocomm/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>Yellow Ribbon Arts Competition</h2>

+							<p><b>Top Winner</b></p>

+							<p>Participated in my first ever videography competition. This competition is part of Yellow Ribbon Arts Festival 2025 hosted by Yellow Ribbon Singapore.</p>

+							<p><a class="link" href="/video/stringsoffreedom/">Watch my short film &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>

+							<h2>Class VIA Leader Committe</h2>

+							<p>My form class organised a beach clean-up VIA project, where I helped out organising and creating a video of it.</p>

+							<p><a class="link" href="/video/s3via/">Watch our video &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>National Youth Tech Championship</h2>

+							<p><b>Champion, Team</b></p>

+							<p>Ngee Ann's team of 4 won the 1st place in NYTC in 2025, the premier tech and robotics competition hosted by IMDA. Featured in The Straits Times.</p>

+							<p><a class="link" href="/event/nytc/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>

+							<h2>Infocomm CCA VIA at Tampines East CC</h2>

+							<p>Every year, Ngee Ann's Infocomm Club does VIA projects. This year, the CCA collaborated with People's Association in Tampines East to teach elderly residents videography and editing.</p>

+							<p><a class="link" href="/event/infocomm/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<!--

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>

+							<h2>Scholar's VIA Project with NTUC Health</h2>

+							<p>Description</p>

+						</div>

+					</div>

+					-->

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-code"></i> Project</span>

+							<h2>NASA Space Apps Challenge</h2>

+							<b>Global Nominee</b>

+							<p>An international hackathon that I participated in with a couple of friends from my school and Dunman Secondary during our end of year holidays.</p>

+							<p><a class="link" href="/projects/deja/">View our project &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>

+							<h2>MINDS Charity Carwash Video</h2>

+							<p>Infocomm CCA leaders volunteered to create a promotional video for MINDS Charity Carwash at MINDS Community Hub (Geylang Serai). MINDS is a non-profit social agency serving persons with intellectual disability and their families.</p>

+							<p><a class="link" href="/video/minds/">Watch the video &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>

+							<h2>Ngee Ann Open House Video</h2>

+							<p>In partnership with the school, Infocomm CCA in collaboration with Photography CCA created an appreciation video for all student helpers at NAS Open House 2025.</p>

+							<p><a class="link" href="/video/openhouse/">Watch our video &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-briefcase"></i> Internship</span>

+							<h2>Internship at Tinkertanker</h2>

+							<p>Some of my Computing friends and me was granted an internship opportunity from our school with Tinkertanker Pte Ltd during our end of year holidays. This was my first ever internship. We got the opportunity to create some cool projects while we were there too.</p>

+							<p><a class="link" href="/event/tinkertanker/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-milestone">

+						<h1 class="colored-text">2026</h1>

+						<span class="timeline-milestone-right">Singapore</span>

+						<span class="timeline-milestone-left">Secondary 4</span>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>

+							<h2>Secondary 1 Orientation Facilitator</h2>

+							<p>I was offered the opportunity to help out with my school's Secondary 1 orientation as a student facilitator.</p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>Ngee Ann Secondary School Founder's Day</h2>

+							<p><b>Recipient of Certificate of Merit for Computing</b></p>

+							<p>The school awards Certificate of Merit to the 2 top-performing students of a subject.</p>

+							<p><a class="link" href="/event/foundersday/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>Ngee Ann Secondary School Founder's Day</h2>

+							<p><b>Infocomm CCA as Recipient of Certificate of Commendation for Outstanding Community Service</b></p>

+							<p>The school awards this certificate for students and student groups that has shown commitment in service and has brought real impacts, with the goal of cultivating value creators of the community.</p>

+							<p><a class="link" href="/event/foundersday/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>Temasek Engineering Olympiad</h2>

+							<p><b>Silver Medal</b></p>

+							<p>A 3-day engineering and electronics workshop and competition hosted by Temasek Polytechnic School of Engineering.</p>

+							<p><a class="link" href="/event/temasekeng/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<!-- bebras? -->

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>National Olympiad of Informatics 2026 (and 2025)</h2>

+							<p><b>Bronze Medal</b></p>

+							<p>An algorithmic problem-solving contest open to secondary and junior college students in Singapore. I participated in 2025 and 2026, and achieved the bronze medal this year.</p>

+							<p><a class="link" href="/event/noi/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter timeline-highlight">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>National Olympiad of Artificial Intelligence</h2>

+							<p><b>Bronze Medal</b></p>

+							<p>Held by NTU and AI Singapore, NOAI is a relatively new programming contest about AI programming.</p>

+							<p><a class="link" href="/event/noai/">Read more &rarr;</a></p>

+						</div>

+					</div>

+					<div class="timeline-item shadow-filter">

+						<div>

+							<span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>

+							<h2>Copyright School Challenge '25/26</h2>

+							<p><b>2nd place</b></p>

+							<p>A videography competition held by CLASS Singapore with the theme "The Worlds We Make" in aligment with AFCC 2026.</p>

+							<p><a class="link" href="/video/paperverse/">Watch my submission &rarr;</a></p>

+						</div>

+					</div>

+				</div>

 			</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>

-	<!--

-	<section style="overflow-x: scroll; padding: 30px;" class="flex-container flex-container-column">

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

-			<div id="about-skills-container" class="flex">

-					<!- -

-					<div id="a">

-						<div id="aa" class="flex-box center-grid" style="min-height: 100%;"><h1 style="font-size: 2.5rem; line-height: 1rem; margin: 0; font-weight: 400;">Skills</h1></div>

-					<div id="ab" class="flex-box"></div>

-					<div id="ac" class="flex-box center-grid" style="min-height: 100%;"><a class="button" href="">Hire me!</a></div>

-					<div id="ad" class="flex-box"></div>

-				</div>

-				<div id="b" class="flex-box">

-					<h1>Godot 4 Programmer</h1>

-					<progress max="10" value="7" class="prog"></progress>

-					<span class="half-opacity-text">Intermediate</span>

-					<p>GDScript</p>

-					<img src="/assets/images/skills/godot.png" alt="" class="bento-img-lr">

-					<i class="fa-solid fa-code bento-icon-lr"></i>

-				</div>

-				<div id="c" class="flex-box"><img src="/assets/images/skills/godot_nvim.png" alt="" class="bento-img-full"></div>

-				<div id="d" class="flex-box"><h1>Game Design</h1></div>

-				<div id="e" class="flex-box"><h1>2D / 3D Artist</h1></div>

-				<div id="f" class="flex-box"></div>

-				<div id="g" class="flex-box"></div>

-				<div id="h" class="flex-box"><h1>Programmer</h1></div>

-			</div>- ->

-				<div id="a" class="flex-box center-grid" style="min-height: 100%;"><h1 style="position: absolute; font-size: 2.5rem; line-height: 1rem; margin: 0; font-weight: 400;">Skills</h1></div>

-				<div id="b" class="flex-box flex-center-content center">

-					<a class="button" href="/freelancing/" style="display: inline;">Hire me!</a>

-					<a class="button button-alt" href="/projects/" style="display: inline;">Explore my Projects</a>

-				</div>

-				<div id="c" class="flex-box"></div>

-				<div id="d" class="flex-box"></div>

-				<div id="e" class="flex-box">

-				</div>

-				<div id="f" class="flex-box"></div>

-				<div id="g" class="flex-box">

-				</div>

-				<div id="h" class="flex-box"></div>

-				<div id="j" class="flex-box">

-				</div>

-				<div id="k" class="flex-box">

-				</div>

-				<div id="l" class="flex-box">

-				</div>

-				<div id="m" class="flex-box"></div>

-				<div id="n" class="flex-box"></div>

-				<div id="o" class="flex-box"></div>

-				<div id="p" class="flex-box">

-				</div>

-				<div id="q" class="flex-box">

-				</div>

-				<div id="r" class="flex-box">

-				</div>

-				<div id="s" class="flex-box"></div>

-				<div id="t" class="flex-box">

-				</div>

-			</div>

-		</div>

-	</section>

-	-->

-	<!--

-	<section>

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

-			<div class="shadow-filter">

-				<div class="flex-box">

-					<h1>Skills</h1>

-				</div>

-			</div>

-			<div class="shadow-filter">

-				<div class="flex-box">

-					<h2>Game Development</h2>

-					<ul>

-						<li><span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span> 

-							Godot 4 Programmer (GDScript)</li>

-						<li><span class="half-opacity-text">[</span>🟩🟩🟩⬛⬛<span class="half-opacity-text">]</span> 

-							Game Designer</li>

-						<li><span class="half-opacity-text">[</span>🟩🟩⬛⬛⬛<span class="half-opacity-text">]</span> 

-							2D / 3D Artist</li>

-					</ul>

-					<h2>Front-end Web Developer</h2>

-					<ul>

-						<li>

-							<span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>

-						</li>

-					</ul>

-				</div>

-			</div>

-			<div class="shadow-filter">

-				<div class="flex-box">

-					<h2>Game Development</h2>

-					<ul>

-						<li><span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span> 

-							Godot 4 Programmer (GDScript)</li>

-						<li><span class="half-opacity-text">[</span>🟩🟩🟩⬛⬛<span class="half-opacity-text">]</span> 

-							Game Designer</li>

-						<li><span class="half-opacity-text">[</span>🟩🟩⬛⬛⬛<span class="half-opacity-text">]</span> 

-							2D / 3D Artist</li>

-					</ul>

-					<h2>Front-end Web Developer</h2>

-					<ul>

-						<li>

-							<span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>

-						</li>

-					</ul>

-				</div>

-			</div>

-			<div class="shadow-filter">

-				<div class="flex-box">

-					<h2>Game Development</h2>

-					<ul>

-						<li><span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span> 

-							Godot 4 Programmer (GDScript)</li>

-						<li><span class="half-opacity-text">[</span>🟩🟩🟩⬛⬛<span class="half-opacity-text">]</span> 

-							Game Designer</li>

-						<li><span class="half-opacity-text">[</span>🟩🟩⬛⬛⬛<span class="half-opacity-text">]</span> 

-							2D / 3D Artist</li>

-					</ul>

-					<h2>Front-end Web Developer</h2>

-					<ul>

-						<li>

-							<span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>

-						</li>

-					</ul>

+				<div class="timeline timeline-future">

+					<div class="timeline-milestone">

+						<h1 class="colored-text">Future?</h1>

+					</div>

 				</div>

 			</div>

 		</div>

 	</section>

-	--->

 </body>

 

 </html>