Front-End Web, 2019
Project Description
The Story of Nate and Leilani holds a special place in my heart because it is the story of me and my fiancée — how we met, fell in love, and got engaged. When I had the chance to create a front-end web project about any topic of my choosing, I knew immediately that I wanted to document our story together. I was inspired by wedding websites created by other amazing web developers that I had come across, and I designed my website to be a way to announce our wedding to family and friends as well as to serve as a history of our time together for anyone who wants to read about it.
To implement the technical aspects of this project, I used some special JavaScript libraries (ScrollReveal.js and Vivus) to give the site a more dynamic user experience. Instead of just scrolling down a long page, I wanted the user to feel as though they were dynamically discovering content as they moved through the story. As for assets, I created all of the icons and graphics myself using Adobe Illustrator, and animated some of the SVG files with Vivus Instant. A few of the decorative flourishes on the first screen are courtesy of Vecteezy, an online repository of free vector art.
The Process
One of the keys to success for this project was my decision to experiment with different libraries before actually building out my website, creating a proof of concept for each new piece of technology I wanted to use. Once I had my visual design sketched out on paper and recreated as a mockup with Illustrator (seen below), I set up a test environment where I could play around with the ScrollReveal.js and Vivus libraries to figure out how they worked. This saved me time later in the project, as I was able to start developing with confidence that I could implement the libraries successfully.
Next, I started to develop my actual website by creating individual, reusable modules for each of the different event types (animated icons, graphics that change when hovered over, and colorized pictures). After styling these and making them responsive for different screen sizes, the only thing left to do was generate all of the content for the website (one of the longest parts of the process). The process was fun, and I even recruited my fiancée to help me write up a document with all of the events we have shared together.
