Merge pull request #312 from arifszn/icon-placement

Fix icon placement

.github/workflows/deploy.yml

@@ -29,7 +29,7 @@ jobs:
           cache: 'npm'
 
       - name: Setup Pages
-        uses: actions/configure-pages@v1
+        uses: actions/configure-pages@v2
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -58,4 +58,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v1.2.3

.github/workflows/test-deploy.yml

@@ -18,7 +18,7 @@ jobs:
           cache: 'npm'
 
       - name: Restore cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             **/node_modules

.prettierrc

@@ -4,5 +4,6 @@
   "bracketSpacing": true,
   "printWidth": 80,
   "singleQuote": true,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "endOfLine": "auto"
 }

CONTRIBUTING.md

@@ -14,31 +14,36 @@ with a fix.
 
 ## Submitting a Pull Request
 
-- If applicable, update the `readme`
-- Use `npm run lint` and `npm run prettier` before committing
-- Example for a commit message
+1. Make sure that the contribution you want to make is explained or detailed in a GitHub issue! Find an [existing issue](https://github.com/arifszn/gitprofile/issues) or [open a new one](https://github.com/arifszn/gitprofile/issues/new).
+2. Once done, [fork the repository](https://github.com/arifszn/gitprofile/fork) in your own GitHub account.
+3. [Create a new Git branch](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository).
+4. Make the changes on your branch.
+5. [Submit the branch as a PR](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork) pointing to the `main` branch of the main repository. <br>
+   We do not enforce a naming convention for the PRs, but **please use something descriptive of your changes**.
 
-  ```
-  Fix type validation for typescript
-  ```
+## Development Workflow
 
-### Developing
-
-Fork, then clone the repo:
-
-```sh
-git clone https://github.com/your-username/gitprofile.git
-cd gitprofile
-```
-
-Install dependencies:
+### Install dependencies
 
 ```sh
 npm install
 ```
 
-Run dev server:
+### Run dev server
 
 ```sh
 npm run dev
 ```
+
+### Linter
+
+Each PR should pass the linter to be accepted. To fix lint and prettier errors, run `npm run lint:fix` and `npm run prettier:fix`.
+
+### Commit Message
+
+As minimal requirements, your commit message should:
+
+- be capitalized
+- not finish by a dot or any other punctuation character (!,?)
+- start with a verb so that we can read your commit message this way: "This commit will ...", where "..." is the commit message.
+  e.g.: "Fix the home page button" or "Add support for dark mode"

README.md

@@ -66,23 +66,36 @@
 ✓ [SEO](#seo)  
 ✓ [Avatar and Bio](#avatar-and-bio)  
 ✓ [Social Links](#social-links)  
-✓ [Skills](#skills)  
-✓ [Experience](#experience)  
-✓ [Education](#education)  
-✓ [Projects](#projects)  
-✓ [Blog Posts](#blog-posts)
+✓ [Skill Section](#skills)  
+✓ [Experience Section](#experience)  
+✓ [Certification Section](#certifications)  
+✓ [Education Section](#education)  
+✓ [Projects Section](#projects)  
+✓ [Blog Posts Section](#blog-posts)
 
 To view a live example, **[click here](https://arifszn.github.io/gitprofile)**.
 
 Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
 
+<p align="center">
+  <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/themes.png" alt="Themes">
+</p>
+
+## 🎉 Thank you for the 500 ★
+
+<p>
+  <a href="https://arifszn.github.io/gitprofile">
+    <img src="https://user-images.githubusercontent.com/45073703/202119579-eae272bd-ed39-434d-9361-df25308e0691.gif" alt="Thank You" width="50%"/>
+  </a>
+</p>
+
 ## 🛠 Installation & Setup
 
 There are three ways to use **GitProfile**. Use any.
 
-- Forking this repo
-- Setting up locally
-- Installing as package
+- [Forking this repo _(recommended)_](#forking-this-repo)
+- [Setting up locally](#setting-up-locally)
+- [Installing as package](#installing-as-package)
 
 ### Forking this repo
 
@@ -112,7 +125,7 @@ These instructions will get you a copy of the project and deploy your portfolio
 
 - **Commit the changes:** Now commit to your **main** branch with your changes. Wait a few minutes so that the CI/CD pipeline can publish your website to GitHub Pages. You can check the progress in the [Actions](https://github.com/arifszn/gitprofile/actions) tab.
 
-Your portfolio website will be live shortly. Any time you commit a change to the **main** branch, the website will be automatically updated. If you face any issue viewing the website, double-check the `base` value in the `vite.config.js` file.
+Your portfolio website will be live shortly. Any time you commit a change to the **main** branch, the website will be automatically updated. If you face any issue viewing the website, double-check the `base` value in the `vite.config.js` file. Also, check if **Source** is set to **GitHub Actions** in **Settings** ➜ **Pages** ➜ **Build and deployment**.
 
 If you wish to add a custom domain, no CNAME file is required. Just add it to your repo's **Settings** ➜ **Pages** ➜ **Custom domain**.
 
@@ -200,45 +213,79 @@ const config = {
   social: {
     linkedin: '',
     twitter: '',
+    mastodon: '',
     facebook: '',
     instagram: '',
     dribbble: '',
     behance: '',
     medium: '',
     dev: '',
+    stackoverflow: '', // format: userid/username
     website: '',
+    skype: '',
+    telegram: '',
     phone: '',
     email: '',
   },
+  resume: {
+    fileUrl: '', // Empty fileUrl will hide the `Download Resume` button.
+  },
   skills: ['JavaScript', 'React.js'],
   experiences: [
     {
-      company: 'Company name 1',
-      position: 'Software Engineer',
-      from: 'July 2019',
+      company: 'Company Name',
+      position: 'Position',
+      from: 'September 2021',
       to: 'Present',
+      companyLink: 'https://example.com',
     },
     {
-      company: 'Company name 2',
-      position: 'Jr. Software Engineer',
-      from: 'January 2019',
-      to: ' June 2019',
+      company: 'Company Name',
+      position: 'Position',
+      from: 'July 2019',
+      to: 'August 2021',
+      companyLink: 'https://example.com',
+    },
+  ],
+  certifications: [
+    {
+      body: 'Certification Body Name',
+      name: 'Sample Certification',
+      year: 'March 2022',
+      link: 'https://example.com',
     },
   ],
   education: [
     {
-      institution: 'Institution name 1',
-      degree: 'ABC',
+      institution: 'Institution Name',
+      degree: 'Degree',
       from: '2015',
       to: '2019',
     },
     {
-      institution: 'Institution name 2',
-      degree: 'XYZ',
+      institution: 'Institution Name',
+      degree: 'Degree',
       from: '2012',
       to: '2014',
     },
   ],
+  // To hide the `My Projects` section, keep it empty.
+  externalProjects: [
+    {
+      title: 'Project Name',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+      imageUrl: 'https://via.placeholder.com/250x250',
+      link: 'https://example.com',
+    },
+    {
+      title: 'Project Name',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+      imageUrl: 'https://via.placeholder.com/250x250',
+      link: 'https://example.com',
+    },
+  ],
   // Display blog posts from your medium or dev account. (Optional)
   blog: {
     source: 'dev', // medium | dev
@@ -246,9 +293,9 @@ const config = {
     limit: 5, // How many posts to display. Max is 10.
   },
   googleAnalytics: {
-    // GA3 tracking id/GA4 tag id
-    id: '', // UA-XXXXXXXXX-X | G-XXXXXXXXXX
+    id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
   },
+  // Track visitor interaction and behavior. https://www.hotjar.com
   hotjar: {
     id: '',
     snippetVersion: 6,
@@ -312,6 +359,9 @@ const config = {
       '--rounded-btn': '3rem',
     },
   },
+
+  // Optional Footer. Supports plain text or HTML.
+  footer: `Copyright © 2023 John Doe`,
 };
 ```
 
@@ -323,7 +373,7 @@ The default theme can be specified.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   themeConfig: {
     defaultTheme: 'light',
@@ -340,7 +390,7 @@ You can create your own custom theme by modifying these values. Theme `procyon`
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   themeConfig: {
     customTheme: {
@@ -357,17 +407,13 @@ module.exports = {
 };
 ```
 
-<p align="center">
-  <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/themes.png" alt="Themes">
-</p>
-
 ### Google Analytics
 
 **GitProfile** supports both GA3 and GA4. If you do not want to use Google Analytics, keep the `id` empty.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   googleAnalytics: {
     id: '',
@@ -379,11 +425,11 @@ Besides tracking visitors, it will track `click events` on projects and blog pos
 
 ### Hotjar
 
-**GitProfile** supports hotjar. If you do not want to use Hotjar, keep the `id` empty.
+**GitProfile** supports [hotjar](https://www.hotjar.com) to track visitor interaction and behavior. If you do not want to use Hotjar, keep the `id` empty.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   hotjar: {
     id: '',
@@ -402,21 +448,25 @@ 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, Facebook, Instagram, Dribbble, Behance, Medium, dev, personal website, phone and email.
+You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, Facebook, Instagram, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: 'arifszn@mastodon.social',
     facebook: '',
     instagram: '',
     dribbble: '',
     behance: '',
     medium: '',
     dev: '',
+    stackoverflow: '',
+    skype: '',
+    telegram: '',
     website: '',
     phone: '',
     email: '',
@@ -430,7 +480,7 @@ To showcase your skills provide them here.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   skills: ['JavaScript', 'React.js'],
 };
@@ -444,20 +494,22 @@ Provide your job history in `experiences`.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   experiences: [
     {
-      company: 'Company name 1',
-      position: 'Software Engineer',
-      from: 'July 2019',
+      company: 'Company Name',
+      position: 'Position',
+      from: 'September 2021',
       to: 'Present',
+      companyLink: 'https://example.com',
     },
     {
-      company: 'Company name 2',
-      position: 'Jr. Software Engineer',
-      from: 'January 2019',
-      to: ' June 2019',
+      company: 'Company Name',
+      position: 'Position',
+      from: 'July 2019',
+      to: 'August 2021',
+      companyLink: 'https://example.com',
     },
   ],
 };
@@ -471,7 +523,7 @@ Provide your education history in `education`.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   education: [
     {
@@ -492,13 +544,36 @@ module.exports = {
 
 Empty array will hide the education section.
 
-### Projects
+### Certifications
 
-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.
+Provide your industry certifications in `certifications`.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
+  // ...
+  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
+
+#### Github Projects
+
+Your public repo from GitHub will be displayed in the `Github Projects` section automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo.
+
+```js
+// gitprofile.config.js
+const config = {
   // ...
   github: {
     username: 'arifszn',
@@ -512,13 +587,32 @@ module.exports = {
 };
 ```
 
+#### External Projects
+
+In this section you can showcase your external/personal projects.
+
+```js
+// gitprofile.config.js
+const config = {
+  // ...
+  externalProjects: [
+    {
+      title: 'Project Name',
+      description: 'Description',
+      link: 'https://example.com',
+      imageUrl: 'https://via.placeholder.com/250x250',
+    },
+  ],
+};
+```
+
 ### 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`).
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   blog: {
     source: 'dev',
@@ -534,7 +628,7 @@ The posts are fetched by [blog.js](https://github.com/arifszn/blog.js).
 
 ## 💖 Support
 
-<p>You can show your support by starring this project.</p>
+<p>You can show your support by starring this project. ★</p>
 <a href="https://github.com/arifszn/gitprofile/stargazers">
   <img src="https://img.shields.io/github/stars/arifszn/gitprofile?style=social" alt="Github Star">
 </a>

gitprofile.config.js

@@ -13,16 +13,24 @@ const config = {
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: 'arifszn@mastodon.social',
     facebook: '',
     instagram: '',
     dribbble: '',
     behance: '',
     medium: 'arifszn',
     dev: 'arifszn',
-    website: 'https://arifszn.github.io',
+    stackoverflow: '', // format: userid/username
+    skype: '',
+    telegram: '',
+    website: 'https://arifszn.com',
     phone: '',
     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.
+  },
   skills: [
     'PHP',
     'Laravel',
@@ -31,64 +39,86 @@ const config = {
     'Node.js',
     'Nest.js',
     'MySQL',
+    'PostgreSQL',
     'Git',
     'Docker',
     'PHPUnit',
     'CSS',
     'Antd',
     'Tailwind',
-    'Bootstrap',
   ],
   experiences: [
     {
-      company: 'Monstarlab Bangladesh',
-      position: 'Backend Engineer II',
+      company: 'Company Name',
+      position: 'Position',
       from: 'September 2021',
       to: 'Present',
+      companyLink: 'https://example.com',
     },
     {
-      company: 'My Offer 360 Degree',
-      position: 'Web Application Developer',
+      company: 'Company Name',
+      position: 'Position',
       from: 'July 2019',
       to: 'August 2021',
+      companyLink: 'https://example.com',
     },
   ],
+  /* certifications: [
+    {
+      name: 'Lorem ipsum',
+      body: 'Lorem ipsum dolor sit amet',
+      year: 'March 2022',
+      link: 'https://example.com'
+    },
+  ], */
   education: [
     {
-      institution: 'American International University-Bangladesh',
-      degree: 'Bachelor of Science',
+      institution: 'Institution Name',
+      degree: 'Degree',
       from: '2015',
       to: '2019',
     },
     {
-      institution: 'Cantonment College, Jessore',
-      degree: 'Higher Secondary Certificate (HSC)',
+      institution: 'Institution Name',
+      degree: 'Degree',
       from: '2012',
       to: '2014',
     },
+  ],
+
+  // To hide the `My Projects` section, keep it empty.
+  externalProjects: [
     {
-      institution: 'Chowgacha Shahadat Pilot High School',
-      degree: 'Secondary School Certificate (SSC)',
-      from: '2007',
-      to: '2012',
+      title: 'Project Name',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+      imageUrl: 'https://via.placeholder.com/250x250',
+      link: 'https://example.com',
+    },
+    {
+      title: 'Project Name',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+      imageUrl: 'https://via.placeholder.com/250x250',
+      link: 'https://example.com',
     },
   ],
   // Display blog posts 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 posts to display. Max is 10.
+    limit: 2, // How many posts to display. Max is 10.
   },
   googleAnalytics: {
-    // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
-    id: 'G-WLLB5E14M6', // Please remove this and use your own tag id or keep it empty
+    id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
   },
+  // Track visitor interaction and behavior. https://www.hotjar.com
   hotjar: {
-    id: '2617601', //  Please remove this and use your own id or keep it empty
+    id: '',
     snippetVersion: 6,
   },
   themeConfig: {
-    defaultTheme: 'corporate',
+    defaultTheme: 'winter',
 
     // Hides the switch in the navbar
     // Useful if you want to support a single color mode
@@ -146,6 +176,13 @@ const config = {
       '--rounded-btn': '3rem',
     },
   },
+
+  // Optional Footer. Supports plain text or HTML.
+  footer: `Made with <a 
+      class="text-primary" href="https://github.com/arifszn/gitprofile"
+      target="_blank"
+      rel="noreferrer"
+    >GitProfile</a> and ❤️`,
 };
 
 export default config;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arifszn/gitprofile",
   "description": "Create an automatic portfolio based on GitHub profile",
-  "version": "2.0.9",
+  "version": "2.4.0",
   "license": "MIT",
   "author": "arifszn",
   "repository": {
@@ -34,8 +34,8 @@
     "build:library": "vite build --config library.config.js",
     "lint": "eslint --ext .js,.jsx .",
     "lint:fix": "eslint --ext .js,.jsx --fix .",
-    "prettier": "prettier --check './**/*.{js,jsx,ts,tsx,css,md,json}'",
-    "prettier:fix": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}'"
+    "prettier": "prettier --check \"./**/*.{js,jsx,ts,tsx,css,md,json}\"",
+    "prettier:fix": "prettier --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\""
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -43,9 +43,9 @@
   },
   "devDependencies": {
     "@arifszn/blog-js": "^2.0.0",
-    "@vitejs/plugin-react": "^2.0.0",
+    "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.4",
-    "axios": "^0.27.2",
+    "axios": "^1.1.3",
     "daisyui": "^2.11.0",
     "date-fns": "^2.28.0",
     "eslint": "^8.11.0",
@@ -59,7 +59,7 @@
     "react-hotjar": "^5.0.0",
     "react-icons": "^4.3.1",
     "tailwindcss": "^3.0.23",
-    "vite": "^3.0.1"
+    "vite": "^4.0.3"
   },
   "keywords": [
     "git-profile",

src/components/GitProfile.jsx

@@ -7,9 +7,11 @@ 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';
+import Footer from './footer';
 import {
   genericError,
   getInitialTheme,
@@ -18,12 +20,14 @@ import {
   setupHotjar,
   tooManyRequestError,
   sanitizeConfig,
-  skeleton,
 } from '../helpers/utils';
 import { HelmetProvider } from 'react-helmet-async';
 import PropTypes from 'prop-types';
 import '../assets/index.css';
 import { formatDistance } from 'date-fns';
+import ExternalProject from './external-project';
+
+const bgColor = 'bg-base-300';
 
 const GitProfile = ({ config }) => {
   const [error, setError] = useState(
@@ -64,9 +68,14 @@ const GitProfile = ({ config }) => {
         };
 
         setProfile(profileData);
+        return data;
       })
-      .then(() => {
+      .then((userData) => {
         let excludeRepo = ``;
+        if (userData.public_repos === 0) {
+          setRepo([]);
+          return;
+        }
 
         sanitizedConfig.github.exclude.projects.forEach((project) => {
           excludeRepo += `+-repo:${sanitizedConfig.github.username}/${project}`;
@@ -144,7 +153,7 @@ const GitProfile = ({ config }) => {
         ) : (
           sanitizedConfig && (
             <Fragment>
-              <div className="p-4 lg:p-10 min-h-full bg-base-200">
+              <div className={`p-4 lg:p-10 min-h-full ${bgColor}`}>
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 rounded-box">
                   <div className="col-span-1">
                     <div className="grid grid-cols-1 gap-6">
@@ -160,6 +169,7 @@ const GitProfile = ({ config }) => {
                         profile={profile}
                         loading={loading}
                         avatarRing={!sanitizedConfig.themeConfig.hideAvatarRing}
+                        resume={sanitizedConfig.resume}
                       />
                       <Details
                         profile={profile}
@@ -179,6 +189,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">
@@ -189,6 +203,11 @@ const GitProfile = ({ config }) => {
                         github={sanitizedConfig.github}
                         googleAnalytics={sanitizedConfig.googleAnalytics}
                       />
+                      <ExternalProject
+                        loading={loading}
+                        externalProjects={sanitizedConfig.externalProjects}
+                        googleAnalytics={sanitizedConfig.googleAnalytics}
+                      />
                       <Blog
                         loading={loading}
                         googleAnalytics={sanitizedConfig.googleAnalytics}
@@ -198,26 +217,11 @@ const GitProfile = ({ config }) => {
                   </div>
                 </div>
               </div>
-              <footer className="p-4 footer bg-base-200 text-base-content footer-center">
+              <footer
+                className={`p-4 footer ${bgColor} text-base-content footer-center`}
+              >
                 <div className="card compact bg-base-100 shadow">
-                  <a
-                    className="card-body"
-                    href="https://github.com/arifszn/gitprofile"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <div>
-                      {loading ? (
-                        skeleton({ width: 'w-52', height: 'h-6' })
-                      ) : (
-                        <p className="font-mono text-sm">
-                          Made with{' '}
-                          <span className="text-primary">GitProfile</span> and
-                          ❤️
-                        </p>
-                      )}
-                    </div>
-                  </a>
+                  <Footer content={sanitizedConfig.footer} loading={loading} />
                 </div>
               </footer>
             </Fragment>
@@ -242,17 +246,32 @@ GitProfile.propTypes = {
     social: PropTypes.shape({
       linkedin: PropTypes.string,
       twitter: PropTypes.string,
+      mastodon: PropTypes.string,
       facebook: PropTypes.string,
       instagram: PropTypes.string,
       dribbble: PropTypes.string,
       behance: PropTypes.string,
       medium: PropTypes.string,
       dev: PropTypes.string,
+      stackoverflow: PropTypes.string,
       website: PropTypes.string,
+      skype: PropTypes.string,
+      telegram: PropTypes.string,
       phone: PropTypes.string,
       email: PropTypes.string,
     }),
+    resume: PropTypes.shape({
+      fileUrl: PropTypes.string,
+    }),
     skills: PropTypes.array,
+    externalProjects: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        description: PropTypes.string.isRequired,
+        link: PropTypes.string.isRequired,
+        imageUrl: PropTypes.string,
+      })
+    ),
     experiences: PropTypes.arrayOf(
       PropTypes.shape({
         company: PropTypes.string,
@@ -261,6 +280,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,
@@ -297,6 +324,7 @@ GitProfile.propTypes = {
         '--rounded-btn': PropTypes.string,
       }),
     }),
+    footer: PropTypes.string,
   }).isRequired,
 };
 

src/components/avatar-card/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { fallbackImage, skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 
-const AvatarCard = ({ profile, loading, avatarRing }) => {
+const AvatarCard = ({ profile, loading, avatarRing, resume }) => {
   return (
     <div className="card shadow-lg compact bg-base-100">
       <div className="grid place-items-center py-8">
@@ -55,6 +55,22 @@ const AvatarCard = ({ profile, loading, avatarRing }) => {
               : profile.bio}
           </div>
         </div>
+        {resume?.fileUrl &&
+          (loading ? (
+            <div className="mt-6">
+              {skeleton({ width: 'w-40', height: 'h-8' })}
+            </div>
+          ) : (
+            <a
+              href={resume.fileUrl}
+              target="_blank"
+              className="btn btn-outline btn-sm text-xs mt-6 opacity-50"
+              download
+              rel="noreferrer"
+            >
+              Download Resume
+            </a>
+          ))}
       </div>
     </div>
   );
@@ -64,6 +80,9 @@ AvatarCard.propTypes = {
   profile: PropTypes.object,
   loading: PropTypes.bool.isRequired,
   avatarRing: PropTypes.bool.isRequired,
+  resume: PropTypes.shape({
+    fileUrl: PropTypes.string,
+  }),
 };
 
 export default AvatarCard;

src/components/blog/index.jsx

@@ -181,10 +181,10 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
           <div className="grid grid-cols-2 gap-6">
             <div className="col-span-2">
               <div
-                className={`card compact ${
+                className={`card compact bg-base-100 ${
                   loading || (articles && articles.length)
-                    ? 'bg-gradient-to-br to-base-200 from-base-100 shadow'
-                    : 'bg-base-100 shadow-lg'
+                    ? 'shadow bg-opacity-40'
+                    : 'shadow-lg'
                 }`}
               >
                 <div className="card-body">

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/components/details/index.jsx

@@ -1,13 +1,12 @@
-import { MdLocationOn, MdMail } from 'react-icons/md';
+import { MdLocationOn } from 'react-icons/md';
 import {
   AiFillGithub,
   AiFillInstagram,
   AiFillMediumSquare,
 } from 'react-icons/ai';
 import { SiTwitter } from 'react-icons/si';
-import { GrLinkedinOption } from 'react-icons/gr';
 import { CgDribbble } from 'react-icons/cg';
-import { RiPhoneFill } from 'react-icons/ri';
+import { RiPhoneFill, RiMailFill } from 'react-icons/ri';
 import { Fragment } from 'react';
 import {
   FaBehanceSquare,
@@ -15,10 +14,33 @@ import {
   FaDev,
   FaFacebook,
   FaGlobe,
+  FaSkype,
+  FaMastodon,
+  FaStackOverflow,
+  FaTelegram,
+  FaLinkedin,
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
 
+const isCompanyMention = (company) => {
+  return company.startsWith('@') && !company.includes(' ');
+};
+
+const companyLink = (company) => {
+  return `https://github.com/${company.substring(1)}`;
+};
+
+const getFormattedMastodonValue = (mastodonValue, isLink) => {
+  const [username, server] = mastodonValue.split('@');
+
+  if (isLink) {
+    return `https://${server}/@${username}`;
+  } else {
+    return `${username}@${server}`;
+  }
+};
+
 const ListItem = ({ icon, title, value, link, skeleton = false }) => {
   return (
     <a
@@ -27,33 +49,23 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
       rel="noreferrer"
       className="flex justify-start py-2 px-1 items-center"
     >
-      <span className="w-2 m-2">{icon}</span>
-      <div className="flex-grow font-medium px-2">{title}</div>
+      <div className="flex-grow font-medium gap-2 flex items-center my-1">
+        {icon} {title}
+      </div>
       <div
         className={`${
           skeleton ? 'flex-grow' : ''
         } text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
+        style={{
+          wordBreak: 'break-word',
+        }}
       >
-        <div
-          style={{
-            wordBreak: 'break-word',
-          }}
-        >
-          {value}
-        </div>
+        {value}
       </div>
     </a>
   );
 };
 
-const isCompanyMention = (company) => {
-  return company.startsWith('@') && !company.includes(' ');
-};
-
-const companyLink = (company) => {
-  return `https://github.com/${company.substring(1)}`;
-};
-
 const Details = ({ profile, loading, social, github }) => {
   const renderSkeleton = () => {
     let array = [];
@@ -82,14 +94,14 @@ const Details = ({ profile, loading, social, github }) => {
             <Fragment>
               {profile.location && (
                 <ListItem
-                  icon={<MdLocationOn className="mr-2" />}
+                  icon={<MdLocationOn />}
                   title="Based in:"
                   value={profile.location}
                 />
               )}
               {profile.company && (
                 <ListItem
-                  icon={<FaBuilding className="mr-2" />}
+                  icon={<FaBuilding />}
                   title="Company:"
                   value={profile.company}
                   link={
@@ -100,22 +112,30 @@ const Details = ({ profile, loading, social, github }) => {
                 />
               )}
               <ListItem
-                icon={<AiFillGithub className="mr-2" />}
+                icon={<AiFillGithub />}
                 title="GitHub:"
                 value={github.username}
                 link={`https://github.com/${github.username}`}
               />
               {social?.twitter && (
                 <ListItem
-                  icon={<SiTwitter className="mr-2" />}
+                  icon={<SiTwitter />}
                   title="Twitter:"
                   value={social.twitter}
                   link={`https://twitter.com/${social.twitter}`}
                 />
               )}
+              {social?.mastodon && (
+                <ListItem
+                  icon={<FaMastodon />}
+                  title="Mastodon:"
+                  value={getFormattedMastodonValue(social.mastodon, false)}
+                  link={getFormattedMastodonValue(social.mastodon, true)}
+                />
+              )}
               {social?.linkedin && (
                 <ListItem
-                  icon={<GrLinkedinOption className="mr-2" />}
+                  icon={<FaLinkedin />}
                   title="LinkedIn:"
                   value={social.linkedin}
                   link={`https://www.linkedin.com/in/${social.linkedin}`}
@@ -123,7 +143,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.dribbble && (
                 <ListItem
-                  icon={<CgDribbble className="mr-2" />}
+                  icon={<CgDribbble />}
                   title="Dribbble:"
                   value={social.dribbble}
                   link={`https://dribbble.com/${social.dribbble}`}
@@ -131,7 +151,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.behance && (
                 <ListItem
-                  icon={<FaBehanceSquare className="mr-2" />}
+                  icon={<FaBehanceSquare />}
                   title="Behance:"
                   value={social.behance}
                   link={`https://www.behance.net/${social.behance}`}
@@ -139,7 +159,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.facebook && (
                 <ListItem
-                  icon={<FaFacebook className="mr-2" />}
+                  icon={<FaFacebook />}
                   title="Facebook:"
                   value={social.facebook}
                   link={`https://www.facebook.com/${social.facebook}`}
@@ -147,7 +167,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.instagram && (
                 <ListItem
-                  icon={<AiFillInstagram className="mr-2" />}
+                  icon={<AiFillInstagram />}
                   title="Instagram:"
                   value={social.instagram}
                   link={`https://www.instagram.com/${social.instagram}`}
@@ -155,7 +175,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.medium && (
                 <ListItem
-                  icon={<AiFillMediumSquare className="mr-2" />}
+                  icon={<AiFillMediumSquare />}
                   title="Medium:"
                   value={social.medium}
                   link={`https://medium.com/@${social.medium}`}
@@ -163,23 +183,48 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.dev && (
                 <ListItem
-                  icon={<FaDev className="mr-2" />}
+                  icon={<FaDev />}
                   title="Dev:"
                   value={social.dev}
                   link={`https://dev.to/${social.dev}`}
                 />
               )}
+              {social?.stackoverflow && (
+                <ListItem
+                  icon={<FaStackOverflow />}
+                  title="Stack Overflow:"
+                  value={social.stackoverflow.split('/').slice(-1)}
+                  link={`https://stackoverflow.com/users/${social.stackoverflow}`}
+                />
+              )}
               {social?.website && (
                 <ListItem
-                  icon={<FaGlobe className="mr-2" />}
+                  icon={<FaGlobe />}
                   title="Website:"
                   value={social.website}
                   link={social.website}
                 />
               )}
+              {social?.skype && (
+                <ListItem
+                  icon={<FaSkype />}
+                  title="Skype"
+                  value={social.skype}
+                  link={`skype:${social.skype}?chat`}
+                />
+              )}
+              {social?.telegram && (
+                <ListItem
+                  icon={<FaTelegram />}
+                  title="Telegram"
+                  value={social.telegram}
+                  link={`https://t.me/${social.telegram}`}
+                />
+              )}
+
               {social?.phone && (
                 <ListItem
-                  icon={<RiPhoneFill className="mr-2" />}
+                  icon={<RiPhoneFill />}
                   title="Phone:"
                   value={social.phone}
                   link={`tel:${social.phone}`}
@@ -187,7 +232,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.email && (
                 <ListItem
-                  icon={<MdMail className="mr-2" />}
+                  icon={<RiMailFill />}
                   title="Email:"
                   value={social.email}
                   link={`mailto:${social.email}`}

src/components/experience/index.jsx

@@ -2,7 +2,7 @@ import { skeleton } from '../../helpers/utils';
 import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
-const ListItem = ({ time, position, company }) => (
+const ListItem = ({ time, position, company, companyLink }) => (
   <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,11 @@ const ListItem = ({ time, position, company }) => (
     ></div>
     <div className="my-0.5 text-xs">{time}</div>
     <h3 className="font-semibold">{position}</h3>
-    <div className="mb-4 font-normal">{company}</div>
+    <div className="mb-4 font-normal">
+      <a href={companyLink} target="_blank" rel="noreferrer">
+        {company}
+      </a>
+    </div>
   </li>
 );
 
@@ -37,7 +41,6 @@ const Experience = ({ experiences, loading }) => {
 
     return array;
   };
-
   return (
     <>
       {experiences?.length !== 0 && (
@@ -66,6 +69,9 @@ const Experience = ({ experiences, loading }) => {
                         time={`${experience.from} - ${experience.to}`}
                         position={experience.position}
                         company={experience.company}
+                        companyLink={
+                          experience.companyLink ? experience.companyLink : null
+                        }
                       />
                     ))}
                   </Fragment>
@@ -83,6 +89,7 @@ ListItem.propTypes = {
   time: PropTypes.node,
   position: PropTypes.node,
   company: PropTypes.node,
+  companyLink: PropTypes.string,
 };
 
 Experience.propTypes = {

src/components/external-project/index.jsx

@@ -0,0 +1,171 @@
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { ga, skeleton } from '../../helpers/utils';
+import LazyImage from '../lazy-image';
+
+const displaySection = (externalProjects) => {
+  if (
+    externalProjects &&
+    Array.isArray(externalProjects) &&
+    externalProjects.length
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
+  const renderSkeleton = () => {
+    let array = [];
+    for (let index = 0; index < externalProjects.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="flex items-start px-4">
+                  <div className="w-full">
+                    <h2>
+                      {skeleton({
+                        width: 'w-32',
+                        height: 'h-8',
+                        className: 'mb-2 mx-auto',
+                      })}
+                    </h2>
+                    <div className="avatar w-full h-full">
+                      <div className="w-20 h-20 mask mask-squircle mx-auto">
+                        {skeleton({
+                          width: 'w-full',
+                          height: 'h-full',
+                          shape: '',
+                        })}
+                      </div>
+                    </div>
+                    <div className="mt-2">
+                      {skeleton({
+                        width: 'w-full',
+                        height: 'h-4',
+                        className: 'mx-auto',
+                      })}
+                    </div>
+                    <div className="mt-2 flex items-center flex-wrap justify-center">
+                      {skeleton({
+                        width: 'w-full',
+                        height: 'h-4',
+                        className: 'mx-auto',
+                      })}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return array;
+  };
+
+  const renderExternalProjects = () => {
+    return externalProjects.map((item, index) => (
+      <a
+        className="card shadow-lg compact bg-base-100 cursor-pointer"
+        key={index}
+        href={item.link}
+        onClick={(e) => {
+          e.preventDefault();
+
+          try {
+            if (googleAnalytics?.id) {
+              ga.event({
+                action: 'Click External Project',
+                params: {
+                  post: item.title,
+                },
+              });
+            }
+          } catch (error) {
+            console.error(error);
+          }
+
+          window?.open(item.link, '_blank');
+        }}
+      >
+        <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">
+                    {item.title}
+                  </h2>
+                  {item.imageUrl && (
+                    <div className="avatar opacity-90">
+                      <div className="w-20 h-20 mask mask-squircle">
+                        <LazyImage
+                          src={item.imageUrl}
+                          alt={'thumbnail'}
+                          placeholder={skeleton({
+                            width: 'w-full',
+                            height: 'h-full',
+                            shape: '',
+                          })}
+                        />
+                      </div>
+                    </div>
+                  )}
+                  <p className="mt-1 text-base-content text-opacity-60 text-sm">
+                    {item.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a>
+    ));
+  };
+
+  return (
+    <Fragment>
+      {displaySection(externalProjects) && (
+        <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({ width: 'w-40', height: 'h-8' })
+                      ) : (
+                        <span className="text-base-content opacity-70">
+                          My Projects
+                        </span>
+                      )}
+                    </h5>
+                  </div>
+                  <div className="col-span-2">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      {loading ? renderSkeleton() : renderExternalProjects()}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </Fragment>
+  );
+};
+
+ExternalProject.propTypes = {
+  externalProjects: PropTypes.array,
+  loading: PropTypes.bool.isRequired,
+  googleAnalytics: PropTypes.object,
+};
+
+export default ExternalProject;

src/components/footer/index.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+
+import { skeleton } from '../../helpers/utils';
+
+const Footer = ({ content, loading }) => {
+  if (!content) return null;
+
+  return (
+    <div className="card-body">
+      {loading ? (
+        skeleton({ width: 'w-52', height: 'h-6' })
+      ) : (
+        <div dangerouslySetInnerHTML={{ __html: content }} />
+      )}
+    </div>
+  );
+};
+
+Footer.propTypes = {
+  content: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+};
+
+export default Footer;

src/components/head-tag-editor/index.jsx

@@ -22,7 +22,7 @@ const HeadTagEditor = ({ profile, theme, googleAnalytics, social }) => {
                 gtag('config', '${googleAnalytics.id}');`}
             </script>
           )}
-          <title>Portfolio of {profile.name}</title>
+          <title>Portfolio{profile.name && ` of ${profile.name}`}</title>
           <meta
             name="theme-color"
             content={isDarkishTheme(theme) ? '#000000' : '#ffffff'}
@@ -30,18 +30,27 @@ const HeadTagEditor = ({ profile, theme, googleAnalytics, social }) => {
 
           <meta name="description" content={profile.bio} />
 
-          <meta itemProp="name" content={`Portfolio of ${profile.name}`} />
+          <meta
+            itemProp="name"
+            content={`Portfolio${profile.name && ` of ${profile.name}`}`}
+          />
           <meta itemProp="description" content={profile.bio} />
           <meta itemProp="image" content={profile.avatar} />
 
           <meta property="og:url" content={social?.website || ''} />
           <meta property="og:type" content="website" />
-          <meta property="og:title" content={`Portfolio of ${profile.name}`} />
+          <meta
+            property="og:title"
+            content={`Portfolio${profile.name && ` of ${profile.name}`}`}
+          />
           <meta property="og:description" content={profile.bio} />
           <meta property="og:image" content={profile.avatar} />
 
           <meta name="twitter:card" content="summary_large_image" />
-          <meta name="twitter:title" content={`Portfolio of ${profile.name}`} />
+          <meta
+            name="twitter:title"
+            content={`Portfolio${profile.name && ` of ${profile.name}`}`}
+          />
           <meta name="twitter:description" content={profile.bio} />
           <meta name="twitter:image" content={profile.avatar} />
         </Helmet>

src/components/project/index.jsx

@@ -2,8 +2,13 @@ import { Fragment } from 'react';
 import { AiOutlineStar, AiOutlineFork } from 'react-icons/ai';
 import PropTypes from 'prop-types';
 import { ga, languageColor, skeleton } from '../../helpers/utils';
+import { MdInsertLink } from 'react-icons/md';
 
 const Project = ({ repo, loading, github, googleAnalytics }) => {
+  if (!loading && Array.isArray(repo) && repo.length === 0) {
+    return <></>;
+  }
+
   const renderSkeleton = () => {
     let array = [];
     for (let index = 0; index < github.limit; index++) {
@@ -14,7 +19,11 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
               <div className="flex items-center">
                 <span>
                   <h5 className="card-title text-lg">
-                    {skeleton({ width: 'w-32', height: 'h-8' })}
+                    {skeleton({
+                      width: 'w-32',
+                      height: 'h-8',
+                      className: 'mb-1',
+                    })}
                   </h5>
                 </span>
               </div>
@@ -77,31 +86,17 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
       >
         <div className="flex justify-between flex-col p-8 h-full w-full">
           <div>
-            <div className="flex items-center opacity-60">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                className="text-base-content inline-block w-5 h-5 mr-2 stroke-current"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-                ></path>
-              </svg>
-              <span>
-                <h5 className="card-title text-lg text-base-content">
-                  {item.name}
-                </h5>
-              </span>
+            <div className="flex items-center">
+              <div className="card-title text-lg tracking-wide flex text-base-content opacity-60">
+                <MdInsertLink className="my-auto" />
+                <span className="capitalize">{item.name}</span>
+              </div>
             </div>
             <p className="mb-5 mt-1 text-base-content text-opacity-60 text-sm">
               {item.description}
             </p>
           </div>
-          <div className="flex justify-between text-sm text-base-content text-opacity-60">
+          <div className="flex justify-between text-sm text-base-content text-opacity-60 truncate">
             <div className="flex flex-grow">
               <span className="mr-3 flex items-center">
                 <AiOutlineStar className="mr-0.5" />
@@ -132,15 +127,15 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
       <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-gradient-to-br to-base-200 from-base-100 shadow">
+            <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({ width: 'w-28', height: 'h-8' })
+                      skeleton({ width: 'w-40', height: 'h-8' })
                     ) : (
                       <span className="text-base-content opacity-70">
-                        My Projects
+                        GitHub Projects
                       </span>
                     )}
                   </h5>
@@ -151,7 +146,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                       href={`https://github.com/${github.username}?tab=repositories`}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-base-content opacity-50"
+                      className="text-base-content opacity-50 hover:underline"
                     >
                       See All
                     </a>

src/components/theme-changer/index.jsx

@@ -57,7 +57,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
               </div>
               <div
                 tabIndex={0}
-                className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-b-box bg-base-200 text-base-content"
+                className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-lg bg-base-200 text-base-content"
               >
                 <ul className="p-4 menu compact">
                   {[

src/helpers/utils.jsx

@@ -147,18 +147,27 @@ export const sanitizeConfig = (config) => {
     social: {
       linkedin: config?.social?.linkedin,
       twitter: config?.social?.twitter,
+      mastodon: config?.social?.mastodon,
       facebook: config?.social?.facebook,
       instagram: config?.social?.instagram,
       dribbble: config?.social?.dribbble,
       behance: config?.social?.behance,
       medium: config?.social?.medium,
       dev: config?.social?.dev,
+      stackoverflow: config?.social?.stackoverflow,
       website: config?.social?.website,
       phone: config?.social?.phone,
       email: config?.social?.email,
+      skype: config?.social?.skype,
+      telegram: config?.social?.telegram,
+    },
+    resume: {
+      fileUrl: config?.resume?.fileUrl || '',
     },
     skills: config?.skills || [],
+    externalProjects: config?.externalProjects || [],
     experiences: config?.experiences || [],
+    certifications: config?.certifications || [],
     education: config?.education || [],
     blog: {
       source: config?.blog?.source,
@@ -181,6 +190,7 @@ export const sanitizeConfig = (config) => {
       themes: themes,
       customTheme: customTheme,
     },
+    footer: config?.footer,
   };
 };
 
@@ -202,7 +212,7 @@ export const tooManyRequestError = (reset) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          rate limit.
+          rate limit
         </a>
         ! Try again later{` ${reset}`}.
       </p>
@@ -215,7 +225,8 @@ export const notFoundError = {
   title: 'The Github Username is Incorrect.',
   subTitle: (
     <p>
-      Please provide correct github username in <code>config</code>.
+      Please provide correct github username in{' '}
+      <code>gitprofile.config.js</code>.
     </p>
   ),
 };

types/index.d.ts

@@ -49,6 +49,11 @@ export interface Social {
    */
   twitter?: string;
 
+  /**
+   * Mastodon
+   */
+  mastodon?: string;
+
   /**
    * Facebook
    */
@@ -79,11 +84,26 @@ export interface Social {
    */
   dev?: string;
 
+  /**
+   * Stack Overflow
+   */
+  stackoverflow?: string;
+
   /**
    * Website
    */
   website?: string;
 
+  /**
+   * Skype username
+   */
+  skype?: string;
+
+  /**
+   * Telegram username
+   */
+  telegram?: string;
+
   /**
    * Phone
    */
@@ -207,6 +227,20 @@ export interface Experience {
   position?: string;
   from?: string;
   to?: string;
+  companyLink?: string;
+}
+export interface Certifications {
+  body?: string;
+  name?: string;
+  year?: string;
+  link?: string;
+}
+
+export interface ExternalProjects {
+  title: string;
+  description: string;
+  imageUrl?: string;
+  link: string;
 }
 
 export interface Education {
@@ -216,6 +250,10 @@ export interface Education {
   to?: string;
 }
 
+export interface Resume {
+  fileUrl?: string;
+}
+
 export interface Config {
   /**
    * GitHub Config
@@ -227,6 +265,11 @@ export interface Config {
    */
   social?: Social;
 
+  /**
+   * Resume
+   */
+  resume?: Resume;
+
   /**
    * Skill list
    */
@@ -237,6 +280,16 @@ export interface Config {
    */
   experiences?: Array<Experience>;
 
+  /**
+   * External Projects
+   */
+  externalProjects?: Array<ExternalProjects>;
+
+  /**
+   * Certifications list
+   */
+  certifications?: Array<Certifications>;
+
   /**
    * Education list
    */
@@ -261,6 +314,11 @@ export interface Config {
    * Theme config
    */
   themeConfig?: ThemeConfig;
+
+  /**
+   * Custom footer
+   */
+  footer?: string;
 }
 
 export interface GitProfileProps {