Refactor certification section

README.md

@@ -68,7 +68,7 @@
 ✓ [Social Links](#social-links)  
 ✓ [Skill Section](#skills)  
 ✓ [Experience Section](#experience)  
-✓ [Certifications Section](#certifications)  
+✓ [Certification Section](#certifications)  
 ✓ [Education Section](#education)  
 ✓ [Projects Section](#projects)  
 ✓ [Blog Posts Section](#blog-posts)
@@ -249,7 +249,7 @@ const config = {
       body: 'Certification Body Name',
       name: 'Sample Certification',
       year: 'March 2022',
-      certLink: 'https://example.com'
+      link: 'https://example.com',
     },
   ],
   education: [
@@ -491,27 +491,6 @@ 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`.
@@ -539,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: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.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,14 +60,14 @@ const config = {
       companyLink: 'https://example.com',
     },
   ],
-  certifications: [
+  /* certifications: [
     {
-      body: 'Certification Body Name',
+      name: 'Lorem ipsum',
-      name: 'My Sample Certification',
+      body: 'Lorem ipsum dolor sit amet',
       year: 'March 2022',
-      certLink: 'https://example.com'
+      link: 'https://example.com'
     },
-  ],
+  ], */
   education: [
     {
       institution: 'Institution Name',

src/components/GitProfile.jsx

@@ -7,7 +7,7 @@ import AvatarCard from './avatar-card';
 import Details from './details';
 import Skill from './skill';
 import Experience from './experience';
-import Certifications from './certifications';
+import Certification from './certification';
 import Education from './education';
 import Project from './project';
 import Blog from './blog';
@@ -184,14 +184,14 @@ const GitProfile = ({ config }) => {
                         loading={loading}
                         experiences={sanitizedConfig.experiences}
                       />
-                      <Certifications
-                        loading={loading}
-                        certifications={sanitizedConfig.certifications}
-                      />
                       <Education
                         loading={loading}
                         education={sanitizedConfig.education}
                       />
+                      <Certification
+                        loading={loading}
+                        certifications={sanitizedConfig.certifications}
+                      />
                     </div>
                   </div>
                   <div className="lg:col-span-2 col-span-1">
@@ -282,6 +282,7 @@ GitProfile.propTypes = {
         body: PropTypes.string,
         name: PropTypes.string,
         year: PropTypes.string,
+        link: PropTypes.string,
       })
     ),
     education: PropTypes.arrayOf(

src/components/certification/index.jsx

@@ -2,7 +2,7 @@ import { skeleton } from '../../helpers/utils';
 import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
-const ListItem = ({ year, name, body, certLink }) => (
+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"
@@ -10,7 +10,7 @@ const ListItem = ({ year, name, body, certLink }) => (
     ></div>
     <div className="my-0.5 text-xs">{year}</div>
     <div className="font-semibold">
-      <a href={certLink} target="_blank" rel="noreferrer">
+      <a href={link} target="_blank" rel="noreferrer">
         {name}
       </a>
     </div>
@@ -18,7 +18,7 @@ const ListItem = ({ year, name, body, certLink }) => (
   </li>
 );
 
-const Certifications = ({ certifications, loading }) => {
+const Certification = ({ certifications, loading }) => {
   const renderSkeleton = () => {
     let array = [];
     for (let index = 0; index < 2; index++) {
@@ -53,7 +53,7 @@ const Certifications = ({ certifications, loading }) => {
                   skeleton({ width: 'w-32', height: 'h-8' })
                 ) : (
                   <span className="text-base-content opacity-70">
-                    Certifications
+                    Certification
                   </span>
                 )}
               </h5>
@@ -70,9 +70,7 @@ const Certifications = ({ certifications, loading }) => {
                         year={`${certification.year}`}
                         name={certification.name}
                         body={certification.body}
-                        certLink={
+                        link={certification.link ? certification.link : null}
-                          certification.certLink ? certification.certLink : null
-                        }
                       />
                     ))}
                   </Fragment>
@@ -90,12 +88,12 @@ ListItem.propTypes = {
   year: PropTypes.node,
   name: PropTypes.node,
   body: PropTypes.node,
-  certLink: PropTypes.string,
+  link: PropTypes.string,
 };
 
-Certifications.propTypes = {
+Certification.propTypes = {
   certifications: PropTypes.array.isRequired,
   loading: PropTypes.bool.isRequired,
 };
 
-export default Certifications;
+export default Certification;

types/index.d.ts

@@ -218,7 +218,7 @@ export interface Certifications {
   body?: string;
   name?: string;
   year?: string;
-  certLink?: string;
+  link?: string;
 }
 
 export interface Education {