Add certification section

Matrix278 · Oct 19, 2024 · ae9202a · ae9202a
1 parent 3a9acd1
commit ae9202a
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/css/main.css b/css/main.css
@@ -235,6 +235,19 @@ nav .afterCollapsed a.headerSocialLinks {
   font-size: 7em;
 }
 
+.certificatesSection {
+  background-color: #1b1b1b;
+  padding: 7em 0em;
+}
+
+.certificatesSection h1 {
+  font-size: 2.5em;
+}
+
+.certificatesHeader p {
+  font-size: 1.125em;
+}
+
 .projectsSection {
   background-color: #1b1b1b;
   padding: 7em 0em;

diff --git a/index.html b/index.html
@@ -130,6 +130,9 @@
               <li class="nav-item mx-2">
                 <a class="nav-link" href="#skills">Skills</a>
               </li>
+              <li class="nav-item mx-2">
+                <a class="nav-link" href="#certificates">Certificates</a>
+              </li>
               <li class="nav-item mx-2">
                 <a class="nav-link" href="#projects">Projects</a>
               </li>
@@ -494,6 +497,54 @@ <h1>SKILLS</h1>
         </div>
       </section>
 
+      <!-------- CERTIFICATES --------->
+      <section class="certificatesSection" id="certificates">
+        <div class="container">
+          <div class="row align-self-center text-center mx-auto">
+            <div class="col-12 certificatesHeader">
+              <h1 class="orange">CERTIFICATES</h1>
+              <p class="robotoFont">My professional certifications</p>
+            </div>
+          </div>
+          <div class="row text-center mx-auto mt-5 certificatesGrid">
+            <div class="col-md-6 col-lg-6 p-4">
+              <div class="card bg-white p-3 mx-auto" style="max-width: 320px">
+                <div class="d-flex justify-content-center">
+                  <div
+                    data-iframe-width="300"
+                    data-iframe-height="270"
+                    data-share-badge-id="2995b4bf-e727-498c-aef0-d545c3fbd151"
+                    data-share-badge-host="https://www.credly.com"
+                  ></div>
+                  <script
+                    type="text/javascript"
+                    async
+                    src="//cdn.credly.com/assets/utilities/embed.js"
+                  ></script>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-6 col-lg-6 p-4">
+              <div class="card bg-white p-3 mx-auto" style="max-width: 320px">
+                <div class="d-flex justify-content-center">
+                  <div
+                    data-iframe-width="300"
+                    data-iframe-height="270"
+                    data-share-badge-id="3755f89d-a5e1-4c3e-8105-26beace248b4"
+                    data-share-badge-host="https://www.credly.com"
+                  ></div>
+                  <script
+                    type="text/javascript"
+                    async
+                    src="//cdn.credly.com/assets/utilities/embed.js"
+                  ></script>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <!-------- PROJECTS --------->
       <section class="projectsSection" id="projects">
         <div class="container">