In 2021 I designed and coded a web gallery to share our wedding photos with our family and friends.

To make viewing the gallery easier on all devices-a full desktop, laptop, tablet, and mobile device-multiple media breakpoints were added into the CSS.

In order to showcase Redondo Beach, the wedding location, and the naturally calming ambiance that it brings, the original wedding video was modified in Adobe After Effects. The looping footage for the Home Page background on the desktop view was created by stitching short clips of the beach and reception details. Tranquility felt essential to implement into the Home Page allowing the viewer prepare to casually browse through the contents.

The movement in the background video did not translate well on mobile devices because of loading time. Utilizing the established breakpoints in the CSS, the viewport would switch the background content from the video on the desktop design to an engagement photo on a tablet or mobile device. Below shows an example of what it looks like when the browser has a limited number of pixels conforming to the breakpoint.

To experience the events of the wedding, the Landing Page navigates viewers to our wedding video and galleries of our small ceremony on the beach, the reception, and the candid moments of our reception photo booth. In the mobile design, the title of each gallery is shown in an overlay above each photo. The desktop design, each title overlay is hidden until the mouse hovers over each gallery photo.

The headlines for both the Home Page and Landing Page are vector files to maintain quality. The titles "Leah & Sean Hidalgo" and "Choose a Gallery" were both created in Adobe Illustrator.

Selecting the Wedding Video on the Landing Page prompts a video player on the same page. This Bootstrap Modal was implemented in the HTML page to make possible; it was edited to the viewing needs.

CSS and Javascript of Lightbox By Lokesh Dhakar was implemented to seamlessly view the photos. Of course, the CSS was customized to fit the design needs of the website seen in the below photos.

Lightbox uses two different photos for its function: a thumbnail photo and the actual photo. Because this doubled the amount of photos used in the site, the loading time of each page also doubled. By adding a "lazy load" script into the HTML, it accelerated the page load.

Lazy loading means that the photo would first have a small place-holder image that switched to the real thumbnail image being used as the loading progressed. It would also only load images that sat within the browser limitations, meaning whatever photos are not shown in the browser when opened do not load the real thumbnail images. Only scrolling down the page would prompt the lazy load for the remainder of the images.

Catering to a quick page load, all images were edited using Adobe Photoshop. First I batch-resized all the images to have a 72ppi resolution for screens. Then each photo was cropped into square images as the Lightbox thumbnail. Last, each was scaled smaller and given a blurry effect for the lazy load placeholder/preview image.

On the footer of each page excluding the Home Page there are links accessing services and vendors that were part of our wedding as well as our wedding Instagram account where we streamed the ceremony live for those unable to attend.

Please feel free to checkout hidalgo2k19.com to see the live work!

This brand board showcases the style and mood I chose to implement for my wedding. It is based on a floral color scheme of pinks and greens atop a white foundation with accents of gold for items used during the reception. The mood is intentionally casual, laid-back with a hint of exciting luxury.