From 9e34239877905820ea0e982ef60780c997a778fc Mon Sep 17 00:00:00 2001
From: Nate Goldsborough <nathen418@playantares.com>
Date: Tue, 1 Nov 2022 00:36:23 -0500
Subject: [PATCH 1/3] Adds a Certifications section

---
 gitprofile.config.js                    |  7 ++
 src/components/GitProfile.jsx           | 12 ++++
 src/components/certifications/index.jsx | 93 +++++++++++++++++++++++++
 src/helpers/utils.jsx                   |  1 +
 types/index.d.ts                        | 10 +++
 5 files changed, 123 insertions(+)
 create mode 100644 src/components/certifications/index.jsx

diff --git a/gitprofile.config.js b/gitprofile.config.js
index f9e9542..e446b05 100644
--- a/gitprofile.config.js
+++ b/gitprofile.config.js
@@ -59,6 +59,13 @@ const config = {
       companyLink: 'https://example.com',
     },
   ],
+  certifications: [
+    {
+      body: 'Certification Body Name',
+      name: 'My Sample Certification',
+      year: 'March 2022',
+    },
+  ],
   education: [
     {
       institution: 'Institution Name',
diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx
index 4aaef5f..7640fbe 100644
--- a/src/components/GitProfile.jsx
+++ b/src/components/GitProfile.jsx
@@ -7,6 +7,7 @@ import AvatarCard from './avatar-card';
 import Details from './details';
 import Skill from './skill';
 import Experience from './experience';
+import Certifications from './certifications';
 import Education from './education';
 import Project from './project';
 import Blog from './blog';
@@ -183,6 +184,10 @@ const GitProfile = ({ config }) => {
                         loading={loading}
                         experiences={sanitizedConfig.experiences}
                       />
+                      <Certifications
+                        loading={loading}
+                        certifications={sanitizedConfig.certifications}
+                      />
                       <Education
                         loading={loading}
                         education={sanitizedConfig.education}
@@ -272,6 +277,13 @@ GitProfile.propTypes = {
         to: PropTypes.string,
       })
     ),
+    certifications: PropTypes.arrayOf(
+      PropTypes.shape({
+        body: PropTypes.string,
+        name: PropTypes.string,
+        year: PropTypes.string,
+      })
+    ),
     education: PropTypes.arrayOf(
       PropTypes.shape({
         institution: PropTypes.string,
diff --git a/src/components/certifications/index.jsx b/src/components/certifications/index.jsx
new file mode 100644
index 0000000..2405ef0
--- /dev/null
+++ b/src/components/certifications/index.jsx
@@ -0,0 +1,93 @@
+import { skeleton } from '../../helpers/utils';
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+const ListItem = ({ year, name, body }) => (
+  <li className="mb-5 ml-4">
+    <div
+      className="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
+      style={{ left: '-4.5px' }}
+    ></div>
+    <div className="my-0.5 text-xs">{year}</div>
+    <h3 className="font-semibold">{name}</h3>
+    <div className="mb-4 font-normal">{body}</div>
+  </li>
+);
+
+const Certifications = ({ certifications, loading }) => {
+  const renderSkeleton = () => {
+    let array = [];
+    for (let index = 0; index < 2; index++) {
+      array.push(
+        <ListItem
+          key={index}
+          year={skeleton({
+            width: 'w-5/12',
+            height: 'h-4',
+          })}
+          name={skeleton({
+            width: 'w-6/12',
+            height: 'h-4',
+            className: 'my-1.5',
+          })}
+          body={skeleton({ width: 'w-6/12', height: 'h-3' })}
+        />
+      );
+    }
+
+    return array;
+  };
+
+  return (
+    <>
+      {certifications?.length !== 0 && (
+        <div className="card shadow-lg compact bg-base-100">
+          <div className="card-body">
+            <div className="mx-3">
+              <h5 className="card-title">
+                {loading ? (
+                  skeleton({ width: 'w-32', height: 'h-8' })
+                ) : (
+                  <span className="text-base-content opacity-70">
+                    Certifications
+                  </span>
+                )}
+              </h5>
+            </div>
+            <div className="text-base-content text-opacity-60">
+              <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
+                {loading ? (
+                  renderSkeleton()
+                ) : (
+                  <Fragment>
+                    {certifications.map((certification, index) => (
+                      <ListItem
+                        key={index}
+                        year={`${certification.year}`}
+                        name={certification.name}
+                        body={certification.body}
+                      />
+                    ))}
+                  </Fragment>
+                )}
+              </ol>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+ListItem.propTypes = {
+  year: PropTypes.node,
+  name: PropTypes.node,
+  body: PropTypes.node,
+};
+
+Certifications.propTypes = {
+  certifications: PropTypes.array.isRequired,
+  loading: PropTypes.bool.isRequired,
+};
+
+export default Certifications;
diff --git a/src/helpers/utils.jsx b/src/helpers/utils.jsx
index 8476645..e4fa356 100644
--- a/src/helpers/utils.jsx
+++ b/src/helpers/utils.jsx
@@ -163,6 +163,7 @@ export const sanitizeConfig = (config) => {
     },
     skills: config?.skills || [],
     experiences: config?.experiences || [],
+    certifications: config?.certifications || [],
     education: config?.education || [],
     blog: {
       source: config?.blog?.source,
diff --git a/types/index.d.ts b/types/index.d.ts
index e66253a..95e1f5f 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -214,6 +214,11 @@ export interface Experience {
   to?: string;
   companyLink?: string;
 }
+export interface Certifications {
+  body?: string;
+  name?: string;
+  year?: string;
+}
 
 export interface Education {
   institution?: string;
@@ -252,6 +257,11 @@ export interface Config {
    */
   experiences?: Array<Experience>;
 
+  /**
+   * Certifications list
+   */
+  certifications?: Array<Certifications>;
+
   /**
    * Education list
    */

From 2619676c6e3888778681ec0ce666124679ee0e76 Mon Sep 17 00:00:00 2001
From: Nate Goldsborough <nathen418@playantares.com>
Date: Fri, 4 Nov 2022 13:45:27 -0500
Subject: [PATCH 2/3] add certLink to certification

---
 gitprofile.config.js                    |  1 +
 src/components/certifications/index.jsx | 14 +++++++++++---
 types/index.d.ts                        |  1 +
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/gitprofile.config.js b/gitprofile.config.js
index e446b05..fde1b12 100644
--- a/gitprofile.config.js
+++ b/gitprofile.config.js
@@ -64,6 +64,7 @@ const config = {
       body: 'Certification Body Name',
       name: 'My Sample Certification',
       year: 'March 2022',
+      certLink: 'https://example.com'
     },
   ],
   education: [
diff --git a/src/components/certifications/index.jsx b/src/components/certifications/index.jsx
index 2405ef0..e45e4b7 100644
--- a/src/components/certifications/index.jsx
+++ b/src/components/certifications/index.jsx
@@ -2,15 +2,19 @@ import { skeleton } from '../../helpers/utils';
 import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
-const ListItem = ({ year, name, body }) => (
+const ListItem = ({ year, name, body, certLink }) => (
   <li className="mb-5 ml-4">
     <div
       className="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
       style={{ left: '-4.5px' }}
     ></div>
     <div className="my-0.5 text-xs">{year}</div>
-    <h3 className="font-semibold">{name}</h3>
-    <div className="mb-4 font-normal">{body}</div>
+    <div className="font-semibold">
+      <a href={certLink} target="_blank" rel="noreferrer">
+        {name}
+      </a>
+    </div>
+    <h3 className="mb-4 font-normal">{body}</h3>
   </li>
 );
 
@@ -66,6 +70,9 @@ const Certifications = ({ certifications, loading }) => {
                         year={`${certification.year}`}
                         name={certification.name}
                         body={certification.body}
+                        certLink={
+                          certification.certLink ? certification.certLink : null
+                        }
                       />
                     ))}
                   </Fragment>
@@ -83,6 +90,7 @@ ListItem.propTypes = {
   year: PropTypes.node,
   name: PropTypes.node,
   body: PropTypes.node,
+  certLink: PropTypes.string,
 };
 
 Certifications.propTypes = {
diff --git a/types/index.d.ts b/types/index.d.ts
index 95e1f5f..6290dcb 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -218,6 +218,7 @@ export interface Certifications {
   body?: string;
   name?: string;
   year?: string;
+  certLink?: string;
 }
 
 export interface Education {

From 8d4462c7006efbc9172d0ef130fb11549782a379 Mon Sep 17 00:00:00 2001
From: Nate Goldsborough <nathen418@playantares.com>
Date: Fri, 4 Nov 2022 18:49:15 -0500
Subject: [PATCH 3/3] Add cert section to README.md

---
 README.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/README.md b/README.md
index e37da04..2f67438 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@
 ✓ [Social Links](#social-links)  
 ✓ [Skill Section](#skills)  
 ✓ [Experience Section](#experience)  
+✓ [Certifications Section](#certifications)  
 ✓ [Education Section](#education)  
 ✓ [Projects Section](#projects)  
 ✓ [Blog Posts Section](#blog-posts)
@@ -243,6 +244,14 @@ const config = {
       companyLink: 'https://example.com',
     },
   ],
+  certifications: [
+    {
+      body: 'Certification Body Name',
+      name: 'Sample Certification',
+      year: 'March 2022',
+      certLink: 'https://example.com'
+    },
+  ],
   education: [
     {
       institution: 'Institution Name',
@@ -482,6 +491,27 @@ module.exports = {
 
 Empty array will hide the experience section.
 
+### Certifications
+
+Provide your industry certifications in `certifications`.
+
+```js
+// gitprofile.config.js
+module.exports = {
+  // ...
+  certifications: [
+    {
+      body: 'Certification Body Name',
+      name: 'My Sample Certification',
+      year: 'March 2022',
+      certLink: 'https://example.com'
+    },
+  ],
+};
+```
+
+Empty array will hide the certifications section.
+
 ### Education
 
 Provide your education history in `education`.