Peter Roche
Portfolio of Student Projects
"Menutopia" is a pure vanilla JavaScript site built using the MVC model in the course of completing Jonas Schmedtmann's "The Complete JavaScript Course 2020: Build Real Projects!" (Where it is called "forkify"). It uses an API to pull recipes from a wide variety of websites, parses the ingredient lists, allows users to track favorite recipes, adjust portions, and add recipe ingredients to their shopping list. (The purpose of the course was to teach JavaScript, not HTML & CSS, so the templates for the HTML and the CSS were mostly provided -- and the site is not responsive).
"Natours" is a fictional nature tours site built in the course of taking Jonas Schemedtmann's tutorial "Node.js, Express, MongoDB & More: The Complete Bootcamp 2020". It uses JavaScript / Node.js / Express / MongoDB / Mongoose for the RESTful API and back end, and Pug templates to render the front end. The site API is used to handle requests from the front-end user (as well as providing access to its data from other sites). It is also organized on the MVC model. It allows users to look at the tours, see embedded maps of tour destinations, read and create reviews of tours, book tours through Stripe credit card processing, etc. The site has multiple security features to protect itself and its users against unverified access and various common attacks. (Note that is may take a few seconds for Render to wake up and render the site).
"Fictional University" is a, well, fictional university site built in WordPress w/ PHP for the Brad Schiff' tutorial "Become a WordPress Developer: Unlocking Power with Code", where visitors can create accounts and log in, view upcoming events and blog posts, create their own blog posts, view programs, professors, and campuses (with Google Maps interface).
"Reactions" is a simple social media site built for Brad Schiff's "React for the Rest of Us" course. It is a single-page app built using modern React features (e.g. hooks) in a Node.js environment. It provides users the ability to log in, create and modify posts, follow other users, search for posts by key words, view their own and others' profiles, and enter the site chat room. The site is reasonably, though not perfectly, responsive.
"uHost" is a sales site for a fictional web hosting service, developed as part of Maximilian Schwarzmüller's CSS - The Complete Guide 2020 (incl. Flexbox, Grid & Sass) course. It is a multi-page website developed using Sass in a Node.js environment. It was created purely to develop skills in using CSS and Sass, using JavaScript only for controlling the DOM, so only has navigational and display functionality.
The sites below are mostly pure HTML/CSS pages that were initially developed for FreeCodeCamp's "Responsive Web Design Certification". Their design is totally my own, within the requirements given for the tasks, and they are all totally responsive.
I've also done a number of other relatively small HTML / CSS / JavaScript apps, mostly from, or extended from, the projects in Brad Traversy's "50 Projects In 50 Days - HTML, CSS & JavaScript" and Andrei Neagoie's "JavaScript Web Projects: 20 Projects to Build Your Portfolio", to implement various website tools, features, API utilizations, and novelties. This page is a collection of live frames (iframes) of the many projects, so may take a few seconds to load. A simpler, but perhaps less entertaining, version can be found here: Miscellaneous Front-End Projects (simple version). Miscellaneous Front-End Projects Load All at Once Version
A multi-media animated birthday card I created for a friend. To get the full effect click anywhere on the background before scrolling down (which will allow audio to play)
A customizable Valentine's Day card using svg and other css animations. Works best in Chrome or Edge browser (the svg animation features are supposed to work in Firefox, but that has not been my experience!). It is best with sound. Once loaded, click on the card to allow sound to play. The card's animations takes a couple of minutes to go through their full cycle.
