/mo-portfolio

My portfolio of some of my web development projects that I built from scratch.

Primary LanguageJavaScript

stokeddev.com

Introduction

My website https://www.stokeddev.com , which this repository belongs to, is a result of my 4000+ hours studying and practicing front end engineering from the beginning of my developer journey in September of 2020. I thoughtfully wrote every line of frontend code that makes up this website with HTML, CSS, and JS.

Projects

Documentation Page, Product Landing Page, My Survey Form, My Tribute Page, "Fun Money" calculator, My Blackjack Game, and My Dice Game were all designed by me to be fully responsive to all devices. All hamburger icon mobile menu popup toggle HTML, CSS, and JS that appears in some of my projects is my own original code that I came up with.

1. My Snake Game

https://stokeddev.com/projects/snake-game

I started this project while working my way through the Scrimba Frontend Developer Career Path as it was an assignment. I got good practice problem solving while dynamically controlling HTML with JS and CSS. I wrote all the HTML, CSS, and JS for this game thoughtfully line by line. I chose all the styles and colors myself. This game is now playable on mobile as I have created a mobile controller for it which is also toggleable on viewports wider than 1024px. I'm especially proud of how I coded a recursive function containing a setTimeout to animate the game with a dynamic interval while also using recursion to keep the apple off the snake. One of my biggest challenges that I overcame in developing this app was harmonizing the relationship between play/pause click/keydown event listeners.

2. My Survey Form

https://stokeddev.com/projects/survey

This is based on one of the freeCodeCamp projects that I built in order to get my Responsive Web Design certification. I built it with HTML, CSS, and JS. It taught me the advanced HTML5 skill of building forms for user input with validation.

3. fCC JS Cert Repo

https://github.com/stokedDev/freeCodeCampJSProjects

The projects are Caesar's Cipher, Palindrome Checker, Cash Register, Roman Numeral Converter, and Telephone Number Validator. By remembering what I learned from the freeCodeCamp JavaScript Algorithms and Data Structures curriculum and using resources from across the web I completed these challenges which allowed me to earn my certification.

4. Documentation Page

https://stokeddev.com/projects/tech-doc

This is based on one of the freeCodeCamp projects that I needed to complete in order to get my Responsive Web Design certification. This is my JavaScript Documentation Page that I created with HTML, CSS, and JS. Instead of just copying and pasting someone elses documentation and giving them credit for it, like freeCodeCamp themselves did in their example for this finished project, I took a different route. I used my current knowledge and understanding of JS to create my own text to work with so that I could write HTML, CSS, and JS to make a beautiful webpage to present a sample of my frontend engineering skills.

5. Product Landing Page

https://stokeddev.com/projects/product-landing

This is based on one of the freeCodeCamp projects that I built in order to get my Responsive Web Design certification. I built it with HTML, CSS, and JS. It is for a company I made up that manufactures wave pools for surfing.

6. JS Count Speed Tester

https://stokeddev.com/projects/my-worker-example

While working through a lesson part of the MDN Learn Web Dev course I built this web worker powered counting app. It shows how fast JavaScript can count on your device. It uses a dedicated web worker thread to free up the main thread to remain responsive to the user. I included a textarea element to demonstrate that it along with the entire UI remains responsive regardless of what number the app counts to.

7. "Fun Money" Calculator

https://stokeddev.com/projects/funmoneyapp

This is one of my first ever frontend projects which I originally set up hosting for with firebase and my domain at the time funmoney.app . After constantly and tediously using a regular calculator to see how I felt about how much I would have left over from different salaries, I decided to put my coding skills to work. So with this project I automated and simplified the calculation process for others and myself. This project is an example of me taking HTML form data and processing it with JS to return a result to the user which solves their problem. The freeCodeCamp community was really helpful for me as I reached out to them for guidance during this project. One way they helped was suggesting a way to convert the processed data to US dollar format. I built this with HTML, CSS, and JS.

8. My Blackjack Game

https://stokeddev.com/projects/blackjack-game

I started this project while working my way through the Scrimba Frontend Developer Career Path as it was an assignment. I got good practice dynamically controlling HTML with JS. To start the game, click the "(re)start" button and if you don't win or lose right away keep grabbing new cards with the "new card" button until you win or lose. Then click "(re)start" to restart the game if you want. I wrote all the HTML, CSS, and JS for this game thoughtfully line by line.

9. My Dice Game

https://stokeddev.com/projects/dice-game

I started this project while working my way through the Scrimba Frontend Developer Career Path as it was an assignment. I got good practice dynamically controlling HTML with JS and CSS. I programmed CSS animations to happen in response to things like clicks and when someone wins. I wrote all the HTML, CSS, and JS for this game thoughtfully line by line. I chose all the styles and colors myself.

10. My First Surf Game

https://stokeddev.com/projects/surf-game

This game is now playable on all devices. To move, use the keyboard directional keys on devices other than mobile, or the on-screen buttons on mobile.

I took some concepts I learned from building my HTML5 snake game and adapted them to make this project. Creating a surfing game was one of my motivations to learn to code so I'm happy to have finally done it. To make the game fit better on smaller screens I divided the new grid CSS class width and height number by the old one to get the percent to reduce game element sizes while keeping their original dimensions. I built this using HTML, CSS, and JS.