Click here to go to the Live Project
Welcome to Light Trails Photography!
We are dedicated to capturing life’s most meaningful moments with an artful eye and creative approach. Specializing in weddings, portraits, and fashion photography, our passion lies in creating images that are not only beautiful but also deeply personal. From the romance of weddings to the uniqueness of individual portraits and the vibrancy of everyday life, each photograph is crafted to reflect authentic emotions and stories. Let us help you preserve your memories in timeless, evocative images that you will cherish forever.
- Light Trails Photography
- As a site owner, I want to ensure a seamless experience for potential clients and photography enthusiasts.
- As a site owner, I want to display my top photos in a well-organized gallery.
- As a site owner, I want to present my photography in a professional and accessible format.
- As a site owner, I want my website to convey a high level of professionalism.
- As a site owner, I want to make it easy for users to reach out and connect with me.
- As a user, I want to browse the website effortlessly on any device.
- As a user, I want simple navigation through various photo collections.
- As a user, I want to explore and enjoy unique photography styles.
- As a user, I want a visually engaging and well-structured gallery experience.
- As a user, I want to learn about the photographer’s work.
- As a user, I want access to a contact form for easy communication.
Light Trails is a sleek, mobile-first developed, responsive photography portfolio that artfully presents photography through a minimalist, accessible design. Featuring a streamlined layout, three main pages, and social media links, it’s crafted for an elegant, user-friendly experience. Every page has its own SEO meta tag description and keywords.
- HTML: Hyper Text Markup Language
- CSS: Cascading Style Sheets
I've created a layout with padding on both the left and right sides of the content. This ensures the items are aligned from top to bottom, and the overall layout remains consistent across different screen sizes. As the window shrinks down to a mobile version, the layout adjusts, stacking the elements vertically for a more user-friendly experience on smaller screens. This is achieved through flexbox properties and responsive design principles.
This approach is ideal because it ensures a clean, readable design that adapts to various devices, improving accessibility and usability. The distance on both sides creates a buffer, making the content less cramped and more visually appealing, while the responsive design ensures the site remains functional and aesthetically pleasing regardless of screen size.
The header includes a responsive navigation bar with a text logo on the left, that adapts seamlessly to different screen sizes, providing quick access to each main section of the site. On the mobile version, the menu is centered with the logo positioned above for a balanced visual design.
The menu elements underlined to indicate the page you're currently on.
Tablet, Laptop and Desktop Version
The navigation links feature a consistent :hover effect across all devies.
This effect is displayed on all menu items, regardless of whether they are currently selected.
Mobile Version
 |
 |
 |
|---|
The three featured photos have a subtle zoom hover effect, each accompanied by a caption. This section is fully responsive, displaying three columns on tablet, laptop, and desktop screens, and adjusting to a single-column layout on mobile.
Tablet, Laptop and Desktop Version
Mobile Version
 |
 |
 |
|---|
Below the header, a welcoming message introduces visitors to Light Trails Photography, highlighting the services offered in a concise and engaging way.
Tablet, Laptop, Desktop and Mobile Version
 |
 |
|---|
The footer features links to social media profiles, site navigation, and additional resources. Designed with simplicity in mind, it offers accessible navigation across all devices, including a call-to-action for visitors to send an email or make a direct call.
Tablet, Laptop, Desktop and Mobile Version
 |
 |
|---|
The gallery showcases curated collections for weddings, portraits, and lifestyle photography, providing a glimpse into the high-quality work. The gallery displays images in a grid format, adapting to a single-column layout on mobile and a three-column layout on larger screens for optimal viewing.
Tablet, Laptop, Desktop Version
Mobile Version
 |
 |
 |
|---|
A straightforward contact form invites visitors to reach out easily, enabling them to inquire about services directly for hassle-free communication.
The contact form is designed with accessibility in mind. All input elements, including the textarea, are required fields to ensure complete information before sending a message. The form is fully functional, using a POST parameter that directs submissions to the Code Institute submission page and returns data.
Tablet, Laptop, Desktop Version
Below, you will find a fully functional embedded Google Maps iframe, optimized for navigation across all devices.
Mobile Version
 |
 |
 |
