Add section for external projects

README.md

@@ -266,6 +266,23 @@ const config = {
       to: '2014',
     },
   ],
+  // To hide the `Other 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
@@ -541,7 +558,9 @@ Empty array will hide the certifications section.
 
 ### Projects
 
-Your public repo from GitHub will be displayed here automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo.
+#### 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
@@ -559,6 +578,25 @@ module.exports = {
 };
 ```
 
+#### External Projects
+
+In this section you can showcase your external/personal projects.
+
+```js
+// gitprofile.config.js
+module.exports = {
+  // ...
+  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`).
@@ -579,28 +617,6 @@ module.exports = {
 
 The posts are fetched by [blog.js](https://github.com/arifszn/blog.js).
 
-## External Projects
-
-In this section you can showcase your external projects.
-
-```js
-// gitprofile.config.js
-module.exports = {
-  // ...
-  externalProjects: [
-    {
-      title: 'Title',
-      description: 'Description',
-      link: 'https://example.com',
-      imageUrl: 'https://via.placeholder.com/250x250',
-    },
-  ],
-};
-```
-
-The above configuration will look like this:
-![screenshot-rocks(2)](https://user-images.githubusercontent.com/22073531/195196309-1e55fdc2-791d-453e-9341-3f66201f830d.png)
-
 ## 💖 Support
 
 <p>You can show your support by starring this project. ★</p>

gitprofile.config.js

@@ -86,17 +86,16 @@ const config = {
   // To hide the `Other Projects` section, keep it empty.
   externalProjects: [
     {
-      title: 'Website name 1',
+      title: 'Project Name',
       description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
-        Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
+      imageUrl: 'https://via.placeholder.com/250x250',
       link: 'https://example.com',
     },
     {
-      title: 'Website name 2',
+      title: 'Project Name',
       description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
-        Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
       imageUrl: 'https://via.placeholder.com/250x250',
       link: 'https://example.com',
     },

src/components/external-project/index.jsx

@@ -1,8 +1,6 @@
 import { Fragment } from 'react';
-import { AiOutlineLink } from 'react-icons/ai';
 import PropTypes from 'prop-types';
-import { skeleton } from '../../helpers/utils';
+import { ga, skeleton } from '../../helpers/utils';
-import { ga } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 
 const displaySection = (externalProjects) => {
@@ -19,44 +17,55 @@ const displaySection = (externalProjects) => {
 
 const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
   const renderSkeleton = () => {
-    return [
+    let array = [];
-      <div className="card shadow-lg compact bg-base-100" key="">
+    for (let index = 0; index < externalProjects.length; index++) {
-        <div className="flex justify-between flex-col p-8 h-full w-full">
+      array.push(
-          <div>
+        <div className="card shadow-lg compact bg-base-100" key={index}>
-            <div className="flex items-center">
+          <div className="p-8 h-full w-full">
-              <span>
+            <div className="flex items-center flex-col">
-                <h5 className="card-title text-lg">
+              <div className="w-full">
-                  {skeleton({ width: 'w-32', height: 'h-8' })}
+                <div className="flex items-start px-4">
-                </h5>
+                  <div className="w-full">
-              </span>
+                    <h2>
-            </div>
+                      {skeleton({
-            <div className="mb-5 mt-1">
+                        width: 'w-32',
-              {skeleton({
+                        height: 'h-8',
-                width: 'w-full',
+                        className: 'mb-2 mx-auto',
-                height: 'h-4',
+                      })}
-                className: 'mb-2',
+                    </h2>
-              })}
+                    <div className="avatar w-full h-full">
-              {skeleton({ width: 'w-full', height: 'h-4' })}
+                      <div className="w-20 h-20 mask mask-squircle mx-auto">
-            </div>
+                        {skeleton({
-          </div>
+                          width: 'w-full',
-          <div className="flex justify-between">
+                          height: 'h-full',
-            <div className="flex flex-grow">
+                          shape: '',
-              <span className="mr-3 flex items-center">
+                        })}
-                {skeleton({ width: 'w-12', height: 'h-4' })}
+                      </div>
-              </span>
+                    </div>
-              <span className="flex items-center">
+                    <div className="mt-2">
-                {skeleton({ width: 'w-12', height: 'h-4' })}
+                      {skeleton({
-              </span>
+                        width: 'w-full',
-            </div>
+                        height: 'h-4',
-            <div>
+                        className: 'mx-auto',
-              <span className="flex items-center">
+                      })}
-                {skeleton({ width: 'w-12', height: 'h-4' })}
+                    </div>
-              </span>
+                    <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>
-      </div>,
+      );
-    ];
+    }
+
+    return array;
   };
 
   const renderExternalProjects = () => {
@@ -85,31 +94,29 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
         }}
       >
         <div className="p-8 h-full w-full">
-          <div className="flex items-center flex-col md:flex-row">
+          <div className="flex items-center flex-col">
-            {item.imageUrl && (
-              <div className="avatar mb-5 md:mb-0 opacity-90">
-                <div className="w-24 h-24 mask mask-squircle">
-                  <LazyImage
-                    src={item.imageUrl}
-                    alt={'thumbnail'}
-                    placeholder={skeleton({
-                      width: 'w-full',
-                      height: 'h-full',
-                      shape: '',
-                    })}
-                  />
-                </div>
-              </div>
-            )}
             <div className="w-full">
-              <div className="flex items-start px-4">
+              <div className="px-4">
-                <div className="text-center md:text-left w-full">
+                <div className="text-center w-full">
-                  <h2 className="font-semibold text-base-content opacity-60">
+                  <h2 className="font-semibold text-base-content opacity-60 mb-2">
-                    <div className="flex flex-row items-center">
+                    {item.title}
-                      <AiOutlineLink className="mr-1" /> {item.title}
-                    </div>
                   </h2>
-                  <p className="mt-3 text-base-content text-opacity-60 text-sm">
+                  {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>
@@ -132,10 +139,10 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
                   <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">
-                          Other Projects
+                          My Projects
                         </span>
                       )}
                     </h5>

src/components/project/index.jsx

@@ -141,10 +141,10 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                 <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>