2015 ECSEC Site Redesign

2015 ECSEC Site Redesign

Front end development and design

Type of work
Front end development and design

Languages and Tech
Jade, Sass, Node, Metalsmith, jQuery

September 2015 - October 2015

Project Link

During last year's fall term, I was commissioned by UW's Society of Petroleum Engineers to produce a website for the 2015 Eastern Canada Student Energy Conference (ECSEC). This was also the first project I undertook as a freelance web developer. High-level responsibilities of the project included communicating design decisions with SPE executive team, implementing the HTML wesbite build, and updating the website to accommodate for content changes.


The website project's primary aim was to inform and promote the conference. Multimedia content pertaining to ECSEC was to be displayed, which included material such as the overview, schedule, speakers, and sponsors. The site also needed to provide a protocol for users to purchase tickets to the event. The specifications of the project was mainly content-based, and there was no need to produce any dynamic functionality.


ECSEC 2015

The 2015 ECSEC project designed as a one-page informational wesbite.

I found design inspirations for this project from the many hackathon one-pagers I run across to on the web (ie. Hack The North, Hack@Brown). Using a single-page design for this project was appropriate for the requirements since the site was to mainly constitute of static media content. Designing the page as a single page also directs the user to view the content from top to bottom, allowing me to flow the conference information in a coherent narrative.

Development with Metalsmith

Since the website was content-heavy and required frequent text/media updates, I searched for a static-site build framework that would allow me to make these content changes in the most efficient manner. Ultimately, I implemented the website using Metalsmith, a Jekyll-like site generator that generates webpages from a set of content data and markup templates. Instead of crafting the raw HTML file to make a content change, I would only need to change the Markdown files associated with the update. This modularizes the project code into its separate components (Markdown files for content, Jade files for templating). Using the generator will also allow SPE UW to easily reuse the custom website template for future conferences, requiring them only to update the Markdown content while the templates remain unchanged. Due to these reasons, implementing the ECSEC site with Metalsmith enhanced the maintainability of the website.