cyberrie / Bootstrap-Portfolio

Fully responsive Portfolio Web Application built and designed using semantic HTML, advanced CSS and Bootstrap. External links to portfolio projects, social media platforms and contact form.

Table of contents

• Overview
• Acceptance Criteria
• Portfolio Demo
• Links
• My process
• Built with
• What I learned
• Useful resources
• Author
• Acknowledgments

Overview

This project was completed to further enhance my skills I have learned so far with the foucs on this week's learnings on UX, advanced CSS and Bootstrap.

Acceptance Criteria

To recreate my portfolio from last week, using Bootstrap, with some conditions, as below:

• A navigation bar: either Bootstrap or my own
• Links should be included that are applicable to portfolio and navigate to appropriate sections
• A jumbotron featuring the picture, name, and any other desired information
• Section about me, including skills expected to learn from this course
• A section displaying work in grid (Bootstrap): use Bootstrap cards for each project, with brief description of each. Each project should link to your projects.
• All hyperlinks should have a hover effect
• All buttons should display a box shadow upon hover
• A footer section

Portfolio Demo

The following animation shows my web aplication's appearance:

Links

You will be able to see my portfolio page URL if you navigate into Settings → Pages inside this repository.

Or, click on this link: Helena's Bootstrap-Portfolio

My Process

Utilised same design from original portfolio but used Bootstrap components throughout my application, including below:

• Navbar
• Jumbotron
• Bootstrap grid built using Bootstrap Cards

I have customised styling of all Bootstrap components to recreate my original proftolio. This was a good exercise in terms of getting familiar with default component styles, selector precedence and the usage of CSS !important property.

Built with...

• Semantic HTML5 markup
• Advanced CSS
• Bootstrap
• Desktop-first workflow

What I learned

Bootstrap is essentialy flexbox but it simplifies the process of building responsive applications with it's built-in column system. Subsequently it reduces the need of using media queries.

I will utilise Bootstrap only where applicable in my future projects. I have learned that it is sometimes challenging to create more complex custom-made design, using Bootstrap due to default stylings.

Bootstrap 4.3. s still more prevalent on websites than its newer version.

Useful Resources

• Bootstrap Documentation - Essential for this project.

Author

©️ Helena Gilja

• GitHub - cyberrie

Acknowledgments

🌟 Special thanks to TA Andrew and his assistance in resolving some challenges with this project!