Realising Five Pines Part 3: Making the Website

Hello, and welcome back. Last time, we looked at how I designed the logo for Five Pines. This time, we’re continuing with the creation of the website. The layout wasn’t completely satisfactory, and the wording could use some changes.

I spoke with the client to discuss our current progress, and they reflected on the website. They had some feedback, and some adjustments were made.

• “Design & Business Solutions” was changed to “Design & Make
• “Who We Are” was changed to “About”
• Hero logo made smaller, in line with the title versus a background element

Some of the changes made to the Hero section

I then went through several changes to the “about” section. Before, it was quite empty.

Various changes that the “About” section went through.

These were some better looking results. The final one above looked nice, and so that took place of the old design.

While browsing the internet, various websites and concepts that I stumbled across gave me some ideas for a better “Our Work” section, which was showing it’s age (at this point, of about a week). The overall brad wasn’t leaning too heavily into the “Melted” theme as I thought it may have, and so there wasn’t any need to stick with it.

Ooh, images! The panel to the left is being hovered to reveal more information about the work item in question.

The client was on board with this change. However, now the “About” section was the only place the old icon art style was shown. It was beginning to look out of place, so I decided to replace the icons with something more stylistically in line with the new “About” section.

The icons have been replaced by some very beautiful images.

The client vastly preferred the design on the right — as did I. With these changes, the initial design was reaching completion.

Now it was time to actually create the website! Using Webstorm (My IDE of choice), I created a new typescript React project. While React’s full potential is unlocked when creating interactive and deep web applications, it is the web framework I have the most experience & comfort with.

Once the basic project was setup, creating the title section was simple, as that consisted of just two SVGs.

Beautiful

I then went about completing the layout for the rest of the page. This was quick to implement as it was simple layout, and I threw in some mobile formatting for the sections that didn’t translate super well. After completing this, I realised that I hadn’t yet designed a replacement for the “Our Work” details page.

This was the design that I came up with, showcasing the full page, and what the page would look like with the navigation bar.

Initially, this was controlled with React Context.

The images used are slightly different, and the hover effect isn’t fully implemented yet, but you can see the overlay working.

Using this context, I provided the overlay component with two values — the work to be displayed, and whether or not the overlay was actually shown. For the hovering effect of the squares, I used onMouseEnter , onMouseLeave and useState() to record whether or not the picture background should be enlarged using transform: Scale(); .

At the moment, the ugly non-animated transition looked like this:

Uses a ternary operator to either return the overlay component, or null.

Where shown is a boolean representing whether or not the overlay should be visible.

For improvements to the animation, we need to grab a package.

yarn add react-transition-group
yarn add @types/react-transition-group

React Transition Group is a useful package for creating transitions. It adds transition classes to elements so you can access them and affect how they enter and exit the web page.

First, let’s wrap what we had before in a <CSSTransition/> component. We can remove the condition now, as React Transition Group will handle that for us. It looks like this:

This means that

• Whether or not the component is “in” is determined by the variable shown
• The duration of the animation is 200 (i.e after shown becomes false, the components will become “out” after 200ms)
• During the transitions, the children will be given the classes of workTransition-*

What does that last point mean? Well, at the various points during the entering and exiting process, classes are supplied.

• *-enter is the starting point of the entrance animation
• *-enter-active is the ending point of the entrance animation
• *-exit is the starting point of the exit animation
• *-exit-active is the ending point of the exit animation

Now at first we just had this:

Looks like we forgot about something!

This is because currently, regardless of the stage of transition, the element is still shown. By adding unmountOnExit , we make it so the overlay isn’t mounted whenever it is “out”.

Let’s implement some actual transitions.

And just like that, our overlay looks much nicer.

See! Looks much better! I tweaked the animation until I found something that was more snappy and responsive.

the A snappier animation, and further showcasing of the hover animations.

Today we’ve finished the designs for the website, created a basic project in React and begun with the first interesting bits of code. Next time, we’ll finish off the overlay designs and make improvements to the general appearance of the website