Antoine Roy - WebDev

I was hired by Wespire to rebuild entirely their WordPress Website and implement new marketing tools as Hubspot.

Collaborating with their designers and Customer Success was a great experience, we managed to improve accessibility and performance by more than 50% leading to an increase of 70% new unique visitors and 150% more conversions on the next quarter!

HTML5 – CSS3 – ES6 JavaScript – jQuery – WordPress – Elementor – OceanWp

View Live

Design and Developement

I developed two versions of this App, one for desktop and one for Iphones with React Native

I used React, React Native and Firebase to create this Cat themed app.

I started by creating an API using Node and Axios to manage the interactions with Firebase then I experimented with functions directly into React and kept this option because it is easier to maintain.

The Firebase interface is very easy to use, the most complicated part were the UI animations and the state management. I used framer motion a lot, an especially useful feature is the positionTransition attribute as it allows us to animate the entry of new components into DOM (when you add a friend for example).

It was my most interesting project so far. I also had a lot of fun entirely designing the UI including the SVGs. Some features are still missing (removing or blocking a friend) but i’m pretty happy with the result.

Features : User Authentication – Animations – UseContext State Management – React Router – Framer Motion

HTML5 – CSS3 – ES6 JavaScript – REACT – REACT NATIVE Firebase

View Live – View Code

Design and Developement

Playng with Framer Motion, i designed some SVG in Sketch and had Fun with React and Framer Motion!

Features : Animations – OnClick events – State Management

HTML5 – CSS3 – ES6 JavaScript – REACT

View Live – View Code

Design and Developement

I played a little bit with sketch, JavaScript and CSS to animate some SVGs.

Features : CSS3 path animations – OnClick events

SVG – CSS3 – ES6 JavaScript

View Live – View Code

Design and Developement

A virtual Piano on your keyboard ! Performance is great, i used template litterals in JS and flexbox in the CSS.

Features : Virtual Piano – TouchDown – OnClick events

HTML5 – CSS3 – ES6 JavaScript

View Live – View Code

Tags: Gatsby – React – Portfolio – Contact Form – Sliders – Modal Gallery

Design and Developement

In collaboration with Andrew Borstein, software engineer at Wespire, i was asked to transfer the portfolio of Ian McGillivray from wordpress to a faster more modern solution.

He proposed a JAM-stack implementation and we chose Gatsby mainly because of the documentation.

It was awesome to use GraphQL queries and Gatsby-Image even though the implementation on the wordpress side with wordpress-graphQL and Advanced Custom fields was tricky.
I coupled the SQL wordpress database with GraphQL and created brand new and super simple React components to display the Galleries and the Sliders.
It’s now super fast and accessible, users can also update and publish through the WordPress CMS.

We implemented another version without any CMS, just full markdown.

It uses gatsby-node and createPage( ) to dig into the Slider and Gallery directories of each post and uses the images as gallery or slider elements!

The hosting choice was Netlify because of it’s simplicity and the fact that we could both directly work on the GitHub repository.

The form is powered by Getform due to the static nature of Gatsby.

Features : JAM Stack Website – Form – Gallery -Modal

WordPress/Gatsby

View Live – View Code

Full MarkDown

View Live – View Code