summaryrefslogtreecommitdiff
path: root/www/about/index.html
blob: 5eb2362830a30845b183977aea425fa154e22cf9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!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">
	<title>About Me • altaf-creator</title>
	<link rel="stylesheet" href="/packages/fontawesome-free-7.2.0-web/css/all.css">
	<!-- Cloudflare Turnstile -->
	<link rel="preconnect" href="https://challenges.cloudflare.com" />
	<script
	  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
	  async
	  defer
	></script>
</head>

<body onload="addNodes();">
	<script defer src="/scripts/constants.js"></script>
	<script defer src="/scripts/scroll.js"></script>
	<script defer src="/scripts/onload.js"></script>
	<script defer src="/scripts/captcha.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">Library</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="border-top: none;">
		<div class="center-grid">
			<div class="div-sizing">
				<div class="flex-container flex-container-dynamicwrap" style="gap: 30px">
					<img src="/assets/images/hero/logo.png" alt=""
						style="box-sizing: border-box; height: 240px; width: 240px; object-fit: cover;" class="img">
					<div>
						<span class="heading">About Me</span>
						<p>
							Hey there! I'm Athaalaa <b class="colored-text">Altaf</b> Hafidz. 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> with computers, usually.
						</p>
						<p>
							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>
				</div>
				<p class="desktop" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: gray;">↓ psst, scroll down! ↓</p>
			</div>
		</div>
		</div>
	</section>
	<section>
		<div class="center-grid">
			<div class="div-sizing">
				<h1>Contact Me!</h1>
				<div class="cf-turnstile" data-sitekey="0x4AAAAAAC1yqhk5tXbXfvXw" data-callback="emailTurnstileSuccess"></div>
				<ul id="email-list">
				</ul>
				<h1>Socials</h1>
				<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://mastodon.gamedev.place/@altaf" class="button button-social" target="_blank"><i class="fa-brands fa-mastodon"></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:///altaf-creator.itch.io" class="button button-social" target="_blank"><i class="fa-brands fa-itch-io"></i></a>
					<a href="https://discord.gg/Mg5WFqrHk3" class="button" target="_blank" style="margin: 0;"><i class="fa-brands fa-discord"></i> Join our Discord Server!</a>
				</div>
			</div>
		</div>
	</section>
	<section>
		<div class="center-grid">
			<div class="div-sizing">
				<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">
				<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">
				<div class="timeline timeline-future">
					<div class="timeline-milestone">
						<h1 class="colored-text">Future?</h1>
					</div>
				</div>
			</div>
		</div>
	</section>
</body>

</html>