├── .gitignore ├── favicon.ico ├── assets ├── img │ ├── logos │ │ ├── angies.png │ │ ├── github.png │ │ ├── medium.png │ │ ├── twitter.png │ │ ├── linkedin.png │ │ ├── Icon-GitHub.png │ │ ├── arrow-down.png │ │ ├── arrow-right.png │ │ ├── Icon-Export.svg │ │ ├── css.svg │ │ ├── js.svg │ │ └── html.svg │ └── backgrounds │ │ ├── header-shapes.png │ │ ├── contact-form.svg │ │ ├── contact-form-bg.svg │ │ ├── header-shapes.svg │ │ ├── header-shapes mobile@2x.svg │ │ └── header-bg.svg └── css │ └── styles.css ├── .hintrc ├── .stylelintrc.json ├── LICENSE ├── .github └── workflows │ └── linters.yml ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Files and folders that are not needed to be tracked 2 | node_modules/ 3 | test.md 4 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/favicon.ico -------------------------------------------------------------------------------- /assets/img/logos/angies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/assets/img/logos/angies.png -------------------------------------------------------------------------------- /assets/img/logos/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/assets/img/logos/github.png -------------------------------------------------------------------------------- /assets/img/logos/medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/assets/img/logos/medium.png -------------------------------------------------------------------------------- /assets/img/logos/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/assets/img/logos/twitter.png -------------------------------------------------------------------------------- /assets/img/logos/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/assets/img/logos/linkedin.png -------------------------------------------------------------------------------- /assets/img/logos/Icon-GitHub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/assets/img/logos/Icon-GitHub.png -------------------------------------------------------------------------------- /assets/img/logos/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/assets/img/logos/arrow-down.png -------------------------------------------------------------------------------- /assets/img/logos/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/assets/img/logos/arrow-right.png -------------------------------------------------------------------------------- /assets/img/backgrounds/header-shapes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mumo-esther/portfolio-by-bootstrap-1/HEAD/assets/img/backgrounds/header-shapes.png -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "tailwind", 11 | "apply", 12 | "variants", 13 | "responsive", 14 | "screen" 15 | ] 16 | } 17 | ] 18 | }, 19 | "csstree/validator": true, 20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 21 | } 22 | -------------------------------------------------------------------------------- /assets/img/logos/Icon-Export.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /assets/img/backgrounds/contact-form.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/img/backgrounds/contact-form-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | nodechecker: 50 | name: node_modules checker 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - name: Check node_modules existence 55 | run: | 56 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /assets/img/backgrounds/header-shapes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/backgrounds/header-shapes mobile@2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/backgrounds/header-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Portfolio - made with bootstrap

5 | 6 |
7 | 8 | # 📗 Table of Contents 9 | 10 | - [📖 About the Project](#about-project) 11 | - [🛠 Built With](#built-with) 12 | - [Tech Stack](#tech-stack) 13 | - [Key Features](#key-features) 14 | - [🚀 Live Demo](#live-demo) 15 | - [💻 Getting Started](#getting-started) 16 | - [Setup](#setup) 17 | - [Prerequisites](#prerequisites) 18 | - [Usage](#usage) 19 | - [👥 Authors](#authors) 20 | - [📝 License](#license) 21 | 22 | # 📖 [Portfolio Made with boostrap] 23 | 24 | **[Portfolio made with bootstrap]** is an exercise on using a CSS framework like Bootstrap to create a new website quickly from scratch. 25 | 26 | ## 🛠 Built With 27 | 28 | ### Tech Stack 29 | 30 |
31 | Client 32 | 36 |
37 | 38 | 39 | ### Key Features 40 | 41 | - [navbar](https://getbootstrap.com/docs/5.0/components/navbar/) and [nav](https://getbootstrap.com/docs/5.0/components/navs-tabs/) for the header. 42 | - [scrollspy](https://getbootstrap.com/docs/5.0/components/scrollspy/) to update the active menu link when the user scrolls. 43 | - [cards](https://getbootstrap.com/docs/5.0/components/card/) for the list of portfolio projects. 44 | - [buttons](https://getbootstrap.com/docs/5.0/components/buttons/). 45 | - [badges](https://getbootstrap.com/docs/5.0/components/badge/) for the list of technologies. 46 | - [modals](https://getbootstrap.com/docs/5.0/components/modal/) for the popup window with the project details. 47 | - [Bootstrap forms components](https://getbootstrap.com/docs/5.0/forms/overview/) to create the contact form. 48 | - [the grid system](https://getbootstrap.com/docs/5.0/layout/grid/) to place elements inline with others. 49 | 50 |

(back to top)

51 | 52 | ## 🚀 Live Demo 53 | 54 | - [Live Demo Link](https://veronica365.github.io/portfolio-by-bootstrap/) 55 | 56 |

(back to top)

