Click Here To Visit My Project Site

This repository is showcasing my first milestone project for The Code Institute.

I have chosen to do a personal portfolio project showing my employment history, skills, hobbies, interest and other development projects. It will showcase various skills, techniques and technologies such as HTML5, CSS3 and Bootstrap, that I have learnt and encountered throughout the course, to which I will then apply to creating my first milestone project.

The project will be fully responsive so that it can be viewed and accessed on all device sizes. This project is the first of many project and will be the main foundation for my other development projects, as I continue to learn, grow and progress throughout the course I will add more technologies to help me advertise my skills and experience to future employers.

The websites sole purpose is to display my development skills for future employers and job recruiters. Not only will it display my development skills but will also advertise my work experiences, education, extra skills, hobbies and interest.

This website will help future employers and recruiters get a better understanding of myself through a number of easy digestible web pages that are advertising and showing off my work experiences, education, hobbies, interest and skills as well as my development skills which will have live links to my other projects.

They will also be able to view my CV in a pdf format online and will have the option to download the CV as well. The website will also have a contact form, so that future employers and recruiters can get in direct contact with me through the website.

All the information will be taken from my CV and then changed, to give it more of an elegant style and then broken down into easy digestible chunks which will get website visitors straight to the point.

The website will also incorporate an eye catching design that will draw website visitors into know more about myself by visiting the other web pages. If the website visitor want to know more they will be able to view and download my CV with link provided by me. I will also incorporate a built in contact form that will allow visitors to get in direct contact with me. Live links to my other projects will also be provided for the users so that they can visit my other projects and see my development skills live.

Here in this section you will find a variety of user stories, since I am developing a personal portfolio website. The target audience for my personal portfolio project will be Job Recruitment Agencies, Employers, Developers, Contractors and Businesses.

• As a user, I want to be able to find and view the CV document, so that I can find out more about the applicant applying for a job role.

• As a user, I want to see visual markers to help with navigation, so as I navigate through the website I know where I am and what I am clicking on.

• As a user, I would like to see small key chunks of information about the developer, so that I can get a small overview of the developer and have the option to find out more.

• As a user, I want to be able to see live links to other projects, so that I can see the level of development and skills the developer has to offer.

• As a user, I want there to be an easy way to contact the portfolio developer, so that if I have any further question to ask I am able to do so.

• As a user, I want to able to see some social media links, so that I can follow this developer through social media if in the future I want to collaborate with this developer.

• Homepage - Web Browser -> Click To View

• Homepage - Tablet -> Click To View

• Homepage - Smartphone -> Click To View

• Resume Page - Web Browser -> Click To View

• Resume Page - Tablet -> Click To View

• Resume Page - Smartphone -> Click To View

• Project Page - Web Browser -> Click To View

• Project Page - Tablet -> Click To View

• Project Page - Smartphone -> Click To View

• Contact Page - Web Browser -> Click To View

• Contact Page - Tablet -> Click To View

• Contact Page - Smartphone -> Click To View

Here are a list of features that will be implemented and utilized within my project. There will also be a list future features I would like to add to the project at a later date as I learn and progress throughout the course.

• Feature 1 – Allow users to view and download my CV just by clicking an active hyperlink link. Which will open a new tab to view and from there they can save or print my CV.

• Feature 2 – Making my project responsive to allow users to access and view my project on a variety of different device sizes e.g. web browser, tablet and smartphone.

• Feature 3 – Having a helpful homepage that will display key headings, key text and read more link that will be directly linked to my resume page.

• Feature 4 – I will incorporate useful icons to give a better visual element to the project.

• Feature 5 – My project pages will have quick loading times and this will be done by having the core elements loading first.

• Feature 6 – I will include an active link element in my navigation bar to visually show users which webpage they are on.

• Feature 7 – A quick link to the top of the page will be provided for smartphone users.

• Feature 8 – A hover animations will be used to my headings and navigation bar to give my project a better visual look and to help users.

• Feature 9 - Social links to my Facebook, Twitter, LinkedIn and GitHub will be provided in the footer.

• Feature 10 – If a user click on my profile picture I will take them back to the homepage.

• Feature 11 – My direct email address will be displayed in the footer and will link to the contact page of the portfolio.

