This is user-centric frontend development project undertaken by the developer to create an online presence for himself as his first milestone project with the code institute.

This project is intended to create an online presence for myself whilest introducing me as a software developer. It is also intended as an avenue to reach out to other webdevelopers for collaborations and at the same time to sell out my skills to recruiters for a software developer role.

• To enable user exhibit his work as a software developer.
• To enable other developers find the developer for collaborations.
• to enable recruiters accessto the developer for interviews.

• Colours used for the project include: 2 shades of green, white and blue

    Roboto is the main font used for the project. Anton was used for introducing the name of the developer in the first section
    as well as his title. the fall back font for the entire website was Sans Serif.

        The image of the developer can be found in the first section of the website. This is to enable collaborators and potential recruiters
        have a fair idea who they are dealing with and to add up to the visual dynamics of the page.

• The website is divided into 5 parts: The navigation bar is the first part of the website. it features the surname of the developer as the logo for the website. 3 navigation buttons are located on the right side of the page.

• The second part introduces the name and role of the developer followed by an image of the developer and a brief introduction.

• The third part shows a brief Resume of the developer as well as his skills in relation to web development.

• The Fourth part is a contact form inviting other developers/recruiters for collaborations/job offers.

• The Fifth and final part of the website is the footer which houses two social media icons which act as links to the social media pages of the developer.

• HTML5
• CSS3
• JavaScript

1. Bootstrap4
2. Font Awesome
3. Google Fonts
4. Git
5. GitHub
6. Figma

• W3C Markup Validator and W3C CSS validator Services were used to ensure there were no syntax errors in the project. JavaScript was checked with JS Hint Validator.
• The responsiveness of the website was tested intermittently with Google Chrome developer tools during the developer process.

1. Users should be able to navigate to all sections of the page using the navigation menus. A click on the logo (Anane) should revert the user to the home page.
2. Users should be able to use the form to contact the developer.
3. Users should be able to link up with the developer using the social media icons located in the footer.

1. The user will be able to download a PDF copy of the developer's resume in further developments.
2. The user should be able to view the various projects the developer has undertaken in future developments.
3. the user should be able to access a blog on the developers experiences/perspective in future updates.

1. ProblemThe footer was failing to stretch fully across the page in smaller screens.
   Solution: Z-index property along side the right and left rule were used to solve the problem.

2. Problem Navigations menus in the header jammed up on mobile versions of the website
   Soution: This was fixed with media queries and Javascript codes as well as bootstrap framework.

3. Problem: The introductory passage located by the profile image jammed up with the image on medium sized screen and less.
   Solution: The above described issue was solved by making the image container fluid.

4. Problem: the progress bar and lables in the skill section were not aligned.
   Solution: the progress bar and lables were brought to alignment by increasing the column of the progress bars while decreasing the column of the the labels. the progress bars were then brought to alignment using the CSS padding-top rule.

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

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

The code for the website were largely written by the developer (John Divine Anane) using the Bootstrap4 frame-work to a large extent. Codes from Stack Overflow were used to debug navigation bar unintended appearance.

JavaScript codes were introduced from Stack Overflow with the help of my mentor, Oluwafemi Omedale to solve mobile responsive navigation problems subsequentely resulting in the hamburger button seen on mobile view of the website.

Dubuging of the image and text jam up of the first section of the website noticed in medium sized screen views as well as navigation bar menu issues in mobile devices was resolved with the help of Andrew Sokolic, a software developer.

All content was written by the developer.

Inspiration for the ReadMe.md content was drawn from the Code institutes github page and literature from link.

All images were created by the developer.

1. I acknowledge my Mentor, Oluwafemi Omadale for his helpful feedback and support

2. Tutors and Slack community of the Code institute

3. Andrew Sokolic, a friend for his advice and tutelege.