Add section for publication

README.md

@@ -69,6 +69,7 @@
 ✓ [Certification Section](#certifications)  
 ✓ [Education Section](#education)  
 ✓ [Projects Section](#projects)  
+✓ [Publication Section](#publications)  
 ✓ [Blog Posts Section](#blog-posts)
 
 To view a live example, **[click here](https://arifszn.github.io/gitprofile)**.
@@ -282,6 +283,17 @@ const CONFIG = {
       to: '2014',
     },
   ],
+  publications: [
+    {
+      title: 'Publication Title',
+      conferenceName: 'Conference Name',
+      journalName: 'Journal Name',
+      authors: 'John Doe, Jane Smith',
+      link: 'https://example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+    },
+  ],
   // Display articles from your medium or dev account. (Optional)
   blog: {
     source: 'dev', // medium | dev
@@ -660,6 +672,30 @@ const CONFIG = {
 };
 ```
 
+### Publications
+
+Provide your academic publishing in `publications`.
+
+```ts
+// gitprofile.config.ts
+const CONFIG = {
+  // ...
+  publications: [
+    {
+      title: 'Publication Title',
+      conferenceName: 'Conference Name',
+      journalName: 'Journal Name',
+      authors: 'John Doe, Jane Smith',
+      link: 'https://example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+    },
+  ],
+};
+```
+
+Empty array will hide the publications section.
+
 ### Blog Posts
 
 If you have [medium](https://medium.com) or [dev](https://dev.to) account, you can show your recent blog posts in here just by providing your medium/dev username. You can limit how many posts to display (Max is `10`).

gitprofile.config.ts

@@ -132,6 +132,26 @@ const CONFIG = {
       to: '2014',
     },
   ],
+  publications: [
+    {
+      title: 'Publication Title',
+      conferenceName: '',
+      journalName: 'Journal Name',
+      authors: 'John Doe, Jane Smith',
+      link: 'https://example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+      title: 'Publication Title',
+      conferenceName: 'Conference Name',
+      journalName: '',
+      authors: 'John Doe, Jane Smith',
+      link: 'https://example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+  ],
   // Display articles from your medium or dev account. (Optional)
   blog: {
     source: 'dev', // medium | dev

global.d.ts

@@ -217,6 +217,15 @@ interface Education {
   to: string;
 }
 
+interface Publication {
+  title: string;
+  conferenceName?: string;
+  journalName?: string;
+  authors?: string;
+  link?: string;
+  description?: string;
+}
+
 interface GoogleAnalytics {
   /**
    * GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
@@ -370,6 +379,11 @@ interface Config {
    */
   educations?: Array<Education>;
 
+  /**
+   * Publication list
+   */
+  publications?: Array<Publication>;
+
   /**
    * Resume
    */

src/components/blog-card/index.tsx

@@ -132,7 +132,7 @@ const BlogCard = ({
               <div className="w-full">
                 <div className="flex items-start px-4">
                   <div className="text-center md:text-left w-full">
-                    <h2 className="font-semibold text-base-content opacity-60">
+                    <h2 className="font-medium text-base-content opacity-60">
                       {article.title}
                     </h2>
                     <p className="text-base-content opacity-50 text-xs">

src/components/certification-card/index.tsx

@@ -19,7 +19,7 @@ const ListItem = ({
       style={{ left: '-4.5px' }}
     ></div>
     <div className="my-0.5 text-xs">{year}</div>
-    <div className="font-semibold">
+    <div className="font-medium">
       <a href={link} target="_blank" rel="noreferrer">
         {name}
       </a>

src/components/external-project-card/index.tsx

@@ -93,7 +93,7 @@ const ExternalProjectCard = ({
             <div className="w-full">
               <div className="px-4">
                 <div className="text-center w-full">
-                  <h2 className="font-semibold text-lg tracking-wide text-center opacity-60 mb-2">
+                  <h2 className="font-medium text-lg text-center opacity-60 mb-2">
                     {item.title}
                   </h2>
                   {item.imageUrl && (

src/components/gitprofile.tsx

@@ -29,6 +29,7 @@ import GithubProjectCard from './github-project-card';
 import ExternalProjectCard from './external-project-card';
 import BlogCard from './blog-card';
 import Footer from './footer';
+import PublicationCard from './publication-card';
 
 /**
  * Renders the GitProfile component.
@@ -255,6 +256,12 @@ const GitProfile = ({ config }: { config: Config }) => {
                         googleAnalyticsId={sanitizedConfig.googleAnalytics.id}
                       />
                     )}
+                    {sanitizedConfig.publications.length !== 0 && (
+                      <PublicationCard
+                        loading={loading}
+                        publications={sanitizedConfig.publications}
+                      />
+                    )}
                     {sanitizedConfig.projects.external.projects.length !==
                       0 && (
                       <ExternalProjectCard

src/components/publication-card/index.tsx

@@ -1,156 +1,146 @@
-import React, { Fragment } from 'react';
-import { SanitizedExperience } from '../../interfaces/sanitized-config';
+import { Fragment } from 'react';
+import { SanitizedPublication } from '../../interfaces/sanitized-config';
 import { skeleton } from '../../utils';
 
-const ListItem = ({
-  time,
-  position,
-  company,
-  companyLink,
-}: {
-  time: React.ReactNode;
-  position?: React.ReactNode;
-  company?: React.ReactNode;
-  companyLink?: string;
-}) => (
-  <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">{time}</div>
-    <h3 className="font-semibold">{position}</h3>
-    <div className="mb-4 font-normal">
-      <a href={companyLink} target="_blank" rel="noreferrer">
-        {company}
-      </a>
-    </div>
-  </li>
-);
-
 const PublicationCard = ({
-  experiences,
+  publications,
   loading,
 }: {
-  experiences: SanitizedExperience[];
+  publications: SanitizedPublication[];
   loading: boolean;
 }) => {
   const renderSkeleton = () => {
     const array = [];
-    for (let index = 0; index < 2; index++) {
+    for (let index = 0; index < publications.length; index++) {
       array.push(
-        <ListItem
-          key={index}
-          time={skeleton({
-            widthCls: 'w-5/12',
-            heightCls: 'h-4',
-          })}
-          position={skeleton({
-            widthCls: 'w-6/12',
-            heightCls: 'h-4',
-            className: 'my-1.5',
-          })}
-          company={skeleton({ widthCls: 'w-6/12', heightCls: 'h-3' })}
-        />,
+        <div className="card shadow-lg compact bg-base-100" key={index}>
+          <div className="p-8 h-full w-full">
+            <div className="flex items-center flex-col">
+              <div className="w-full">
+                <div className="px-4">
+                  <div className="text-center w-full">
+                    <h2 className="mb-2">
+                      {skeleton({
+                        widthCls: 'w-32',
+                        heightCls: 'h-8',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </h2>
+                    <p>
+                      {skeleton({
+                        widthCls: 'w-20',
+                        heightCls: 'h-4',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </p>
+                    <p>
+                      {skeleton({
+                        widthCls: 'w-20',
+                        heightCls: 'h-4',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </p>
+                    <p>
+                      {skeleton({
+                        widthCls: 'w-full',
+                        heightCls: 'h-4',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </p>
+                    <p>
+                      {skeleton({
+                        widthCls: 'w-full',
+                        heightCls: 'h-4',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>,
       );
     }
 
     return array;
   };
-  return (
-    <div className="col-span-1 lg:col-span-2">
-      <div className="grid grid-cols-2 gap-6">
-        <div className="col-span-2">
-          <div className="card compact bg-base-100 shadow bg-opacity-40">
-            <div className="card-body">
-              <div className="mx-3 flex items-center justify-between mb-2">
-                <h5 className="card-title">
-                  <span className="text-base-content opacity-70">
-                    Publications
-                  </span>
-                </h5>
+
+  const renderPublications = () => {
+    return publications.map((item, index) => (
+      <a
+        className="card shadow-lg compact bg-base-100 cursor-pointer"
+        key={index}
+        href={item.link}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <div className="p-8 h-full w-full">
+          <div className="flex items-center flex-col">
+            <div className="w-full">
+              <div className="px-4">
+                <div className="text-center w-full">
+                  <h2 className="font-medium text-lg opacity-60 mb-2">
+                    {item.title}
+                  </h2>
+                  {item.conferenceName && (
+                    <p className="text-base-content opacity-50 text-sm">
+                      {item.conferenceName}
+                    </p>
+                  )}
+                  {item.journalName && (
+                    <p className="text-base-content opacity-50 text-sm">
+                      {item.journalName}
+                    </p>
+                  )}
+                  {item.authors && (
+                    <p className="text-base-content opacity-50 text-sm">
+                      Author: {item.authors}
+                    </p>
+                  )}
+                  {item.description && (
+                    <p className="mt-1 text-base-content text-opacity-60 text-sm">
+                      {item.description}
+                    </p>
+                  )}
+                </div>
               </div>
-              <div className="col-span-2">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  <a
-                    className="card shadow-lg compact bg-base-100 cursor-pointer"
-                    href="https://example.com"
-                  >
-                    <div className="p-8 h-full w-full">
-                      <div className="flex items-center flex-col">
-                        <div className="w-full">
-                          <div className="px-4">
-                            <div className="text-center w-full">
-                              <h2 className="font-semibold text-lg tracking-wide text-center opacity-60 mb-2">
-                                Publication Title
-                              </h2>
-                              <p className="text-base-content opacity-50 text-sm">
-                                Conference / Journal Name
-                              </p>
-                              <p className="text-base-content opacity-50 text-sm">
-                                Authors: John Doe, Jane Smith
-                              </p>
-                              <p className="mt-1 text-base-content text-opacity-60 text-sm">
-                                Lorem ipsum dolor sit amet, consectetur
-                                adipiscing elit, sed do eiusmod tempor
-                                incididunt ut labore et dolore magna aliqua. Ut
-                                enim ad minim veniam, quis nostrud exercitation
-                                ullamco laboris nisi ut aliquip ex ea commodo
-                                consequat. Duis aute irure dolor in
-                                reprehenderit in voluptate velit esse cillum
-                                dolore eu fugiat nulla pariatur. Excepteur sint
-                                occaecat cupidatat non proident, sunt in culpa
-                                qui officia deserunt mollit anim id est laborum.
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a
-                    className="card shadow-lg compact bg-base-100 cursor-pointer"
-                    href="https://example.com"
-                  >
-                    <div className="p-8 h-full w-full">
-                      <div className="flex items-center flex-col">
-                        <div className="w-full">
-                          <div className="px-4">
-                            <div className="text-center w-full">
-                              <h2 className="font-semibold text-lg tracking-wide text-center opacity-60 mb-2">
-                                Publication Title
-                              </h2>
-                              <p className="text-base-content opacity-50 text-sm">
-                                Conference / Journal Name
-                              </p>
-                              <p className="text-base-content opacity-50 text-sm">
-                                Authors: John Doe, Jane Smith
-                              </p>
-                              <p className="mt-1 text-base-content text-opacity-60 text-sm">
-                                Lorem ipsum dolor sit amet, consectetur
-                                adipiscing elit, sed do eiusmod tempor
-                                incididunt ut labore et dolore magna aliqua. Ut
-                                enim ad minim veniam, quis nostrud exercitation
-                                ullamco laboris nisi ut aliquip ex ea commodo
-                                consequat. Duis aute irure dolor in
-                                reprehenderit in voluptate velit esse cillum
-                                dolore eu fugiat nulla pariatur. Excepteur sint
-                                occaecat cupidatat non proident, sunt in culpa
-                                qui officia deserunt mollit anim id est laborum.
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </a>
+            </div>
+          </div>
+        </div>
+      </a>
+    ));
+  };
+
+  return (
+    <Fragment>
+      <div className="col-span-1 lg:col-span-2">
+        <div className="grid grid-cols-2 gap-6">
+          <div className="col-span-2">
+            <div className="card compact bg-base-100 shadow bg-opacity-40">
+              <div className="card-body">
+                <div className="mx-3 flex items-center justify-between mb-2">
+                  <h5 className="card-title">
+                    {loading ? (
+                      skeleton({ widthCls: 'w-40', heightCls: 'h-8' })
+                    ) : (
+                      <span className="text-base-content opacity-70">
+                        Publications
+                      </span>
+                    )}
+                  </h5>
+                </div>
+                <div className="col-span-2">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {loading ? renderSkeleton() : renderPublications()}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </Fragment>
   );
 };
 

src/interfaces/sanitized-config.tsx

@@ -87,6 +87,15 @@ export interface SanitizedEducation {
   to: string;
 }
 
+export interface SanitizedPublication {
+  title: string;
+  conferenceName?: string;
+  journalName?: string;
+  authors?: string;
+  link?: string;
+  description?: string;
+}
+
 export interface SanitizedGoogleAnalytics {
   id?: string;
 }
@@ -132,6 +141,7 @@ export interface SanitizedConfig {
   experiences: Array<SanitizedExperience>;
   educations: Array<SanitizedEducation>;
   certifications: Array<SanitizedCertification>;
+  publications: Array<SanitizedPublication>;
   googleAnalytics: SanitizedGoogleAnalytics;
   hotjar: SanitizedHotjar;
   blog: SanitizedBlog;

src/utils/index.tsx

@@ -99,6 +99,7 @@ export const getSanitizedConfig = (
         config?.educations?.filter(
           (item) => item.institution || item.degree || item.from || item.to,
         ) || [],
+      publications: config?.publications?.filter((item) => item.title) || [],
       googleAnalytics: {
         id: config?.googleAnalytics?.id,
       },