57 | 58 | ## 💻 Getting Started 59 | 60 | To get a local copy up and running, follow these steps. 61 | 62 | ### Prerequisites 63 | 64 | In order to run this project you need: 65 | 66 | - A [browser](https://www.google.com/search?q=what+is+a+browser&oq=what+is+a+browser&aqs=chrome..69i57.2748j0j1&sourceid=chrome&ie=UTF-8) of your choice 67 | - That you have set up Git on you desired computer 68 | 69 | ### Setup 70 | 71 | Clone this repository to your desired folder: 72 | 73 | ```sh 74 | cd your-desired-folder 75 | git clone git@github.com:veronica365/portfolio-by-bootstrap.git 76 | ``` 77 | 78 | ### Usage 79 | 80 | To run the project, execute the following command: 81 | 82 | - open the repo folder `portfolio-by-bootstrap` 83 | - Rightclick on the index.html file and select open in the browser 84 | 85 |

(back to top)

86 | 87 | ## 👥 Authors 88 | 89 | 👤 **Author1** 90 | 91 | - GitHub: [@verocnica365](https://github.com/verocnica365) 92 | - GitHub: [@mumo-esther](https://github.com/mumo-esther) 93 | 94 |

(back to top)

95 | 96 | ## 📝 License 97 | 98 | This project is [MIT](./LICENSE) licensed. 99 | 100 |

(back to top)

101 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #f7f7f9; 4 | font-family: Poppins, sans-serif; 5 | } 6 | 7 | .navbar { 8 | height: 80px; 9 | background: white; 10 | padding: 1rem 0; 11 | } 12 | 13 | .navbar-light .navbar-brand { 14 | font-weight: 700; 15 | font-size: 18px; 16 | line-height: 20px; 17 | color: #6070ff; 18 | } 19 | 20 | .navbar-light .nav-item .nav-link { 21 | font-weight: 500; 22 | font-size: 15px; 23 | line-height: 20px; 24 | color: #344563; 25 | } 26 | 27 | .portfolio-background h1 { 28 | font-weight: 700; 29 | font-size: 48px; 30 | line-height: 60px; 31 | letter-spacing: 0.37px; 32 | color: #091e42; 33 | } 34 | 35 | .portfolio-background p { 36 | font-weight: 400; 37 | font-size: 20px; 38 | line-height: 28px; 39 | color: #344563; 40 | } 41 | 42 | .portfolio-background h2 { 43 | font-weight: 500; 44 | font-size: 16px; 45 | line-height: 24px; 46 | color: #7f8cff; 47 | } 48 | 49 | .portfolio-background { 50 | background-image: url("/assets/img/backgrounds/header-bg.svg"); 51 | background-size: contain; 52 | background-repeat: no-repeat; 53 | background-position: center center; 54 | background-color: #fff; 55 | height: calc(100vh - 80px); 56 | border-bottom-left-radius: 100px; 57 | } 58 | 59 | .card { 60 | border: 1px solid #dfe1e6; 61 | border-radius: 24px; 62 | cursor: pointer; 63 | } 64 | 65 | .card-body h5.card-title { 66 | font-weight: 700; 67 | font-size: 40px; 68 | line-height: 52px; 69 | color: #091e42; 70 | } 71 | 72 | .card-body ul li { 73 | font-weight: 400; 74 | font-size: 18px; 75 | line-height: 24px; 76 | color: #6b778c; 77 | } 78 | 79 | .card-body ul li:first-child { 80 | font-weight: 500; 81 | color: #344563; 82 | } 83 | 84 | .card-body p.card-text { 85 | font-weight: 400; 86 | font-size: 16px; 87 | line-height: 24px; 88 | color: #344563; 89 | } 90 | 91 | .card-body span.badge { 92 | font-weight: 500; 93 | font-size: 12px; 94 | padding: 0.5rem 1rem; 95 | line-height: 16px; 96 | letter-spacing: 0.03em; 97 | color: #6070ff; 98 | } 99 | 100 | .contact-background { 101 | background-color: #6070ff; 102 | border-top-left-radius: 100px; 103 | } 104 | 105 | .background { 106 | background-image: url("/assets/img/backgrounds/contact-form-bg.svg"); 107 | background-size: contain; 108 | background-repeat: no-repeat; 109 | background-position: center center; 110 | width: 100%; 111 | } 112 | 113 | .contact-title { 114 | font-weight: bolder; 115 | color: #fff; 116 | font-size: 40px; 117 | } 118 | 119 | .contact-text p { 120 | font-size: 20px; 121 | text-align: center; 122 | color: #fff; 123 | } 124 | 125 | .form-group { 126 | display: flex; 127 | justify-content: center; 128 | align-items: center; 129 | } 130 | 131 | .form-group input, 132 | .form-group textarea { 133 | width: 400px; 134 | padding: 1rem; 135 | color: #172b4d; 136 | font-weight: 400; 137 | font-size: 17px; 138 | line-height: 20px; 139 | background: #fff; 140 | border: 1px solid #cfd8dc; 141 | margin-bottom: 1rem; 142 | border-radius: 8px; 143 | outline: none; 144 | } 145 | 146 | .form-group button { 147 | height: 3rem; 148 | border: none; 149 | color: #6070ff; 150 | font-weight: 500; 151 | font-size: 17px; 152 | line-height: 24px; 153 | padding: 12px 16px; 154 | border-radius: 8px; 155 | background-color: #fff; 156 | letter-spacing: 0.03em; 157 | } 158 | 159 | .about-me { 160 | border-top-right-radius: 120px; 161 | } 162 | 163 | .about-me .about-me-title { 164 | font-weight: 700; 165 | font-size: 40px; 166 | line-height: 52px; 167 | display: flex; 168 | align-items: center; 169 | color: #091e42; 170 | } 171 | 172 | .about-me .about-me-text { 173 | font-weight: 400; 174 | font-size: 16px; 175 | line-height: 24px; 176 | color: #344563; 177 | } 178 | 179 | .about-me .lets-connect { 180 | font-weight: 500; 181 | font-size: 16px; 182 | line-height: 24px; 183 | color: #7f8cff; 184 | } 185 | 186 | .about-me .languages li img { 187 | width: 48px; 188 | height: 48px; 189 | } 190 | 191 | .about-me .languages h5 { 192 | border-color: #dfe1e6; 193 | } 194 | 195 | @media screen and (max-width: 768px) { 196 | .portfolio-background { 197 | background-image: url("/assets/img/backgrounds/header-shapes.svg"); 198 | } 199 | 200 | .background { 201 | background-image: url("/assets/img/backgrounds/contact-form.svg"); 202 | background-position: top right; 203 | } 204 | } 205 | -------------------------------------------------------------------------------- /assets/img/logos/css.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/img/logos/js.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/img/logos/html.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | Portfolio with Boostrap 11 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 25 | 48 |
50 |
51 |
52 |
53 |
54 |
55 |

