Add skill progress bars

package.json

@@ -12,8 +12,9 @@
   "dependencies": {
     "airtable": "^0.12.2",
     "boostrap": "^2.0.0",
-    "bootstrap": "^5.3.1",
+    "bootstrap": "^5.3.2",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.14.2",
     "react-router-dom": "^6.14.2"

src/App.css

@@ -62,14 +62,14 @@ nav a:hover {
   display: flex;
   align-items: center;
   width: 80%;
-  margin: 0 auto;
-  margin-top: 5%;
+  margin: 7% auto 0;
 }
 .greeting {
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
   font-size: 70px;
   margin-bottom: 43px;
+  line-height: 95px;
 }
 #name {
   overflow: hidden;
@@ -148,13 +148,34 @@ nav a:hover {
 /* Tech stacks icons*/
 
 .technology-icon {
-  width: 5%;
+  width: 8%;
 }
-.skill-set {
+.skill-set-container{
   display: flex;
   margin-top: 5%;
-  width: 100%;
+  height: 80vh;
+}
+.skill-set-container-one,
+.skill-set-container-two
+{
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5%;
+}
+.progress-container{
+  display: flex;
   gap: 3%;
+  align-items: center;
+  width: 100%;
+}
+.two{
+  justify-content: flex-end;
+}
+.progress-bar{
+  width: 50% ;
+  background-color:#00cc00
 }
 /* Project section*/
 .project-page {

src/App.jsx

@@ -26,5 +26,3 @@ export default function App() {
   )
 }
 
-// route branch is also route / when the page first loads
-

src/Pages/About.jsx

@@ -1,7 +1,20 @@
 import React from "react";
 import * as Images from "../images";
+import { ProgressBar } from "react-bootstrap";
 
 export default function About() {
+  const JavaScript = 90;
+  const html = 95;
+  const css = 90;
+  const react = 85;
+  const bootstrap = 85;
+  const mySQL = 80;
+  const Python = 80;
+  const Flask = 70;
+  const jQuery = 70;
+  const Firebase = 70;
+  const Git = 80;
+  const Figma = 90
   return (
     <div className="about-container">
       <div className="skill-introduction-container">
@@ -15,16 +28,186 @@ export default function About() {
           as a knack for enhancing user experiences with jQuery.
         </p>
       </div>
-      <div className="skill-set">
-        <img className="technology-icon" src={Images.html} alt="html-icon" />
-        <img className="technology-icon" src={Images.css} alt="css-icon" />
-        <img className="technology-icon" src={Images.js} alt="js-icon" />
-        <img className="technology-icon" src={Images.mySQL} alt="mySQL-icon"/>
-        <img className="technology-icon" src={Images.react} alt="react-icon" />
-        <img className="technology-icon" src={Images.bootstrap} alt="bootstrap-icon"/>
-        <img className="technology-icon" src={Images.netlify} alt="netlify-icon" />
-        <img className="technology-icon" src={Images.figma} alt="figma-icon"/>
-        <img className="technology-icon" src={Images.npm} alt="npm-icon"/>
+
+      <div className="skill-set-container">
+        <div className="skill-set-container-one">
+          <div className="progress-container">
+            <img className="technology-icon" src={Images.js} alt="js-icon" />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={JavaScript}
+              label={`${JavaScript}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container">
+            <img
+              className="technology-icon"
+              src={Images.html}
+              alt="html-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={html}
+              label={`${html}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container">
+            <img className="technology-icon" src={Images.css} alt="css-icon" />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={css}
+              label={`${css}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container">
+            <img
+              className="technology-icon"
+              src={Images.bootstrap}
+              alt="bootstrap-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={bootstrap}
+              label={`${bootstrap}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container">
+            <img
+              className="technology-icon"
+              src={Images.react}
+              alt="react-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={react}
+              label={`${react}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container">
+            <img
+              className="technology-icon"
+              src={Images.mySQL}
+              alt="mySQL-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={mySQL}
+              label={`${mySQL}%`}
+              visuallyHidden
+            />
+          </div>
+        </div>
+        {/* skill-set-container-two section */}
+        <div className="skill-set-container-two">
+        <div className="progress-container two">
+            <img
+              className="technology-icon"
+              src={Images.git}
+              alt="git-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={Git}
+              label={`${Git}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container two">
+            <img
+              className="technology-icon"
+              src={Images.firebase}
+              alt="firebase-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={Firebase}
+              label={`${Firebase}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container two">
+            <img
+              className="technology-icon"
+              src={Images.jQuery}
+              alt="jQuery-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={jQuery}
+              label={`${jQuery}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container two">
+            <img
+              className="technology-icon"
+              src={Images.python}
+              alt="python-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={Python}
+              label={`${Python}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container two">
+            <img
+              className="technology-icon"
+              src={Images.flask}
+              alt="flask-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              id = "flask"
+              variant="success"
+              animated
+              now={Flask}
+              label={`${Flask}%`}
+              visuallyHidden
+            />
+          </div>
+          <div className="progress-container two">
+            <img
+              className="technology-icon"
+              src={Images.figma}
+              alt="figma-icon"
+            />
+            <ProgressBar
+              className="progress-bar"
+              variant="success"
+              animated
+              now={Figma}
+              label={`${Figma}%`}
+              visuallyHidden
+            />
+          </div>
+        </div>
       </div>
     </div>
   );

src/Pages/Brand.jsx

@@ -6,18 +6,16 @@ export default function Brand() {
     <div className="home-container ">
       {/* Name && Introduction */}
       <div className="introduction-container">
-        <div>
           <h1 className="greeting">
-            Nice to meet you!
-            <br />
+            Nice to meet you!{""}
+            <br /> 
             I’m <span id = "name" >Justin</span>
           </h1>
           <p className="introduction-message">
             Based in the Toronto, I’m a front-end developer
-            <br /> passionate about building accessible web apps
-            <br /> that users love.
+            passionate about building accessible web apps
+            that users love.
           </p>
-        </div>
       </div>
       {/* image */}
       <div className="image-container">

src/images/index.js

@@ -7,10 +7,13 @@ export { default as js } from "./jsIcon.png"
 export { default as html } from "./htmlIcon.png"
 export { default as css } from "./cssIcon.png"
 export { default as bootstrap } from "./bootstrapIcon.png"
-export { default as netlify } from "./netlifyIcon.png"
-export { default as figma } from "./figmaIcon.svg"
-export { default as npm } from "./npmIcon.svg"
 export { default as mySQL } from "./mySQLIcon.png"
+export { default as figma } from "./figmaIcon.png"
+export { default as python } from "./pythonIcon.png"
+export { default as git } from "./gitIcon.png"
+export { default as firebase } from "./firebaseIcon.png"
+export { default as flask } from "./flaskIcon.webp"
+export { default as jQuery } from "./jQueryIcon.png"
 export { default as weatherThumbNail} from "./weatherThumbNail.png"
 export { default as quizThumbNail} from "./quizThumbNail.png"
 export { default as roomsystemThumbNail} from "./roomsystemThumbNail.png"