Merge pull request #253 from arifszn/certificate-section

Merge certification section

README.md

@@ -68,6 +68,7 @@
 ✓ [Social Links](#social-links)  
 ✓ [Skill Section](#skills)  
 ✓ [Experience Section](#experience)  
+✓ [Certification 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',
+      link: 'https://example.com',
+    },
+  ],
   education: [
     {
       institution: 'Institution Name',
@@ -509,6 +518,27 @@ module.exports = {
 
 Empty array will hide the education section.
 
+### Certifications
+
+Provide your industry certifications in `certifications`.
+
+```js
+// gitprofile.config.js
+module.exports = {
+  // ...
+  certifications: [
+    {
+      name: 'Lorem ipsum',
+      body: 'Lorem ipsum dolor sit amet',
+      year: 'March 2022',
+      link: 'https://example.com',
+    },
+  ],
+};
+```
+
+Empty array will hide the certifications section.
+
 ### Projects
 
 Your public repo from GitHub will be displayed here automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo.

gitprofile.config.js

@@ -25,7 +25,8 @@ const config = {
     email: 'arifulalamszn@gmail.com',
   },
   resume: {
-    fileUrl: 'resume.pdf', // Empty fileUrl will hide the `Download Resume` button.
+    fileUrl:
+      'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', // Empty fileUrl will hide the `Download Resume` button.
   },
   skills: [
     'PHP',
@@ -59,6 +60,14 @@ const config = {
       companyLink: 'https://example.com',
     },
   ],
+  /* certifications: [
+    {
+      name: 'Lorem ipsum',
+      body: 'Lorem ipsum dolor sit amet',
+      year: 'March 2022',
+      link: 'https://example.com'
+    },
+  ], */
   education: [
     {
       institution: 'Institution Name',

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 Certification from './certification';
 import Education from './education';
 import Project from './project';
 import Blog from './blog';
@@ -187,6 +188,10 @@ const GitProfile = ({ config }) => {
                         loading={loading}
                         education={sanitizedConfig.education}
                       />
+                      <Certification
+                        loading={loading}
+                        certifications={sanitizedConfig.certifications}
+                      />
                     </div>
                   </div>
                   <div className="lg:col-span-2 col-span-1">
@@ -272,6 +277,14 @@ GitProfile.propTypes = {
         to: PropTypes.string,
       })
     ),
+    certifications: PropTypes.arrayOf(
+      PropTypes.shape({
+        body: PropTypes.string,
+        name: PropTypes.string,
+        year: PropTypes.string,
+        link: PropTypes.string,
+      })
+    ),
     education: PropTypes.arrayOf(
       PropTypes.shape({
         institution: PropTypes.string,

src/components/certification/index.jsx

@@ -0,0 +1,99 @@
+import { skeleton } from '../../helpers/utils';
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+const ListItem = ({ year, name, body, link }) => (
+  <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>
+    <div className="font-semibold">
+      <a href={link} target="_blank" rel="noreferrer">
+        {name}
+      </a>
+    </div>
+    <h3 className="mb-4 font-normal">{body}</h3>
+  </li>
+);
+
+const Certification = ({ 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">
+                    Certification
+                  </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}
+                        link={certification.link ? certification.link : null}
+                      />
+                    ))}
+                  </Fragment>
+                )}
+              </ol>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+ListItem.propTypes = {
+  year: PropTypes.node,
+  name: PropTypes.node,
+  body: PropTypes.node,
+  link: PropTypes.string,
+};
+
+Certification.propTypes = {
+  certifications: PropTypes.array.isRequired,
+  loading: PropTypes.bool.isRequired,
+};
+
+export default Certification;

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,

types/index.d.ts

@@ -214,6 +214,12 @@ export interface Experience {
   to?: string;
   companyLink?: string;
 }
+export interface Certifications {
+  body?: string;
+  name?: string;
+  year?: string;
+  link?: string;
+}
 
 export interface Education {
   institution?: string;
@@ -252,6 +258,11 @@ export interface Config {
    */
   experiences?: Array<Experience>;
 
+  /**
+   * Certifications list
+   */
+  certifications?: Array<Certifications>;
+
   /**
    * Education list
    */