As the primary full stack developer, I built the backend of the single-page microsite for OneLaJollaCenter.com from scratch using the Umbraco 7 CMS and ASP.NET MVC, and the frontend using JavaScript/jQuery and CSS3/Bootstrap 3. The entire site was built in a fully composable way that will allow Irvine Company to reuse this page for a number of other potential offices in the future. Notable aspects of the build:

Used Archetype to specify all of the elements on the page. Everything, from the images and colors, to the text and videos, is entered into the CMS, and so everything is completely swappable and customizable. Components of the page can even be reorganized and replicated for arbitrarily immersive layouts.
Used Node.js, NPM, and Grunt to handle the compiling/combining/minifying/modifying of the JavaScript and Sass CSS.
The main image is responsive and changes depending on the time of day or night (to show how the office looks at that time).
The form is rendered using Contour, and so can be customized by content editors. Also allows for custom workflows (e.g., sending emails on receipt of submissions).
Every element on the page is fully responsive, and so looks good on every device, from smartphones to large desktops.
Open sourced a reusable carousel (based on jQuery Cycle2) for use by myself and other developers on later projects.
Extended Contour with custom field type to facilitate labels (in this case, a disclaimer) within the form.
Components of this single-page microsite were architected for reuse later across a larger project.

One La Jolla Landing Image

The main image you see when you land on OneLaJollaCenter.com. Changes based on time of day, and features both a call to action that initiates an automatic scroll and a button that launches a Vimeo video in a lightbox.

One La Jolla Image Spread

An "image spread" is a series of images laid out next to each other. They shrink to fit the window. Notice also the headers and rich text areas in a single white color section. All of these components can be created in any order in the CMS.

One La Jolla Contact Form

Built in Contour. Fully customizable by a non-technical user. The disclaimer is a custom field type I called "Basic Label".

Notice also that the header color is different than the other headers; this is because headers can be configured to have a different color so they look good on any background image or color.

One La Jolla Image Gallery

A carousel of images with captions overlaid. Changes size on mobile and scrolls when swiped.

1 2 3 4

Irvine Offices