projects

intro

The gallery below showcases a variety of my website projects. All sites were built from scratch using a variety of coding languages and required frontend development, UI/UX design, graphic design, image sourcing, and copywriting or editing.

01
JavaScript
CSS
HTML

jen-mason-consulting

A custom website for Jen Mason Consulting services. This project required UI & graphic design, coding & development, UX copywriting, hosting/server setup, and was built with HTML5, Bootstrap 4, JS, and the AOS library for scroll animations.

HTML
JavaScript
CSS

surefiresweat

A custom website built for Canadian world-jazz ensemble Surefire Sweat. The project required UI design, graphic design and image sourcing. The site was built with HTML5, CSS3, Bootstrap 4, and Javascript/jQuery.

HTML
JavaScript
SCSS

warren-yen-portfolio

A website build for Toronto UX/UI Designer Warren Yen. This project required the development of a UI and layout provided by the client. Build included the use of parcel bundler, sass, AOS animation, and the SWUP library for page transitions.

HTML
CSS
JavaScript

vena-project

A responsive mockup for Vena Solutions. This project was a one-page website built to detailed specs based on a Figma multi-section layout requiring 3 popup contact forms, a carousel, and the exclusive use of Tailwind CSS. The mockup makes use of the AOS library for scroll animations.

PHP
CSS
JavaScript

jl_swup

Repo for jaxx.io, the product website for Jaxx Liberty, a cryptocurrency wallet app. The site was built from scratch with PHP, Bootstrap 4, atomic css, SWUP.js, and features GSAP timeline animations, custom graphics, & cookie consent widget.

PHP
CSS
SCSS

n2

A website build for N2 Speech Therapy, a Toronto speech and language services provider. The project required UI and graphic design, a clean professional layout, a blog, and ability for the client to update the site. This informed the choice to use a customized Wordpress theme.

PHP
CSS
JavaScript

neil-whitford

A custom website build for Toronto musician Neil Whitford. The project included UI/graphic design, photo sourcing, development, UX copywriting & was built with PHP, Bootstrap 4, SWUP.js, rellax.js, and audio embeds from hearthis.at & soundcloud.

PHP
CSS
HTML

advance-therapy-2.0

A website redesign for Advance Therapy. Project includes unDraw illustrations for relatable visuals, extension of original brand color palette, parsing of copy, addition of subpages, use of the SWUP library, all built with a php SPA-like component architecture.

PHP
CSS
JavaScript

decentral

Repo for the website of blockchain company Decentral Inc., the maker of cryptocurrency wallet apps Jaxx and Jaxx Liberty. The site was built from scratch using PHP and Bootstrap 4, and employs the SWUP library for AJAX page transitions and entrance/exit animations, which gives the site an app-like user experience.

PHP
CSS
JavaScript

jms-wiwp-swup

The official website of Workshops in Wild Places, an international art teaching initiative developed by Canadian artist and educator Janice Mason Steeves. The site was built with HTML5, PHP, CSS3, Bootstrap 4, Javascript, SWUP, and the AOS library for scroll animations.

HTML
JavaScript

kanye_jokes

A simple project displaying rotating Kanye West jokes. Written in vanilla javascript, the app has a simple one page UI built with Bootstrap 5, Animate.css, and svg backgrounds. On button click, the app fetches a new joke from Kanye Rest API.

JavaScript
CSS
SCSS

oakwood-guitar-school

Website build for Oakwood Guitar School. The project required a layout optimized for marketing & sales conversions & an elegant UI design. Built with React, Gatsby, React-bootstrap, React-reveal, and required graphic design & UX copywriting.

JavaScript
HTML
CSS

mm-2

Repo for Mason Media, the web development studio of Andrew Mason. I'm a Toronto frontend developer, graphic designer, and copywriter. This site was built with React, Gatsby, HTML5, SASS/CSS3, React-Bootstrap, Javascript, and React-Reveal. I use the Github GraphQL API to pull repo data as well as the Cloudinary API to source images and image data for my design page.