Featured Work

I've developed and contributed to sites and apps for major education, tech, business, and arts organizations including: The Textile Museum of Canada, Ryerson Entrepenur Opportunity Network, Ryerson Image Arts Centers, Staples, New Harvest, Center for Effective Practice, Invatron, Gallery 44, Factor, Downtown Yonge BIA, and Tennis Design. Some of these sites are featured below in chronological order, alongside projects I collaborated on at Bridge and Juno.

  • Bridge Applications App

    React | Redux | Unit & Component Testing | Node | Firebase DB | CID | Team Programming | Continous Integration & Deployment | Semantic UI

    For the final group project for Bridge, I collaborated in a team of four to build a test-driven application in React and Redux that fulfilled requirements posed by a product owner. Requirements included allowing users to create and fill out application forms with different questions types. For the backend, we used Node to get and post data to firebase database. We also used deployment services like Netlify and Heroku for continous deployment of integrated code on Github.

    See LiveSee Backend CodeSee Frontend Code
  • Textile Museum of Canada Exhibition App

    PWA | React | GraphQl | Gatsby | Netlify CMS | Netlify Continous Deployment | SCSS | GSAP | ThreeJS

    This app is currently installed on iPads at the Textile Museum of Canada to pair with the ᖃᓪᓗᓈᖅᑕᐃᑦ ᓯᑯᓯᓛᕐᒥᑦ PRINTED TEXTILES FROM KINNGAIT STUDIOS exhibit. It displays all objects at the exhibit and features hotspots on each object page that users can interact with to open multimedia models with more information. A requirement of the app was for it to provide support for offline experience and bad network connections. For this reason, it is built as a Progressive Web App - it uses a service worker to cache data.

    See Live
  • Micro Test-Driven React-Redux Personal Project

    React | Redux | Jest | Styled Components | Github API | Async/Await

    A personal project that allows you to search a GitHub username and displays that user's information from Github Events API. On change of input, a Redux action is triggered to store the new username state in the redux store, and on submit, a dispatch is triggered to call the Redux thunk. The thunk Async/Await function calls the Github API Events Endpoint to get the information associated with the username. If an invalid username is searched, an action is dispatched, prompting a form error. Otherwise, when user information has been returned with a status of OK, the thunk dispatches two actions: One to hide the form, and another to save the 30 most recent events in an array. I filter through the array twice to display the github username with two lists: the most recent repositories (repos) forked by the username provided and their most recent pull requests. This is a Test Driven Development App. There are tests for all of the components, reducers, and helper functions. It is styled with CSS and Styled-Components

    See LiveSee Github
  • Factor 2019 Annual Report

    JavaScript | HTML5 audio | Django Templating | Slick | Waypoints | CSS Animations | SCSS

    Awarded an honorable mention from Awwwards, this annual report site features a MP3 player that is linked to every song button across different pages on the site. Using HTML5 DOM methods, properties, and events, users can select which songs to play, and automatically play the next consecutive song on the playlist when the current song ends. Whenever a user navigates to an internal page, the page is loaded into a div, so the page does not refresh and the media player continues playing music without interruption. This site also uses slick to achieve an interesting slideshow with refraction and window blinds effects.

    See Live
  • Ryerson Entrepenur Opportunity Network Site

    JavaScript | SCSS | Django Templating | HTML | MailChimp

    This fast website for Ryerson's Employment Opportunity program is created using templates so site managers can easily add and remove components on each page, and edit data using the integrated content management system. It features some fun CSS animations for link hover/focus states.

    See Live
  • New Harvest 2019 Conference Site

    JavaScript | HTML | SCSS | Pure-Grids | Youtube API | GSAP | ScrollMagic

    New Harvest's 2019 conference website is a stunning interactive single page site that includes a parallax animation of the header on scroll, a smooth and unique navigation animation and clever hover/click states to reveal more information of speakers and schedules. The video modal on this site connects to the YouTube API in order to start the video when a user opens the video modal, and pause the video when they close it.

    See Live
  • Invatron Site

    JavaScript | HTML | SCSS | Slick | Datamaps

    A website for an item management software used in grocery stores. Includes an interactive grocery store map where users can click on different aisles to get more information about how the software can provide solutions according to department.

    See Live
  • CEP Clinical Tools and Blog Website

    JavaScript | SCSS | HTML | Django | Slick | Custom CMS

    A clinical tools and blog website for health practitioners in Toronto. This site includes several forms and an events section that links up with a user's Google Calendar and social share links for practitioners to share resources.

    See Live
  • Juno Marvel Comic App

    React Router | AXIOS | Firebase Database & Authentication | Team- Programming

    This React application lets users search for comics from the Marvel API, and login to save any results to their personal collection. I built collaborated with two team members on this app for the final project of the Juno Web Development Bootcamp in Spring 2018.

    See LiveSee Code
  • Juno Accessible Bathroom Locater App

    jQuery | JavaScript | Pair Programming | Google Maps API | Refuge API

    Fetching filtered data from Google Maps and Refuge APIs according to user location and form inputs, this site helps users find wheelchair accessible and gender-neutral washrooms. I collaborated on this app with a classmate for the first JavaScript project at the Juno Web Development Bootcamp in Spring 2017. Although the code is not perfect, I am very proud of the idea and look behind the app. In the future, I would like to refactor this app to include cleaner code, draw from more reliable data and allow for user feedback.

    See LiveSee Code