Update README.md

Better dark mode support

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'

README.md

@@ -1,28 +1,54 @@
-<h1 align="center">GitProfile</h1>
+<br/>
-<p align="center">Easy to use automatic portfolio builder for every GitHub user!</p>
 
 <p align="center">
+  <img src="https://user-images.githubusercontent.com/45073703/177566625-9b84e793-4559-4475-ba54-8d3d5f4123d4.png" width="35%">
+
+  <h4 align="center">Easy to use automatic portfolio builder for every GitHub user!</h4>
+
+  <p align="center">
+    <a href="https://codeclimate.com/github/arifszn/gitprofile/maintainability">
+      <img src="https://api.codeclimate.com/v1/badges/c60f42d7d0b61bd33e98/maintainability" />
+    </a>
+    <a href="https://github.com/arifszn/gitprofile/issues">
+      <img src="https://img.shields.io/github/issues/arifszn/gitprofile"/>
+    </a>
+    <a href="https://github.com/arifszn/gitprofile/stargazers">
+      <img src="https://img.shields.io/github/stars/arifszn/gitprofile"/>
+    </a>
+    <a href="https://github.com/arifszn/gitprofile/blob/main/package-lock.json">
+      <img src="https://img.shields.io/snyk/vulnerabilities/github/arifszn/gitprofile"/>
+    </a>
     <a href="https://github.com/arifszn/gitprofile/blob/main/CONTRIBUTING.md">
       <img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat"/>
     </a>
     <a href="https://github.com/arifszn/gitprofile/blob/main/LICENSE">
       <img src="https://img.shields.io/github/license/arifszn/gitprofile"/>
     </a>
-  <a href="https://twitter.com/intent/tweet?text=Check%20out%20the%20portfolio%20builder.%20Create%20an%20automatic%20portfolio%20based%20on%20GitHub%20profile.&url=https://github.com/arifszn/gitprofile&hashtags=javascript,opensource,js,webdev,developers">
+    <a href="https://www.buymeacoffee.com/arifszn">
-    <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Farifszn%2Fgitprofile"/>
+      <img src="https://img.shields.io/badge/sponsor-buy%20me%20a%20coffee-yellow?logo=buymeacoffee"/>
     </a>
+    <a href="https://twitter.com/arif_szn">
+      <img src="https://img.shields.io/twitter/follow/arif_szn?style=social"/>
+    </a>
+  </p>
+
+  <p align="center">
+    <a href="https://arifszn.github.io/gitprofile">View Demo</a>
+    ·
+    <a href="https://github.com/arifszn/gitprofile/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/arifszn/gitprofile/discussions">Request Feature</a>
+  </p>
 </p>
 
 <p align="center">
   <a href="https://arifszn.github.io/gitprofile">
-      <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/preview.gif" width="60%" alt="Preview"/>
+    <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/preview.gif" alt="Preview" width="60%"/>
   </a>
   <br/>
-  <a href="#arifszn"><img src="https://arifszn.github.io/assets/img/drop-shadow.png" width="60%" alt="Shadow"/></a>
+  <a href="#arifszn"><img src="https://arifszn.github.io/assets/img/drop-shadow.png" width="50%" alt="Shadow"/></a>
 </p>
 
-What if you could create your portfolio in 5 minutes just by providing your GitHub username and even host it without any cost? Do you want to display your skills, job history, education, or blog posts on your portfolio? Introducing **GitProfile**.
-
 **GitProfile** is an easy to use portfolio builder where you can create a portfolio page automatically by just providing your GitHub username. It is built using React.js on top of Vite.js. But it's not necessary to have knowledge on these to get you started. You can make your own copy with zero coding experience.
 
 **Features:**
@@ -48,24 +74,26 @@ Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
 
 There are two ways to use **GitProfile**. Use either one.
 
-<details>
+- Forking this repo
-<summary>Forking this repo (Click to expand)</summary>
+- Installing as package
 
