David Ewing.

Jo Smith Photography

Jo Smith Photography is a portfolio website designed to showcase the work of Jo Smith, a fictional photographer based in Dundee. The site features a clean, monochrome aesthetic with interactive galleries, including a unique polaroid-style gallery. Built using HTML, CSS, JavaScript, and jQuery, it provides an engaging user experience while highlighting Jo's photography skills.

Client Brief

# The Client Brief

For this college project, I developed a portfolio website for Jo Smith Photography, a fictional Dundee-based photographer specializing in wedding and landscape photography. The site was built using HTML, CSS, JavaScript, and jQuery to create an engaging visual experience that showcases photographic work effectively. The project focused on creating interactive photo galleries, including a unique polaroid-style gallery feature, to demonstrate different approaches to displaying photography online.

Planning & Research

# Planning & Researching

I started by researching photography websites to understand how visual portfolios work best online. The project needed to showcase two distinct photography styles - intimate wedding moments and dramatic landscape shots - while maintaining a cohesive brand feel. I planned the site structure around easy navigation between different gallery types, ensuring visitors could quickly find the style of photography they were interested in. The goal was to create a professional presence that would work for a Dundee-based photographer serving the local market.

Design Process

# Design

The design embraced a monochrome aesthetic that perfectly complemented the photography style. Using primarily black, white, and shades of gray, the interface creates a sophisticated backdrop that enhances both the wedding and landscape photography without distraction. This monochromatic approach gives the site a timeless, elegant feel that works particularly well for showcasing artistic photography. I designed multiple gallery experiences including featured carousels that highlight the best work, a traditional grid layout for comprehensive portfolios, and a creative polaroid-style gallery for a more personal touch. The featured carousels rotate through standout images, giving visitors an immediate sense of the photographer's style and quality. The responsive design ensures all gallery types work seamlessly across devices.

# Development

I built the site using core web technologies to focus on fundamental skills. HTML provided the semantic structure, while CSS handled the monochrome styling and responsive layouts. JavaScript and jQuery powered the interactive elements, particularly the carousel functionality and gallery transitions. The featured carousels were built using jQuery to create smooth, automatic image rotation with manual navigation controls. I implemented touch-friendly swipe gestures for mobile users and keyboard navigation for accessibility. The polaroid gallery remained a key feature, using CSS transforms and jQuery animations to create the scattered, overlapping effect. All galleries include lightbox functionality for full-size image viewing and lazy loading to optimize performance with high-quality photography.

# Testing

Testing focused heavily on image loading performance and responsive behavior across different devices. I tested the galleries with various image sizes and quantities to ensure smooth performance. The polaroid gallery required particular attention to make sure the random positioning and hover effects worked consistently across different browsers. I had peers test the user experience, particularly around navigation and image viewing. Their feedback helped improve the gallery controls and made the polaroid interaction more intuitive. Testing on mobile devices was especially important since photography websites get significant mobile traffic.

# Deployment

The project was deployed as a static website, making it straightforward to host and maintain. All images were optimized for web display while maintaining sufficient quality to showcase the photography effectively. The site structure was organized to make it easy to add new galleries or update existing ones, simulating how a real photographer might manage their portfolio over time.

# Challenges

  • Creating smooth, responsive image galleries that work across all devices was more complex than initially expected.
  • Balancing image quality with loading speed required careful optimization of file sizes and implementing progressive loading techniques.
  • Ensuring the website was user-friendly for potential clients.
  • Creating a visually appealing design that reflects Jo Smith's photography style.
  • Providing clear information about services and portfolio.
  • Ensuring the website is mobile-responsive for easy access on various devices.
  • The polaroid gallery presented unique challenges in creating realistic random positioning while ensuring all images remained accessible and the layout didn't break on smaller screens.

Explore More Projects

Visit the portfolio gallery to view images of all my work.

View Portfolio

Did you enjoy this post?

Buying me a coffee is a great way to support my work and projects.

Want to support me and my work? You can buy me a coffee using this link. Thank you for your support.