Etch-a-sketch

Etch-a-sketch

  • HTML
  • CSS
  • JavaScript
Visit Site Source Code

This project was done as part of TheOdinProject course curriculum. We were given a set of objectives and we needed to create a drawing program using everything we had learned up to that point as well as learning to search through other sources for information so that we do not become dependant on following tutorials and so we may become familiar with reading documentation.

NOTE: This website is not mobile-friendly

The Process

Assignment

I first read through the assignment. It talked about where to start, how to avoid common pitfalls, and how to troubleshoot and problem-solve in case anything went wrong.

Planning

Thanks to what I've learned in school, I started planning using basic shapes as temporary holders in my "wireframe".

Coding

Being a beginner project, I began coding almost immediately but that's not the say I had no plan. I broke down the problems into separate steps and tackled them from easiest to hardest.

Web Redesign

HomepageUniverse Redesign

  • Content Management Systems
Homepage Contact Page Hosting Page

Besides coding, my course also teaches about content management systems. One of my assignments had me redesign a hosting website called homepageuniverse.com as well as 2 other pages on the site. This was my take on it.

The Process

Reference

As this was a redesign, I had to take a look at what I was working with. I wasn't allowed to remove any content but I was allowed to add more if necessary.

Research

Next I looked at the competition. I go through several hosting websites, see what sticks, what doesn't and ways to make my website look professional.

Moodboard

Besides looking through references, I also spent time collating inspiration through a pinterest board.

Planning

At this stage, I once again use illustrator to plan out the layout. I'll start using figma to plan my wireframes and designs soon.

WordPress

After creating a plan, I initialised a WordPress site and began creating the actual website.

UI/UX

User Experience Design

  • Figma

This website is a mock shopping website called "Rizmatic". It was created for an assignment revolving around User Experience.

The Process

User Persona

First I started with a User Persona - a fake persona of a user of a certain demographic and what their needs could be.

User Scenario

Next I create 5 user goals, 5 scenarios and 5 flows. For the purpose of this assignment, I only needed to do a prototype for 1 scenario so I chose purchasing an item.

Wireframing

This step involves using basic components to plan the initial layout of the website. My thought process was on how I'd like the guide the user. For example, I intentionally placed the featured items immediately after the hero so that I could promote to them as soon as possible.

High-fidelity

Once the wireframe is done - I began on the first draft. This time I'm using Figma instead of Illustrator to create a mockup. It allows for flexbox-style layouts and the ability to simulate actual user interactions.I

User Testing

Once the first draft was complete, I got some of my classmates to test the prototype - recording their feedback on a word document, indicating the severity of each finding.

Final Prototype

In an actual working environment, I'd probably be doing more protoypes and more user testing but since it was an assignment, I only needed to clean up my prototype based on the feedback I had gotten.

Flappy Clone

Flappy Bird Clone

  • Roblox

This game is just a simple clone of flappy bird coded in roblox. It's one of my earliest projects. Created in 2018, it's one of the only projects I have from before 2022.

The Process

Creating the obstacle

I started off by creating the "pipes" that are supposed to travel across the screen. This asset will be cloned off-screen and slowly move across the x-axis with a randomized y height.

Creating the stage and "character"

Next I created the stage and a simple cube for the character.

Coding

Essentially, I locked the camera onto the stage, prevented the default player character from moving and coded it so the obstacles would spawn in every second at a random height, moving horizontally until it went off-screen then despawned.

Ricing

Linux Rice

  • Linux

While not a typical coding project, this project taught me a lot about how Linux worked and gave me convidence to work with different languages despite having no experience in them. It taught me coding was less about memorizing syntax and more about learning to solve problems.

The Process

Inspiration

Ricing is a term used in the Linux community to describe customizing your OS to fit your personal style. I was inspired to try while browsing this subreddit.

Installation

Next I installed Linux. My distro of choice was Arch as the minimal base meant I could start customizing from a clean slate.

Rest of the owl

Everything else was done in the terminal, from installing the window manager to editing the configuration files (thanks vim!). It's basically the same image as above but for an hour.

Hades

Hades Promo Site

  • HTML
  • CSS
Visit Site Source Code

This website was the final assignment for one of my modules. The module was focused on pure web design and the basics of HTML and CSS. Tasked to create a website based on any topic, I combined my graphic design skills and coding skills to create this final product based on one of my favourite games - Hades.

NOTE: This website is not mobile-friendly

The Process

Research

I started off by finding similar websites for inspiration, I created a pinterest board to collate my ideas and inspiration.

Planning

After finding inspiration, I got started on creating a mockup on Illustrator. This was before I learned about tool such as Figma hence why I used Illustrator.

Asset Creation

This process is typically done throughout the entire project. It's rare that something comes out right the first time, I typically go through several iterations before landing on the final product.

Code :D

This process is mostly painless thanks to planning ahead. Even during the planning stage, I was already determining whether or not certain elements would be hard to implement so this part is actually quite fun. :D