• Feature 1 – A fully working contact page with a captcha verification.

• Feature 2 – A collapsible navigation menu for smartphone devices.

• Feature 3 – A floating contact and chat button to be displayed on all pages.

• Feature 4 – An instant messaging service will be added at a later date to help users get in contact with me faster.

• Feature 5 – A collapsible sidebar for the resume page anchor link.

• Feature 6 – An active scroll feature for the resume page to inform the user as they scroll what resume section they are on.

Here is a list of programming languages used to create this project along with a list of frameworks, libraries and tools I also used to create this project.

• HTML5 -> Visit Site

  • HTML5 was used to create the overall structure and page elements to be viewed in a web browser.

• CSS3 -> Visit Site

  • CSS3 was used to give my project and its content style, layout, colours, a different font and format.

• Brackets -> Visit Site

  • Brackets is the text editor that I downloaded and used to create my project.

• Bootstrap 4.5.2 -> Visit Site

  • I will use bootstrap for the styling of my project , it will also be used for responsive features for my project.

• GitHub -> Visit Site

  • I used GitHub to store my project files by creating a repository for it and then using the Git terminal and its commands to version control and store my files.

• Git Terminal Desktop -> Visit Site

  • Git is the terminal program I used to commit and push my files to my GitHub repository to store my files and version control.

• GitHub Desktop -> Visit Site

  • GitHub desktop was used to clone my online repositories to my local storage so I could edit my project files using Brackets and also to create new files and directories for my online repository locally and then using the Git terminal to commit and push to my GitHub repo.

• Balsamiq Desktop -> Visit Site

  • Balsamiq was used in the design stage where I created my wireframes for my project to help me get visual representation of what my project could look like.

• Google Fonts -> Visit Site

  • Google fonts has been used to import my various font directly from google into my main CSS file.

• Font Awesome Icons -> Visit Site

  • Font awesome has been used for its icons which have been used throughout to give the project good visual elements and to help give a good user experience.

• Hover Effects CSS3 -> Visit Site

  • The hover effect that I have chosen is the Sweep To Right background transition and this has been used on the navigation bar and buttons to give a nice simple hover effect.

• Paint 3D -> Visit Site

  • Paint 3D was used to crop screenshot images and then saved to an appropriate image format.

• Google Chrome & Chrome Dev Tools -> Visit Site

  • Google Chrome and Chrome Dev Tools was used to help create my project as well as testing it as well.

• Table Generator -> Visit Site

  • This online tool helped with my further testing section of my readme file. It allowed me to create the tables for testing, then i saved the file as a CSV file. Then I uploaded the CSV file to the site to convert the CSV data into a markdown table format.

Here in this section I will be showing a variety of different validation techniques to thoroughly make sure my project website is fully compliant. I will use the W3C HTML5 and CSS3 online validation tools to check my project is compliant.

I will also use an online contrast checker to make sure my colours meet web accessibility standard. If there is any non-compliant code within the project it will be documented and then fixed and this will be the first step of my testing and debugging.

HTML5 Validation -> Visit Site

CSS3 Validation -> Visit Site

WebAIM Contrast Checker -> Visit Site

When it came to testing and debugging I found it easier to test and debug as I went along using Chrome Dev Tools. Every time I started a new page or section for my project I made sure that I fully tested it to make sure it worked correctly. This can be seen in my Git commit messages to my repository every time I pushed my completed files.

In this section I will test my project by testing against my user stories, features and functional testing. I will also be conducting different test using different browsers and a variety of different screen sizes as well to ensure my projects compatibly and responsiveness.

The projects main purpose is to display myself to potential recruiters by providing a CV link and displaying my work history, education, skills and interests. Also a way for the recruiter to get in contact with me. So to test my project I will give examples of certain features by looking back at my user stories.

I have decided to further test my project by listing all features and functions by creating a list in a table format and then manually test each one. I will test my project in a variety of different browser to ensure it is fully compatible. The browsers I have chosen are Google Chrome, Microsoft Edge, Firefox and Opera. I will test to see if all of the features and functions work as well as my font, images and project responsiveness.

