Website Development Portfolio

My Website Portfolio

✂ LiveClipper

A website co-developed by me and @TayyabJaved in which the website is able to record streamers livestreams and save them into a VOD that can be downloaded. The site is currently in alpha stages, but will include more features.

TMF Social Media

Fully responsive for all screen resolutions as well as mobile. Include option to change theme to either light mode, dim mode or dark mode. You can also search through messages, notifications and change the primary colours of certain elements.

Netcome Training

During my time studying under Netcom Training Ltd, I developed a website called example website. The source code and accompanying pictures for this website can be accessed on my Github repository by clicking here.

Shopping Cart Website

A shopping cart website that is able to retain the information held in the cart while being able to switch to different webpages on the website. A shopping basket will be displayed on the top-right hand corner of the navigation.

Custom Hook Form Web Application

A custom form that contains validation not allowing the user to process unless they have filled in the information to procress with the next button. The data stays in place allowing you to go back and update anything.

TMF Royality Free SFX Website

This is one of the websites I created for my college to showcase myself using an image gallery, rollover links, sound effects and many more. Utalised flex boxes to achive responsive to desktop. The source code can be located on my Github.

IWP International Writing Project

This is an old website that was designed during the flash era. The banner wouldn't be supported unless you have a plugin to enable flash. One of the first websites I developed for my college.

Rock Paper Scissors Project

Fancy a game? Or rather, want to play a JavaScript browser version of Rock Paper Scissors? This is a project that I have developed showcasing my JavaScript skills in terms of creating a game that can be played on the browser. If you want to try this out, click the preview button to go to the page.

Shopping Cart Web Application

This is a React project that utalise componets to create a basket that can contain and evalute the amount of products you selected. Thus producing a calculated result that is the item price, tax price, shipping price and total price. This project also shows the ability to "+" and "-" a product from the basket.

Food Recipe Search Web Application

This responsive web application will display a list of ten possible recipes based on what food you provide in the search box. You can try searching for different food recipes with ingredients like 🍌 bananas, 🍫 chocolate and 🍎 apples. Made using React.js and the Edamam API.

Weather API Project Web Application

Want to find out the weather for your city/country? You can get the temperature, description, humidity and wind speed. Do you also want to see a unique image each time you search for your city/country's weather? Well, this web app is able to provide you with that luxury with relative ease.

Pokémon Pokédex Web Application

This is a search feature that allows the user to type any Pokémon character's name and it will respond by printing out a list of information. That is their species and element type. As well as their attack, defence and health. Give it a try! Search for your favourite Pokédex. Type: Pikachu, Charmander or Squirtle

Simple Calculator Web Application

A calculator created using HTML, CSS and JavaScript. With this project, you can use this web application to calculate numbers together either by addition, subtraction, multiplication and division. You can also alter the theme of the calculator to either light mode, or dark mode.

Timezone Project

It's a little script I have developed showcasing the timezones of three different places, and a picture that updates based on the time. I have hosted this project on this side, click on the preview button to see it live.

Search Bar Filter Concept

It's a little script I developed showcasing a search bar that is able to filter out data based on what you type. Not case sensitive, and dynamically updates data to reflect what is written in the search bar. Using sample JSON user data.

...

This is the mockup that has been developed for this website using canva, as you can see the header and the footers are styled around this mockup design. With a few noticeable changes. For example, the buttons, colours and the size of the logo image. Click the button to see the other pages.

This Website Sitemap & Wireframe

This is the site map that I developed before creating this website. It's fairly basic. With 5 pages all uniquely different. They are linked together with navigation in the footer and header. However, I plan to update this and eventually showcase the final version of the website.

This is the wireframe version I developed before creating the mockup design. As you can see, I went for a unique design for my website instead of using a template. This is because I prefer developing from scratch rather than using somebody's design, so I can really say I have developed this website.