Display projects
This commit is contained in:
MD. Ariful Alam
parent
29da6b59a9
commit
09390be420
186
src/App.js
186
src/App.js
@ -35,130 +35,130 @@ function App() {
|
||||
|
||||
const loadData = () => {
|
||||
axios.get(`https://api.github.com/users/${config.githubUsername}`)
|
||||
.then(response => {
|
||||
let data = response.data;
|
||||
.then(response => {
|
||||
let data = response.data;
|
||||
|
||||
let profileData = {
|
||||
avatar: data.avatar_url,
|
||||
name: data.name,
|
||||
bio: data.bio,
|
||||
location: data.location,
|
||||
company: data.company,
|
||||
twitter: data.twitter_username,
|
||||
}
|
||||
let profileData = {
|
||||
avatar: data.avatar_url,
|
||||
name: data.name,
|
||||
bio: data.bio,
|
||||
location: data.location,
|
||||
company: data.company,
|
||||
twitter: data.twitter_username,
|
||||
}
|
||||
|
||||
dispatch(setProfile(profileData));
|
||||
})
|
||||
.then(() => {
|
||||
loadRepo();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
|
||||
try {
|
||||
setRateLimit({
|
||||
remaining: error.response.headers['x-ratelimit-remaining'],
|
||||
reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
|
||||
});
|
||||
dispatch(setProfile(profileData));
|
||||
})
|
||||
.then(() => {
|
||||
loadRepo();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
|
||||
if (error.response.status === 403) {
|
||||
setError(403);
|
||||
} else if (error.response.status === 404) {
|
||||
setError(404);
|
||||
} else {
|
||||
try {
|
||||
setRateLimit({
|
||||
remaining: error.response.headers['x-ratelimit-remaining'],
|
||||
reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
|
||||
});
|
||||
|
||||
if (error.response.status === 403) {
|
||||
setError(403);
|
||||
} else if (error.response.status === 404) {
|
||||
setError(404);
|
||||
} else {
|
||||
setError(500);
|
||||
}
|
||||
} catch (error2) {
|
||||
setError(500);
|
||||
}
|
||||
} catch (error2) {
|
||||
setError(500);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
dispatch(setLoading(false));
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
dispatch(setLoading(false));
|
||||
});
|
||||
}
|
||||
|
||||
const loadRepo = () => {
|
||||
axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`)
|
||||
.then(response => {
|
||||
let data = response.data;
|
||||
.then(response => {
|
||||
let data = response.data;
|
||||
|
||||
dispatch(setRepo(data.items));
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
|
||||
try {
|
||||
setRateLimit({
|
||||
remaining: error.response.headers['x-ratelimit-remaining'],
|
||||
reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
|
||||
});
|
||||
dispatch(setRepo(data.items));
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
|
||||
|
||||
} catch (error2) {
|
||||
console.error('Error:', error2);
|
||||
}
|
||||
});
|
||||
try {
|
||||
setRateLimit({
|
||||
remaining: error.response.headers['x-ratelimit-remaining'],
|
||||
reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
|
||||
});
|
||||
|
||||
|
||||
} catch (error2) {
|
||||
console.error('Error:', error2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="fade-in h-screen">
|
||||
|
||||
{
|
||||
error ? (
|
||||
<ErrorPage
|
||||
status={`${error}`}
|
||||
title={(error === 404) ? 'The Github Username is Incorrect' : (
|
||||
error === 403 ? 'Too Many Request.' : `${error}`
|
||||
)}
|
||||
subTitle={
|
||||
(error === 404) ? (
|
||||
|
||||
{
|
||||
error ? (
|
||||
<ErrorPage
|
||||
status={`${error}`}
|
||||
title={(error === 404) ? 'The Github Username is Incorrect' : (
|
||||
error === 403 ? 'Too Many Request.' : `${error}`
|
||||
)}
|
||||
subTitle={
|
||||
(error === 404) ? (
|
||||
<p>
|
||||
Please provide correct github username in <code>src\config.js</code>
|
||||
</p>
|
||||
) : (
|
||||
error === 403 ? (
|
||||
<p>
|
||||
Please provide correct github username in <code>src\config.js</code>
|
||||
Oh no, you hit the{' '}
|
||||
<a
|
||||
href="https://developer.github.com/v3/rate_limit/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
rate limit
|
||||
</a>
|
||||
! Try again later{rateLimit && ` ${rateLimit.reset}`}.
|
||||
</p>
|
||||
) : (
|
||||
error === 403 ? (
|
||||
<p>
|
||||
Oh no, you hit the{' '}
|
||||
<a
|
||||
href="https://developer.github.com/v3/rate_limit/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
rate limit
|
||||
</a>
|
||||
! Try again later{rateLimit && ` ${rateLimit.reset}`}.
|
||||
</p>
|
||||
) : `Something went wrong`
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="p-4 lg:p-10 min-h-full bg-base-200">
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:bg-base-200 rounded-box">
|
||||
) : `Something went wrong`
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="p-4 lg:p-10 min-h-full bg-base-200">
|
||||
<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">
|
||||
{
|
||||
!config.themeConfig.disableSwitch && (
|
||||
<ThemeChanger/>
|
||||
<ThemeChanger />
|
||||
)
|
||||
}
|
||||
<AvatarCard/>
|
||||
<Details/>
|
||||
<Skill/>
|
||||
<Experience/>
|
||||
<Education/>
|
||||
<AvatarCard />
|
||||
<Details />
|
||||
<Skill />
|
||||
<Experience />
|
||||
<Education />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="lg:col-span-2 col-span-1">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<Project/>
|
||||
<Project />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
@ -16,7 +16,7 @@ const Education = () => {
|
||||
<div className="font-medium">
|
||||
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
<div className="opacity-80">
|
||||
<div className="opacity-90">
|
||||
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
</div>
|
||||
@ -54,7 +54,7 @@ const Education = () => {
|
||||
<div className="font-medium">
|
||||
{item.institution}
|
||||
</div>
|
||||
<div className="opacity-80">
|
||||
<div className="opacity-90">
|
||||
{item.from} - {item.to}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ const Experience = () => {
|
||||
<div className="font-medium">
|
||||
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
<div className="opacity-80">
|
||||
<div className="opacity-90">
|
||||
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
</div>
|
||||
@ -54,7 +54,7 @@ const Experience = () => {
|
||||
<div className="font-medium">
|
||||
{experience.company}
|
||||
</div>
|
||||
<div className="opacity-80">
|
||||
<div className="opacity-90">
|
||||
{experience.from} - {experience.to}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Fragment } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { skeleton } from "../helpers/utils";
|
||||
import { FiChevronsDown } from 'react-icons/fi';
|
||||
import { languageColor, skeleton } from "../helpers/utils";
|
||||
import { AiFillStar, AiOutlineFork } from 'react-icons/ai';
|
||||
|
||||
const LIMIT = 8;
|
||||
|
||||
@ -9,28 +9,86 @@ const Project = () => {
|
||||
const loading = useSelector(state => state.loading);
|
||||
const repo = useSelector(state => state.repo);
|
||||
|
||||
const renderProjects = () => {
|
||||
if (loading) {
|
||||
|
||||
} else {
|
||||
return repo.slice(0, LIMIT).map((project, index) => (
|
||||
const renderSkeleton = () => {
|
||||
let array = [];
|
||||
for (let index = 0; index < LIMIT; index++) {
|
||||
array.push((
|
||||
<div className="card shadow-lg compact side bg-base-100" key={index}>
|
||||
<div className="flex justify-between flex-col p-8">
|
||||
<div className="flex justify-between flex-col p-8 h-full w-full">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<svg 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"><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>{project.name}</span>
|
||||
<div className="flex items-center opacity-60">
|
||||
<span>
|
||||
<h5 className="card-title">
|
||||
{skeleton({width: 'w-32', height: 'h-8'})}
|
||||
</h5>
|
||||
</span>
|
||||
</div>
|
||||
<p className="mb-8">{project.description}</p>
|
||||
<span className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
|
||||
{skeleton({width: 'w-full', height: 'h-4', className: 'mb-2'})}
|
||||
{skeleton({width: 'w-full', height: 'h-4'})}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
Stats
|
||||
<div className="flex justify-between text-sm text-base-content text-opacity-40">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
))
|
||||
}
|
||||
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
const renderProjects = () => {
|
||||
return repo.slice(0, LIMIT).map((item, index) => (
|
||||
<a href={item.html_url} target="_blank" rel="noreferrer" className="card shadow-lg compact side bg-base-100" key={index}>
|
||||
<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="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">
|
||||
{item.name}
|
||||
</h5>
|
||||
</span>
|
||||
</div>
|
||||
<p className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-base-content text-opacity-40">
|
||||
<div className="flex flex-grow">
|
||||
<span className="mr-3 flex items-center">
|
||||
<AiFillStar/>
|
||||
<span>{item.stargazers_count}</span>
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<AiOutlineFork/>
|
||||
<span>{item.forks_count}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="flex items-center">
|
||||
<div className="w-3 h-3 rounded-full mr-1 opacity-75" style={{backgroundColor: languageColor(item.language)}}/>
|
||||
<span>{item.language}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
));
|
||||
}
|
||||
|
||||
return (
|
||||
@ -61,7 +119,7 @@ const Project = () => {
|
||||
</div> */}
|
||||
<div className="col-span-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{renderProjects()}
|
||||
{(loading || !repo) ? renderSkeleton() : renderProjects()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
module.exports = {
|
||||
githubUsername: 'arifszn', // required
|
||||
githubUsername: 'tailwindlabs', // required
|
||||
email: 'contact@arifszn.com', // optional
|
||||
linkedinUsername: 'ariful-alam', // optional
|
||||
dribbbleUsername: '', // optional
|
||||
@ -58,7 +58,7 @@ module.exports = {
|
||||
disableSwitch: false,
|
||||
|
||||
// Should we use the prefers-color-scheme media-query,
|
||||
// using user system preferences, instead of the hardcoded defaultMode
|
||||
// using user system preferences, instead of the hardcoded default
|
||||
respectPrefersColorScheme: true,
|
||||
|
||||
// Available themes
|
||||
|
||||
1434
src/helpers/colors.json
Normal file
1434
src/helpers/colors.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,5 @@
|
||||
import config from "../config";
|
||||
import colors from './colors.json';
|
||||
|
||||
export const getThemeValue = () => {
|
||||
if (config.themeConfig.disableSwitch) {
|
||||
@ -10,7 +11,7 @@ export const getThemeValue = () => {
|
||||
return theme;
|
||||
}
|
||||
|
||||
if (config.themeConfig.respectPrefersColorScheme) {
|
||||
if (config.themeConfig.respectPrefersColorScheme && !config.themeConfig.disableSwitch) {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : config.themeConfig.default;
|
||||
}
|
||||
|
||||
@ -21,6 +22,14 @@ export const skeleton = ({width = null, height = null, style = {}, shape = 'roun
|
||||
return <div className={`bg-base-300 animate-pulse ${shape}${className ? ` ${className}` : ''}${width ? ` ${width}` : ''}${height ? ` ${height}` : ''}`} style={style}/>;
|
||||
}
|
||||
|
||||
export const languageColor = (language) => {
|
||||
if (typeof colors[language] !== 'undefined') {
|
||||
return colors[language].color;
|
||||
} else {
|
||||
return 'gray';
|
||||
}
|
||||
}
|
||||
|
||||
export const fallbackImage = (
|
||||
"data:image/png;base64,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"
|
||||
)
|
||||
@ -1,6 +1,6 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
const initialState = [];
|
||||
const initialState = null;
|
||||
|
||||
export const repoSlice = createSlice({
|
||||
name: 'repo',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user