Merge pull request #526 from arifszn/v3.1.0

V3.1.0

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)**.
@@ -210,6 +211,7 @@ const CONFIG = {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
     mastodon: 'arifszn@mastodon.social',
+    researchGate: '',
     facebook: '',
     instagram: '',
     youtube: '', // example: 'pewdiepie'
@@ -282,6 +284,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
@@ -473,7 +486,7 @@ Your avatar and bio will be fetched from GitHub automatically.
 
 ### Social Links
 
-You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, Facebook, Instagram, YouTube, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
+You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, ResearchGate, Facebook, Instagram, YouTube, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
 
 ```ts
 // gitprofile.config.ts
@@ -483,6 +496,7 @@ const CONFIG = {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
     mastodon: 'arifszn@mastodon.social',
+    researchGate: '',
     facebook: '',
     instagram: '',
     youtube: '',
@@ -660,6 +674,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

@@ -60,6 +60,7 @@ const CONFIG = {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
     mastodon: 'arifszn@mastodon.social',
+    researchGate: '',
     facebook: '',
     instagram: '',
     youtube: '', // example: 'pewdiepie'
@@ -132,11 +133,31 @@ 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
     username: 'arifszn', // to hide blog section, keep it empty
-    limit: 3, // How many articles to display. Max is 10.
+    limit: 2, // How many articles to display. Max is 10.
   },
   googleAnalytics: {
     id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX

global.d.ts

@@ -122,6 +122,11 @@ interface Social {
    */
   mastodon?: string;
 
+  /**
+   * ResearchGate username
+   */
+  researchGate?: string;
+
   /**
    * Facebook
    */
@@ -217,6 +222,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 +384,11 @@ interface Config {
    */
   educations?: Array<Education>;
 
+  /**
+   * Publication list
+   */
+  publications?: Array<Publication>;
+
   /**
    * Resume
    */

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@arifszn/gitprofile",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@arifszn/gitprofile",
-      "version": "3.0.0",
+      "version": "3.1.0",
       "license": "MIT",
       "dependencies": {
         "react": "^18.2.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arifszn/gitprofile",
   "description": "Create an automatic portfolio based on GitHub profile",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "license": "MIT",
   "author": "arifszn",
@@ -81,6 +81,7 @@
     "github-pages",
     "github-portfolio",
     "vite-portfolio",
+    "academic-portfolio",
     "github-api"
   ]
 }

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>
@@ -78,22 +78,15 @@ const CertificationCard = ({
               renderSkeleton()
             ) : (
               <>
-                {certifications
+                {certifications.map((certification, index) => (
-                  .filter(
+                  <ListItem
-                    (certification) =>
+                    key={index}
-                      certification.year ||
+                    year={certification.year}
-                      certification.name ||
+                    name={certification.name}
-                      certification.body,
+                    body={certification.body}
-                  )
+                    link={certification.link}
-                  .map((certification, index) => (
+                  />
-                    <ListItem
+                ))}
-                      key={index}
-                      year={certification.year}
-                      name={certification.name}
-                      body={certification.body}
-                      link={certification.link}
-                    />
-                  ))}
               </>
             )}
           </ol>

src/components/details-card/index.tsx

@@ -4,7 +4,7 @@ import {
   AiFillInstagram,
   AiFillMediumSquare,
 } from 'react-icons/ai';
-import { SiTwitter } from 'react-icons/si';
+import { SiTwitter, SiResearchgate } from 'react-icons/si';
 import { CgDribbble } from 'react-icons/cg';
 import { RiPhoneFill, RiMailFill } from 'react-icons/ri';
 import { Fragment } from 'react';
@@ -147,6 +147,14 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => {
                 value={github.username}
                 link={`https://github.com/${github.username}`}
               />
+              {social?.researchGate && (
+                <ListItem
+                  icon={<SiResearchgate />}
+                  title="ResearchGate:"
+                  value={social.researchGate}
+                  link={`https://www.researchgate.net/profile/${social.researchGate}`}
+                />
+              )}
               {social?.twitter && (
                 <ListItem
                   icon={<SiTwitter />}
@@ -265,7 +273,6 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => {
                   link={`https://t.me/${social.telegram}`}
                 />
               )}
-
               {social?.phone && (
                 <ListItem
                   icon={<RiPhoneFill />}

src/components/education-card/index.tsx

@@ -70,19 +70,14 @@ const EducationCard = ({
               renderSkeleton()
             ) : (
               <>
-                {educations
+                {educations.map((item, index) => (
-                  .filter(
+                  <ListItem
-                    (item) =>
+                    key={index}
-                      item.institution || item.degree || item.from || item.to,
+                    time={`${item.from} - ${item.to}`}
-                  )
+                    degree={item.degree}
-                  .map((item, index) => (
+                    institution={item.institution}
-                    <ListItem
+                  />
-                      key={index}
+                ))}
-                      time={`${item.from} - ${item.to}`}
-                      degree={item.degree}
-                      institution={item.institution}
-                    />
-                  ))}
               </>
             )}
           </ol>

src/components/experience-card/index.tsx

@@ -75,27 +75,19 @@ const ExperienceCard = ({
               renderSkeleton()
             ) : (
               <Fragment>
-                {experiences
+                {experiences.map((experience, index) => (
-                  .filter(
+                  <ListItem
-                    (experience) =>
+                    key={index}
-                      experience.company ||
+                    time={`${experience.from} - ${experience.to}`}
-                      experience.position ||
+                    position={experience.position}
-                      experience.from ||
+                    company={experience.company}
-                      experience.to,
+                    companyLink={
-                  )
+                      experience.companyLink
-                  .map((experience, index) => (
+                        ? experience.companyLink
-                    <ListItem
+                        : undefined
-                      key={index}
+                    }
-                      time={`${experience.from} - ${experience.to}`}
+                  />
-                      position={experience.position}
+                ))}
-                      company={experience.company}
-                      companyLink={
-                        experience.companyLink
-                          ? experience.companyLink
-                          : undefined
-                      }
-                    />
-                  ))}
               </Fragment>
             )}
           </ol>

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

@@ -0,0 +1,154 @@
+import { Fragment } from 'react';
+import { SanitizedPublication } from '../../interfaces/sanitized-config';
+import { skeleton } from '../../utils';
+
+const PublicationCard = ({
+  publications,
+  loading,
+}: {
+  publications: SanitizedPublication[];
+  loading: boolean;
+}) => {
+  const renderSkeleton = () => {
+    const array = [];
+    for (let index = 0; index < publications.length; index++) {
+      array.push(
+        <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>
+                    <p>
+                      {skeleton({
+                        widthCls: 'w-full',
+                        heightCls: 'h-4',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>,
+      );
+    }
+
+    return array;
+  };
+
+  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>
+          </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>
+    </Fragment>
+  );
+};
+
+export default PublicationCard;

src/interfaces/sanitized-config.tsx

@@ -46,6 +46,7 @@ export interface SanitizedSocial {
   linkedin?: string;
   twitter?: string;
   mastodon?: string;
+  researchGate?: string;
   facebook?: string;
   instagram?: string;
   youtube?: string;
@@ -87,6 +88,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 +142,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

@@ -77,14 +77,30 @@ export const getSanitizedConfig = (
         email: config?.social?.email,
         skype: config?.social?.skype,
         telegram: config?.social?.telegram,
+        researchGate: config?.social?.researchGate,
       },
       resume: {
         fileUrl: config?.resume?.fileUrl || '',
       },
       skills: config?.skills || [],
-      experiences: config?.experiences || [],
+      experiences:
-      certifications: config?.certifications || [],
+        config?.experiences?.filter(
-      educations: config?.educations || [],
+          (experience) =>
+            experience.company ||
+            experience.position ||
+            experience.from ||
+            experience.to,
+        ) || [],
+      certifications:
+        config?.certifications?.filter(
+          (certification) =>
+            certification.year || certification.name || certification.body,
+        ) || [],
+      educations:
+        config?.educations?.filter(
+          (item) => item.institution || item.degree || item.from || item.to,
+        ) || [],
+      publications: config?.publications?.filter((item) => item.title) || [],
       googleAnalytics: {
         id: config?.googleAnalytics?.id,
       },