React Projects
Quotify
Click the image to see the live site!
An app built using React to browse various quotes called from an API and select and store your favorites. It also features a dropdown menu that allows you to sort quotes by category and multiple conditionally rendered messages across the page.
Skills: ES6, JSX, Array & object destructuring, conditional rendering, useEffect and useState hooks
Griddle and Github Grill
Click the image to see the live site!
This app was created for Chingu Voyage 50 through collaboration with my Voyage team. It is a simulated restaurant webpage taking data from a menu JSON and displaying various food items. Users are able to add these items to a cart, select and edit their credit amount, and checkout their cart in order to make a "purchase".
Skills: ES6, JSX, React Router, Vite, Managing data flow, Scrum, Agile Development
Name Tag Generator
Click the image to see the live site!
A name tag generation app built using React. Key features are the ability to create new name tags using stateful components, change events, and click events. The latest version makes use of lifecycle methods to save the nametags using local storage.
Skills: ES6, JSX, Managing data flow
Sticky Note App
Click the image to see the live site!
An app built using React to add, remove, and edit sticky notes while taking advantage of the browser's local storage to save the notes. Built as a greenfield project, this app displays the use of managed component trees, data flow, and interactivity through the development process from the ground up. The interactivity of the add, removal, and editing showcases the use of various event listeners passing props between modules to achieve their functionality.
Skills: ES6, JSX, Managing data flow, Manipulating the DOM
JavaScript Projects
GitHub Repo Gallery
Click the image to see the live site!
A webpage built using HTML5, CSS3, and JavaScript accessing the GitHub REST API in order to cleanly display all of my repos hosted on GitHub in one searchable location. Clicking on each repo name will display the repo's details including the description, languages used, and a link to the repository itself.
Skills: Manipulating the DOM, APIs, Vanilla JavaScript
Guess the Word Game
Click the image to see the live site!
A web app built using HTML5, CSS3, JavaScript, and an API to source random words. In this game players guess the word by entering one letter at a time. If the player guesses all the letters correctly before they use up their allotted guesses, they win!
Skills: Manipulating the DOM, Vanilla JavaScript
HTML/CSS Projects
Rogue Pickings
Click the image to see the live site!
A sample webpage built for a fictional food delivery truck. This page uses responsive design elements allowing it to be optimally viewed across all devices and screen sizes.
Skills: CSS3, Flexbox, HTML5, Media Queries, Responsive Typography
Unplugged
Click the image to see the live site!
A sample multipage website built for a fictional company retreat service. This website features responsive design allowing it to be viewd optimally across all devices and screen sizes. Additional features include the use of icon fonts through Font Awesome and an embedded map using iFrames.
Skills: CSS3, Flexbox, HTML5, Media Queries, Responsive Typography