I'm Waleed.
Front End Developer
What I Do
Shopify
React
Vue
Front End
UX
Game Dev
Work
Toy Log (WIP as of 2024)
Personal Project
A work in progress. I collection action figures (primarily Transformers, some Lego, some others). While other alternatives to maintaining a database of items exist (other websites or apps, or an Excel file even), I wanted to make something myself.
At the moment: it's just a to-do list, but theres a long list of features to be added.
Current stack: React front-end only
Future stack: React plus MongoDB/Express/Node
Collection Template 2.0
Sukoshi Mart
While the online store transitioned to the Shopify 2.0 themes, which another developer was handling, I was in charge of creating the 2.0 collection template.
The new functionality of the collection page was to have endless scrolling along with filters specifically for the brands available on each collection.
Shopify by default doesn't support endless scrolling pagination, but with some HTTP request tricks, you CAN add parts of pages or in this case, the product card elements, on to the same page.
Since the content loads fast enough, it also lets me delete and update parts of the page, which is how the brand filter works. Click on any of the "Brand" tags on the lower left hand panel, and it'll delete all products on the page and load in products that match the Brand filter.
Almost all the main collections use this template, so you can browse larger or smaller collections.
There have been significant changes to the endless scrolling/filtering system for collections since I left Sukoshi Mart: the collections no longer have endless scrolling, the brand filtering still exists, but keeps things paginated.
Help Centre Prototype
The Brick
Given the task of entirely recreating the Help Centre page on The Brick's website, I took inspiration from various other online stores, but one design I liked was Staples' Help Centre.
It looks fairly similar to the Staples design, but there was one thing that bothered me about it: searching for anything required loading a new page of search results. The Brick's Help Centre is fairly small, in comparison, so I thought it'd be a waste of resources to have a search system just for the help centre.
Instead, I thought about previous projects I have worked on, and remembered an instant search/filter system I tried making before, which filtered out data coming in from an HTTP request.
This Help Centre page instead has an instant search filter that hides elements that don't contain the current search term. It uses a CDN version of a NPM module, Mark.js, which highlights and removes the highlight from the search term, as the user types out a search term.
Financial Calculation Prototype/Live Version
The Brick
View Live version
A little UI element that displays what a product would cost if you purchased it with either the red The Brick card or the green The Brick card, which had different payment setups.
If the live link doesn't work, just find any other product on The Brick. There should always be an element (as of 2024 at least) near the product price that shows the finance cost.
While the live product design is just some basic styling and no actual moving parts, I was very proud of how this looked and felt to use.
Elden Ring Challenge Run Generator
Personal Project
Originally built as a Skyrim rogue-like run generator, as part of a massive Skyrim mod setup I was using to create a rogue-like Skyrim (after you'd die, you'd create a new character and start from scratch).
I switched it up since Skyrim Special Edition got a major update which broke a big chunk of my mods, and I was playing Elden Ring and thought of modifying it for Elden Ring.
Vue To Do List
Personal Project
A basic to do list in Vue, but with some design/styling I think works really well.
Vue Timer
Personal Project
Unity/C# Asteroids Game
Personal Project
View Playable Demo
(desktop/laptop only)
Unity game, built in C#, with assets hand drawn in Paint by myself. I like how everything works, and I'm especially proud of the jet/flame flicker animation.
Contact
Email: {{ clickMe }}
My updated resume (July 2024)