I'm Esther Glad to see you!

56 |

I'm a software developer! I can help you build a product, feature or website 57 | Look 58 | through some of my work and 59 | experience! If you like what you see and have a project you need coded, don't hestiate 60 | to 61 | contact me.

62 |

LET'S CONNECT

63 |
    64 |
  • twitter
    • 66 |
  • linkedin
    • 68 |
  • Medium
    • 70 |
  • Github
    • 72 |
  • Angies
    • 74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | Tonic 83 |
84 |
85 |
Tonic
86 |
    87 |
  • Canopy
    • 88 |
  • Backend Dev
    • 89 |
  • 2005
    • 90 |
91 |

A daily selection of privately personalized reads; no accounts or sign-ups 92 | required.

93 |
94 | html 95 | css 96 | Javascript 97 |
98 | See Project 100 |
101 | 173 |
174 |
175 |
176 | Canopy 177 |
178 |
179 |
Tonic
180 |
    181 |
  • Canopy
    • 182 |
  • Backend Dev
    • 183 |
  • 2005
    • 184 |
185 |

A daily selection of privately personalized reads; no accounts or sign-ups 186 | required.

187 |
188 | html 189 | css 190 | Javascript 191 |
192 | See Project 194 |
195 | 267 |
268 |
269 |
270 | Canopy 271 |
272 |
273 |
Tonic
274 |
    275 |
  • Canopy
    • 276 |
  • Backend Dev
    • 277 |
  • 2005
    • 278 |
279 |

A daily selection of privately personalized reads; no accounts or sign-ups 280 | required.

281 |
282 | html 283 | css 284 | Javascript 285 |
286 | See Project 288 |
289 | 361 |
362 |
363 |
364 | Tonic-2 365 |
366 |
367 |
Tonic
368 |
    369 |
  • Canopy
    • 370 |
  • Backend Dev
    • 371 |
  • 2005
    • 372 |
373 |

A daily selection of privately personalized reads; no accounts or sign-ups 374 | required.

375 |
376 | html 377 | css 378 | Javascript 379 |
380 | See Project 382 |
383 | 455 |
456 |
457 |
458 | 459 | 460 |
461 |
462 |
463 |
464 |

About
myself

465 |

Hello I'm a software developer! I can help you build a product , 466 | feature or 467 | website Look through some of my work and experience! If you like what you see and have a 468 | project 469 | you need coded, don't hestiate to contact me.

470 |

LET'S CONNECT

471 |
    472 |
  • twitter
    • 474 |
  • linkedin
    • 476 |
  • Medium
    • 478 |
  • Github
    • 480 |
  • Angies
    • 482 |
483 | Get Resume 484 |
485 |
486 |

Languages more

488 |
    489 |
  • 490 | #Javascript 492 |
    • 493 |
  • 495 | #HTML 497 |
    • 498 |
  • 499 | #CSS 501 |
    • 502 |
503 |
505 | Frameworks more
507 |
508 | Skills more
510 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |

Contact me

519 |
520 |

If you have an application you are interested in developing, a feature that you need 521 | built or a 522 | project that needs 523 | coding. I'd love to help with it

524 |
525 |
526 |
527 |
528 | 532 |
533 |
534 | 538 |
539 |
540 | 545 |
546 |
547 | 548 |
549 |
550 |
551 |
552 |
553 |
554 |
555 |
556 | 559 | 560 | 561 | --------------------------------------------------------------------------------