Daisycake

Daisycake.com

This was the very first website I made. It was for my father's business. They had a static fixed width 900px website which was costly to update. I worked for Daisycake handling the tech stuff but also had the privilege to remake the website.

Daisycake was bought by Kriskadecor, their supplier of the chain which we used to turn into really cool works of art. Many years earlier I made those art pieces by hand in a hot no-air-conditioning warehouse in Phoenix AZ. Unfortunately, Kriskadecor decided to redirect daisycake.com users to their website so you can no longer see it live. But you can see a video of the functionality above.

The website was built with Angular 1.3, Node, MySQL, and hosted on Digital Ocean.

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.