|---|
All images have alt attribute for screen readers. Also footer includes aria labelled social media links that open in a new window, as well as email and telephone links for direct communication, along with a contact form to ensure reliable communication with the website owner.
Using colors.co for the website, I opted for a modern and compact solution that is visually appealing. Dark mode is popular because it reduces eye strain, especially in low-light environments, and saves battery life on OLED screens. It offers a sleek, contemporary aesthetic, making images and content stand out more clearly.
Many users prefer it for comfort, and its popularity in apps like Twitter and YouTube has made it more widely adopted. Additionally, offering dark mode as an option gives users more control over their browsing experience.
For the color scheme, I selected a harmonious and minimalistic blend of black and dark grey, with a mix of black coffee (the background) and white milk (the text color), drawing inspiration from one of the most beloved beverages: coffee/cappuccino.
I chose the Google font Montserrat because of its modern, clean, and versatile design. It offers excellent readability and a professional, yet approachable aesthetic. Its geometric style works well for both headings and body text, giving your site a contemporary feel. Montserrat is also widely supported across devices and browsers, ensuring consistency and accessibility for all users.
Sans-Serif as the fallback font to ensure that, if Montserrat isn't available, a clean, modern, and easily readable font is used. Sans-serif fonts are also widely supported across devices and browsers, maintaining a legible appearance, even if the primary font fails to load.
- I tested the responsive design of the website on Safari, Chrome, Firefox, and Edge using a Windows OS.
- I then shared the website with family members to confirm functionality across different devices and gathered their feedback on user experience.
- I manually tested all internal and external links on the website and made sure that external links open in a new tab.
- I ensured that all contact form fields require valid inputs and confirmed the form submission directs to the Code Institute submission page.
- While building the project I have used Safari Browser on my MacBook and iOS device.
Links to PDF Files of Validated Source Codes of both HTML and CSS.
Using the input method, I copied and pasted the code of index.html, gallery.html, and contact.html, encountering the following issues, as seen in the screenshots:
Error:
Fix:
Error:
Fix:
After fixing them accordingly, I repeated the process and found no further errors:
Using the same method I have used Jigsaw to validate the styles.css.
Fixed Bugs:
- Path issue with loading the stylesheet and other image sources on the deployed version.
Unfixed Bugs:
- There are no unfixed bugs.
 |
 |
|---|
I used the Chrome Lighthouse tool and received optimal scores for performance, accessibility, best practices, and SEO on the homepage.
Using the same approach, I have built the other pages of my project.
It's important to note that Lighthouse results can vary due to factors such as network conditions, device performance, and testing environment. However, it remains a valuable tool for assessing website performance and identifying areas for improvement.
I followed Code Institue's Love Running Tutorial tip and deployed my website early. The steps to deploying a website on GitHub pages are:
- Open the repository and go to the Settings tab.
- Navigate to the Pages tab in the left menu.
- Choose Deploy from a branch and select the according branch, main in my case.
- Click save. The link to the deployed website can then be found in the repository on the right menu under Environments.
The link to my live site is: Light Trails
- The sourse of code is stored in the GitHub page.
- The repository contains a single branch, and all code has been submitted and commited as it was written, to ensure a good understanding. The repository can be found at this Link, and can be downloaded or cloned for further development.
- I started the program and repository by using the gitpod template provided by the Code Insitute.
- Then I regularly staged my changes using the command
git add <filename>orgit add .and then committed the staged changes to my local repository usinggit commit -m 'short descriptive message here'. - Finally, I would push the commits from my local repository up to the Github repository using the command
git push. - With every push, Github automatically deploys my latest commit from the 'main' branch to the Github pages.
You can easily clone or fork the Light Trails repository to make changes or use it as a reference. Follow the steps below based on your operating system:
- Visit the repository on GitHub: Light Trails Repository.
- Click the Fork button in the top-right corner to create your own copy of the repository under your GitHub account.
The repository has a single branch, with code committed sequentially for clarity. It can be forked or cloned for further development.
- Open the Terminal.
- Navigate to the directory where you want to clone the repository:
cd /path/to/your/directory - Run the following command to clone the repository:
git clone https://github.com/RazmikMovsisyan/light_trails.git
- Navigate into the cloned directory:
cd light_trails
- Open Command Prompt or PowerShell.
- Navigate to the directory where you want to clone the repository:
cd C:\path\to\your\directory - Run the following command to clone the repository:
git clone https://github.com/RazmikMovsisyan/light_trails.git
- Navigate into the cloned directory:
cd light_trails
This website has all the essential features to make it a functional minimum viable product, ready for real-world use. However, there is still a lot of potential for further enhancements and additional features. Here are a few ideas:
- Implement a lightbox feature for fullscreen photo viewing.
- Add a blog section for photo stories and experiences.
- Create a dynamic gallery with filtering options by location or theme.
- Implementing additional accessibility improvements, such as keyboard navigation and optimized screen reader support.
- Add the following pages and functions: Terms and Conditions, Imprint, Privacy Policy, Cookies, Error 404 Page and a search function.
I would like to thank my mentor, Marcel, for his tips and support throughout this project. I’m also grateful to the Code Institute support team, especially Kristyna Wach, for providing the weekly guidance I needed to stay on track.
A special thank to my Golden Retriever, Alice, for her patience and support for allowing me spending the time with coding instead of playing with her.
- Am I Responsive Used to create a mockup for testing website responsiveness on various devices.
- Google Fonts Used for the Montserrat font on the site.
- Google Maps Embedded map for location display and navigation.
- Unsplash Free images used on the site.
- Font Awesome Social Media Icons on Footer.
- Icons8 Favicon.
I’ve taken full-page screenshots of the entire website, showcasing both the desktop and mobile versions.
I hope to have inspired you, and I greatly appreciate your interest in my project.
Author: Razmik Movsisyan
 |
 |
 |
|---|
 |
 |
 |