Ramkumar Shankar


Code on Canvas

A new foundation for the Code on Canvas website.

Role Lead Developer
Delivery Static front-end website, GraphQL based CMS using DatoCMS
Period March 2019 — April 2019


The Code on Canvas website required a redesign from an aesthetic and functional standpoint, in order to clearly communicate the work we did.

The company was growing and we we were looking for better ways to showase our work to external clients. This included information such as client lists, project categories, as well as functionallity to allow visitors to quickly filter and navigate a growing project list.

Code on Canvas website - screenshot

A new website for the future

The founders had a clear understanding of the nature of projects external clients were inquiring about, as well as the kind of work they wanted to focus going forward. We also did an inventory of all our past projects, and brainstormed how best to present them to website visitors. The outcome of this exercise was a preliminary data structure for the CMS and a navigation system for the site.

The existing website was built on Wordpress, and the blog post based format was increasingly limiting how projects could be presented on the site. The new project pages would be highly templated and designed, and we required a CMS that could support these presentation requirements while exposing an easy to use editing interface for content creators.

Performance was another key priority. The time-to-interactive on the existing site was very high. The new website had to be performant and robust.

Code on Canvas website - all projects page

Technical Details

After a period of technical evaluation, I settled on DatoCMS for the content management system. GraphQL provides a lot of flexibility in how data is presented on the front-end, which was implemented in Vue using Nuxt.js. The final website is deployed as a static build on Netlify.