Developer: Arron Beale
- Project Goals
- User Experience
- Design
- Technologies Used
- Features
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
- To find a Photographer that they can hire or collaborate with
- View Photographers work in a Gallery
- Learn about the Photographer
- Find contact information
- Promote his business
- Showcase his work
- Provide information for customers to contact him
- Allow customers to learn about him
- Potentianl new customers
- Previous customers for repeat business
- Other Photographers
- Collaborators
- Accessibility
- Information can be found easily
- An intuitive navigation
- Functional links that work
- Responsive design for mobile, tablet, laptop, desktop
- No overload of information
- Visually appealing
- As a first time user, I want the Home page to show it is a photography site.
- As a first time user, I want information easily available, contact information, gallery, about.
- As a first time user, I want links to social media available.
- As a first time user, I want a gallery of the photographers work.
- As a first time user, I want responsive design to work on phone, tablet, laptop and desktop.
- As a returning user, I want a contact form.
- As a returning user, I want a newsletter sign up.
- As the site owner, I want to showcase my photographs in a gallery.
- As the site owner, I want to have relevant keywords for search engines.
- As the site owner, I want to provide some information about me on a about page.
- As the site owner, I want navigation to be easy and intuitive.
- As the site owner, I want a home page, a gallery page, an about page and a contact page.
- As the site owner, I want social media links on the bottom of each page.
- As the site owner, I want a google map on my contact page.
- As the site owner, I want my picture on the home page, very important!
- As the site owner, I want visitors to sign up to my newsletter.
The site is designed to reflect the home of the Photographer to bring a sense of a personal connection. The imagery was selected to represent the mountains and snow of Bavaria.
The colors chosen were blue and white to blend in with the hero image which has snowtop mountains and a clear blue sky.
I then used the colors in the navigation and the footer.
The blue colors were extracted as a hex from the hero image using https://imagecolorpicker.com/
The font selected to use for all headers was Sepctral SC, this gave the headings some definition to catch the eye. The main paragraph font chosen was Georgia as it is a very popular font and easy to read.
The site follows a familiar structure similar to alot of websites that are user friendly. On arrival you are greeted by the hero image with a heading to show it is a photography site. Navigation links are immediatly visible on the right of the navigation bar. A logo is visible on the left of the navigation bar. There is a total of four page:
- Home page, has a picture of the Photographer and has a list f awards he has received
- Gallery page, full of images the Photographer wishes to showcase
- About page, where visitors can learn more about the Photographer
- Contact page, where visitors can find contact information
Home
Gallery
About
Contact
404
- HTML
- CSS
The site currently contains 12 features across 4 pages.
- Fully responsive on all screen sizes
- Located on all pages
- Allows easy navigation across the site
- User stories covered: 1, 2, 5, 11, 12
- Masonry style gallery to allow a high volume of images in a small area.
- User stories covered: 2, 4, 5, 8, 12, 5
- A profile image of the Photographer on each page.
- User stories covered: 15
- An awards section on the home page to showcase awards achieved.
- User stories covered: 2, 5
- An about me section to allow visitors to learn about the Photographer.
- User stories covered: 2, 5, 10
- A newsletter to allow visitors to stay up to date with news and events.
- Located on all pages
- User stories covered: 5, 7, 16
- Allows visitors to get contact details.
- User stories covered: 2, 5, 6, 12
- A map to give visitors directions to address of business.
- User stories covered: 5, 14
- Allows the visitor to navigate to top of the page instead of scrolling.
- Located on all pages.
- User stories covered: 5, 11
- To provide links to all the Photographers social media platforms.
- Located on all pages.
- User stories covered: 3, 5, 13
- Comprises of social media links, back to top page and newsletter sign up .
- located on all pages.
- User stories covered: 3, 5, 7, 11, 13, 16
- A 404 page to be displayed if a user searched for a page that does not exist.
- User stories covered: 2, 3, 5, 7, 11
W3C Markup Validation Service was used. No errors or warnings were reported.
Home
Gallery
About
Contact
404
W3C Jigsaw Validation Service was used, 1 warning was referenced which was to warn it does not check imported Google Fonts.
style.css
WAVE Web Accessibility Evaluation Tool was used to check for any accessibility issues, no errors were reported.
Home Page
Gallery Page
About Page
Contact Page
404 Page
Google Lighthouse was used to measure performance of all pages.
Home
Gallery
About
Contact
404
The following devices were used to test the website via Google Chrome Dev Tools
- iphone 5
- iPad Air
- iPad Mini
- Surface Pro 7
The following devices were tested using actual physical devices:
- Samsung Galaxy A70
- Samsung Galaxy S20
- HP Laptop Model 15s-fq0024na
- Mozilla Firefox
- Google Chrome
- Microsoft Edge
First Time User:
- As a first time user, I want the Home page to show it is a photography site.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Homepage | land on homepage upon visiting site | Heading states V Photography to show it is a photography site. | Passed |
| Welcome paragraph | On homepage scroll down | See welcome paragraph explaining Victor is a Photographer. | Passed |
Images
- As a first time user, I want information easily available, contact information, gallery, about.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Navigation Bar | Use navigation links to access each page | Move to each page | Passed |
| Contact information | navigate to contact page, scroll down, see contact information section. | All contact information visible. | Passed |
Images
- As a first time user, I want links to social media available.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer | Scroll to bottom of each page, see social media links. | All social media links work and visible on bottom of each page | Passed |
| Foot | Click on each social icon. | New tab opens to respective social site. | Passed |
Images
- As a first time user, I want a gallery of the photographers work.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Gallery Page | Navigate to gallery page via navigation bar. Arrive at gallery, scroll down. | Full gallery visible | Passed |
| Gallery Page | Test on small screen, iPhone 5. | Gallery fully functional. | Passed |
Images
- As a first time user, I want responsive design to work on phone, tablet, laptop and desktop.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Responsive Design | On Google Chrome or smilar access Dev Tools via F12, select device such as iPhone, iPad etc. | Device emulator will show responsive design on selected device | Passed |
| Responsive Design | Test on physical device, laptop, Samsung Galaxy S20 | Expected to work fully. | Passed |
Images
Returning User: 6. As a returning user, I want a contact form.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Contact Form | Navigate to contact page, scroll down and find a form to insert first and last name,email and query. | Allows you to input and submit a query. | Passed |
| Contact form | Input first name, last name, email and a query. | Submit button expected to work and send query | Passed |
- As a returning user, I want a newsletter sign up.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Newsletter Sign Up | Scroll to bottom of any page, find newsletter sign up feature | Allows sign up to newsletter | Passed |
| Newsletter Sign Up | Sign up to news letter | receives email input and submit button works | Passed |
Images
Site Owner: 8. As the site owner, I want to showcase my photographs in a gallery.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Gallery Page | Navigate to gallery page via navigation bar. Arrive at gallery, scroll down. | Full gallery visible | Passed |
| Gallery Page | Test Gallery scales to smaller screens, resize browser screen size to test. | Gallery is responsive and scales down. | Passed |
Images
- As the site owner, I want to have relevant keywords for search engines.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Keywords | Code review, check meta for keyword presence. | Find all relevant keywords to photography | Passed |
Images
- As the site owner, I want to provide some information about me on a about page.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| About page | navigate to the about page, scroll down. | Find some information about the site owner and his work | Passed |
| About page | navigate to the about page, scroll down and find an embedded video. | Find a video of a project the site owner has worked on. | Passed |
Images
- As the site owner, I want navigation to be easy and intuitive.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Navigation Bar | Use navigation links to access each page | Move to each page | Passed |
| Back to Top button | Scroll to footer, click back to to top button | Jump to top of page | Passed |
Images
- As the site owner, I want a home page, a gallery page, an about page and a contact page.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Navigation Bar | Use navigation links to access each page | Move to each page | Passed |
| Back to Top button | Scroll to footer, click back to to top button | Jump to top of page | Passed |
Images
- As the site owner, I want social media links on the bottom of each page.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Social Links | Scroll to bottom of each page, see social media links. | All social media links work and visible on bottom of each page | Passed |
| Social Links | Click on each social link, new tab will open and bring you the social media site. | A new tab will open and bring you the social media site. | Passed |
Images
- As the site owner, I want a google map on my contact page.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Map | Navigate to contact page, scroll down and find Google Map. | Find Map | Passed |
| Map | On the map, click and drag, zoom in and out to check it works fully. | Map should work exactly as it should, allowing to scroll and zoom. | Passed |
Images
- As the site owner, I want my picture on the home page, very important!
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Profile Picture | Navigate to any page, scroll down. | Find profile image. | Passed |
| Profile Picture | Resize screen to small and ensure picture scales down and stays visible. | Picture scales down to smaller screens. | Passed |
Images
- As the site owner, I want visitors to sign up to my newsletter.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Newsletter Sign Up | Scroll to bottom of any page, see newsletter sign up feature | Allows sign up to newsletter | Passed |
| Newsletter Sign Up | Input an email address and press submit button. | Email will be submitted, response from CI form dump to verify it works. | Passed |
Images
| Bug | Fix |
|---|---|
| Images not showing on deployed site | Image file paths began with "/", fixed links to images and removed "/" at beginning of links. Research claimed this happens when hosting on GitHub Pages. |
| Div container did not have CSS applied. | CSS rule had an error in syntax, was expecting ";" but had ":", replaced with correct syntax. |
| All font became very small | This was not a code issue, I had previously changed the zoom level of the browser to capture more in a screenshot. When I returned i forgot I had done this action, eventually I realised the error that was made. |
| Container class of a Div was not working as expected. | Div had an id name assigned to it and not a class, renamed to class and this fixed the issue. |
The website was deployed to GitHub Pages via the following:
- From Github repository select settings
- Select pages from the left menu
- Select the master branch
- When the page refreshes you will see a message to notify you the site is now published
You can for fork the repository by following these steps:
- Go to the GitHub repository
- Click on Fork button in upper right hand corner
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefere to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash
- Change the current working directory to the one where you want the cloned directory
- Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY) 7.Press Enter to create your local clone.
- This site was created for educational purposes and is fictional.
- Profile Picture - Rene Asmussen
- Eagle hunter Photographs - Julia Volk
- Hero image, background image of lake - Pixabay
- Embedded GoPro video from Youtube - GoPro / Youtube
- Background video of Snowy Mountain - SwissHumanity
- Fonts provided by - Google Fonts
- Google maps code in order to embed map. - Google Maps
- GitHub Docs provided 404 page seetup. - Github Docs
Special thanks to the following:
- Code Institute for providing this learning platform.
- My Mentor Mo Shami for the valuable guidance and advice.
- CI Slack Community for assistance in any help or queries asked.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent