This is a static website developed with Jekyll and managed with SiteLeaf. It allows us to use custom content like case studies, features, and a blog as well as reusable content like the row of phones which is used on two different pages.

This site was built with React and was styled almost entirely with styled-components.

This site was built with React and was styled with Sass and styled-components.

I chose to use Foundation for Emails as a build system for all of the company’s emails.

This allowed us to take control over all of the emails scattered across multiple systems which made it possible for us to standardize the code and the branding.

Having this build system also makes creating and editing emails dead-simple and the code has been proven to render well across email clients.

This is my first dive into SwiftUI and is still an incomplete project. All of the content is hard-coded and not all of the buttons are functional but I thought it had enough functionality to show SwiftUI’s capabilities.

I included custom colors with dark mode options as well as custom symbols.

Notable: Global
The navigation menu is hidden until the familiar hamburger icon is clicked which causes the menu to slide down from the top and the close button animates into position.

Notable page: Home Page
There is text that animates in and out on the users first visit only. I’ve utilized a cookie to determine whether or not this is their first visit.

Notable page: Development Gallery
This page features the company’s developments which are placed into three different categories.

The category filters
The three buttons above the gallery allow the user to view the developments for each category and is indicated as active by the color fill of the button.

The images
The images fit three across for each row and scale fluidly as the view port is narrowed or widened. I’ve included hover effects to indicate the active link.

The development descriptions
The descriptions are powered by swiper.js and is activated as a full-screen overlay when a gallery image is clicked. The two panels, content, and the slide controls animate into view and the user can view additional developments without having to exit the overlay.

The CMS
Adding or editing a development is made very user friendly by using custom fields that allow the user to select the category and ordering for each development as well as clearly indicating the information needed for each field.

Notable section: Featured Projects
This section of the site is dedicated to the company’s project portfolios which are split into 8 different categories. The category list is actually a menu which links to that categories project page.

The project pages
Upon page load, the project menu is displayed as a grid of thumbnail images representing each project for that category. Clicking a thumbnail adds a white border around the thumbnail and causes the menu and grid to retract and the project group that was selected to slide into view. The project may have a testimony displayed and clicking the arrow causes the testimonial to animate out of the view port.

Each project is powered by an image slider with both previous/next controls and image indicators as well as controls to view the previous/next project and a button to show/hide the thumbnail grid of projects. A search form is also included for those who want to quickly find a project but may not know how it’s categorized.

Essentially, the individual projects are sliders nested within the category slider with the thumbnail images acting as pagers for each project – inception.

The CMS
Adding or editing a project is made very user friendly by using custom fields that allow the user to select the category and ordering for each project as well as clearly indicating the information needed for each field.

The animations
The animations are achieved by using jQuery to add or remove classes to the pages elements and allowing CSS3 transitions to move objects around the page.