Projects and Work
This page is currently evolving
Tiny List - Source
Use: Small and simple list app. Enter item in form and submit. '+' button next to item allows editing. '-' button removes item from list.
Details: Todo app built using create-react-app. Implemented basic functionality with a minimalist style. Main goal to familiarize self with React
Library Catalog - Source
* Initial load may take a few seconds as the host dyno spins up
Use: CRUD application allowing search and curation of a library catalog. Home page gives count of database collections. Authors, Books, Genres, and individual Instances of books are searchable, updateable, and deletable.
Details: Based on the MDN Express tutorial, this project focuses on understanding Express setup, routing, and handling client requests for all CRUD functionality. It uses the MVC structure and renders views with the Handlebars template engine. Mongoose is used to manage a MongoDB Atlas hosted database for persistent storage.
Build Tools: Express, Mongoose, MongoDB, Handlebars, Bootstrap 4
Boxman Adventure Travel - Source
Use: Static travel agency page built as a birthday present for my father-in-law. The intention was to act as a travel agency for him and suggest trips that we would facilitate. Light JS at bottom of page for interaction and choices.
Details: An older project that I am proud of how it turned out, this was a pure implementation and practice build using fundamental tools to solidify understanding. It is not DRY in any way with everything being hard coded. It took far longer to complete than was reasonably necessary, but it was an excellent experience for solidifying understanding of fundamental concepts and in understanding why the modern tools like templates and frameworks are so helpful and necessary. It's often easy to take modern build tools for granted or not understand why they are needed and this shed some light on the 'why'.
Rock, Paper, Scissors - Source
Use: Click image of desired choice to play. The computer will also make a choice once you begin. The game ends at 5 points. Ties award 0 points. A new game begins on page refresh or with clicking the reset button.
Details: Javascript learning project. Focused on buiding game logic and using DOM manipulation to display changes and results. Early use of transitions in CSS to smooth out page interactions.
Yelp Camp - Source
* Initial load may take a few seconds as the host dyno spins up
Use: Campground 'Yelp' page for building, reviewing, and commenting on campgrounds. All pages and comments are viewable without logging in. To create, edit, or delete a campground or add a comment an account must be made and the user logged in. No personal data is required or kept with signup and passwords are stored appropriately. CRUD functionality for the campground is limited to the author while all users can comment.
Details: The first large scale project completed in my web development learning. It is based on the Colt Steele Web Developer Bootcamp final project. It was the first time I had handled all of the backend and deployment pieces together and was wonderfully challenging. Using Express, Passport, and EJS for views and logic and hooking up to MongoDB Atlas and configuring Heroku for deployment was like magic. At the time I was able to get the 'what' but not always the 'why'. While the site lacks some polish it works well and was an immensely useful build-through for concepts and exposure.
Build Tools: Express, Passport, Mongoose, MongoDB, EJS, Bootstrap 3
Calculator - Source
Use: Simple calculator app capable of basic arithmetic. Numbers and buttons can be clicked or typed. Can handle numbers up to 23 digits but will not show exponents.
Details: Calculator implemented with vanilla JS. Intentionally built as a more robust implementation to handle many common issues around negatives, rounding, and order of operations as well as implemented keyboard inputs
Etch-a-Sketch - Source
Use: Select 'New Grid' and type in the desired size. Mousing over a grid tile will change it to the currently selected color. 'Default' is a teal color with 'Silver' and 'Random' being self-explanatory. 'Lighten' and 'Darken' increase or decrease the opacity respectively by 10% on each mouseover. Note: This project is significantly more fluid and responsive with browser hardware acceleration turned on.
Details: Resizable digital Etch-a-Sketch with color options. Constructed with JS and implemented through direct DOM manipulation. Designed to practice using JS to manipulate the DOM and using functions to control flow along with basic state management.
Tic-Tac-Toe - Source
Use: X's start game and alternate with O's. Inputs will stop once on player has won. Refresh page to reset game.
Details: Tic-tac-toe implemented with vanilla JS. Minimal styling and in need of quality of life improvements like reset button, turn indicator, win announcement, and styling.
CSS Animation - Source
Use: No interaction. Purely a design and styling project.
Details: Practical application of CSS positioning and animation. Project is a moving set of eyes that look back and forth utilizing keyframes. It was built as a personal project to solidify understanding of animation and general CSS after completing a CSS section.
Google Homepage Copy - Source
Use: No interaction
Details: HTML and CSS project to visually recreate google homepage.
Flexbox - Source
Use: No interaction
Details: Personal practice utilizing flexbox. Build visualization of flex attributes for improved understanding.
FCC Projects - Source
Use: Individual live links redirect to the projects.
Details: A collection of Free Code Camp projects that were rebuilt to solidify understanding. Attempted to use the FCC material only to guide projects' directions but perform the builds from memory and use online resources/documentation when necessary. Excellent experience reworking a walk-through from memory.
Build Tools: HTML, CSS, JS, DOM Manipulation, Forms
Accessibility - Source
Use: Page designed with accessibility in mind with semantic elements, appropriate attributes, and focus ability on the form at the bottom of the page.
Details: Personal project putting accessibility learning into practice.
Basic Form Validation - Source
Use: Basic form for inputting name, email, telephone, and message. The fields have a red background when invalid and turn green when input data is valid. Telephone has regex validation requiring area code, dashes, and no parenthesis
Details: Browser based form validation utilizing required attributes and constraints. Visually obvious passing of constraints using CSS.