{"html":"

One n Done

View Live Site
\"NRJohnson

I started a small web development company to manage in my spare time. This is the webpage I created for it.

Features

For a few years now, in preparation for launching my business, I have been working on a modular back-end system in Node.js that would allow me to quickly create a place for my clients to update the content on their webpages. This webpage uses that system.

The page is full of small, fun animations, each one was individually created. They all run through CSS but Javascript is used to trigger them through class changes.

One thing I wanted to do was have part of the page scroll sideways when you reach it. This is done on the home page. I did this by creating an element that was as tall as it needed to be with the \"scrolling\" content sitting on top of it. The content is laid out horizontally and overflows passed the page. As you scroll the content is moved at the same rate you scroll. The effect is fun and breaks up the flow of the webpage.

When submitting the consultation request, the data on the submission is email and saved to a back-end page where the admin (myself) can view the request and respond to it.

Challenges

To complete this project I needed to extensively edit several SVG files. All the one's I purchased had different color schemes and backgrounds then what I needed for the site. I also needed to separate out the pieces to make the animations function properly.

The main challenge with this page was really the animations. They are all unique and required individual tweaking. Most run on the same trigger, when scrolled to a class is added that has a different state with transition timing set. This allows for repeat triggering by scrolling up the page then back down again.


All code is my own. The page is a Node.js Application with Pug. The page leverages Bootstrap, but all other CSS and Javascript was coded by me.

"}