This website started my journey into web development. My goal with this project was to create a unique and tasteful wedding website that was unlike any of the many wedding photography websites I had seen throughout my career. I wanted there to be minimal use of text and whitespace, and as much use of my actual wedding photos as possible without being overwhelming or busy.
This was a challenge as I had to find minimal, simple and moody photos while also making sure to follow best practices in image compression and accessibility. Through this, I learned a great deal about aria labels and alternatives to alt-text so as to describe whole galleries rather than spamming every individual photo with the same alt-text. This was also my first encounter with observation observers which helped me get comfortable writing my own Javascript functions for the very first time.
I created the first iteration of this site in early 2022 after officially shutting my business down. I later decided to revamp it with a greater use of Javascript to escape tutorial hell and create real, working, reactive elements. The first element I created with this goal in mind was the fullscreen slider in the hero section. I've learned a great deal since creating that landing page, but at the time I was ecstatic when I first saw it working as intended.
The wordpress template I began my wedding business with in 2015 had a nearly fullscreen slider that I didn't know how to customize at the time, and left about 10% of the screen with whitespace. Because of this, I wasn't able to use many of my favorite photos. After creating my new fullscreen slider, it felt incredible to see my photos displayed the way I had intended for the past seven years.
This project not only sparked my obsession for learning web design and development, but also allowed me to write my first lines of code outside of the safe and easy tutorial environments I had been. After building several static websites, I finally had a dynamic website that reacted to the user's actions. I instantly wanted to know more about Javascript, and after this project, I dove deeper into learning web development.
Two of the biggest challenges I faced while creating this website were performance and accessibility. It was a great project to force myself to learn some best practices for labeling photos and photo sets, as well lazy loading photos and finding optimal image compression methods. Lazy loading helped with performance, but the size of my photos were still weighing the load speed down. After a good amount of trial and error, I was able to find a sweet spot where I could preserve my image quality without facing long loading times on my website.
Another big challenge I ran into was maintaining a creative and appealing photo layout throughout each page while adding media queries for smaller viewports. This project almost immediately showed me why it's crucial to begin building a website with a mobile first approach. I did finally get to a point where I was pleased with the mobile layout, but I learned my lesson and began my next site with the mobile first approach by building out the mockup in Figma with mobile viewports.
While building this site, I learned that less is sometimes more with page animations. I had heard this repeated in my courses but didn't appreciate the importance of this idea until I had animations on every aspect of my website. When I revamped this site, I toned it down quite a bit and learned the value of subtlety. When an animation or interactive component did appear, it was much more visually appealing as opposed to trying to keep up with moving elements all throughout the website.
My main takeaway from this particular project was that I absolutely love web development. I had used Javascript on a real-world project for the first time, and I wanted to jump right into my next project with a much heavier use of Javascript to further my understanding of it. Before doing so, I went back to my online courses and spent another two weeks buried in Javascript fundamentals. I wanted to write code with intention and not by copying the same small functions over and over as I did while using intersection observers on my wedding website. After two weeks of 10-14 hour days of studying and practicing, I was ready to begin my next project.