Daisycake sells beautiful, handmade chain curtains. I modernized the website from a static-PHP-fixed-width-900px layout to a fully responsive single page application. I conceptualized the new design and created the site from back-end to front-end. It's built on Node, Express, and Angular.

The contact form is wired up to the Salesforce API and creates new leads and appointments upon request as well as send emails to the client and customer via Nodemailer.

Here is an example of the responsive behavior.

Interesting details:

• The silver chain background that adorns much of the pages is more complicated than it looks. The majority of it is a repeating SVG background with a transparent fill that weighs in at only 10KB at 30px X 20px. The gray color is a linear gradient background which achieves the faded affect. The staggered bottom was the hardest bit. This is another repeating image in an :after pseudo element, but the hard part was aligning the chain with the dynamic repeat of the other background. It required calculating the size and position of the repeated background in an Angular Controller and then offsetting the top of the chain bottom. It's a subtle affect but pays dividends because it works with any sized content.
• The changing header image is not part of the carousel, it's part of the header. As the carousel changes it updates state which triggers an image update on the header. The images are comprised of a sprite sheet made up of SVGs which keeps it light, and the state change simply moves the background position. The neat part about being a SPA is that the header image is maintained from page to page.
• The color changing chain strand is a single photograph of just one brown chain link. I achieved the different chain colors through photo manipulation in PhotoShop.
• The "Chain Styles" in the specifications page is made up of individual strands. They always stay the exact size and to specification. This also made making it responsive easy because I could just add or remove strands. The blue text that shows the spacing in inches is placed on the screen dynamically so that the vertical lines would be exactly center of the chain strands.
• The thumbnails for the Colors section on the specifications page are made up of CSS gradients. I photographed and color corrected each chain sample for the hover preview and made a gradient representation for each one.
• To prevent spammers from using the site's contact form to send emails, I made a security question that randomly asks a question about the information on the page.