Notable: This is a static website developed with Jekyll and managed with SiteLeaf.

It contains custom content like testimonials, case studies, features, faqs, a searchable blog, and a buy now page for online purchases.

Notable pages: Availability, Floor Plans, and Penthouses
These pages feature sliding panels that reveal the results of selections made by the user.

The challenge
Allowing the user the ability to narrow the results of multiple options down to only those that interest them and to present that information in a pleasing manner while also helping them keep their bearings while the information is being displayed or hidden on the page.

The solution
Use jQuery to listen for onChange and click events as the user interacts with the select boxes and buttons on the page. The script is designed to add or remove classes on the different content areas whenever the user interact with the controls and then CSS transitions are tasked to perform the smooth animations depending on the addition or removal of a particular class.

If new content is being displayed because of an action the user took, javascript is invoked to scroll the page with the new content into view for the user.

jQuery is also being used to set the height of the content containers to the height of the taller of the two because the containers are absolutely positioned so that they slide over each other without causing a jarring page re-layout when they are opened or closed.

Notable page: Leadership Team*
This page features the images and bio’s for each of the listed team members which are placed into three different categories.

The menu
The menu above the image gallery allows the user to filter each category and is indicated as active by the arrow below the category name.

The designer included icons to the filters that display below each category which consume a lot of the screen real estate. I implemented a fixed, collapsible menu when the page is scrolled to a certain position to minimize the height of the menu. The menu is always available to the user while scrolling down the page and the page smoothly scrolls back up to the beginning if they click on a category.

The images
The images scale fluidly as the view port is narrowed or widened and get set to a fixed width when the view port gets to a specified width. A generic image is automatically inserted if an image isn’t selected when the team member is added.

The bios
The bios are hidden until an image is clicked and then that persons bio slides in from the right of the gallery and is positioned on top of the row containing the image. The bio can be dismissed by clicking on the familiar X icon, clicking another image or pressing the escape key.

The CMS
Adding or editing a team member is made very user friendly by using custom fields that allow the user to select the category for the member as well as ordering of each member. They also have a basic WYSIWYG editor for entering the bio text.

*This site is currently under development.

Notable: Global
The navigation menu is hidden until the familiar hamburger icon is clicked which causes the menu to slide down from the top while the content 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 filtering and image animation is powered by isotope.js.

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 page: Home Page Animation
This page includes an animation of the client’s logo that is controlled with gsap.js which makes animation design much simpler than the other methods we’re used to using.

The logo is a SVG and each section of the logo can be controlled and animated independently of the other in a very intuitive way. The three levels are drawn and a fill is added as they “rise” into position followed by the two text elements y-axis animations.

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.

Viewing the Menus
This site is all about the menus with links in the navigation bar at the top of each page as well as the huge thumbnail links on the home page. Clicking any one of these links will result in a curtain animation filling the height and width of the view port and the menu elements and controls animating into place immediately afterwards.

The Media page
This is the gallery page. The images can be filtered into 3 different categories by clicking one of the links at the top of the gallery. Doing so causes the images to animate into place or off of the page. This page is powered by isotope.js and I use images loaded.js to prevent the page from rendering before all of the images have been downloaded from the server.

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.