Hansal's Bootstrap Portfolio

Description

This project is to display my work to potential employers and colleagues - but this time using the Bootstrap framework (as opposed to only HTML and CSS last project). The requirements (in the form of Acs) to make this are being taken directly from EdX FE Bootcamp third challenge's description.

Please view the 'Credits' section below for the sources I used to implement my ideas.

Link to published site

https://09hanvaik.github.io/Bootstrap-Portfolio/

Screenshot of site

Installation

No installation steps required.

Credits

I have used the following sites in my project as either and inspiration or to overcome a hurdle:

• Skills for Life/EdX FE bootcamp course 2023/24.
• Footer section inspired from https://mdbootstrap.com/docs/standard/navigation/footer/.
• Logos downloaded from https://graphicsfamily.com/downloads/free-social-media-logos-and-icons-set/
• Open link in new tab information: https://www.freecodecamp.org/news/how-to-open-a-link-in-a-new-tab/#:~:text=You%20can%20use%20the%20target,opening%20anchor%20tag%20like%20this.
• Placeholder images linked to: https://placehold.co.
• Special mention to the Bootstrap "list" documentation: https://getbootstrap.com/docs/5.3/components/list-group/ - it made my list look really nice! I used https://wordhtml.com to change my existing list in my word document and then find-replaced all <ul> and <li> with <ul class="list-group"> and <li class="list-group-item">, respectively.
• Used description from https://skillsforlife.edx.org for the "skills section".

Acceptance Criteria

This section is taken directly from EdX FE Bootcamp third challenge's description:

1. Create a new GitHub repository and name it Bootstrap-Portfolio.

2. Clone this repository to your computer.

3. Inside your Bootstrap-Portfolio repo, create the folder structure for the webpage.

   • Create a folder structure.

     • Create a index.html.

     • Create a css folder.

     • Inside create a style.css file.

   • Create an images folder.

     • Place all your images in this folder.

4. Using Bootstrap, recreate your portfolio site with the following items:

   • A navigation bar

   • A navigation menu at the top. Feel free to use the navbar code provided in Bootstrap's documentation, or create your own navbar by applying the correct Bootstrap classes to your HTML.

     • Include links that are applicable to your portfolio.

     • Links should navigate to the appropriate sections

   • A hero section

     • A jumbotron featuring your picture, your name, and any other information you'd like to include.

   • A work section

     • A section displaying your work in grid.

     • If you need to use placeholder image use placehold.co Links to an external site.

     • Use Bootstrap cards for each project.

     • The description should give a brief overview of the work.

     • Each project will eventually link to your class project work!

   • A skills section

     • List out the skills you expect to learn from the bootcamp.

   • An about/contact section

     • An About Me section in the same row.

   • A footer section

     • All hyperlinks should have a hover effect.

     • All buttons should display a box shadow upon hover.

5. Your Bootstrap solution should minimize use of media queries.

6. Deploy your new Bootstrap-powered portfolio to GitHub Pages.