Mad About Montgomery: A Special Wedding Website for Our Big Day

When it came time to plan for our wedding, I wanted to create something unique and memorable for our guests. Enter Mad About Montgomery, our wedding website. The goal of this site was simple: provide all the essential details for our guests, showcase our wedding party and vendors, and create a fun, interactive experience leading up to the big day.

Project Overview

The Mad About Montgomery website was designed to display all the important information about our wedding—venue details, schedule, registry links, and more. It also featured sections dedicated to our wedding party and the talented vendors who helped make our day special. Although the website itself was fairly basic in structure, I wanted to add a few fun interactive elements to make the site more engaging for our guests.

Approach & Execution

While the site was straightforward in terms of content, I enhanced it with a few key interactive features to bring it to life:

1. Intersection Observers & CSS Animations: I used Intersection Observers to trigger CSS animations as users scrolled through the page. This made the site feel more dynamic and interactive, drawing attention to key sections as they appeared on screen.

   const hiddenElements = document.querySelectorAll('.hidden');

const slideElementsRight = document.querySelectorAll('.slideInRight');

const slideRightOptions = {
rootMargin: "-250px 0px 0px 0px",
threshold: 1.0,
}

const slideRightObserver = new IntersectionObserver(function(entries, slideRightObserver) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('slidRight');
} else {
entry.target.classList.remove('slidRight');
} }, slideRightOptions)
});

hiddenElements.forEach((el) => observer.observe(el));
slideElementsRight.forEach((el) => slideRightObserver.observe(el));


   Repeating this same method, but for sliding in elements to the left instead of the right.

2. Countdown Timer: One of the most fun features I added was a countdown timer. Built with JavaScript, this timer counted down to the start time of our wedding ceremony. As the timer reached zero, it changed to a message that read, “I hope you were able to join us.” It was a fun way to build excitement for the big day and ensure that our guests were in the loop.

   const countdownEl = document.getElementById('countdown');
console.log(countdownEl);

const weddingDate = new Date("Sept 28, 2024 16:30:00").getTime();
console.log(weddingDate); let timer = setInterval(function() {
let now = new Date().getTime();
let timeUntil = weddingDate - now;

let days = Math.floor(timeUntil / (1000 * 60 * 60 * 24)); let hours = Math.floor((timeUntil % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((timeUntil % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((timeUntil % (1000 * 60)) / 1000);

countdownEl.innerText = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

if (timeUntil < 0) {
clearInterval(timer);
countdownEl.innerText = "I Hope You Were Able to Join Us!";
}

}, 1000);

3. Design & Layout: The design itself was clean and simple, ensuring that our guests could easily navigate the site and find the information they needed. I focused on creating a layout that felt personal and reflective of our wedding theme, using a combination of custom imagery and text to create a warm, inviting experience.

Final Thoughts

Creating Mad About Montgomery was a special project that allowed me to blend my web development skills with something personal and meaningful. It wasn’t a complex site, but the use of interactive features like animations and the countdown timer made it a fun experience for our guests. It was a great way to share our wedding journey with everyone, and I’m so happy we had this platform to make our day even more memorable.

Building this site reminded me of how powerful web development can be in creating unique, personalized experiences. It may not be the most technical project in my portfolio, but it holds a special place in my heart as a testament to our wedding day.