As a new photogropher what better way to show your work than with a website. The hope is to provide people with lasting memories captured in a unique and beautiful way. I fell in love with macro photography, photographing insects and small flowres and now I want to branch out and start photographing people more.

The advantage of being new is the ability to offer competative rates and perhaps offer something different. I want to offer beautiful and elegant, yet also fun and different.

1. User stories
   1. First time visitor goals
   2. Returning visitor goals
   3. Frequent user goals
2. Design
   1. Colour scheme
   2. Typography
   3. Wireframes
3. Existing features
   1. Home page
   2. Gallery
   3. Contact us
   4. Features to add
4. Testing
   1. HTML
   2. CSS
   3. Wave
   4. Lighthouse
5. Unfixed bugs
6. Fixed bugs
7. Deployment
8. Credits
   1. Content
   2. Media

• First time visitor goals:

  1. As a first time visitor, I want to be able to easily navigate the page.
  2. As a first time visitor, I would like to know what the page is about and what it offers.
  3. As a first time visitor, I want to find social media links and view testimonials of previous clients.

• Returning visitor goals:

  1. As a returning visitor, I want to see more images on display.
  2. As a returning visitor, I would like to know where you are located.
  3. As a returning visitor, I would like to have more social media links.

• Frequent user goals

  1. As a frequent user, I would like to see blog posts.
  2. As a frequent user, I would like to see the nature photos for sale as prints on canvas.
  3. As a frequent user, I would like to be notified about specials.

• Colour scheme

  • Through out this website I used a parchment colour #F8F0E3 as the main font colour.
  • The background colour is #008385, this is set in place if the background image fails.

• Typography

  • I used Shalimar as a heading font. I like how it looks like cursive but is not difficult to read.
  • I used Overpass for the rest of the body, I feel like it looks clean and again simple to read.
  • Both fonts were imported from Google fonts.

• Wireframes

  • Home page wire frames - View
  • Gallery wire frames - View
  • Contact us page - View

• Website is fully responsive on all devices.

• Has interactive elements.

• Home page

  • The logo is functional as a home button:
  • Logo
  • The navigation bar is also functional to the three pages: Home, Gallery, Contact us. There is a dashed line when hovered over and it becomes solid when selected.
  • Image of the navigation bar
  • Brief description of the company.
  • Image of slogan and brief description
  • Social media links that open to a new tab.
  • Image of footer
  • Custom 404 page not found page.
  • Image of 404 page

• Gallery

  • Has the same navigation bar as on Home page.

  • Images are all taken by myself (Amor Jansen). I would like to keep these photos as copyrighted and not for use by anyone other than me.

  • It is valuable to see the level of photography.

  • Image of some of the gallery images

  • Contains the same footer as the Home page.

• Contact Us

  • Has the same navigation bar as the Home page.

  • When filled in the user will be taken to a thank you screen.

  • Image of thank you page

  • Contains the same footer as home page.

• Features to add

  • I would like to add the option to purchase my original nature photos as prints or on canvas.

  • I would like to add more photos to the gallery.

  • I would like to add a blog post.

• Languages used

  • HTML
  • CSS

• Frameworks, Libraries and Programs used

  • Google Fonts - Used to import the Shalimar and Overpass fonts.
  • Font awesome - Used for the footer icons and copyright icon.
  • Git - Used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
  • Github - Used to store code after being pushed from Git.
  • Balsamiq - Used to create wireframes for this website.

• Validator testing

  • HTML

  • I used the W3C HTML validator. I used url input.

    • Image of validated HTML

  • CSS

  • I used the W3C CSS validator. I used direct input. (There were 4 warnings on the code I used from https://dcode.domenade.com)

    • Image of validated CSS

  • Wave accessibility

  • I ran the entire website through wave and the only warnings to come up were links to home page that are adjacent.

    • Wave accessibility Home page
    • Wave accessibility Gallery page
    • Wave accessibility Contact us page

  • Lighthouse

  • I ran my page through lighthouse in chrome.

    • Lighthouse Home page
    • Lighthouse Gallery page
    • Lighthouse Contact page

  • Testing user stories

• First time visitor goals:

  1. As a first time visitor, I want to be able to easily navigate the page.

     • I ensured that the navigation bar is easily recognisable.
     • The page you are on will have a solid underline.
     • If you hover over a different page it will have a dashed underline.

  2. As a first time visitor, I would like to know what the page is about and what it offers.

     • The pages are well labeled due to the navigation bar.
     • There is a very nice description on the home page about the company.
     • Once contact is made prices will be discussed.

  3. As a first time visitor, I want to find social media links and view testimonials of previous clients.

     • I have made sure the social icons are at the footer.
     • All social media links open in a new tab.

• Returning visitor goals:

  1. As a returning visitor, I want to see more images on display.

     • Due to the responsiveness of this page adding more photos will be easy.
     • I can only post images permitted by my clients.
     • More images and behind the scenecs will be posted on the social media links.

  2. As a returning visitor, I would like to know where you are located.

     • I have added a clause on the home page saying where I can service.

  3. As a returning visitor, I would like to have more social media links.

     • I will include more social media links as the business grows.
     • I would like to include Twitter for competitions.

• Frequent user goals

  1. As a frequent user, I would like to see blog posts.

     • I have the wireframes to add that to the website.
     • Blog
     • As the website grows I can add more features

  2. As a frequent user, I would like to see the nature photos for sale as prints on canvas.

     • As stated in the Existing features it is definitly something I want to add.

  3. As a frequent user, I would like to be notified about specials.

     • I will post specials on the social media links.
     • I will run competitions on the social media links too.
     • I can include a newsletter as well.

• Unfixed bugs

• Fixed bugs

The method I used to deploy this site is as follows:

- Go to my Github and click on this repository
- Click on settings 
- On the left hand menu select pages
- Select main branch 
- Select save

The live website can be found at : https://amor-jansen.github.io/zippynerd-photography-studio/contact.html

• Code

  • Some insperation from the love running project by Code Institute. (Navigation bar)
  • I did Google a lot of concepts and used information from w3schools.com.
  • I used https://dcode.domenade.com guide on grid in css for images.

• Content

  • I used Google fonts Shalimar and Overpass.
  • I used Fontawesome for the footer logos.
  • I used Favicon.oi for my favicon.
  • I used Balsamiq for the wireframes.
  • I used https://ui.dev/amiresponsive for the image under my README logo.

• Media

  • I used https://ui.dev/amiresponsive for the image under my README logo.
  • All images used in this project are my own.
  • Please view the copyright under the gallery.
  • Images are subject to copyright.

• Thanks

  • A special thank you to my mentor for his helpful input and information throughout.