Chef Dicson Website - Milestone Project 1

View live project here. view

Design Briefs

This is the personal CV/ portfolio website for Chef Dicson. The goal is to design a website to look simple and elegant, representing experiences offered by Chef Dicson. It is designed to be responsive and accessible on a range of devices, making it easy to navigate for potential employers & recruiters.

Purpose & Goals

Online CV (focal point)
Promote private chef service (secondary)
Showcase pictures of client’s previous works (portfolio)
Testimonials
Increase social media presence

Future Features

In the future, I would like to add the following features:-

Ability for Visitor to book an appointment
Ability for Visitor sign up for newsletter
Link to Client's blogs page

User Experience (UX)

First Time Visitor Goals
- As a First Time Visitor of the website, I want to easily understand the main purpose of the site and learn more about what types of services it offers.
- As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
- As a First Time Visitor, I want to look for testimonials to see the feedback of the service Chef Dicson provided, how reliable and can he be trusted. I also want to locate their social media links to determine how trusted and known he is.
- As a Returning Visitor, I want to find information about private chef services
Returning and Frequent Visitor Goals
- As a Returning Visitor, I want to find the best way to get in contact with Chef Dicson with any questions I may have.

Design

Colour Scheme

The two main primary colours used are green (#005247) dark green (#0E2925)
Supported by orange (#e08000)

According to the psychology of colour, green represent balance and harmony and a darker shade of green symbolise ambition and wealth. A gradient of both colours creates the perfect representation of the business brand. The orange colour creates a great contrast with the green background, increasing the readability and image of the chef working in the hot kitchen.

Typography

Pacifico

Pacifico will be used exclusively on the Chef Dicson logo. The reason I chose Pacifico is the simplicity and fluidity of the script typeface. It conveys the feelings of being fun, easy-going, and hassle-free.

Quicksand (Included all font weight)

And it accompanies by Quicksand font, a round sans-serif typeface that conveys a sense of friendliness and reliability. It also has great readability.

Imagery

Imagery is important. The large, main image is designed to be striking and catch the user's attention.
The pictures showcase chef ability and skills.

Carousel of culinary dishes designed to showcase new and interesting delicious dishes constantly serve to site visitors. An opportunity to showcase Chef Dicson portfolio of culinary inventions.

Main Landing Page Layout

Header - Logo and navigation bar accompanied by main eye catching images.
Main content - CV, career timeline,
Private chef services
Carousel of culinary invention
Testimonials
Footer - Contact details, social media links, contact form

Wireframes

Homepage Wireframe view
Mobile Wireframe view
Tablet Wireframe view

Features

Responsive on all device sizes
- Pictures box resize base on device sizes
- Image appear or disappear base on device sizes. About me section, Chef Dicson profile picture disappear on small screen sizes allow more room for text paragraph.
- Text paragraph expands or collapse base on device sizes - the READ MORE button added to allow the visitor to expand text on small devices. on large screen devices, text paragraphs display in full and the button is hidden.
- Text layout adjusts base on the screen sizes. Allow better readability on small screen sizes.
- Navigation bar collapses into hamburger icon to declutter header.
- Adaptive design page layout will reorder into columns based on screen sizes, allowing easy navigation and improving page clarity.
On navigation bar, text will change colour if you hover above it.
Navigation bar fixed on top of the viewing devices. Navigation options are always available for the visitor.
Direct social media links at the footer, allow visitors access to Chef Dicson social media pages easily. Click on the link will open a new tab, allowing the landing page remains open in another tab.
Contact Chef Dicson directly using Contact Us form.

Technologies Used

Languages Used

HTML5
CSS3

Frameworks, Libraries & Programs Used

Bootstrap v5.1.3: Bootstrap was used to assist with the responsiveness and styling of the website.
Google Fonts: Google fonts were used to import the Pacifico and Quicksand font family into the style.css file which is used on all pages throughout the project.
Font Awesome: Font Awesome was used on all pages throughout the website to add icons for aesthetic purposes.
Gitpod: Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
GitHub: GitHub is used to store the project's code after being pushed from Git.
Photoshop: Photoshop was used to resizing images and editing photos for the website.
Balsamiq: Balsamiq was used to create the wireframes during the design process.
cssgradient: CSS gradient used to created header and footer gradient.
Firefox Develop Tools: Develop Tools used to maintenance the web page.

Testing

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

CSS Validator flagged minor warnings but the webpage is operational.

Testing User Stories from User Experience (UX) Section

First Time Visitor Goals
- As a First Time Visitor of the website, I want to easily understand the main purpose of the site and learn more about what types of services it offers.
  - Upon entering the site, users are automatically greeted by the main image, which immediately draws Visitors eyes to the page
  - Easily readable navigation bar allow Visitor to navigate up and down the page with ease.
  - Each section has been layout carefully to increase readability, easy for the eyes to follow.
- As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
  - The site has been designed to be fluid to read. At the top of each page there is a fixed navigation bar, each link describes what section they will end up at clearly.
  - At the footer of the page, Chef Dicson logo allows the user to transfer back to the top of the page.
  - On the Contact Us footer, after a form response is submitted. It will not interfere with the Visitor page.
- As a First Time Visitor, I want to look for testimonials to understand what their users think of them and see if they are trusted. I also want to locate their social media links to determine how trusted and known he is.
  - Once the new visitor has read the testimonials. It will give them the confidence to hire Chef Dicson.
  - The user can also scroll to the footer of the page to locate contact details, mobile and social media links or click on "Contact Me" at the navigation bar to send Visitor directly to the footer when contact details are kept.
- As a First Time Visitor, I want to find information about private chef services
  - The user can also scroll to the middle of the page below about me, or click on "Private Chef" at the navigation bar to send Visitor directly to the Private Chef section of the page. The visitor will greet by a carousel of delicious dishes, details explain the benefits of hiring a private chef and what to expect when you hire one.
Returning and Frequent Visitor Goals
- As a Returning Visitor, I want to find the best way to get in contact with Chef Dicson with any questions I may have.
  - The Visitor can also scroll to the footer of the page to locate contact details, mobile and social media links or click on "Contact Me" at the navigation bar to send Visitor directly to the footer when contact details are kept.
  - The Visitor call use Contact Me form to directly contact Chef Dicson.

Further Testing

The website was tested on Google Chrome, Firefox, Microsoft Edge and Safari browsers.
Testing was done to ensure that all pages were linking correctly.
Friends were asked to review the site and report any bugs or user experience issues.

Mobile / Tablet Devices:

The website was tested for responsiveness using Google/Firefox Chrome Developer Tools.

Galaxy S10
Galaxy S20
Galaxy Note
iPhone X Pro/Max
iPhone 11 Pro/Max
iPhone 12 Mini/Pro/Max
iPhone 13 Mini/Pro/Max
iPad
iPad Pro
Kindle

Known Bugs

On iPad Pro 12.9 screen navigation bar texts bleed off the edge and due to the large screen, the bootstrap framework could not decide between full-screen layout or tablet layout.

Deployment

GitHub Pages

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

Log in to GitHub and locate the GitHub Repository.
At the top of the Repository locate the "Settings".
Click on "Pages" will open "GitHub Pages" Section.
Under "Source", click the dropdown called "None" and select "Master Branch".
The page will automatically refresh.
At the top near github header to locate the now published site link.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

Log in to GitHub and locate the GitHub Repository.
At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

Log in to GitHub and locate the GitHub Repository.
Under the repository name, click "Clone or download".
To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
Open Git Bash.
Change the current working directory to the location where you want the cloned directory to be made.
Type git clone, and then paste the URL you copied.

Credits

Code

Bootstrap Library used throughout the project mainly to make site responsive
Nav bar, social media and work history codes inspired by Code Institute tutorials projects
W3schools and MDN Webdocs helped me learn more about HTML/CSS and solves problems
Stack Overflow helped with solution to webpage responsiveness

Media

All images on private chef and about me sections were provided by Chef Dicson
Main image and testimonal banner were found on unsplash.com
Pacifico and Quicksand fonts supplied by Google Fonts
Social media icons by Fontawesome
Images used in readme were screen shot from W3 Validators and Am I Responsive

Acknowledgements

My Mentor Narender Singh for helpful feedback regarding design, features and functionality.
Stack Overflow developers on questions forum who provided helpful tips and solutions.

code-institute-submissions / chef-dicson-milestone-project-1 Goto Github PK

chef-dicson-milestone-project-1's Introduction