Projects

Clear Filter
ENG1044 Portfolio project preview

ENG1044 Portfolio

List of technologies used:

HTML

HTML logo

SCSS

SCSS logo

TypeScript

TypeScript logo

SvelteKit

SvelteKit logo

MongoDB

MongoDB logo

Figma

Figma logo

Git

Git logo

Vercel

Vercel logo
Project description:

This portfolio was an assignment for a research paper on the topic of Online Gambling for the subject ENG1044 English for Computer Technology Studies at Sunway University. Our team consisted of 3 members: Mohammad Shaan Ibne Javed Soyfoo, Joshua Edwin Rene Bonham and myself. Shaan designed a basic outline of the portfolio in Figma, Joshua directed the video, edited the video and made some creative decisions on the design of the portfolio, and I coded the portfolio. The team spent a substantial amount of time to decide on the colour palette to match the theme of the portfolio to gambling as much as possible. The portfolio consists of a roadmap of our journey through the research paper as well as the drafts and changes made to the research paper itself.

Weather project preview

Weather

List of technologies used:

HTML

HTML logo

SCSS

SCSS logo

TypeScript

TypeScript logo

SvelteKit

SvelteKit logo

Vercel

Vercel logo

Git

Git logo
Project description:

Weather is actually my first experience with SvelteKit. It is a common and simple beginner friendly project that I created because I wanted to try out Svelte itself. This was created within a couple of hours, because I was bored waiting for my flight that day. OpenWeatherMap's API was used to fetch relevant weather data and GeoDB Cities' API to fetch relevant geographical data. Of course, this project is far from perfect, but ultimately showcases my ability to adapt to new technologies and time constraints while creating a usable project.

Portfolio project preview

Portfolio

List of technologies used:

HTML

HTML logo

SCSS

SCSS logo

TypeScript

TypeScript logo

Nuxt 3

Nuxt 3 logo

SvelteKit

SvelteKit logo

MongoDB

MongoDB logo

Vercel

Vercel logo

Git

Git logo
Project description:

My portfolio was initially built using Nuxt 3. This was because I was already familiar with Vue and wanted to explore a full-stack development without having a separated backend. However, I found that Nuxt 3 did not suit my taste - I disliked working with their server-side solution with the use of UnJS. As such, I decided to rebuild my portfolio with SvelteKit, which was growing in popularity for its speed due to its compiled nature, and simplicity. After working with SvelteKit, I fell in love with this framework. It was not just fast and simple, but also made it easier to implement accessibility features by providing an API for progressive enhancements while conforming to web standards. As a result, SvelteKit has since become my go-to framework for all my future projects unless I want to explore or a project requires a different library/framework.

Auth Hub project preview

Auth Hub

List of technologies used:

HTML

HTML logo

TypeScript

TypeScript logo

Vue

Vue logo

Tailwind

Tailwind logo

NodeJS

NodeJS logo

Express

Express logo

MongoDB

MongoDB logo

Git

Git logo
Project description:

As I worked more web application, I realised something: I have to repeatedly implement authentication into each one of them. Instead of focusing on learning or implementing the new system, I ended up spending time setting up my project with an authentication, again. With the goal of resolving this problem, I decided to create this project: Auth Hub. All future projects that fall under my domain, spimy.dev, with the exceptions of Spuiz and Hackathon projects, would make use of this. This enables users to use a single account across all my projects, providing a unified experience similar to how HoYoverse manages accounts across its games. For added security, the dashboard also allows users to revoke their signed-in sessions from any of their devices. This project was also my first time using Tailwind CSS, as it was gaining popularity and I wanted to ensure that it is within my skillset.

Aniseiyuu project preview

Aniseiyuu

List of technologies used:

HTML

HTML logo

SCSS

SCSS logo

TypeScript

TypeScript logo

Vue

Vue logo

GraphQL

GraphQL logo

Netlify

Netlify logo

Git

Git logo
Project description:

Aniseiyuu was created to facilitate comparing voice actors (seiyuus) between two animes, to identify characters who share the same voice. This is because seiyuus are a big part of anime culture and majority of people who watch anime care about being able to identify their favourite seiyuus. The project uses AniList's GraphQL API to retrieve the relevant data. While I acknowledge that there are more sophisticated alternatives, my goal with Aniseiyuu was primarily for learning purposes. Due to my lack of understanding and knowledge with GraphQL APIs, it was a challenge to retrieve data efficiently. However, I wanted to ensure I could make a functioning product despite the challenges to showcase my skills in adaptability. As of July 2025, AniList has implemented a strict rate-limit policy on their API, rendering Aniseiyuu to not function properly. A fix will be made using an alternative API in a planned update.

Subtitles project preview

Subtitles

List of technologies used:

Python

Python logo

Django

Django logo

HTML

HTML logo

SCSS

SCSS logo

JavaScript

JavaScript logo

TypeScript

TypeScript logo

Vue

Vue logo

Heroku

Heroku logo

Ubuntu

Ubuntu logo

NGINX

NGINX logo

Git

Git logo
Project description:

In collaboration with Eray Chumak, we successfully developed Subtitles, a web project that addresses the need for a streamlined and user-friendly platform to download subtitles for movies, TV shows, and anime. Eray worked on the frontend using Vue to create a good user experience when browsing. I worked on the backend, integrating OpenSubtitles' API and TMDB's API to retrieve relevant data. We created this together because we both found existing websites for downloading subtitles to be cluttered - especially with ads - and a designed which was outdated. We created Subtitles with a simple goal: to search and download subtitles efficiently without distractions. The project was initially hosted on Heroku. However, we moved the hosting over to Oracle Cloud Infrastructure (OCI) in March 2023 due to Heroku's updates in payment policies. This migration allowed me to learn Bash through SSH and settings up a functional web server using NGINX. This project allowed us to refine our technical skills as well as our teamwork and communication skills, making this a very good learning experience.