To add to the further testing I used Chrome Dev tools whilst programming my project and used the responsive tool to simulate different device sizes. I also did some physical testing on a few devices such as my Samsung Galaxy S10+, Samsung Galaxy Tab 6, Dell Inspiron 15inch Laptop and my Acer 24inch Monitor.

• The contact form in the contact me page is not connect to a mail server and cannot send emails. To address this issue I added a message page to inform that this site feature is currently under construction and to email me directly by displaying my email.

• In my resume page I have a small issue and that is to do with the CSS overflow scroll. It currently works but the height has a fixed value and cannot be set to an automatic height for every screen size.

I used GitHub pages to deploy my project which is currently uploaded and published on my GitHub. Before my project was deployed, I used GitHub for version control and the development of my project.

During the development stage I had my project located in a directory called personal portfolio, but once the project was finished I then moved it to main root directory before I deployed my project.

The way that I deployed the project was by going to the settings of my GitHub repository and then scrolled down to the GitHub pages section and published my site, which then informed me that my site was published and gave me a live URL.

Whilst developing my project I ran my code locally by cloning my GitHub repo to my laptop hard drive. The text editor that i used to run my code locally was called Brackets. I used this text editor because i was able to connect my GitHub repo to it by downloading a GitHub extension, which allowed me to commit, push and get file to and from my GitHub pages. The text editor also allowed me to download serveral plugins such as Emmet, Beautify and Markdown Previewer to help me develop my project.

I also chose to use Brackets because of the wide range of features it had to offer such as the Live Preview feature, which allowed me to view my project live in my Chrome browser and edit whilst live without refreshing it. Another feature is the vertical split panel which allowed me to have two seperate files like my HTML open on the left panel and my CSS on the right panel. Also the file tree was easy to read and navigate but also allowed me to switch between other directorys and repos with ease.

Here I have listed the various different types of content I used in my project, the main bulk of the content came from my personal CV. The biggest help and guidance came from the Code Institute lessons, challenges and video tutorials.

Here I have listed a number of external URLs that helped me during the development of the project.

I used the Bootstrap CDN for my grid elements, buttons and progress bars.

• Bootstrap Grid

  • Bootstrap Grid

• Bootstrap Progress Bar

  • Bootstrap Progress

• Bootstrap Button

  • Bootstrap Button

• I used Google Font for my font and this was done by importing the font to my CSS file.

  • Google Fonts

• I used this URL to help me with add in HTML entities to my HTML code.

  • HTML Entities

• I used this URL for the text shadowing of my headers.

  • Text Shadowing

• I used this URL for my profile picture to add a greyscale filter.

  • Greyscale

• I used this URL to help me with the display selector to see if there is an opposite to display:none

  • Display None

• I used this URL to help me with my profile picture so that it fits the container it is in.

  • Object Fit

• I used this URL to help me find the different grey colour codes for my website.

  • HTML Colour Code

• I used this URL to help me code my internal anchor links for my website.

  • Anchor Link

• I used this URL to help me get the status code for my message 501 page.

  • Message 501

• I used this URL to help me with the viewport max height.

  • Viewport Max

• Profile Picture – The profile picture used in this project was my own personal photo of me at my graduation ceremony.

• Icons – All of the icons used in the project are from Font Awesome CDN which I declared in the head of every HTML webpage. (https://use.fontawesome.com/releases/v5.14.0/css/all.css)

• Hover Transition – The hover transition was used from another CDN and again was declared in the head in all HTML webpages. (https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css)

I want to acknowledge my student mentor Giuseppe Sorrentino for his helpful advice and guidance throughout the project. I also want thank the Code Institute course lessons, challenges and video tutorials as well as stack overflow, the W3C school, bootstrap and the slack community.

My inspiration primarily came from The Code Institute Rose Resume mini project. I really enjoyed working on the mini project and I liked the overall look and feel of it. This is the reason why I chose the Rosie Resume as my inspiration.

When designing my own project, I did everything I could to make my project different from the Rosie Resume but the overall structure is similar but the content and style is what makes my project different.

Not only did I want the project to look good but I wanted to showcase the knowledge and skills that I had learnt so far from The Code Institute Course. As I progress and grow throughout the course, so will the portfolio.