Add credly badges and certifications

Add padding to skill list
jcoelho93 · Jun 16, 2022 · f0e58e8 · f0e58e8
1 parent b7f381e
commit f0e58e8
Show file tree

Hide file tree

Showing 9 changed files with 20,574 additions and 112 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- Certificates section
+
 ## [1.3.3] - 2021-04-12
 ### Added
 - Github link to author name

diff --git a/README.md b/README.md
@@ -7,6 +7,8 @@ This is my personal website built using ReactJS and Bulma as the CSS framework.
 
 The personal information on the website is populated from a json file that follows the [JSON Resume](https://jsonresume.org/) open source standard.
 
+Use Node v16.15.1
+
 ## Customizing it
 
 Feel free to fork this project and update it with your own information and style. Just update the ´src/resume.json´ with your personal information.

diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -1,37 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0"
-    />
-    <meta name="theme-color" content="#3273DC" />
-    <link rel="canonical" href="https://josecoelho93.pt" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title></title>
-    <meta name="description" content="This is my personal website. You can find information about my experience, skills and articles I have written." />
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
-    <link rel="stylesheet" href="./css/bulma-timeline.min.css">
-    <link rel="stylesheet" href="./css/styles.css">
-
-    <link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
-
-    <script defer src="https://use.fontawesome.com/releases/v5.4.0/js/all.js"></script>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134602535-1"></script>
-    <script>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0" />
+  <meta name="theme-color" content="#3273DC" />
+  <link rel="canonical" href="https://josecoelho93.pt" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <title></title>
+  <meta name="description"
+    content="This is my personal website. You can find information about my experience, skills and articles I have written." />
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
+  <link rel="stylesheet" href="./css/bulma-timeline.min.css">
+  <link rel="stylesheet" href="./css/styles.css">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
+
+  <script defer src="https://use.fontawesome.com/releases/v5.4.0/js/all.js"></script>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134602535-1"></script>
+  <script>
     window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+    function gtag() { dataLayer.push(arguments); }
     gtag('js', new Date());
     gtag('config', 'UA-134602535-1');
-    </script>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
+  </script>
+  <script type="text/javascript" async src="//cdn.credly.com/assets/utilities/embed.js"></script>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/src/components/elements/CredlyBadge.js b/src/components/elements/CredlyBadge.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function CredlyBadge(props) {
+  let imgSrc =
+    "https://images.credly.com/size/" + props.width + "x" + props.height;
+  imgSrc += "/images/" + props.imageId + "/" + props.imageName;
+  let imgLink =
+    "https://www.credly.com/badges/" + props.badgeId + "/public_url";
+  return (
+    <figure class="is-inline-block image">
+      <a href={imgLink} target="_blank" rel="noopener noreferrer">
+        <img src={imgSrc} alt={props.badgeName} />
+      </a>
+    </figure>
+  );
+}
+
+export default CredlyBadge;
diff --git a/src/components/sections/Badges.js b/src/components/sections/Badges.js
@@ -0,0 +1,38 @@
+import React from "react";
+import CredlyBadge from "../elements/CredlyBadge";
+import Resume from "../../resume.json";
+
+function buildBadges(certificates){
+    let credlyBadges = []
+    let columnSize = 12 / certificates.length;
+    let columnClass = "column has-text-centered is-" + columnSize;
+    certificates.forEach((cert) => {
+        credlyBadges.push(
+            <div class={columnClass}>
+                <CredlyBadge
+                    width="186"
+                    height="186"
+                    imageId={cert.x_imageId}
+                    imageName={cert.x_imageName}
+                    badgeId={cert.x_badgeId}
+                    badgeName={cert.name + " by " + cert.issuer}
+                />
+            </div>
+        )
+    });
+    return credlyBadges
+}
+
+function Badges(props) {
+    return (
+        <section class="section" id="badges">
+            <div class="container">
+                <div class="columns is-centered">
+                    {buildBadges(Resume.certificates)}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default Badges;
diff --git a/src/components/sections/Skills.js b/src/components/sections/Skills.js
@@ -8,7 +8,7 @@ function Skills() {
       <div className="container">
         <h1 className="title">Skills</h1>
         <div className="columns">
-          <div className="column is-6">
+          <div className="column is-6" style={{padding: "90px"}}>
             <div className="has-text-centered">
               <span className="icon has-text-link">
                 <i className="fas fa-3x fa-cogs"></i>
@@ -22,9 +22,9 @@ function Skills() {
                   obj[item.name] = item.level;
                   return obj;
                 }, {})}
-            />
+            />  
           </div>
-          <div className="column is-6">
+          <div className="column is-6" style={{padding: "90px"}}>
             <div className="has-text-centered">
               <span className="icon has-text-link">
                 <i className="fas fa-3x fa-laptop-code"></i>

diff --git a/src/components/structure/Content.js b/src/components/structure/Content.js
@@ -1,6 +1,7 @@
 import React from "react";
 import AboutMe from "../sections/AboutMe";
 import Skills from "../sections/Skills";
+import Badges from "../sections/Badges";
 import Experience from "../sections/Experience";
 import Articles from "../sections/Articles";
 
@@ -9,6 +10,7 @@ function Content() {
     <main>
       <AboutMe />
       <Skills />
+      <Badges />
       <Experience />
       <Articles />
     </main>

diff --git a/src/resume.json b/src/resume.json
@@ -16,7 +16,7 @@
         "network": "DEV Community",
         "username": "jcoelho",
         "url": "https://dev.to/jcoelho",
-        "x_icon":"fab fa-2x fa-dev"
+        "x_icon": "fab fa-2x fa-dev"
       },
       {
         "network": "LinkedIn",
@@ -114,74 +114,102 @@
   ],
   "skills": [
     {
-      "name": "Jenkins",
+      "name": "Configuration Management",
       "level": "Advanced",
-      "keywords": ["DevOps"]
+      "keywords": [
+        "DevOps"
+      ]
     },
     {
       "name": "Continuous Integration",
       "level": "Advanced",
-      "keywords": ["DevOps"]
+      "keywords": [
+        "DevOps"
+      ]
     },
     {
       "name": "Scripting",
       "level": "Advanced",
-      "keywords": ["DevOps"]
+      "keywords": [
+        "DevOps"
+      ]
     },
     {
       "name": "Containers",
       "level": "Advanced",
-      "keywords": ["DevOps"]
+      "keywords": [
+        "DevOps"
+      ]
     },
     {
       "name": "Cloud",
-      "level": "Basic",
-      "keywords": ["DevOps"]
+      "level": "Advanced",
+      "keywords": [
+        "DevOps"
+      ]
     },
     {
       "name": "Troubleshooting",
       "level": "Advanced",
-      "keywords": ["DevOps"]
+      "keywords": [
+        "DevOps"
+      ]
     },
     {
       "name": "Infrastructure as Code",
-      "level": "Intermediate",
-      "keywords": ["DevOps"]
+      "level": "Advanced",
+      "keywords": [
+        "DevOps"
+      ]
     },
     {
       "name": "Object Oriented Programming",
       "level": "Advanced",
-      "keywords": ["Software Developer"]
+      "keywords": [
+        "Software Developer"
+      ]
     },
     {
       "name": "Design Patterns",
       "level": "Intermediate",
-      "keywords": ["Software Developer"]
+      "keywords": [
+        "Software Developer"
+      ]
     },
     {
       "name": "Git",
       "level": "Intermediate",
-      "keywords": ["Software Developer"]
+      "keywords": [
+        "Software Developer"
+      ]
     },
     {
       "name": "REST API",
       "level": "Advanced",
-      "keywords": ["Software Developer"]
+      "keywords": [
+        "Software Developer"
+      ]
     },
     {
       "name": "Unit Testing",
       "level": "Intermediate",
-      "keywords": ["Software Developer"]
+      "keywords": [
+        "Software Developer"
+      ]
     },
     {
       "name": "MySQL",
       "level": "Intermediate",
-      "keywords": ["Software Developer"]
+      "keywords": [
+        "Software Developer"
+      ]
     },
     {
       "name": "MongoDB",
       "level": "Intermediate",
-      "keywords": ["Software Developer"]
+      "keywords": [
+        "Software Developer"
+      ]
     }
   ],
   "languages": [
@@ -194,6 +222,24 @@
       "fluency": "Native speaker"
     }
   ],
+  "certificates": [
+    {
+      "name": "AWS Certified Solutions Architect Associate",
+      "issuer": "Amazon Web Services Training and Certification",
+      "url": "https://www.credly.com/badges/263d35c5-83db-4f93-97a4-a84ee806da90/public_url",
+      "x_badgeId": "263d35c5-83db-4f93-97a4-a84ee806da90",
+      "x_imageId": "0e284c3f-5164-4b21-8660-0d84737941bc",
+      "x_imageName": "image.png"
+    },
+    {
+      "name": "Certified Kubernetes Application Developer",
+      "issuer": "The Linux Foundation",
+      "url": "https://www.credly.com/badges/263d35c5-83db-4f93-97a4-a84ee806da90/public_url",
+      "x_badgeId": "263d35c5-83db-4f93-97a4-a84ee806da90",
+      "x_imageId": "f88d800c-5261-45c6-9515-0458e31c3e16",
+      "x_imageName": "ckad_from_cncfsite.png"
+    }
+  ],
   "interests": [
     {
       "name": "Travel bug",
@@ -212,4 +258,4 @@
       "x_icon": "fa-brain"
     }
   ]
-}
+}