diff options
| -rw-r--r-- | data/blogs.json | 5 | ||||
| -rw-r--r-- | data/events/infocomm.md | 23 | ||||
| -rw-r--r-- | data/events/noai.md | 14 | ||||
| -rw-r--r-- | data/events/noi.md | 11 | ||||
| -rw-r--r-- | data/events/nytc.md | 2 | ||||
| -rw-r--r-- | data/events/tinkertanker.md | 8 | ||||
| -rw-r--r-- | data/projects/deja.md | 2 | ||||
| -rw-r--r-- | data/projects/laundryweb.md | 45 | ||||
| -rw-r--r-- | data/videos/eid2026.md | 2 | ||||
| -rw-r--r-- | data/videos/minds.md | 3 | ||||
| -rw-r--r-- | data/videos/paperverse.md | 2 | ||||
| -rw-r--r-- | data/videos/s3via.md | 7 | ||||
| -rw-r--r-- | data/videos/stringsoffreedom.md | 30 | ||||
| -rw-r--r-- | main.py | 8 | ||||
| -rw-r--r-- | templates/video.html | 3 | ||||
| -rw-r--r-- | www/about/index.html | 34 | ||||
| -rw-r--r-- | www/assets/images/education/events/010829thAug-CapturetheJoyfulMomentWorkshopDSC02252.jpg | bin | 0 -> 1526635 bytes | |||
| -rw-r--r-- | www/assets/images/education/events/026229thAug-CapturetheJoyfulMomentWorkshopDSC02641.jpg | bin | 0 -> 1704925 bytes | |||
| -rw-r--r-- | www/assets/images/game-hero/tinkertanker-examples.png | bin | 675283 -> 675283 bytes | |||
| -rw-r--r-- | www/projects/index.html | 28 | ||||
| -rw-r--r-- | www/scripts/elements/share.js | 27 | ||||
| -rw-r--r-- | www/scripts/scroll.js | 2 | ||||
| -rw-r--r-- | www/style.css | 6 |
23 files changed, 166 insertions, 96 deletions
diff --git a/data/blogs.json b/data/blogs.json index bd657ec..38e6a60 100644 --- a/data/blogs.json +++ b/data/blogs.json @@ -14,6 +14,11 @@ "thumbnail": "/assets/images/blog/33_cover.png", "banner": "/assets/images/blog/33_banner.png", "path": "/data/blogs/1.md" + }, + { + "thumbnail": "", + "banner": "", + "path": "/data/blogs/urban0.md" } ] } diff --git a/data/events/infocomm.md b/data/events/infocomm.md index 5083c39..2268757 100644 --- a/data/events/infocomm.md +++ b/data/events/infocomm.md @@ -23,7 +23,7 @@ For 2025 (and 2026), I've been chosen as one of the vice presidents for the Info -+-+-+ -+=+=+= ++-+-+- # 2025–2026 CCA Accomplishments @@ -36,9 +36,9 @@ Here are some of the things that our CCA has accomplished, achieved, or voluntee  }}} +I might even say that our CCA has been trusted to become the backbone of many of our school's events. Every morning, - -## Values-in-Action Project @ Tampines East Community Club +## Values-in-Action Project @ Tampines East Community Club {: #tecc } {{{  @@ -48,39 +48,40 @@ Here are some of the things that our CCA has accomplished, achieved, or voluntee ## MINDS Charity Car Wash Promotional Video Volunteering -Read more [here](/video/minds/). +Read more [here](/videos/minds/). ## Official Video Projects for School Our CCA has been trusted by Ngee Ann Secondary School to create high-quality videos for various school events, usually for outreach promotional purposes. We often have passionate members that are willing to work on different projects the school has asked us to do. These projects include: * Value Creators of the Community Symposium Video -* [2025 NAS Open House Video](/video/openhouse/) +* [2025 NAS Open House Video](/videos/openhouse/) I have also led the production of a few of our video projects before, together with other presidents of the CCA. -## Founder's Day Certificate of Commendation for Outstanding Community Service Recipient +## Founder's Day Certificate of Commendation for Outstanding Community Service Recipient {: #fd } -+-+-+ -+=+=+= ++-+-+- This leadership opportunity has undoubtedly been such an invaluable experience for me, and I've learnt so much from it. Here are some of the things that I've learnt throughout the journey. # Personal Reflections ## Service-first Leadership -This part is more or less about me finding out what kind of leader I want to be. This leadership opportunity has made me realise this. +This leadership opportunity helped me better understand the kind of leader I aspire to become. -Empowerment Empathy Growth Stewardship +I realised that I value a service-centred approach to leadership, a leadership approach that values empathy, stewardship and empowering others to grow. A common name that is often use to describe this approach is "servant leadership". To me, leadership is not about power and authority. It is a responsibility, and I think being able to not only succeed as a team, but also to uplift them, is the way to fulfil this duty. -Of course, I also believe that this style of leadership may not work for all circumstances. In some situations, a more assertive and autocratic approach may be needed, and as a leader, one should be confident enough to take the actions for the progress of the team. +At the same time, I learnt that leadership also requires adaptability. This style of leadership may not work for every circumstance. In some situations, a more assertive and autocratic approach may be needed, and as a leader, one should be confident enough to take the actions and make decisions in the best interest of the team. ## Mentoring by Example -Beyond service, ultimately, I also want to be able to uplift my team and be able to contribute to their self-improvement. +Beyond service, ultimately, I measure my success as a leader by the growth of the people beside me. Not only I strive to model technical/creative expertise, but I also hope to improve their character and contribute to their growth. +One lesson that stood out to me is that growth does not always happen by following a single “correct” method. As people learn, they will discover their own methods and learn about themselves in their own ways, and they may contribute in their own unique ways too. In fact, I think it's even more meaningful when people grow beyond what I taught them. To me, it shows that they have become confident and capable of paving their own path of growth for the future. For me, I won't take this as that I'm no longer needed, I'll take this as an indicator that I've succeeded as a leader. Because again, ultimately, I want to be a leader that is responsible via stewardship to hopefully contribute to my team's personal growth. -+-+-+
\ No newline at end of file diff --git a/data/events/noai.md b/data/events/noai.md index 844814e..2af4ba1 100644 --- a/data/events/noai.md +++ b/data/events/noai.md @@ -21,22 +21,12 @@ For quite a while, I've been really curious of how AI, more specifically machine When I participated in NOAI this year, there were two rounds. The first round was the qualification round which was a 300 questions MCQ test about AI programming including theory questions and debugging. The second round was the final round consisting of a 20 question MCQ test and 5 programming tasks.[^1] This year, I advanced into the final round and attained the bronze medal, which was pretty cool. -Here are some things I've learnt. +While I did secure a bronze medal in NOAI, I'd still say that I'm still scratching the surface on the vast field of AI programming. Hopefully, from the baseline knowledge I've learnt about AI programming from this competition, I'll be able to learn more and ultimately also apply these knowledge for my future [projects](/projects/). [<i class="fa-solid fa-download"></i> Download my certificate](path/to/file) {: .info-box } --+-+-+ - -+=+=+= - -# Knowledge: AI programming - - - --+-+-+ - -+=+=+= +--- ///Footnotes Go Here/// diff --git a/data/events/noi.md b/data/events/noi.md index 9cb63c0..d82060c 100644 --- a/data/events/noi.md +++ b/data/events/noi.md @@ -14,16 +14,11 @@ My senior also invited me to participate in NOI 2025, which I did. I didn’t ge I’m still continuously learning algorithmic problem-solving/competitive programming. This year, I decided to participate again and got into the finals! I even got the bronze medal, which was a nice surprise! -Here are some things I’ve learnt. +Though, to be completely candid, I still won't consider myself to be an expert in competitive programming. Competing alongside much more knowledgable friends in competitive programming was frankly quite humbling, but still very fun. While I managed to secure a bronze medal, I'd say the exposure I've gotten on advanced algorithmic concepts was the most valuable. + +From the beginning, I've always enjoyed building coding projects especially when it's able to help others. Ultimately, I wish to be able to apply what I've learnt from NOI, that is algorithmic problem solving, and how to break down problems systematically, to my [projects](/projects/) and beyond in the future. [<i class="fa-solid fa-download"></i> Download my certificate](https://files.altafcreator.com/school/certs/noi2026.pdf) {: .info-box } --+-+-+ - -+=+=+= -# Algorithms, of course. - - - -+-+-+
\ No newline at end of file diff --git a/data/events/nytc.md b/data/events/nytc.md index d8daae1..b447a2e 100644 --- a/data/events/nytc.md +++ b/data/events/nytc.md @@ -34,7 +34,7 @@ Page A18, the headline page of Singapore section of July 19 2025 Issue of The St <div markdown="1" class="flex-flex" style="flex: 1.5 1;"> The 2025 edition of NYTC last year, the third season, focused more on robotics, drones, and AI. Participants were required to code land robots and drones to navigate an obstacle course while completing AI-related tasks like computer vision. This was the year where me and my team participated when we were in Secondary 3. I was one of the main developers/coders of Ngee Ann Secondary’s team of four. -That year, someway somehow we won as the champion (1st Place) of NYTC 2025! Continue +That year, someway somehow we won as the champion (1st Place) of NYTC 2025! Here are some things I've learnt along the way. </div> diff --git a/data/events/tinkertanker.md b/data/events/tinkertanker.md index d49a131..4acc7f2 100644 --- a/data/events/tinkertanker.md +++ b/data/events/tinkertanker.md @@ -17,7 +17,7 @@ type: Internship }}} -In November 2025, a couple of my friends and me was granted the opportunity from the school to attend a 2-week Computing-related Internship (since we all took O-Level Computing as a subject). This internship was with Tinkertanker Pte Ltd, a Singaporean technology and education company that teaches electronics, software, and tech in general, and also builds (and sells) cool tech-related stuff. You can visit their website at [https://tinkertanker.com/](https://tinkertanker.com/). +In November 2025, a couple of my friends and I was granted the opportunity from the school to attend a 2-week Computing-related Internship (since we all took O-Level Computing as a subject). This internship was with Tinkertanker Pte Ltd, a Singaporean technology and education company that teaches electronics, software, and tech in general, and also builds (and sells) cool tech-related stuff. You can visit their website at [https://tinkertanker.com/](https://tinkertanker.com/). -+-+-+ @@ -33,11 +33,9 @@ This internship has shown me that you should take the initiative more, especiall Initially, we thought that Tinkertanker would give us tasks for us to do throughout the whole internship. Instead, we realised that Tinkertanker actually encourages us to just create things that we want, and they expected us to take the initiative. If we have an idea of something, they encouraged us to discuss about it with them in which they are very happy to do so, which is really cool. +So, from here, I've learnt to be more brave to take the initiative in the future. When you see a problem or something that you want to help, you can consider asking the relevant people or authorities about your idea or intent to help out! This way, the community will be benefitted from your help, you're able to contribute too, and ultimately it's a net positive for the community. - -* See problems or things you want to do or maybe you want to help -* Ask -* Then do! Everyone happy. Even did this for LaundryWeb +From here, I've also tried pushing other initiatives within my community, such as [LaundryWeb](/project/laundryweb/)! # Projects I developed I've contributed to quite a few projects during my time there. If you want to see more details of the major projects I contributed to/made, click one of the projects below! diff --git a/data/projects/deja.md b/data/projects/deja.md index d2806dd..23220c4 100644 --- a/data/projects/deja.md +++ b/data/projects/deja.md @@ -140,7 +140,7 @@ The following section is a brief explanation about this competition and notes on NASA Space Apps Challenge is an annual global 48-hour online hackathon held by NASA where developers and enthusiasts come together and build open-source projects focusing on tackling problems on Earth and space. Participants can (and are encouraged to) utilise free and open data provided by NASA and its partners (like the European Space Agency). -In the Sec 3 end of year holidays in 2025, a couple of my friends from Ngee Ann Secondary and Dunman Secondary School and me decided to team up and join the universal event (as basically nobody participated in local Singapore events) for this competition. +In the Sec 3 end of year holidays in 2025, a couple of my friends from Ngee Ann Secondary and Dunman Secondary School and I decided to team up and join the universal event (as basically nobody participated in local Singapore events) for this competition. We formed into a team of five, me, J from Ngee Ann, W from Ngee Ann, D from Dunman, and E from Dunman. diff --git a/data/projects/laundryweb.md b/data/projects/laundryweb.md index 85c86bb..4b678eb 100644 --- a/data/projects/laundryweb.md +++ b/data/projects/laundryweb.md @@ -26,15 +26,22 @@ A simple laundry timer website/web application for all Victoria Hall boarders. Do check out the source code [here](https://git.altafcreator.com/victoriahall-laundryweb.git/)! -## Purpose {: #purpose} +# Features + +* A highly efficient and easy-to-use timer, optimised for using the laundry machines in Victoria Hall communal laundry rooms. + * This timer is run on the backend, so users won't need to keep the page open. +* A status page. People may bookmark this page and see the current usage status of washers and dryers in their block, and can decide when to start their laundry accordingly. + * This is possible since the timers are saved and run on the backend. We can infer all machines usage status from the existence of these timers. + +# Purpose {: #purpose} I created this app because I noticed a fairly frequent problem, or frankly an annoyance, in my student hostel. Oftentimes, especially in the male block, residents are found to leave their laundry inside a machine for extended periods of time despite having their laundry fully washed or dried. When another person wants to use that machine, they will need to take out the previous person's laundry and those clothes often end up on top of machines and floors. This creates annoyance and a slight delay for the next person wanting to use that machine, and also makes the place less hygienic and more cluttered. Perhaps this may be caused due to people forgetting their own laundry. Personally, I'll always bring my phone to start a 25-minute timer whenever I start a new laundry cycle, so that I won't forget about it. It's pretty quick to do, but it may still be an additional friction for some people, so people may choose not to do that at all. Thus, I proposed a new website project for a simple laundry timer that is easily accessible and very quick to use for residents wanting to wash their laundry quickly. When their laundry is finished, they will be notified and can promptly take their laundry. The aim is to make starting a timer to notify yourself about your own laundry **as frictionless as possible**. -## State of Project (Update/remove soon) +# State of Project -Currently, the project is almost finished. All the main features of the app are finished, and I think it's ready for production. Therefore, the next steps of LaundryWeb's development is testing the application with real users, especially iPhone users, and also consulting with Hall Office for deployment and logistics. +Currently, the project is almost finished. All the main features of the app are finished, and it's ready for production. Therefore, the next steps of LaundryWeb's development is testing the application with real users, especially iPhone users, and also consulting with Hall Office for deployment and logistics, which is ongoing this week as of 29 June 2026. -+-+-+ @@ -50,28 +57,40 @@ Here's what I've learnt from the development process of LaundryWeb. During the making of this project, user-friendly design was the main focus. I wanted the app to be as efficient to use as possible as I know there are a lot of users using my hostel's communal laundry rooms, and people don't want to spend extended periods of time just starting their laundry. Ideally, people should be able to scan a LaundryWeb QR code, and immediately know how start a timer and receive notifications of their laundry within 30 seconds without reading a manual. This project really exercised my design skills to create a good and intuitive user experience for the app. -### User Journey +### User Journey { #user-journey } - + +{: .max-img } <div markdown="1" class="flex-flex"> First, I'd want the simplest, quickest, and most intuitive user journey as possible. This is to make the process of using the app, and hence using communal laundry rooms as frictionless as possible. If the app instead adds additional friction in doing laundry and starting your own timer, then it **defeats** the whole [purpose](#purpose) of this app. -In the end, I created this flow +In the end, I created this flow. When a new user wants to use LaundryWeb, they will start by scanning a QR code pasted on the machine they want to use. Then, the user will need to enable notifications permissions, and finally, press "Start". And that's it! They will be notified 5 minutes before and at the time when their laundry ends. -### UI Design +### UI & UX Design -{{{ -<div class="flex-flex" markdown="1"> The User Interface (UI) design is also a major part of making the user experience as intuitive as possible, aligned with my aims to make [starting a timer to notify yourself for your own laundry as frictionless as possible](#purpose). In fact, user interface **is** part of the user experience, hence making sure LaundryWeb has "good" UI design is also very critical for my aim. -I settled on these design philosophies for LaundryWeb's UI that I think aligns with my UX goal: **simple** and **humane**. +I settled on these design philosophies for LaundryWeb's UI that I think aligns with my UX goal: **simple** and **humane**. + +#### Simple + +Every page of LaundryWeb should be **as simple as possible**, both in terms of the tech behind it and what is shown to the user. This is so that the user can immediately finish the task that they want to do, whether starting a timer or confirming laundry collection. For instance, each page should have a clear, singular purpose, and each element in the page should align to that purpose. If not, cut it. + +For user navigation, I've adopted a "zero-navigation" approach to adhere to this design philosophy. Any point of entry, whether entering LaundryWeb's URL, opening the PWA from home screen, or interacting with a LaundryWeb notification, should immediately redirect to the relevant action that the user wants to do. For instance, a user that received a notification that their laundry has been finished should be redirected into their laundry timer page instead of machine status page, so that they can quickly confirm the collection of their laundry. Conversely, users that are looking to use the laundry machine may open the web app via PWA or a browser to check the machines' status. This user should redirected to the status page instead of an empty timer page. + +This philosophy also relates to and complements my earlier point about [User Journey](#user-journey). +#### Humane + +At the same time, the design should still feel **friendly** and **accessible**. Even though I aim to make this app to be used very quickly, I also want the experience to be pleasant, so that users won't feel "forced" to use this app. To achieve this, a warm colour palette for all web elements is used. Elements like buttons and sections also feature rounded corners, which hopefully makes the app feel more "welcoming". Rounded corners are also a pretty familiar feature that users have already seen all over the internet anyway. Lastly, fancy but unnecessary elements should be minimised, so that a wide range of devices can render the app properly, and so that accessibility tools can parse the website well. + +{{{ + +<div class="flex-flex" markdown="1"> +An example of my attempt to apply my UI philosophies is at the very first page a new user will see, the start timer page (`/start/`). This was also the very first page I designed to have a feel of what I want the whole app to look like. -Every page of LaundryWeb should be **as simple as possible**, both in terms of the tech behind and what is shown to the user. This is so that the user can immediately finish the task that they want to do, whether starting a timer or confirming laundry collection. For instance, each page should have a clear, singular purpose, and each element in the page should align to that purpose. If not, cut it. Navigation should be as simple as possible. In fact, the user should not need to navigate through different pages just to do one task. Make navigation as minimal as possible, and again, if needed, make it simple. -At the same time, the design should still feel **friendly** and **accessible**. Even though I aim to make this app to be used very quickly, I also want the experience to be pleasant, so that users won't feel "forced" to use this app. To achieve this, I decided to create sea green colour palette that in which every element must use. I also decided that elements should have rounded corners, to make the app feel more "welcoming", and it's also a pretty familiar feature that users have already seen all across the internet. Fancy but unnecessary elements should be minimised, so that a wide range of devices can render the app properly, and so that accessibility tools can parse the website well. -An example of my attempt to apply my UI philosophies is at the very first page a new user will see, the start timer page (`/start/`). This was also the very first page I designed to have a feel of what I want the whole app to look like. I think this page has manifested all of my desired design philosophies. </div>  diff --git a/data/videos/eid2026.md b/data/videos/eid2026.md index 69d0a97..3536acb 100644 --- a/data/videos/eid2026.md +++ b/data/videos/eid2026.md @@ -3,7 +3,7 @@ title: A message for this Eid description: A message for this Eid date: Tue, 24 March 2026 default_copyright: false -license: <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i> CC-BY 4.0 +license: <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i> CC BY 4.0 license_url: https://creativecommons.org/licenses/by/4.0/ thumbnail: /assets/images/video-hero/eid2026.png --- diff --git a/data/videos/minds.md b/data/videos/minds.md index c1089b6..51ecb69 100644 --- a/data/videos/minds.md +++ b/data/videos/minds.md @@ -31,8 +31,9 @@ The following section is for **my** own thoughts, reflections, and notes only. ## Working with Different Parties +From this experience, I've learnt how to effectively work with different parties. A big part of it is by good communication and listening to feedback. -## Listening to Feedback +### Listening to Feedback diff --git a/data/videos/paperverse.md b/data/videos/paperverse.md index d48403f..b92ee12 100644 --- a/data/videos/paperverse.md +++ b/data/videos/paperverse.md @@ -3,7 +3,7 @@ title: Paperverse Hub description: Paperverse Hub, a videography competition entry. date: March 2026 default_copyright: false -license: <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC-BY-SA 4.0 +license: <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC BY-SA 4.0 license_url: https://creativecommons.org/licenses/by-sa/4.0/ thumbnail: /assets/images/video-hero/paperverse.png --- diff --git a/data/videos/s3via.md b/data/videos/s3via.md index 0802e62..cc75ee9 100644 --- a/data/videos/s3via.md +++ b/data/videos/s3via.md @@ -3,7 +3,12 @@ title: Secondary 3 VIA Project description: Secondary 3 Class VIA Project date: July 2025 default_copyright: false -license: <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC-BY-SA 4.0 +license: <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC BY-SA 4.0 license_url: https://creativecommons.org/licenses/by-sa/4.0/ thumbnail: /assets/images/video-hero/via3rp.png --- ++-+-+- + +# About the Video + +-+-+-+
\ No newline at end of file diff --git a/data/videos/stringsoffreedom.md b/data/videos/stringsoffreedom.md index 1c03b5b..3e2636b 100644 --- a/data/videos/stringsoffreedom.md +++ b/data/videos/stringsoffreedom.md @@ -3,7 +3,7 @@ title: Strings of Freedom description: Top Winning Submission for Yellow Ribbon Arts Competition 2025. date: May 2025 default_copyright: false -license: <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC-BY-SA 4.0 +license: <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC BY-SA 4.0 license_url: https://creativecommons.org/licenses/by-sa/4.0/ thumbnail: /assets/images/video-hero/stringsoffreedom.png --- @@ -11,18 +11,44 @@ thumbnail: /assets/images/video-hero/stringsoffreedom.png # About the Short Film +<i class="fa-solid fa-warning"></i> This video is entirely **fictional**. Any resemblance to real persons, names, places, or events is purely coincidental. +{: .info-box } + +The following description is copied from my original competition submission synopsis. +{: .info-box } + +In this profound and short video, Luqman, a Singaporean former inmate, shares his journey from drug abuse and his imprisonment to his personal redemption through music. When he was released, Luqman felt a loss of meaning in life, until he came across a workshop poster that changed his life. Through that opportunity, he rekindled his passion for music and, more importantly, found a supportive community that gave him a second chance. + -+-+-+ +=+=+= # About the Competition +This video was made as a short film submission for the Yellow Ribbon Arts Competition 2025. + +Yellow Ribbon Arts Competition 2025 is an arts competition organised by Yellow Ribbon Singapore as part of the Yellow Ribbon Community Arts Festival. The competition is aimed for students studying in Secondary Schools, ITE, JCs, and Polytechnics, and it consists of 2 categories: 2D artwork and short video. In 2025, the theme of the competition was "We Are Each Other’s Second Chances".[^1] + +Read more about Yellow Ribbon and Yellow Ribbon Community Arts Festival [here](https://www.yellowribbon.gov.sg/yellow-ribbon-project/our-events-and-initiatives)! + -+-+-+ +=+=+= # Personal Notes and Reflections +## From Aspiration to Passion + +## Storytelling +-+-+-+ + ++=+=+= + +**References** --+-+-+
\ No newline at end of file +///Footnotes Go Here/// + +[^1]: [https://file.go.gov.sg/yr-artcompetition-guide.pdf](https://file.go.gov.sg/yr-artcompetition-guide.pdf), accessed 26 Jun 2026. [Archived](https://web.archive.org/web/20260626101428/https://file.go.gov.sg/yr-artcompetition-guide.pdf). + +-+-+-+ @@ -102,7 +102,7 @@ def blogpost_redirect(blogpost: str): ) -@app.get("/video/{video_name}/") +@app.get("/videos/{video_name}/") def video_page(video_name: str): status, html = pages.render_video(video_name) @@ -112,7 +112,7 @@ def video_page(video_name: str): raise fastapi.HTTPException(status_code=status, detail="Blogpost doesn't exist.") -@app.get("/video/{video_name}", include_in_schema=False) +@app.get("/videos/{video_name}", include_in_schema=False) def video_page_redirect(video_name: str): return fastapi.responses.RedirectResponse( url=f"/video/{video_name}/", @@ -120,7 +120,7 @@ def video_page_redirect(video_name: str): ) -@app.get("/event/{event_name}/") +@app.get("/events/{event_name}/") def event_page(event_name: str): status, html = pages.render_event(event_name) @@ -130,7 +130,7 @@ def event_page(event_name: str): raise fastapi.HTTPException(status_code=status, detail="Event / academic thing doesn't exist.") -@app.get("/event/{event_name}", include_in_schema=False) +@app.get("/events/{event_name}", include_in_schema=False) def event_page_redirect(event_name: str): return fastapi.responses.RedirectResponse( url=f"/event/{event_name}/", diff --git a/templates/video.html b/templates/video.html index 4380e8e..b8ed204 100644 --- a/templates/video.html +++ b/templates/video.html @@ -17,6 +17,7 @@ <script defer src="/scripts/scroll.js"></script> <script defer src="/scripts/video.js"></script> <script defer src="/scripts/iframe.js"></script> + <script defer src="/scripts/elements/share.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> @@ -61,7 +62,7 @@ <div class="flex-container flex-container-column flex-end"> <div class="flex-container flex-container-normal flex-container-dynamicwrap gap flex-end flex-end-dynamic"> <a class="button button-inline" href="#" id="video-download-btn"><i class="fa-solid fa-download"></i> Download</a> - <a class="button button-inline" href="#"><i class="fa-solid fa-share-nodes" id="video-share-btn"></i></a> + <button class="button button-inline" id="share-btn"><i class="fa-solid fa-share-nodes"></i></button> </div> <p style="text-align: end;" class="half-opacity-text" id="video-license-parent">Licensed under<br> <a class="link" href="#" id="video-license-info"><a> diff --git a/www/about/index.html b/www/about/index.html index 5eb2362..af6e1a8 100644 --- a/www/about/index.html +++ b/www/about/index.html @@ -152,7 +152,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/alarm_id/">Read more →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter">
@@ -161,7 +161,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/aseanrd_id/">Read more →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter">
@@ -170,7 +170,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/tsb_id/">Read more →</a></p>
</div>
</div>
<div class="timeline-milestone">
@@ -195,7 +195,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/infocomm/">Read more →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter timeline-highlight">
@@ -204,7 +204,7 @@ <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 →</a></p>
+ <p><a class="link" href="/videos/stringsoffreedom/">Watch my short film →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter">
@@ -212,7 +212,7 @@ <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 →</a></p>
+ <p><a class="link" href="/videos/s3via/">Watch our video →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter timeline-highlight">
@@ -221,7 +221,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/nytc/">Read more →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter">
@@ -229,7 +229,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/infocomm/#tecc">Read more →</a></p>
</div>
</div>
<!--
@@ -255,7 +255,7 @@ <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 →</a></p>
+ <p><a class="link" href="/videos/minds/">Watch the video →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter">
@@ -263,7 +263,7 @@ <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 →</a></p>
+ <p><a class="link" href="/videos/openhouse/">Watch our video →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter timeline-highlight">
@@ -271,7 +271,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/tinkertanker/">Read more →</a></p>
</div>
</div>
<div class="timeline-milestone">
@@ -292,7 +292,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/foundersday/">Read more →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter timeline-highlight">
@@ -301,7 +301,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/infocomm/#fd">Read more →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter">
@@ -310,7 +310,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/temasekeng/">Read more →</a></p>
</div>
</div>
<!-- bebras? -->
@@ -320,7 +320,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/noi/">Read more →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter timeline-highlight">
@@ -329,7 +329,7 @@ <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 →</a></p>
+ <p><a class="link" href="/events/noai/">Read more →</a></p>
</div>
</div>
<div class="timeline-item shadow-filter">
@@ -338,7 +338,7 @@ <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 →</a></p>
+ <p><a class="link" href="/videos/paperverse/">Watch my submission →</a></p>
</div>
</div>
</div>
diff --git a/www/assets/images/education/events/010829thAug-CapturetheJoyfulMomentWorkshopDSC02252.jpg b/www/assets/images/education/events/010829thAug-CapturetheJoyfulMomentWorkshopDSC02252.jpg Binary files differnew file mode 100644 index 0000000..991e0b7 --- /dev/null +++ b/www/assets/images/education/events/010829thAug-CapturetheJoyfulMomentWorkshopDSC02252.jpg diff --git a/www/assets/images/education/events/026229thAug-CapturetheJoyfulMomentWorkshopDSC02641.jpg b/www/assets/images/education/events/026229thAug-CapturetheJoyfulMomentWorkshopDSC02641.jpg Binary files differnew file mode 100644 index 0000000..db43e65 --- /dev/null +++ b/www/assets/images/education/events/026229thAug-CapturetheJoyfulMomentWorkshopDSC02641.jpg diff --git a/www/assets/images/game-hero/tinkertanker-examples.png b/www/assets/images/game-hero/tinkertanker-examples.png Binary files differindex b510b1c..ab1c844 100644 --- a/www/assets/images/game-hero/tinkertanker-examples.png +++ b/www/assets/images/game-hero/tinkertanker-examples.png diff --git a/www/projects/index.html b/www/projects/index.html index b3cb586..cfd3ba2 100644 --- a/www/projects/index.html +++ b/www/projects/index.html @@ -332,7 +332,7 @@ <span class="heading">Videography<span class="desktop"> Projects</span></span>
<div class="flex-container flex-container-normal flex-container-dynamicwrap gap wide" style="margin-top: 1rem;">
<div class="flex video-higlight-card shadow-filter">
- <a href="/video/stringsoffreedom/" class="video-play-cover">⏵</a>
+ <a href="/videos/stringsoffreedom/" class="video-play-cover">⏵</a>
<img src="/assets/images/video-hero/stringsoffreedom.png" alt="">
<div class="img">
<h1>Strings of Freedom</h1>
@@ -341,7 +341,7 @@ </div>
</div>
<div class="flex video-higlight-card shadow-filter">
- <a href="/video/minds/" class="video-play-cover">⏵</a>
+ <a href="/videos/minds/" class="video-play-cover">⏵</a>
<img src="/assets/images/video-hero/minds.png" alt="">
<div class="img">
<h1>MINDS Charity Car Wash Promotional</h1>
@@ -353,60 +353,60 @@ <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>
+ <a href="/videos/stringsoffreedom/" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
- <a href="/video/stringsoffreedom/" class="link monospaced">Strings of Freedom</a>
+ <a href="/videos/stringsoffreedom/" class="link monospaced">Strings of Freedom</a>
<span>(2025) Top Winning Submission for Yellow Ribbon Arts Competition 2025.</span>
</div>
</div>
<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>
+ <a href="/videos/minds/" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
- <a href="/video/minds/" class="link monospaced">MINDS Charity Car Wash Promotional</a>
+ <a href="/videos/minds/" class="link monospaced">MINDS Charity Car Wash Promotional</a>
<span>(2025) Volunteer work with MINDS to promote their Charity Car Wash in 2025.</span>
</div>
</div>
<div class="video-gallery-card">
<div>
<img src="/assets/images/video-hero/paperverse.png" alt="">
- <a href="/video/paperverse/" class="video-play-cover">⏵</a>
+ <a href="/videos/paperverse/" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center">
- <a href="/video/paperverse/" class="link monospaced">Paperverse Hub</a>
+ <a href="/videos/paperverse/" class="link monospaced">Paperverse Hub</a>
<span>2026</span>
</div>
</div>
<div class="video-gallery-card">
<div>
<img src="/assets/images/video-hero/eid2026.png" alt="">
- <a href="/video/eid2026" class="video-play-cover">⏵</a>
+ <a href="/videos/eid2026" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center gap">
- <a href="/video/eid2026/" class="link monospaced">A message for this Eid</a>
+ <a href="/videos/eid2026/" class="link monospaced">A message for this Eid</a>
<span>2026</span>
</div>
</div>
<div class="video-gallery-card">
<div>
<img src="/assets/images/video-hero/openhouse.png" alt="">
- <a href="/video/openhouse/" class="video-play-cover">⏵</a>
+ <a href="/videos/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 gap">
- <a href="/video/openhouse/" class="link monspaced">Ngee Ann Open House 2025</a>
+ <a href="/videos/openhouse/" class="link monspaced">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>
+ <a href="/videos/s3via/" class="video-play-cover">⏵</a>
</div>
<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center gap">
- <a href="/video/s3via/" class="link monospaced">Secondary 3 VIA Project</a>
+ <a href="/videos/s3via/" class="link monospaced">Secondary 3 VIA Project</a>
<span>2025</span>
</div>
</div>
diff --git a/www/scripts/elements/share.js b/www/scripts/elements/share.js new file mode 100644 index 0000000..d6813ba --- /dev/null +++ b/www/scripts/elements/share.js @@ -0,0 +1,27 @@ +const shareBtn = document.getElementById("share-btn"); + +shareBtn.addEventListener("click", () => { + share(); +}); + +function share() { + const data = { + title: "altaf-creator", + text: document.title, + url: window.location, + }; + + iconChange(); + navigator.clipboard.writeText(window.location); + navigator.share(data); +} + +async function iconChange() { + shareBtn.firstChild.setAttribute("class", "fa-solid fa-copy"); + await sleep(2000); + shareBtn.firstChild.setAttribute("class", "fa-solid fa-share-nodes"); +} + +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} diff --git a/www/scripts/scroll.js b/www/scripts/scroll.js index 6a61015..fca8c0a 100644 --- a/www/scripts/scroll.js +++ b/www/scripts/scroll.js @@ -16,8 +16,6 @@ function progress() { });
const nodes = document.getElementsByClassName("node");
- console.log(sections);
-
if (nodes[0]) {
for (var i = 0; i < sections.length; i++) {
if (isInViewport(sections[i])) {
diff --git a/www/style.css b/www/style.css index 40d8392..3e8cb76 100644 --- a/www/style.css +++ b/www/style.css @@ -114,6 +114,7 @@ hr { .long-code {
max-height: 16rem;
margin-bottom: 1rem;
+ overflow: auto;
}
pre {
@@ -124,7 +125,6 @@ pre { color: #444;
white-space: pre;
margin: 0;
- overflow: auto;
}
li {
@@ -1556,6 +1556,10 @@ li:target { text-align: center;
}
+.max-img > img {
+ max-height: 350px;
+}
+
@media only screen and (max-width: 600px) {
:root {
--home-title-offset: 60px;
|
