Introduction
Photography site
I built this project over a week using HTML, CSS, and JavaScript. It is a 10-page responsive website featuring photo and video galleries(with a full screen view modal), an About Me page, and Contact page with a form.
The finished product can be viewed at www.rainegauthier.com
Technologies
- HTML & CSS
- JavaScript
I elected to build this site without the use of Bootstrap 5 or React to solidfy my understanding of HTML, CSS, and JavaScript.
Getting Started
I began by createing a website "Roadmap", essentially a list of pages and what content would be included on each page. I asked the client to provide a word document of written content for the site, images for the galleries, and a variety of websites that inspire for design purposes.
Reflection
My main challenges were design related and some minor technical issues.
When I sent the first version of the website to the client for review, the client wanted a completely different design. I was so happy to receive this feedback, as design is not part of my training so I asked the client for more examples of websites they love. I pulled designs that the client highlighted(fonts, colors, form styles) to restyle the website, review it with the client, and I shipped the product the next day.
In terms of the technicial challenges, I wanted to include a modal view for the gallery. I was hoping to allow the user to exit the modal by clicking outside the photos, but on the smaller screens the feature was not working, and the modal would fail to close. To solve, I added a close button in the top corner that would appear regardless of screen size and solved the issue.
Other technical issues were related to hosting the website, as I usually host via github pages (which is an EXCELLENT way to review the site with a client, but the shipped product needed to be hosted elsewhere). I did a domain transfer, FTP file transfer, set up server hosting, and was surprised to learn a domain transfer could take up to 2 weeks. In the future, I would transfer the domain at the start of the project so we could ship and get it up and running as soon as possible.
Future Ideas
I feel the site runs a bit slow and in the future upgrading it to React with the use of GraphQL(so the client can add photos to their galleries) would be ideal. Alternatively, I could build an account login for the client with a dashboard so they can modify the galleries independently or utilize GraphQL and a CMS so the client can update the content.