clongb

Christopher Bao

clongb@udel.edu

About Me | Top 10 Funniest Dogs | Tic tac toe | Greeter | CPS counter/aim trainer

Welcome to my portfolio!

Source code

Descriptions of each item

Changelog:

Week 1:

• Added changelog and TODO using an unordered list in HTML.
• Finished basic HTML tutorials from web fundamentals.
• Created an About Me page heavily based on the concepts of basic HTML taught by webfundamentals tutorials, as well as more semi-advanced features like embeds. (Source code) (Description)
• Started using git for version control and getting used to basic commands
• Completed HTML Dog's Basic and Intermediate CSS tutorials
• Added CSS elements to About Me
• Finished W3Schools' Bootstrap tutorial
• Created a website based on Bootstrap on the top 10 funniest dogs ever. Utilizes unique bootstrap elements like blockquotes in tandem with basic HTML and CSS

Week 2:

• Cloned website repository on VSCode, started commiting, adding, pushing, and pulling everything through there. (All commits, non-verified are from git)
• Added a react based website through this tutorial (Source code)
• Finished reactjs tutorial on react, tic tac toe game based on this tutorial here

Week 3:

• Made a greeter based on this typescript tutorial. Added functionality where you can enter your own name instead of the default example, with help from this video.
• Added the CPS counter website, initially based on this hooks tutorial. Currently WIP while slowly adding timer functionality based on this tutorial. (Source code)

Week 4:

• Finished the CPS counter with bootstrap implementation of buttons, a table as a local leaderboard, and a modal that pops up when the timer is finished. Leaderboard automatically sorts the best runs, shows the CPS in the modal where you can enter your name and on the main page, timer starts through a button press and stops at 0, and all of this happens through each of their own components based heavily on Dr. Bart's TA trainer.

TODO:

Week 1:

• Look at Advanced CSS tutorials from HTML Dog
• Edit homepage CSS/Incorporate react
• Complete Typescript + react tutorials (+hooks)
• Complete Javascript tutorials
• Become more familiar with more advanced git commands/GUIs
• Add project board

Week 2:

• Look at this more in-depth typescript tutorial series
• Make a CPS counter site (or some better idea), incorporating typescript/react
• Complete tutorials on Hooks
• Add react to homepage and maybe top 10 dogs
• Add project board

Week 3:

• Watch Dr. Bart's TA Trainer walkthrough and follow along with what he does, making additions and improvements to the site
• Finish typescript tutorial series from Week 2
• Create the CPS (Clicks Per Second) counter site, making use of typescript buttons for the thing you click fast with possibly a local leaderboard and other added features including different timers for the specific time interval the user wants to click in.
• Turn the counter into something like an aim trainer in the future using similar react principles to tic tac toe so that the game is more challenging and you have to click in more than one spot.
• Add more advanced/clean CSS to Greeter
• Add project board (one day)