Add section for external projects
This commit is contained in:
Ariful Alam
parent
984bee1fcf
commit
32740ede32
62
README.md
62
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:
|
||||
|
||||
|
||||
## 💖 Support
|
||||
|
||||
<p>You can show your support by starring this project. ★</p>
|
||||
|
||||
@ -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',
|
||||
},
|
||||
|
||||
@ -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 [
|
||||
<div className="card shadow-lg compact bg-base-100" key="">
|
||||
<div className="flex justify-between flex-col p-8 h-full w-full">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<span>
|
||||
<h5 className="card-title text-lg">
|
||||
{skeleton({ width: 'w-32', height: 'h-8' })}
|
||||
</h5>
|
||||
</span>
|
||||
</div>
|
||||
<div className="mb-5 mt-1">
|
||||
{skeleton({
|
||||
width: 'w-full',
|
||||
height: 'h-4',
|
||||
className: 'mb-2',
|
||||
})}
|
||||
{skeleton({ width: 'w-full', height: 'h-4' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex flex-grow">
|
||||
<span className="mr-3 flex items-center">
|
||||
{skeleton({ width: 'w-12', height: 'h-4' })}
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
{skeleton({ width: 'w-12', height: 'h-4' })}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="flex items-center">
|
||||
{skeleton({ width: 'w-12', height: 'h-4' })}
|
||||
</span>
|
||||
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>
|
||||
</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">
|
||||
{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="flex items-center flex-col">
|
||||
<div className="w-full">
|
||||
<div className="flex items-start px-4">
|
||||
<div className="text-center md:text-left w-full">
|
||||
<h2 className="font-semibold text-base-content opacity-60">
|
||||
<div className="flex flex-row items-center">
|
||||
<AiOutlineLink className="mr-1" /> {item.title}
|
||||
</div>
|
||||
<div className="px-4">
|
||||
<div className="text-center w-full">
|
||||
<h2 className="font-semibold text-base-content opacity-60 mb-2">
|
||||
{item.title}
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user