MCTC Evolve

Evolve is the portfolio show for MCTC Design students graduating in the spring of 2015. As a member of the web team I led the devlopment of the website, both on the front-end and back-end. A highly customized WordPress site was created to efficiently gather information from all of the students.

visit site

MCTC Evolve Site

The challenge with this project was how to get information and images from all 49 of the graduating students. Using my familiarity with WordPress I quickly created user accounts for all students, created a custom post for each of them, and minimized the admin panel to avoid confusion.

Evolve Admin Panel

This was acheived using Adminimize, as well as extensive custom php in the functions file. Each individual post then had custom fields applied to it, with character limits and image size restrictions.

Evolve Admin Panel

All of this was done as the design for the site was still in its early stages. The design process was a collaboration, but the majority of the work was done by the extremely talented Melanie Rodriguez. As her designs reached a more refined stage I began front-end development on the site. The Foundation framework was used as a starting point for the CSS.

The front page was designed as a one-page scroll. I used fullPage.js for that functionality.

On the creatives page, hover effects are color-coded with the student's major. This is acheived by using CSS blend modes to produce a duotone-type effect. Browser support is lacking for Internet Explorer, so there is an IE-specific stylesheet that uses opacity to create a similar effect.

The sorting feature works without any JavaScript by using a clever technique that has each label corresponding to a radio button. Then the visibility of the images is controlled by using the checked pseduo-class selector combined with the general sibling selector. JavaScript is used to progressively enhance the site by changing the fill color of the svgs in the header.

Evolve Creatives Page

For the individual creatives page I used slick for the slider to display portfolio pieces. I utilized the Vimeo API to decode JSON data and display videos and thumbnail images.

Evolve Creative Page

More Projects