Travel Photography Site

Timeline

April 2024

Skills

JavaScript, HTML, CSS, Web Development, Interactive Design, Photography

Overview

Driven by my passion for photography, I set out to build a personal travel photography website to share photos from my trips across the globe. Blending my love for capturing moments with my passion for web development, I created an accessible site that highlights a variety of photos in multiple formats. This project brings together my enthusiasm for web design and storytelling, using interactive features to make the experience engaging.

Process

Image Management and Setup

I started by converting over 100o of my images to JPG format and organizing them into subfolders for each location. Setting up my GitHub repository involved creating folders for CSS and images and implementing a basic HTML layout. I also added skip-to-main links to the HTML for accessibility. Each continent page featured a customized map image with pins marking featured cities.

Design & Styling

In the second phase, I focused on refining the site design. I applied unique color schemes for each location page and tackled color contrast issues to ensure accessibility. I used specific CSS classes to achieve alternating colors and distinctive grid layouts, such as alternating between large and small images on the North America page. I also added Instagram and email icons, styled images with border-radius, and implemented media queries for a responsive design.

Interactive Features & Accessibility

The third phase involved developing interactive elements and improving accessibility. I added alt text to all 100+ images and worked on an interactive world map for the homepage. This map was initially challenging but was eventually divided into three clickable sub-images to guide users to the correct pages. I also introduced a scrolling feature for the Europe page image grids using flexbox and ensured keyboard accessibility for interactive elements.

Testing & Deployment

In the final stages, I tested and validated site functionality and responsiveness. I addressed accessibility issues like color contrast and HTML errors, and updated media queries for various devices. After making necessary adjustments, I successfully deployed the site with all interactive features, styling, and accessibility improvements.

Outcomes

The final result is a visually engaging travel photography website that serves as a showcase of my photography. The site features interactive elements like a world map with clickable regions, custom image grids with alternating sizes, and lightbox galleries. It not only highlights my love for photography but also demonstrates my ability to blend web development skills with personal passions, all while emphasizing accessibility in digital media.