-<br/>
+### Forking this repo
 
 These instructions will get you a copy of the project and deploy your portfolio online!
 
 - **Fork repo:** Click [here](https://github.com/arifszn/gitprofile/fork) to fork the repo so you have your own project to customize. A "fork" is a copy of a repository.
-- **Rename repo:** Rename your forked repository to `username.github.io` in GitHub, where `username` is your GitHub username (or organization name).
+- **Rename repo:**
+  - If you want to host your portfolio at `https://<USERNAME>.github.io`, rename your forked repository to `username.github.io` in GitHub, where `username` is your GitHub username (or organization name).
+  - If you want to host your portfolio at `https://<USERNAME>.github.io/<REPO>` (e.g. `https://<USERNAME>.github.io/portfolio`), rename your forked repository to `<REPO>` (e.g. `portfolio`) in GitHub.
 - **Enable workflows:** Go to your repo's **Actions** page and enable workflows.
 
   ![Workflows](https://arifszn.github.io/assets/img/hosted/gitprofile/workflows.png)
 
 - **Base Value:** Open `vite.config.js`, and change `base`'s value.
 
-  - If you are deploying to `https://<USERNAME>.github.io/`, set `base` to `'/'`.
+  - If you are deploying to `https://<USERNAME>.github.io`, set `base` to `'/'`.
 
-  - If you are deploying to `https://<USERNAME>.github.io/<REPO>/`, for example your repository is at `https://github.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.
+  - If you are deploying to `https://<USERNAME>.github.io/<REPO>` (e.g. `https://<USERNAME>.github.io/portfolio`), then set `base` to `'/<REPO>/'` (e.g. `'/portfolio/'`).
 
   ```js
   // vite.config.js
@@ -78,22 +106,15 @@ These instructions will get you a copy of the project and deploy your portfolio
 - **First Commit:** Now commit to your **main** branch with your changes. The CI/CD pipeline will publish your page at the `gh-pages` branch automatically.
 - **Change deploy branch:** Go to your repo's **Settings** ➜ **Pages** ➜ **Source** and change the branch to `gh-pages` and click **save**.
 
-Your personal portfolio will be live at `username.github.io`. Any time you commit a change to the **main** branch, the website will be automatically updated.
+Your portfolio website will be live by now. Any time you commit a change to the **main** branch, the website will be automatically updated.
 
-If you see only `README` at `username.github.io`, be sure to change your GitHub Page's source to `gh-pages` branch. See [how to](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site). Also, if you face any issue rendering the website, double-check the `base` value in the `vite.config.js`.
+If you see only `README` at your website, be sure to change your GitHub Page's source to `gh-pages` branch (see [how to](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site)). Also, if you face any issue rendering the website, double-check the `base` value in the `vite.config.js`.
 
 As this is a vite project, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this [doc](https://vitejs.dev/guide/static-deploy.html) for a detailed deployment guide to other services.
 
-</details>
+### Installing as package
 
-Or
+You can also use **GitProfile** by installing as an NPM package. First Install **GitProfile** via <a href="https://www.npmjs.com/package/@arifszn/gitprofile">NPM</a>.
-
-<details>
-<summary>Installing as package (Click to expand)</summary>
-
-<br/>
-
-First Install **GitProfile** via <a href="https://www.npmjs.com/package/@arifszn/gitprofile">NPM</a>.
 
 ```sh
 npm install @arifszn/gitprofile
@@ -128,8 +149,6 @@ export default App;
 
 List of all config [here](#-customization).
 
-</details>
-
 **If you face any problems or have any questions, open an issue [here](https://github.com/arifszn/gitprofile/issues).**
 
 ## 🎨 Customization
@@ -153,6 +172,7 @@ const config = {
     linkedin: '',
     twitter: '',
     facebook: '',
+    instagram: '',
     dribbble: '',
     behance: '',
     medium: '',
@@ -350,7 +370,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, Facebook, Dribbble, Behance, Medium, dev, personal website, phone and email.
+You can link your social media services you're using, including LinkedIn, Twitter, Facebook, Instagram, Dribbble, Behance, Medium, dev, personal website, phone and email.
 
 ```js
 // gitprofile.config.js
@@ -358,13 +378,14 @@ module.exports = {
   // ...
   social: {
     linkedin: 'ariful-alam',
-    twitter: 'arif_swozon',
+    twitter: 'arif_szn',
     facebook: '',
+    instagram: '',
     dribbble: '',
     behance: '',
     medium: '',
     dev: '',
-    website: 'https://arifszn.github.io',
+    website: '',
     phone: '',
     email: '',
   },
@@ -477,12 +498,13 @@ module.exports = {
 
 ![Blog](https://arifszn.github.io/assets/img/hosted/gitprofile/blog.png)
 
-The posts are fetched by [Blog-js](https://github.com/arifszn/blog-js).
+The posts are fetched by [blog.js](https://github.com/arifszn/blog.js).
 
 ## 💖 Support
 
-<a href="https://www.buymeacoffee.com/arifszn" target="_blank">
+<p>You can show your support by starring this project.</p>
-  <img src="https://raw.githubusercontent.com/arifszn/arifszn/main/assets/bmc-button.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
+<a href="https://github.com/arifszn/gitprofile/stargazers">
+  <img src="https://img.shields.io/github/stars/arifszn/gitprofile?style=social" alt="Github Star">
 </a>
 
 ## 💡 Contribute
@@ -491,4 +513,4 @@ To contribute, see the [Contributing guide](https://github.com/arifszn/gitprofil
 
 ## 📄 License
 
-**GitProfile** is licensed under the [Apache-2.0 License](https://github.com/arifszn/gitprofile/blob/main/LICENSE).
+[Apache-2.0 License](https://github.com/arifszn/gitprofile/blob/main/LICENSE)

gitprofile.config.js

@@ -7,16 +7,17 @@ const config = {
     limit: 10, // How many projects to display.
     exclude: {
       forks: false, // Forked projects will not be displayed if set to true.
-      projects: ['laravel-ecommerce'], // These projects will not be displayed. example: ['my-project1', 'my-project2']
+      projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2']
     },
   },
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
     facebook: '',
+    instagram: '',
     dribbble: '',
     behance: '',
-    medium: '',
+    medium: 'arifszn',
     dev: 'arifszn',
     website: 'https://arifszn.github.io',
     phone: '',
@@ -28,9 +29,11 @@ const config = {
     'JavaScript',
     'React.js',
     'Node.js',
+    'Nest.js',
     'MySQL',
     'Git',
     'Docker',
+    'PHPUnit',
     'CSS',
     'Antd',
     'Tailwind',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arifszn/gitprofile",
   "description": "Create an automatic portfolio based on GitHub profile",
-  "version": "2.0.5",
+  "version": "2.0.8",
   "license": "Apache-2.0",
   "author": "arifszn",
   "repository": {
@@ -38,20 +38,20 @@
     "prettier:fix": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}'"
   },
   "dependencies": {
-    "react": "^18.0.0",
+    "react": "^18.2.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@arifszn/blog-js": "^2.0.0",
-    "@vitejs/plugin-react": "^1.0.7",
+    "@vitejs/plugin-react": "^2.0.0",
     "autoprefixer": "^10.4.4",
-    "axios": "^0.26.1",
+    "axios": "^0.27.2",
     "daisyui": "^2.11.0",
+    "date-fns": "^2.28.0",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
-    "moment": "^2.29.1",
     "postcss": "^8.4.12",
     "prettier": "^2.6.0",
     "prop-types": "^15.8.1",
@@ -59,7 +59,7 @@
     "react-hotjar": "^5.0.0",
     "react-icons": "^4.3.1",
     "tailwindcss": "^3.0.23",
-    "vite": "^2.8.0"
+    "vite": "^3.0.1"
   },
   "keywords": [
     "git-profile",

src/components/GitProfile.jsx

@@ -1,6 +1,5 @@
 import axios from 'axios';
 import { Fragment, useCallback, useEffect, useState } from 'react';
-import moment from 'moment';
 import HeadTagEditor from './head-tag-editor';
 import ErrorPage from './error-page';
 import ThemeChanger from './theme-changer';
@@ -19,10 +18,12 @@ 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';
 
 const GitProfile = ({ config }) => {
   const [error, setError] = useState(
@@ -103,9 +104,13 @@ const GitProfile = ({ config }) => {
   const handleError = (error) => {
     console.error('Error:', error);
     try {
-      let reset = moment(
+      let reset = formatDistance(
-        new Date(error.response.headers['x-ratelimit-reset'] * 1000)
+        new Date(error.response.headers['x-ratelimit-reset'] * 1000),
-      ).fromNow();
+        new Date(),
+        {
+          addSuffix: true,
+        }
+      );
 
       if (error.response.status === 403) {
         setError(tooManyRequestError(reset));
@@ -204,10 +209,15 @@ const GitProfile = ({ config }) => {
                     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 ❤️
+                          <span className="text-primary">GitProfile</span> and
+                          ❤️
                         </p>
+                      )}
                     </div>
                   </a>
                 </div>
@@ -235,6 +245,7 @@ GitProfile.propTypes = {
       linkedin: PropTypes.string,
       twitter: PropTypes.string,
       facebook: PropTypes.string,
+      instagram: PropTypes.string,
       dribbble: PropTypes.string,
       behance: PropTypes.string,
       medium: PropTypes.string,

src/components/avatar-card/index.jsx

@@ -38,7 +38,9 @@ const AvatarCard = ({ profile, loading }) => {
             {loading || !profile ? (
               skeleton({ width: 'w-48', height: 'h-8' })
             ) : (
-              <span className="opacity-70">{profile.name}</span>
+              <span className="text-base-content opacity-70">
+                {profile.name}
+              </span>
             )}
           </h5>
           <div className="mt-3 text-base-content text-opacity-60 font-mono">

src/components/blog/index.jsx

@@ -1,19 +1,13 @@
-import moment from 'moment';
 import { Fragment, useEffect, useState } from 'react';
 import { ga, skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 import PropTypes from 'prop-types';
 import { AiOutlineContainer } from 'react-icons/ai';
 import { getDevPost, getMediumPost } from '@arifszn/blog-js';
+import { formatDistance } from 'date-fns';
 
 const displaySection = (blog) => {
-  if (
+  if (blog?.source && blog?.username) {
-    typeof blog !== 'undefined' &&
-    typeof blog.source !== 'undefined' &&
-    typeof blog.username !== 'undefined' &&
-    blog.source &&
-    blog.username
-  ) {
     return true;
   } else {
     return false;
@@ -121,8 +115,7 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
               console.error(error);
             }
 
-            typeof window !== 'undefined' &&
+            window?.open(article.link, '_blank');
-              window.open(article.link, '_blank');
           }}
         >
           <div className="p-8 h-full w-full">
@@ -146,8 +139,10 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
                     <h2 className="font-semibold text-base-content opacity-60">
                       {article.title}
                     </h2>
-                    <p className="opacity-50 text-xs">
+                    <p className="text-base-content opacity-50 text-xs">
-                      {moment(article.publishedAt).fromNow()}
+                      {formatDistance(article.publishedAt, new Date(), {
+                        addSuffix: true,
+                      })}
                     </p>
                     <p className="mt-3 text-base-content text-opacity-60 text-sm">
                       {article.description}
@@ -155,7 +150,7 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
                     <div className="mt-4 flex items-center flex-wrap justify-center md:justify-start">
                       {article.categories.map((category, index2) => (
                         <div
-                          className="py-2 px-4 text-xs leading-3 rounded-full bg-base-300 mr-1 mb-1 opacity-50"
+                          className="py-2 px-4 text-xs leading-3 rounded-full bg-base-300 mr-1 mb-1 opacity-50 text-base-content"
                           key={index2}
                         >
                           #{category}
@@ -172,7 +167,9 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
     ) : (
       <div className="text-center mb-6">
         <AiOutlineContainer className="mx-auto h-12 w-12 opacity-30" />
-        <p className="mt-1 text-sm opacity-50">No recent post</p>
+        <p className="mt-1 text-sm opacity-50 text-base-content">
+          No recent post
+        </p>
       </div>
     );
   };
@@ -196,7 +193,9 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
                       {loading ? (
                         skeleton({ width: 'w-28', height: 'h-8' })
                       ) : (
-                        <span className="opacity-70">Recent Posts</span>
+                        <span className="text-base-content opacity-70">
+                          Recent Posts
+                        </span>
                       )}
                     </h5>
                   </div>

src/components/details/index.jsx

@@ -1,5 +1,9 @@
 import { MdLocationOn, MdMail } from 'react-icons/md';
-import { AiFillGithub, AiFillMediumSquare } from 'react-icons/ai';
+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';
@@ -42,6 +46,14 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
   );
 };
 
+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 = [];
@@ -80,6 +92,11 @@ const Details = ({ profile, loading, social, github }) => {
                   icon={<FaBuilding className="mr-2" />}
                   title="Company:"
                   value={profile.company}
+                  link={
+                    isCompanyMention(profile.company)
+                      ? companyLink(profile.company)
+                      : null
+                  }
                 />
               )}
               <ListItem
@@ -88,7 +105,7 @@ const Details = ({ profile, loading, social, github }) => {
                 value={github.username}
                 link={`https://github.com/${github.username}`}
               />
-              {typeof social.twitter !== 'undefined' && social.twitter && (
+              {social?.twitter && (
                 <ListItem
                   icon={<SiTwitter className="mr-2" />}
                   title="Twitter:"
@@ -96,7 +113,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://twitter.com/${social.twitter}`}
                 />
               )}
-              {typeof social.linkedin !== 'undefined' && social.linkedin && (
+              {social?.linkedin && (
                 <ListItem
                   icon={<GrLinkedinOption className="mr-2" />}
                   title="LinkedIn:"
@@ -104,7 +121,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://www.linkedin.com/in/${social.linkedin}`}
                 />
               )}
-              {typeof social.dribbble !== 'undefined' && social.dribbble && (
+              {social?.dribbble && (
                 <ListItem
                   icon={<CgDribbble className="mr-2" />}
                   title="Dribbble:"
@@ -112,7 +129,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://dribbble.com/${social.dribbble}`}
                 />
               )}
-              {typeof social.behance !== 'undefined' && social.behance && (
+              {social?.behance && (
                 <ListItem
                   icon={<FaBehanceSquare className="mr-2" />}
                   title="Behance:"
@@ -120,7 +137,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://www.behance.net/${social.behance}`}
                 />
               )}
-              {typeof social.facebook !== 'undefined' && social.facebook && (
+              {social?.facebook && (
                 <ListItem
                   icon={<FaFacebook className="mr-2" />}
                   title="Facebook:"
@@ -128,7 +145,15 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://www.facebook.com/${social.facebook}`}
                 />
               )}
-              {typeof social.medium !== 'undefined' && social.medium && (
+              {social?.instagram && (
+                <ListItem
+                  icon={<AiFillInstagram className="mr-2" />}
+                  title="Instagram:"
+                  value={social.instagram}
+                  link={`https://www.instagram.com/${social.instagram}`}
+                />
+              )}
+              {social?.medium && (
                 <ListItem
                   icon={<AiFillMediumSquare className="mr-2" />}
                   title="Medium:"
@@ -136,7 +161,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://medium.com/@${social.medium}`}
                 />
               )}
-              {typeof social.dev !== 'undefined' && social.dev && (
+              {social?.dev && (
                 <ListItem
                   icon={<FaDev className="mr-2" />}
                   title="Dev:"
@@ -144,7 +169,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://dev.to/${social.dev}`}
                 />
               )}
-              {typeof social.website !== 'undefined' && social.website && (
+              {social?.website && (
                 <ListItem
                   icon={<FaGlobe className="mr-2" />}
                   title="Website:"
@@ -152,7 +177,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={social.website}
                 />
               )}
-              {typeof social.phone !== 'undefined' && social.phone && (
+              {social?.phone && (
                 <ListItem
                   icon={<RiPhoneFill className="mr-2" />}
                   title="Phone:"
@@ -160,7 +185,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`tel:${social.phone}`}
                 />
               )}
-              {typeof social.email !== 'undefined' && social.email && (
+              {social?.email && (
                 <ListItem
                   icon={<MdMail className="mr-2" />}
                   title="Email:"

src/components/education/index.jsx

@@ -40,7 +40,7 @@ const Education = ({ loading, education }) => {
 
   return (
     <>
-      {typeof education !== 'undefined' && education.length !== 0 && (
+      {education?.length !== 0 && (
         <div className="card shadow-lg compact bg-base-100">
           <div className="card-body">
             <div className="mx-3">
@@ -48,7 +48,9 @@ const Education = ({ loading, education }) => {
                 {loading ? (
                   skeleton({ width: 'w-32', height: 'h-8' })
                 ) : (
-                  <span className="opacity-70">Education</span>
+                  <span className="text-base-content opacity-70">
+                    Education
+                  </span>
                 )}
               </h5>
             </div>

src/components/experience/index.jsx

@@ -40,7 +40,7 @@ const Experience = ({ experiences, loading }) => {
 
   return (
     <>
-      {typeof experiences !== 'undefined' && experiences.length !== 0 && (
+      {experiences?.length !== 0 && (
         <div className="card shadow-lg compact bg-base-100">
           <div className="card-body">
             <div className="mx-3">
@@ -48,7 +48,9 @@ const Experience = ({ experiences, loading }) => {
                 {loading ? (
                   skeleton({ width: 'w-32', height: 'h-8' })
                 ) : (
-                  <span className="opacity-70">Experience</span>
+                  <span className="text-base-content opacity-70">
+                    Experience
+                  </span>
                 )}
               </h5>
             </div>

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

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { Helmet } from 'react-helmet-async';
 import PropTypes from 'prop-types';
-import { isThemeDarkish } from '../../helpers/utils';
+import { isDarkishTheme } from '../../helpers/utils';
 
 const HeadTagEditor = ({ profile, theme, googleAnalytics, social }) => {
   return (
@@ -25,7 +25,7 @@ const HeadTagEditor = ({ profile, theme, googleAnalytics, social }) => {
           <title>Portfolio of {profile.name}</title>
           <meta
             name="theme-color"
-            content={isThemeDarkish(theme) ? '#000000' : '#ffffff'}
+            content={isDarkishTheme(theme) ? '#000000' : '#ffffff'}
           />
 
           <meta name="description" content={profile.bio} />
@@ -34,12 +34,7 @@ const HeadTagEditor = ({ profile, theme, googleAnalytics, social }) => {
           <meta itemProp="description" content={profile.bio} />
           <meta itemProp="image" content={profile.avatar} />
 
-          <meta
+          <meta property="og:url" content={social?.website || ''} />
-            property="og:url"
-            content={
-              typeof social.website !== 'undefined' ? social.website : ''
-            }
-          />
           <meta property="og:type" content="website" />
           <meta property="og:title" content={`Portfolio of ${profile.name}`} />
           <meta property="og:description" content={profile.bio} />

src/components/project/index.jsx

@@ -72,7 +72,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
             console.error(error);
           }
 
-          typeof window !== 'undefined' && window.open(item.html_url, '_blank');
+          window?.open(item.html_url, '_blank');
         }}
       >
         <div className="flex justify-between flex-col p-8 h-full w-full">
@@ -82,7 +82,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
-                className="inline-block w-5 h-5 mr-2 stroke-current"
+                className="text-base-content inline-block w-5 h-5 mr-2 stroke-current"
               >
                 <path
                   strokeLinecap="round"
@@ -92,7 +92,9 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                 ></path>
               </svg>
               <span>
-                <h5 className="card-title text-lg">{item.name}</h5>
+                <h5 className="card-title text-lg text-base-content">
+                  {item.name}
+                </h5>
               </span>
             </div>
             <p className="mb-5 mt-1 text-base-content text-opacity-60 text-sm">
@@ -137,7 +139,9 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                     {loading ? (
                       skeleton({ width: 'w-28', height: 'h-8' })
                     ) : (
-                      <span className="opacity-70">My Projects</span>
+                      <span className="text-base-content opacity-70">
+                        My Projects
+                      </span>
                     )}
                   </h5>
                   {loading ? (
@@ -147,7 +151,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                       href={`https://github.com/${github.username}?tab=repositories`}
                       target="_blank"
                       rel="noreferrer"
-                      className="opacity-50"
+                      className="text-base-content opacity-50"
                     >
                       See All
                     </a>

src/components/skill/index.jsx

@@ -17,7 +17,7 @@ const Skill = ({ loading, skills }) => {
 
   return (
     <>
-      {typeof skills !== 'undefined' && skills.length !== 0 && (
+      {skills?.length !== 0 && (
         <div className="card shadow-lg compact bg-base-100">
           <div className="card-body">
             <div className="mx-3">
@@ -25,7 +25,9 @@ const Skill = ({ loading, skills }) => {
                 {loading ? (
                   skeleton({ width: 'w-32', height: 'h-8' })
                 ) : (
-                  <span className="opacity-70">Tech Stack</span>
+                  <span className="text-base-content opacity-70">
+                    Tech Stack
+                  </span>
                 )}
               </h5>
             </div>

src/components/theme-changer/index.jsx

@@ -21,7 +21,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
             {loading ? (
               skeleton({ width: 'w-20', height: 'h-8', className: 'mb-1' })
             ) : (
-              <span className="opacity-70">Theme</span>
+              <span className="text-base-content opacity-70">Theme</span>
             )}
           </h5>
           <span className="text-base-content text-opacity-40 capitalize text-sm">
@@ -43,7 +43,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
             <div title="Change Theme" className="dropdown dropdown-end">
               <div
                 tabIndex={0}
-                className="btn btn-ghost m-1 normal-case opacity-50"
+                className="btn btn-ghost m-1 normal-case opacity-50 text-base-content"
               >
                 <AiOutlineControl className="inline-block w-5 h-5 stroke-current md:mr-2" />
                 <span className="hidden md:inline">Change Theme</span>

src/favicon.svg

@@ -1,15 +0,0 @@
-<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
-<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-</defs>
-</svg>

src/helpers/utils.jsx

@@ -69,44 +69,29 @@ export const ga = {
   // log specific events happening
   event: ({ action, params }) => {
     try {
-      typeof window !== 'undefined' && window.gtag('event', action, params);
+      window?.gtag('event', action, params);
     } catch (error) {
       console.error(error);
     }
   },
 };
 
-export const isThemeDarkish = (theme) => {
+export const isDarkishTheme = (theme) => {
-  if (
+  return ['dark', 'halloween', 'forest', 'black', 'luxury', 'dracula'].includes(
-    theme === 'dark' ||
+    theme
-    theme === 'halloween' ||
+  );
-    theme === 'forest' ||
-    theme === 'black' ||
-    theme === 'luxury' ||
-    theme === 'dracula'
-  ) {
-    return true;
-  } else {
-    return false;
-  }
 };
 
 export const setupHotjar = (hotjarConfig) => {
   if (hotjarConfig?.id) {
-    let snippetVersion = hotjarConfig?.snippetVersion
+    let snippetVersion = hotjarConfig?.snippetVersion || 6;
-      ? hotjarConfig?.snippetVersion
-      : 6;
 
     hotjar.initialize(hotjarConfig.id, snippetVersion);
   }
 };
 
 export const sanitizeConfig = (config) => {
-  const customTheme =
+  const customTheme = config?.themeConfig?.customTheme || {
-    typeof config.themeConfig !== 'undefined' &&
-    typeof config.themeConfig.customTheme !== 'undefined'
-      ? config.themeConfig.customTheme
-      : {
     primary: '#fc055b',
     secondary: '#219aaf',
     accent: '#e8d03a',
@@ -116,11 +101,7 @@ export const sanitizeConfig = (config) => {
     '--rounded-btn': '3rem',
   };
 
-  const themes =
+  const themes = config?.themeConfig?.themes || [
-    typeof config.themeConfig !== 'undefined' &&
-    typeof config.themeConfig.themes !== 'undefined'
-      ? config.themeConfig.themes
-      : [
     'light',
     'dark',
     'cupcake',
@@ -155,134 +136,47 @@ export const sanitizeConfig = (config) => {
 
   return {
     github: {
-      username: config.github.username,
+      username: config?.github?.username || '',
-      sortBy:
+      sortBy: config?.github?.sortBy || 'stars',
-        typeof config.github.sortBy !== 'undefined'
+      limit: config?.github?.limit || 8,
-          ? config.github.sortBy
-          : 'stars',
-      limit:
-        typeof config.github.limit !== 'undefined' ? config.github.limit : 8,
       exclude: {
-        forks:
+        forks: config?.github?.exclude?.forks || false,
-          typeof config.github.exclude !== 'undefined' &&
+        projects: config?.github?.exclude?.projects || [],
-          typeof config.github.exclude.forks !== 'undefined'
-            ? config.github.exclude.forks
-            : false,
-        projects:
-          typeof config.github.exclude !== 'undefined' &&
-          typeof config.github.exclude.projects !== 'undefined'
-            ? config.github.exclude.projects
-            : [],
       },
     },
     social: {
-      linkedin:
+      linkedin: config?.social?.linkedin,
-        typeof config.social !== 'undefined' &&
+      twitter: config?.social?.twitter,
-        typeof config.social.linkedin !== 'undefined'
+      facebook: config?.social?.facebook,
-          ? config.social.linkedin
+      instagram: config?.social?.instagram,
-          : '',
+      dribbble: config?.social?.dribbble,
-      twitter:
+      behance: config?.social?.behance,
-        typeof config.social !== 'undefined' &&
+      medium: config?.social?.medium,
-        typeof config.social.twitter !== 'undefined'
+      dev: config?.social?.dev,
-          ? config.social.twitter
+      website: config?.social?.website,
-          : '',
+      phone: config?.social?.phone,
-      facebook:
+      email: config?.social?.email,
-        typeof config.social !== 'undefined' &&
-        typeof config.social.facebook !== 'undefined'
-          ? config.social.facebook
-          : '',
-      dribbble:
-        typeof config.social !== 'undefined' &&
-        typeof config.social.dribbble !== 'undefined'
-          ? config.social.dribbble
-          : '',
-      behance:
-        typeof config.social !== 'undefined' &&
-        typeof config.social.behance !== 'undefined'
-          ? config.social.behance
-          : '',
-      medium:
-        typeof config.social !== 'undefined' &&
-        typeof config.social.medium !== 'undefined'
-          ? config.social.medium
-          : '',
-      dev:
-        typeof config.social !== 'undefined' &&
-        typeof config.social.dev !== 'undefined'
-          ? config.social.dev
-          : '',
-      website:
-        typeof config.social !== 'undefined' &&
-        typeof config.social.website !== 'undefined'
-          ? config.social.website
-          : '',
-      phone:
-        typeof config.social !== 'undefined' &&
-        typeof config.social.phone !== 'undefined'
-          ? config.social.phone
-          : '',
-      email:
-        typeof config.social !== 'undefined' &&
-        typeof config.social.email !== 'undefined'
-          ? config.social.email
-          : '',
     },
-    skills: typeof config.skills !== 'undefined' ? config.skills : [],
+    skills: config?.skills || [],
-    experiences:
+    experiences: config?.experiences || [],
-      typeof config.experiences !== 'undefined' ? config.experiences : [],
+    education: config?.education || [],
-    education: typeof config.education !== 'undefined' ? config.education : [],
     blog: {
-      source:
+      source: config?.blog?.source,
-        typeof config.blog !== 'undefined' &&
+      username: config?.blog?.username,
-        typeof config.blog.source !== 'undefined'
+      limit: config?.blog?.limit || 5,
-          ? config.blog.source
-          : '',
-      username:
-        typeof config.blog !== 'undefined' &&
-        typeof config.blog.username !== 'undefined'
-          ? config.blog.username
-          : '',
-      limit:
-        typeof config.blog !== 'undefined' &&
-        typeof config.blog.limit !== 'undefined'
-          ? config.blog.limit
-          : 5,
     },
     googleAnalytics: {
-      id:
+      id: config?.googleAnalytics?.id,
-        typeof config.googleAnalytics !== 'undefined' &&
-        typeof config.googleAnalytics.id !== 'undefined'
-          ? config.googleAnalytics.id
-          : '',
     },
     hotjar: {
-      id:
+      id: config?.hotjar?.id,
-        typeof config.hotjar !== 'undefined' &&
+      snippetVersion: config?.hotjar?.snippetVersion || 6,
-        typeof config.hotjar.id !== 'undefined'
-          ? config.hotjar.id
-          : '',
-      snippetVersion:
-        typeof config.hotjar !== 'undefined' &&
-        typeof config.hotjar.snippetVersion !== 'undefined'
-          ? config.hotjar.snippetVersion
-          : 6,
     },
     themeConfig: {
-      defaultTheme:
+      defaultTheme: config?.themeConfig?.defaultTheme || themes[0],
-        typeof config.themeConfig !== 'undefined' &&
+      disableSwitch: config?.themeConfig?.disableSwitch || false,
-        typeof config.themeConfig.defaultTheme !== 'undefined'
-          ? config.themeConfig.defaultTheme
-          : themes[0],
-      disableSwitch:
-        typeof config.themeConfig !== 'undefined' &&
-        typeof config.themeConfig.disableSwitch !== 'undefined'
-          ? config.themeConfig.disableSwitch
-          : false,
       respectPrefersColorScheme:
-        typeof config.themeConfig !== 'undefined' &&
+        config?.themeConfig?.respectPrefersColorScheme || false,
-        typeof config.themeConfig.respectPrefersColorScheme !== 'undefined'
-          ? config.themeConfig.respectPrefersColorScheme
-          : false,
       themes: themes,
       customTheme: customTheme,
     },

types/index.d.ts

@@ -54,6 +54,11 @@ export interface Social {
    */
   facebook?: string;
 
+  /**
+   * Instagram
+   */
+  instagram?: string;
+
   /**
    * Dribbble
    */