Web Design Projects

Academic CV Website

Source Code on GitHub

Live Web Site

A static web site hand-coded using Bootstrap with custom-compiled SASS. Designed to be highly responsive, where the layout elements rearrange entirely for a mobile layout. Simple templating and SASS-to-static CSS compiling done with Gulp.

Desktop View:

Academic CV web site in full-width desktop view

Responsive Mobile View:

Academic CV web site in responsive mobile view

JavaScript Media Upload and Collaboration

Source Code on GitHub

A group project to learn software engineering concepts and Agile development, this web site was the product of a semester of work between four students. On this project, I acted as scrum master to manage the workload and guide the development milestones, using Trello as a scrum board.

Screenshot of Film Festival Management Web App
Film Festival Management Web App

The project was designed in collaboration with the volunteers running a community film festival. The web app allows films to be uploaded, viewed online by the judging panels, and vote on which films should be included in the festival lineup.

The app was created in JavaScript on Node.js using the Meteor framework, backed by a Mongo NoSQL database. A Continuous Integration pipeline was setup on Travis CI, and builds that were promoted to dev or production were deployed on Heroku. Web design was in a responsive manner backed up by the Bootstrap framework.

Wedding Website and Gift Store

Source Code on GitHub 

Production Server: Wedding of Awesome

Wedding WebsiteThis web site is a PHP-backed place for wedding guests to login (using information on their invitations), get information about the wedding event, and RSVP—telling the bride and groom how many guests will be attending. The couple can log into the site as administrators to input their guest list, creating logins and passwords for all invitations and creating a person entry for each member of an invited party. It supports differentiating between adult guests, children, and infants for planning meals, as well as “+1” guests, where the invited party can fill in a name for their guest. The guest administration section uses jQuery and AJAX to expand to show details of an invited party when requested. Finally, the admin can run reports on the database, showing how many people have RSVP’d, who has not logged in yet, and the headcount total to give their wedding venue, and email those reports at a regular interval.

The second component of this site is an e-commerce store for a “honeyfund” style gift registry. It allows guests choose activities that they would like to gift the bride and groom to do on their honeymoon. Once they’ve added some gifts the their cart, they can checkout and the site generates a PDF certificate to give along with their gift. The site uses Javascript and jQuery to save the cart while the user is logged in without leaving the page.

The graphics design were done by Lindsey Bistline. I did further template modifications to make the CSS responsive and mobile-friendly.

(Source code has been modified from production version to remove login and database info, and is ready to use.)

PowerShell Script to Compile-on-Modify

Source Code on GitHub 

A script, directly modified from this StackOverflow response, to watch a source code folder and then run a compiler on on modified files. To successfully modify this script, I needed to understand the .NET object IO.FileSystemWatcher, PowerShell’s Register-ObjectEvent, and PowerShell’s ScriptBlock concept, which are akin to anonymous functions or closures.

The script is written to compile Sass files for web design, but could work with any language’s command line compiler. The reason needed this script is because the –watch feature of Sass wasn’t behaving properly on Windows 10, and none of the solutions I found fixed the issues, so I scripted a solution to watch it myself. It’s better to create a solution than to give up!

MediaWiki

Screenshot of a wiki hosted on a private server

This was a simple install and configuration of a MediaWiki on my Linux web server. Additionally, I configured a robust, automatic backup using cron to export the MySQL data and files system and archive it.

The wiki’s purpose is to gather information in an organized fashion for a long-running Dungeons & Dragons tabletop role playing game, one of my hobbies.

PHP Content Management System

Source Code on GitHub 

Production Server: Honeymoon of Awesome

Honeymoon WebsiteThis PHP website is a basic Content Management System for a site with a flat page structure. It includes functionality in the CMS to create and edit pages, modify title and URL for each page, rearrange the navigation menu, and delete pages. Database access is implemented using an object-oriented PHP approach, and hides the PDO managed queries inside a Page class. Focus on the creation of the back end of the CMS was for ease of use and basic security. The front end of the page is a hard-coded template I created (based on a previously created design).

Features that I would like to implement are: increase security, drop-in editing of the HTML/CSS template, hierarchical pages, rich text editor, and media/image management.

(Source code has been modified from production version to remove login and database info, and is ready to use.)

WordPress CV and Portfolio

Yup, it’s this website! WordPress installed from source onto my web server, with modified template, and blogging feature used for portfolio. Simple and stable, with robust backup both from a WordPress plugin and from MySQL/tar archives via a cron job.