ORBYTAL

Orbyt-3D Model Interactor

Work Outline:

Web application to help interact with custom 3d models

Tools Implemented:

React JS

React3Fiber

Tailwind CSS

Tweakpane – GUI controller

see more

Orbyt-3D Model Interactor

About:

Have you ever designed a 3D model, and wanted to have a website where you can easily visit, load up your 3d models and do exciting stuff like animate it, have your own mini-map, simulate traffic and other fun stuff? WIthout having to download heavy 3D modelling apps which take a lot of device space and are complicated to use? You'd love this app.


This 3D model Interactor is a web application that is meant to do all these functions, at an even faster rate. It leverages on the lightweight and the rich documentation of React Three Fiber (R3F) – a React version of Three JS, providing quick load times and a smooth and interactive user experience.

Work Summary:

- App created with React JS and packaged with Vite.

- Used sample models from sketchfab.

- Utilized Tailwing CSS for quick ad responsive design

- Setup toggler buttons to toggle in and out of various available modes namely: Animation, model cloning and mini-map features.

- Setup streamlined process to help user achieve whatever iteractions required based on modes selected.

- Ensured responsiveness across various devices.

Tools Implemented:

React JS

React3Fiber (R3F)

Tailwind CSS

Tweakpane – GUI controller

Impershield Systems Limited

Work Outline:

Website Development with blog and E-commerce features

Tools Implemented:

Wordpress

Elementor

WooCommerce

CSS

Photoshop

see more

Impershield Systems Limited

About:

Impershield Systems ltd. is a growing buillding and construction services company, providing high quality building materials and solutions ranging from waterproofing to painting solutions, ensuring long-lasting buildings and structures.


They were in need of a profile, blog and e-commerce website to further extend their customer reach by upgrading their visibility. This website is a neat combination of a portfolio, a blog and an e-commerce platform so anyone, from anywhere can be serviced by this company.

Work Summary:

- Integrated Wordpress and Elementor

- Installed a custom ELementor theme

- Utilized CSS to further modify the website's appearance

- Integrated Woo-commerce and setup the website for online sales

- Edited and optimized images to be used on website

- Setup a customer response feature and a tawkTo widget

- Ensured responsiveness across vrious devices

Tools Implemented:

- Wordpress

- Elementor

- WooCommerce

- CSS

- Photoshop

MovieBox Trailer App

Work Outline:

Movie trailer website with TMDB's API

Tools Implemented:

Figma

React JS

CSS/SCSS

TMDB's API

see more

MovieBox Trailer App

About:

This MovieBox trailer app, as the name implies, gives the user an endless list of trailers for all genres and ratings of movies. Fecthing data from TMDB's API, it gives a range of functions. The user can search for favorite trailers, save favourite trailers even for movies as old as the 90's and enjoy the Nostalgic feelings that come with old memories.


This work was intended to hone my skills on the use and interaction with external APIs.

Work Summary:

- Created the App with React JS

- Created components and fetched relevant links and information from TMDB's API

- Utilized CSS/SCSS to further modify the website's appearance and ensure responsivenss across devices

Tools Implemented:

Figma

React JS

CSS/SCSS

TMDB's API

The Web3 Bazaar

Work Outline:

Landing Page Redesign and Development

Tools Implemented:

FIGMA

Illustrator

Photoshop

HTML

CSS

VUE JS

see more

The Web3 Bazaar

About:

The Web 3 Bazaar is a relaible P2P exchange platform for web 3 assets. They do so by the use of non-custodial escrow smart contracts, making it quick, secure and permisionless.


Although they already had a good direction with their branding, their current landing page looked very bland and unappealing. They called on their community to come up with, and develop a new landing page, mainting the existing colour schemes and typography. My design was chosen out of four other commendable designs, for its uniqueness, and adherence to their requirements.

I further went ahead to develop the new landing page, using Vue Js for the first time, and committed the changes to their repo. The changes are still awaiting approval.

Work Summary:

- Designed the new landing page with figma, bringing life to the landing page while preserving cureent colours and branding styles.

- Designed pixelated icons using Illustrator and photoshop to further enhance the site's uniqueness.

- Worked hand-in-hand with the original devs to further modify the design, ensuring a perfect fit into the project's objectives.

- Developped the new landing page using Vue JS, based on the laid out design, ensuring responsiveness across devices

- Created a repo and committed the changes to Github.

Tools Implemented:

- FIGMA

- Illustrator

- Photoshop

- HTML

- CSS

- VUE JS

LosAngeles Mountains

Work Outline:

Single Page Development from PSD file

Tools Implemented:

HTML

CSS/SCSS

JS

Photoshop

see more

LosAngeles Mountains

About:

LosAngeles Mountains is a one-page website template built to feature some of the most awesome mountain sites in Los Angeles, and to feature shedules for people interested in mountain climbing activities.

Work Summary:

- Desinged the template from sratch with HTML, CSS/SCSS and JS

- Responsive navigation bar, and smooth scrolling to various sections in the page

- Ensured exactness in the use of specified typography as the PSD template.

Tools Implemented:

HTML

CSS/SCSS

JS

Photoshop