This website is for my Milestone 1 project in my Web Development course with CodeInstitute. I decided to create a portfolio site which has a simple landing page, a Cafe style website, and a Gallery of photos from my recent cup final football match. The purpose of the site is purely to demonstrate my different skills and I have tried to showcase a variety of different elements and styles in order to show what I am capable of to any potential recruiters down the line. I have experimented with different techniques e.g. media queries and collapsible menus which only appear when the page is shrunk. In the future I plan to add some more pages to the site for example, one page dedicated to showing off my Discord Bot which I built in JavaScript, and another page with some basic details about me and a link to my CV.
-
-
- As a first time visitor, I want to be able to clearly see what I am looking at. I want to be able to understand what the website is for and would like the page to be interesting.
- As a first time visitor, I want to be able to easily navigate through the website and find the pages and information I am looking for without any difficulty.
- As a first time user, I want to be able to find more information about the developer. I want to see social media links so that I can understand who built the site and what type of person they are.
-
- As a returning visitor, I want to find contact information for the developer so I can get in touch with them if I have any questions.
- As a returning visitor, I want to see if there are any new images or videos added to the Gallery page.
-
- As a frequent visitor, I want to see if there are any newly added pages or features.
- As a frequent visitor, I want to see if the developer is open to work.
-
-
-
- The main colours used in my portfolio are black and white. I think these colours look very sleek and modern and they tend to be very easy to read.
-
- The fonts used in my portfolio are Lato and Oswald. Lato is the main font used, with some headers and the 'My Projects' logo using Oswald. I like both of these fonts and I think they are eye catching but also very clean and easy to read.
-
- I think the main image is very important for a webpage. It needs to grab the attention of the user without being too distracting from the content. For my landing page, I have chosen to use a picture of myself at a football match as I like the colours and makes gives the page feel warm. It also shows what I look like which is useful for recruiters, and it shows me doing a hobby so you get an idea about my personality. For the cafe page, I opted to use a minimalist, slightly blurred, real cafe image as I think it looks very modern and clean. For the booking pages, I opted to use a warm non-distracting image so the booking form elements were clearly visible with a nice to look at image in the background.
-
- The Website was tested on Google Chrome, Internet Explorer, Opera and Microsoft Edge.
- The website was viewed on a variety of devices such as Desktop, Laptop, iPhone 15 Pro and iPad Air.
- Inspect Element's built in device type viewer was used to ensure functionality on different screen sizes.
- A large amount of testing was done to ensure that all pages were linking correctly.
- Friends and colleagues were asked to review the site and point out any bugs. Any bugs found are documented in the Known Bugs section below.
-
Tested all features on all pages. All working as expected
Action Expected Result Pass or Fail Clicking on 'My Projects' logo Takes me back to the home page Pass on all pages Click links in Navbar Links take me to the correct page Pass on all pages Click links in footer Links take me to the correct page Pass on all pages Click 'Book' button on Cafe page Directed to a booking form page Pass Leaving options blank on booking form Prevented from making a booking without all fields filled Pass Clicking 'Book!' button on Booking form Redirected to a confirmation page Pass Clicking play on embedded YouTube videos in Gallery page Video should begin playing Pass Clicking on images in Gallery page Should direct me to the correct image on the original Flickr page Pass Resizing the webpages Content should shrink and grow to be visible on different screen sizes Pass on all pages
- Images used have been scaled down in order to reduce load times. Original photos are 25-50% higher resolution than the ones used in the website. Also converted image type to .webp which helps speed up loading time.
- Deferred loading of AwesomeFont script using async which increases loading speed of the website.
- Preloaded images as a priority to further reduce load times.
- "Lazy" loading of images on Gallery page to ensure high performance.
- Use of Chrome's built in Lighthouse feature to check performance of each page ensuring over 95% performance on all pages on Desktop, and over 85% on Mobile (Gallery page is lower performance due to large videos being embedded).
.png){kind=link}
.png){kind=link}
.png){kind=link}
.png){kind=link}
.png){kind=link}
- On some mobile devices, the floating text on the landing/home page covers a small part of the top Navbar. FIXED 12/04/2022
- On some mobile devices, scrolling down on the landing/home page can result in being unable to scroll back up the page.
- Booking form can be difficult to use on very small devices. FIXED 11/04/2022
- Booking form fields allow for use of special characters and do not check if the user has provided a valid phone number or email address. It is also possible to set the date and time to a historic value.
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 (not top of page), locate the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "Pages" Section.
- Under "Source", click the dropdown called "Deploy from a branch" and select "main".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
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.
- 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 in Step 3.
$ git clone https://github.com/AndyJames11/First-Project.git
- Press Enter. Your local clone will be created.
$ git clone https://github.com/AndyJames11/First-Project.git
> Cloning into `First-Project-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
-
The full-screen hero image and navbar code came from the LoveRunning activity in CodeInstitute
-
CodeInstitute README.md sample was very useful when writing this README file as it gave me prompts as to what I should add, and showed a good way of formatting the content.
-
All content was written by me with some snippets of code coming from Stack Overflow and W3schools. The code used was then edited with parts added/changed. Code that remains unchanged is shown below:
* {
margin:0;
padding:0;
border:0;
}
- This code. Most of this has been edited, but the code that remains is:
.row {
display: flex;
}
.column {
flex: 50%;
}
and
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
- I used code on this page to understand how to create a collapsible menu in my website's top navbar. I used the code as a base to understand how it works, and then re-wrote it to fit my needs. Some small pieces of code remains the same, for example:
.collapsible-menu ul {
list-style-type: none;
padding: 0;
}
however, all code from the page has been re-written to fit better with my website and the theming of it.
-
The image used in the landing/home page is of me from a charity football match. Photo was taken by a friend. Link to full size image.
-
The image used in the Cafe page was taken by Petr Sevcovic and was downloaded from Unsplash here.
-
The image used in the Booking and Confirmation pages was uploaded as free-to-use to Pixabay. Link to the original picture is here.
-
The images used in the Gallery page were taking from our cup final on the 5th April 2024. This is the cameraman's twitter post and this is the link to the original photos.
-
The full match video footage on the Gallery page is embedded from the VEO website. Game 1 and Game 2
-
My Mentor for continuous helpful feedback.
-
W3schools.com and MDN Web Docs as I used both countless times to gain a better understanding of things such as background-position, floats, flexboxes etc.
-
Google was incredibly helpful for very specific things that I got stuck on during the project. I had to use Google many times to figure out why my code was not working or to figure out how to perform an action in CSS.
-
Tutor support at Code Institute for their support.