Milestoneproject-1

🏠 Homepage

Portifolio - website is a simple website portfolio

User Experience (UX)

User stories

First Time Visitor Goals

• As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the professional.
• 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 information to understand what he has to offer in software development. I also want to locate his social media links to see their followings on social media to determine how trusted and known he is.

Returning Visitor Goals

• As a Returning Visitor, I want to find information about codding skills.
• As a Returning Visitor, I want to find the best way to get in contact with him.
• As a Returning Visitor, I want to find community links.

Goals

• Easy authoring Portfolio website created in HTML,CSS, and js
• Ordering of posts by publish date or content date
• customization of site layout with main navigation menu
• High resolution (2x) support for photo-blog images
• Ability to author hidden posts and schedule a publish date
• Ability to create posts that never show up in the timeline and tagging of posts by category
• Support for Automatic link to social media
• Support for Automatic link Download CV in Pdf
• No JavaScript requirement for client browsers

Design

• Color Scheme The two main colors used are green and white.

• Typography The Roboto font is the main font used throughout the whole portfolio with Sans Serif as the fallback font.

• Imagery Imagery is important. The large, background hero image is designed to be striking and catch the user's attention. It also has a modern, energetic aesthetic.

Wireframes

Page	Desktop	Tablet	Mobile
About	view	view	view
Projects	view	view	view
Skills	view	view	view
Contact	view	view	view

Features

• Responsive on all device sizes
• Interactive elements

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript
• Bootstrap5

Frameworks, Libraries & Programs Used

1. Bootstrap 5.0.1
   • Bootstrap was used Stores CSS Bootstrap library files
2. jsDoc
   • jsDoc was used as format to Stores JavaScript Bootstrap library
3. CSS3
   • CSS3 was used for Implementation of main HTML CSS that imports all CSS files in the main CSS folder
4. Git
   • Git was used for version control by utilizing the IDE terminal to commit to git and push to GitHub
5. GitHub
   • GitHub is used to store the project after being pushed from Git

Testing

w3c-css will check the compliance against CSS profile specified (CSS3 by default) and report errors and potential problems in Cascading Style Sheets.

Validate CSS using W3C CSS Validation Service

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

There are two types of validation events: errors and warnings.

• Errors are reported when the checked CSS does not respect the CSS recommendation.
• Warnings do not state a problem regarding the specification. They are used to notify that some CSS-input and could lead to a strange behavior on some user agents.

Further Testing

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhone X.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

• On some mobile devices the main Image pushes to the center of page.
• A white gap can be seen to the bottom of the footer.
• On Microsoft Edge and Internet Explorer Browsers, footer are pushed upwards when hovering over them.

Deployment

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 the page), locate the Settings Button on the menu
• Scroll down the Setting page until you locate the GitHub Pages Section
• Under Source, click the dropdown called “None” and select “Master Branch”
• The Page will automatically refresh
• Scroll back down through the page to locate the now published site Link in the GitHub Pages section

Contributing

• Open issue, discuss proposal
• Fork and clone repository
• Review changes
• Send pull request

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...

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

Making a Local Clone

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

$ git clone https://github.com/Doc-Le/Project-Milestone-1

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/Doc-Le/Project-Milestone-1.git
> Cloning into 'Project-Milestone-1'...
> remote: Enumerating objects: 428, done.
> remote: Counting objects: 100% (428/428), done.
> remote: Compressing objects: 100% (230/230), done.
> remote: Total 428 (delta 207), reused 405 (delta 185), pack-reused 0
> Receiving objects: 100% (428/428), 3.76 MiB | 4.00 MiB/s, done.
> Resolving deltas: 100% (207/207), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Code

T he full-screen hero image code came from this StackOverflow post

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

MDN Web Docs : For Pattern Validation code. Code was modified to better fit my needs and to match an Irish phone number layout to ensure correct validation. Tutorial Found Here

Content

• All content was written by the developer

Media

• Logo custom made by the developer with Adobe Illustrator