From 32740ede327a5ad0acaaddc3afbdb3176a9e9f59 Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Tue, 3 Jan 2023 17:09:10 +0600 Subject: [PATCH] Add section for external projects --- README.md | 62 ++++++---- gitprofile.config.js | 11 +- src/components/external-project/index.jsx | 133 ++++++++++++---------- src/components/project/index.jsx | 4 +- 4 files changed, 116 insertions(+), 94 deletions(-) diff --git a/README.md b/README.md index 6ff5484..cca5d7a 100644 --- a/README.md +++ b/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

You can show your support by starring this project. ★

diff --git a/gitprofile.config.js b/gitprofile.config.js index 8c082a1..3547f09 100644 --- a/gitprofile.config.js +++ b/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. \ - 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.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.', + 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. \ - 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.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.', imageUrl: 'https://via.placeholder.com/250x250', link: 'https://example.com', }, diff --git a/src/components/external-project/index.jsx b/src/components/external-project/index.jsx index d7f9272..c5760a1 100644 --- a/src/components/external-project/index.jsx +++ b/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 } from '../../helpers/utils'; +import { ga, skeleton } 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 [ -
-
-
-
- -
- {skeleton({ width: 'w-32', height: 'h-8' })} -
- -
-
- {skeleton({ - width: 'w-full', - height: 'h-4', - className: 'mb-2', - })} - {skeleton({ width: 'w-full', height: 'h-4' })} -
-
-
-
- - {skeleton({ width: 'w-12', height: 'h-4' })} - - - {skeleton({ width: 'w-12', height: 'h-4' })} - -
-
- - {skeleton({ width: 'w-12', height: 'h-4' })} - + let array = []; + for (let index = 0; index < externalProjects.length; index++) { + array.push( +
+
+
+
+
+
+

+ {skeleton({ + width: 'w-32', + height: 'h-8', + className: 'mb-2 mx-auto', + })} +

+
+
+ {skeleton({ + width: 'w-full', + height: 'h-full', + shape: '', + })} +
+
+
+ {skeleton({ + width: 'w-full', + height: 'h-4', + className: 'mx-auto', + })} +
+
+ {skeleton({ + width: 'w-full', + height: 'h-4', + className: 'mx-auto', + })} +
+
+
+
-
, - ]; + ); + } + + return array; }; const renderExternalProjects = () => { @@ -85,31 +94,29 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => { }} >
-
- {item.imageUrl && ( -
-
- -
-
- )} +
-
-
-

-
- {item.title} -
+
+
+

+ {item.title}

-

+ {item.imageUrl && ( +

+
+ +
+
+ )} +

{item.description}

@@ -132,10 +139,10 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
{loading ? ( - skeleton({ width: 'w-28', height: 'h-8' }) + skeleton({ width: 'w-40', height: 'h-8' }) ) : ( - Other Projects + My Projects )}
diff --git a/src/components/project/index.jsx b/src/components/project/index.jsx index 06d204e..ebec843 100644 --- a/src/components/project/index.jsx +++ b/src/components/project/index.jsx @@ -141,10 +141,10 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
{loading ? ( - skeleton({ width: 'w-28', height: 'h-8' }) + skeleton({ width: 'w-40', height: 'h-8' }) ) : ( - My Projects + GitHub Projects )}