code-institute-submissions / springbank9-milestone-project1 Goto Github PK

This website displays a portfolio of artworks by Isabella Hay. The site is largely focused on the imagery used and it's minimalistic design enables the viewer to focus on the individual artworks that are displayed.

As a first time viewer, I want to be able to view the artist's portfolio and learn about the individual artworks diaplayed. As a first time viewer, I want to gather an overall picture of the artist's style and subject matter.

As a returning viewer, I want to see recent uploads of images by the artist.

As a prospective client, I want to be able to view the paintings in detail with a view to commisioning. As a prospective client, I want to be able to access the artist's social media accounts in order to view other work, work experience and updates.

The site's background colour is white. This adds to the minimalist aesthetic and also enhances the main imagery. A white background enables the images to stand out more so that they remain the focus of the site. The font remains black throughout the site. This is to add to the minimalist aestheict and also helps to focus the visitor's attention on the pictures.

The Helvetica Neue font is the main font used throughout the site. Helvetica Neue is a clean font and adds to the minimal aesthetic of the site. It is also an appropriate font for image labels.

The images are the main focus of the webiste. The horizontal display mimics a gallery so visitors can scroll through the individual artworks. Vertical scrolling is introduced on smaller devices, making the site responsive to mobile viewing.

• wireframe - page display
• wireframe2 - page dsplay with mobile view
• wireframe3 - page display with social links, about heading text and hompage

Wireframes are found in the documentation folder of the project in github.

Horizontal scrolling of images to represent gallery view. Collapsable buttons included in the navigation section to help hide text overload. This again allows for the main focus to be on the images displayed.

• HTML5
• CSS3

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Hover.css:
   • Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
3. Google Fonts:
   • Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
4. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
5. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
6. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
7. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
8. Photoshop:
   • Photoshop was used to create the logo, resizing images and editing photos for the website.
9. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

Screenshots of the validated code are found in the documentation folder in the project found in gitbub.

1.As a first time viewer, I want to be able to view the artist's's portfolio and learn about the individual artworks diaplayed. 1. The images are displayed large and clear and are responsive to all screen sizes. They are the main focus of the site as the accompanying text and site background are kept to a minimalistic design. 2. The "About" dropdown heading shows a small paragraph on each display of artworks.

2.As a first time viewer, I want to gather an overall picture of the artist's style and subject matter. 1. The images fit to roughly screen size in order to give the viewer a detailed view of the medium used. 2.Information about each pictures is also accessible below each image. The "About" heading also reveals an extra paragraph on the pictures specific to each page.

1.As a returning viewer, I want to see recent uploads of images by the artist. 1. The different pages have been arranged chronologically so viewers can view past and most recent works.

1.As a prospective client, I want to be able to view the paintings in detail with a view to commisioning. 1. Imagery is the focus of the site. The pictures have been sized to almost fit the screen so viewers can see pictures clearly. Information on each picture is written below in smaller print and details subject, date, medium and size. 2.As a prospective client, I want to be able to access the artist's social media accounts in order to view other work and updates. 1.Social media icons are displayed underneath page headings and link to the artist's Facebook, LinkedIn and Instagram accounts.

Site has been test on Chrome, Safari and Firefox and works fine. The site works on mobile although to experience full effect of homepage animation, users can view the page horizontally. Otherwise display of artworks on pages works fine.

The copyright text can be shown differetnlyon safari and on mobile to Chrome. Crossfade animation works when viewing live site within GitHub but doesnt seem to appear otherwise.

The project was deployed to GitHub Pages using the following steps...

1. Locate the GitHub Repository in GitHub
2. Click on the "Settings" Button on the menu.
3. Locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Main Branch".
5. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Merged edits from created "master Branch" to "Main Branch".

© 2020 Isabella Hay.

• The crossfade animation came from https://www.cssscript.com/css-only-crossfading-background-slideshow/

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• All content was written by the developer.

• All Images were created by the developer.