Taking an existing website previously made in WordPress and creating with HTML, CSS & JavaScript.

This involved taking an already existing website that was made in WordPress and recreating it from scratch using only HTML, CSS & JavaScript, replacing plugins with functions.

CSS3

Nextjs

React

Vercel

Website

My Video Comparing Coding & WordPress

Rebuild WordPress Website From Scratch

Better understanding of grid/flex for responsiveness

Greater use of Google Analytics & Console

Creating navbar from scratch with nested dropdowns

Knowing when to use WordPress or build from scratch

Website that sorts, maps and graphs countries by lowest confirmed covid infections.

A website that sorts countries by lowest confirmed infections, charts daily cases over the past month with Chart.js and shows country location with Leaflet.

GitHub

YouTube

Covid19 Website

Next.js Covid19 Website

Building a Next.js application with an external API

Graphing & plotting daily Covid cases with Chart.js

Marking countries on a global map with Leaflet

Working with server side rendering with getServerSideProps

Teaching others how to make the website on YouTube

A site that was made to teach others how to use both Next.js & Django on YouTube.

A project that I made specifically for a YouTube series teaching others how to use React's Next.js for the front-end with Python's Django for the back-end, creating a REST API.

Django

PostgreSQL

Python

Pizza Website (Frontend)

Pizza Website (Backend)

Next.js & Django Pizza Website

Teaching others  how to do this on YouTube

Better understanding of Next.js getStaticProps

Working with an external API while also learning the Next js framework for server-side rendering.

A site that ranks different Pokemon based on their stats. Uses Next js, the React framework to learn about server-side rendering for better SEO purposes. Also fetches data from external Pokemon API.

Pokemon Ranked

Understanding and working with server-side props.

Better understanding of server-side and client-side rendering for SEO.

Better knowledge of the Next.js framework for React.

Implementing my mobile app from React Native into React for web application.

Taking project from React Native and converting it into React. This portfolio was done to replace my old portfolio which was made in bootstrap whereas this was made completely in CSS, with a backend built with Django and API made in Django REST framework.

Netlify

Old Bootstrap Portfolio

Web Portfolio

Better understanding of CSS in design (flexbox for responsiveness).

Creating REST API to access the database in React.

Understand more React (working with filtered and mapped data).

Created my own mobile portfolio within React Native, to improve my ability with a mobile applications.

Developing a further understanding of React by building my own mobile portfolio within React Native.

Expo

Figma

React Native

Mobile Portfolio (Requires Expo client)

Figma Prototype

Mobile Portfolio

Creating a prototype of the finished product in Figma.

Taking complete Figma design and incorporating it into React.

Getting a better understanding of React Native.

Utilizing flatlists for displaying core information.

Integrating custom Google fonts into React Native.

Take app from production to deployment with the Expo framework.

Python web scraping program used to find thousands of data on Penguin Business books with reviews and ratings on Amazon.

Penguin Business Scraper

Scrapes both Penguin Business and Amazon.

Better understanding of Beautiful Soup library.

Getting right data from Amazon (paperback not kindle etc).

Automatically writing complete data to CSV document.

A property website for unusual places (cabins, lighthouses, chruches, etc.). Used to learn about React global context.

A property website for a variety of interesting structures made in React and build for further understanding of the framework.

Contentful

Visit Special Places

Special Places Properties

Using Contentful for backend (content management platform)

Creating filtering system for the properties

A minimalist website to demonstrate ability in React and also show ecommerce functionality with PayPal.

This site was used to demonstrate ability in React and also for creating a platform in ecommerce, utilizing PayPal for payment options.

Bootstrap

Visit React Ecommerce

React Ecommerce Website

Further understanding of React. (using state and props)

Creating an ecommerce website that utilizes PayPal.

Using alternative deployment platform. (Netlify)

More understanding of core JavaScript functions.

Show how a person uses up their time during the day, learned to play with Vue dynamic CSS and tokens.

A project made to show how we spend our time within 24 hours, used to test dynamic CSS and learn about API authentication.

Heroku

Visit Waste My Time

Waste My Time

Backend authorization with Token authentication.

Creating an autocomplete ability which remembers users entries.

Better understanding of manipulating progress bar.

Storing information via localstorage for user information.

Filtering data on a template, javascript and queryset level.

Mobile-first site for an English teacher in China, made to improve core CSS and Vue.

Since QR codes are heavily used in China, the aim was to create a mobile-centered website for an English teacher to get students.

Visit English Teacher Site

English Teacher Site

Creating a website that people access from a QR code in person.

Creating a website that displays primarily for mobile.

Better understanding of core CSS. (Flexbox, transitions, animations)

Better understanding of Vue. (Emit & Props)

Creating website for two languages. (Chinese/English)

Featured creating an API and then working with a JavaScript framework on the frontend, involving Gundams.

A site returning a list of Gunpla names, prices, release dates and images that helped learn a variety of new abilities.

Bulma

Visit Gunpla Site

Gunpla Site

Webscraping multiple sites to get inital dataset.

Creating an API with Django Rest Framework to access endpoints.

Making GET request calls with Axios library.

Better understanding of the Vue JavaScript framework.

Sorting, searching and filtering arrays of datasets.

A site made for socializing with new people in coffeeshops across the country.

A site to help meet more people face to face across the nation, give those a chance to overcome anxiety, shyness and loneliness.

Visit coffeeMeNow

CoffeeMeNow

Working with an API to collect coffeeshop co-ordinates

Managing and deleting data that can become large

Optimizing data to speed up loading times

Working with time sensitive data, multiple countries & timezones.

User information, editing and deleting profiles

Entering a word returns a video list with links to the sentences it was said.

Returns a list of videos of all the words entered from a YouTube channel. Can be a great tool for making compilation videos.

Video Showing Project

Visit Site

Visit Larger Site

YouTube Channel Wordfinder

Using command line progams to obtain YouTube data

Tested with own (99 videos) and larger channel (466 videos)

Created an animal shelter website also used as a teaching tutorial on YouTube to help others learn Django.

Visit Animal Shelter

Animal Shelter Website

A website for another manufacturing company. Helped to understand a variety of WordPress tools and features.

WordPress

Visit Manufacturing Site

Manufacturing Website

Interactions with customer to meet their needs on a regular basis.

Learning a variety of WordPress plugins (Yoast, Google Analytics).

Better understanding web hosting service (SiteGround).

Better understanding of working with WordPress themes (Divi).

Working with domain settings (CNAME, ALIAS).

A website for a myofascial trigger point device. Helped reinforce understanding of WordPress and creating an ecommerce platform.

This was a WordPress website that was built for a client who needed to sell their new massage product. This was the second practical hands-on project in which I learned and practiced WordPress and also built an ecommerce platform to sell the device.

Visit Trigger Device Site

Trigger Point Device Website

Working with client on needs like FAQ and relevant content

Using web hosting services SiteGround and Go Daddy

Creating an ecommerce platform that uses Stripe for payment

Making changes to files within phpMyAdmin.

A website for a prototyping and manufacturing company. Laid down the fundamentals of understanding WordPress.

This was a WordPress website that was built for a client as a replacement for an obsolete website. This was the first practical hands-on project in which I learned and practiced WordPress.

Visit Prototyping Site

Prototyping Website

Replacing and remodeling existing WordPress with new content

College project involving creating a sci-fi user interface, featuring a selection of animations.

Program has animation and interactivity. The user interface that was created in the form of an old-school, colorful computer terminal.

Java

YouTube Video

SciFi UI Project

Making something visual that can be interacted with

Projects