noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-25 04:17:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add experience and education

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-22 18:39:03 +06:00
parent 9d87bbcb8e
commit ef61419b0f
15 changed files with 441 additions and 1438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/AvatarCard.js
View File

@@ -1,6 +1,6 @@
import { Image } from "antd";
import { useSelector } from "react-redux";
import { fallbackImage } from "../helpers/utils";
import { fallbackImage, skeleton } from "../helpers/utils";
import LazyImage from "./LazyImage";
const imageHeight = 300;
@@ -13,39 +13,49 @@ const AvatarCard = () => {
<figure>
{
loading ? (
<div className="bg-base-300 w-full animate-pulse" style={{height: imageHeight}}/>
) : (
<Image
className="object-cover"
src={profile.avatar ? profile.avatar : fallbackImage}
fallback={fallbackImage}
alt={profile.name}
preview={false}
width={'100%'}
height={imageHeight}
placeholder={
<div className="bg-base-300 w-full animate-pulse" style={{height: imageHeight}}/>
skeleton({
width: 'w-full',
shape: '',
style: {
height: imageHeight
}
})
) : (
<LazyImage
className="object-cover w-full opacity-90"
src={profile.avatar ? profile.avatar : fallbackImage}
alt={profile.name}
style={{height: imageHeight}}
height={imageHeight}
placeholder={skeleton({
width: 'w-full',
shape: '',
style: {
height: imageHeight
}
})}
/>
)
}
</figure>
<div className="flex-row items-center space-x-4 card-body">
<div>
<h2 className="card-title">
<div className="section-title">
<h5 className="card-title">
{
loading ? (
skeleton({width: 'w-3/6', height: 'h-8'})
) : profile.name
}
</h5>
</div>
<span className="text-base-content text-opacity-40 text-justify">
{
loading ? (
<div className="bg-base-300 w-3/6 h-8 animate-pulse rounded-full" />
) : profile.name
}
</h2>
<p className="text-base-content text-opacity-40 text-justify">
{
loading ? (
<div className="bg-base-300 w-48 h-4 animate-pulse rounded-full" />
skeleton({width: 'w-48', height: 'h-4'})
) : profile.bio
}
</p>
</span>
</div>
</div>
</div>

41
src/components/Details.js
View File

@@ -6,38 +6,34 @@ import { GrLinkedinOption, GrMail } from 'react-icons/gr';
import { ImDribbble } from 'react-icons/im';
import { useSelector } from 'react-redux';
import config from '../config';
import { skeleton } from '../helpers/utils';
const Details = () => {
const profile = useSelector(state => state.profile);
const loading = useSelector(state => state.loading);
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 4; index++) {
array.push((
<li key={index}>
<span>
{skeleton({width: 'w-6', height: 'h-4', className: 'mr-2'})}
{skeleton({width: 'w-32', height: 'h-4'})}
</span>
</li>
))
}
return array;
}
return (
<div className="card shadow-lg compact side bg-base-100">
<div className="card-body">
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
{
loading ? (
<>
<li>
<span>
<div className="bg-base-300 w-6 h-4 animate-pulse rounded-full mr-2" />
<div className="bg-base-300 w-32 h-4 animate-pulse rounded-full" />
</span>
</li>
<li>
<span>
<div className="bg-base-300 w-6 h-4 animate-pulse rounded-full mr-2" />
<div className="bg-base-300 w-32 h-4 animate-pulse rounded-full" />
</span>
</li>
<li>
<span>
<div className="bg-base-300 w-6 h-4 animate-pulse rounded-full mr-2" />
<div className="bg-base-300 w-32 h-4 animate-pulse rounded-full" />
</span>
</li>
</>
) : (
loading ? renderSkeleton() : (
<>
{
profile && profile.location && (
@@ -146,7 +142,6 @@ const Details = () => {
</ul>
</div>
</div>
)
}

78
src/components/Education.js Normal file
View File

@@ -0,0 +1,78 @@
import { AiFillGithub } from "react-icons/ai";
import { useSelector } from "react-redux";
import config from "../config";
import { skeleton } from "../helpers/utils";
const Education = () => {
const loading = useSelector(state => state.loading);
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 2; index++) {
array.push((
<li>
<span className="d-unset">
<div class="block md:flex justify-between">
<div class="font-medium">
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
</div>
<div class="opacity-80">
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
</div>
</div>
<div>
{skeleton({ width: 'w-32', height: 'h-3' })}
</div>
</span>
</li>
))
}
return array;
}
return (
<>
{
(typeof config.education !== 'undefined' && config.education.length !== 0) && (
<div className="card shadow-lg compact side bg-base-100 col-span-1 lg:col-span-2">
<div className="card-body">
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
<li>
<div className="section-title pb-0-important mx-5">
<h5 className="card-title">
{loading ? skeleton({width: 'w-32', height: 'h-8'}) : 'Education'}
</h5>
</div>
</li>
{
loading ? renderSkeleton() : (
config.education.map((item, index) => (
<li>
<span className="d-unset">
<div class="block md:flex justify-between">
<div class="font-medium">
{item.institution}
</div>
<div class="opacity-80">
{item.from} - {item.to}
</div>
</div>
<div>
{item.degree}
</div>
</span>
</li>
))
)
}
</ul>
</div>
</div>
)
}
</>
)
}
export default Education;

19
src/components/ErrorPage.js
View File

@@ -1,14 +1,19 @@
import { Result } from 'antd';
import PropTypes from 'prop-types';
const ErrorPage = (props) => {
return (
<div>
<Result
status={props.status}
title={props.title}
subTitle={props.subTitle}
/>
<div class="min-w-screen min-h-screen bg-base-200 flex items-center p-5 lg:p-20 overflow-hidden relative">
<div class="flex-1 min-h-full min-w-full rounded-3xl bg-base-100 shadow-xl p-10 lg:p-20 text-gray-800 relative md:flex items-center text-center md:text-left">
<div class="w-full">
<div class="mb-10 md:mb-20 mt-10 md:mt-20 text-gray-600 font-light">
<h1 class="font-black uppercase text-3xl lg:text-5xl text-primary mb-10">{props.status}</h1>
<p className="text-lg pb-2 text-base-content">{props.title}</p>
<p className="text-base-content text-opacity-60">{props.subTitle}</p>
</div>
</div>
</div>
<div class="w-64 md:w-96 h-96 md:h-full bg-accent bg-opacity-10 absolute -top-64 md:-top-96 right-20 md:right-32 rounded-full pointer-events-none -rotate-45 transform"></div>
<div class="w-96 h-full bg-secondary bg-opacity-10 absolute -bottom-96 right-64 rounded-full pointer-events-none -rotate-45 transform"></div>
</div>
)
}

78
src/components/Experience.js Normal file
View File

@@ -0,0 +1,78 @@
import { AiFillGithub } from "react-icons/ai";
import { useSelector } from "react-redux";
import config from "../config";
import { skeleton } from "../helpers/utils";
const Experience = () => {
const loading = useSelector(state => state.loading);
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 2; index++) {
array.push((
<li>
<span className="d-unset">
<div class="block md:flex justify-between">
<div class="font-medium">
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
</div>
<div class="opacity-80">
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
</div>
</div>
<div>
{skeleton({ width: 'w-32', height: 'h-3' })}
</div>
</span>
</li>
))
}
return array;
}
return (
<>
{
(typeof config.experiences !== 'undefined' && config.experiences.length !== 0) && (
<div className="card shadow-lg compact side bg-base-100 col-span-1 lg:col-span-2">
<div className="card-body">
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
<li>
<div className="section-title pb-0-important mx-5">
<h5 className="card-title">
{loading ? skeleton({width: 'w-32', height: 'h-8'}) : 'Experience'}
</h5>
</div>
</li>
{
loading ? renderSkeleton() : (
config.experiences.map((experience, index) => (
<li>
<span className="d-unset">
<div class="block md:flex justify-between">
<div class="font-medium">
{experience.company}
</div>
<div class="opacity-80">
{experience.from} - {experience.to}
</div>
</div>
<div>
{experience.position}
</div>
</span>
</li>
))
)
}
</ul>
</div>
</div>
)
}
</>
)
}
export default Experience;

29
src/components/LazyImage.js Normal file
View File

@@ -0,0 +1,29 @@
import { useState, Fragment, useEffect } from 'react';
const LazyImage = ({ placeholder, src, ...rest }) => {
const [loading, setLoading] = useState(true);
useEffect(() => {
const imageToLoad = new Image();
imageToLoad.src = src;
imageToLoad.onload = () => {
setLoading(false);
}
}, [])
return (
<Fragment>
{
loading ? placeholder : (
<img
src={src}
{...rest}
/>
)
}
</Fragment>
)
}
export default LazyImage;

23
src/components/Project.js Normal file
View File

@@ -0,0 +1,23 @@
import { Fragment } from "react";
import { useSelector } from "react-redux";
import { skeleton } from "../helpers/utils";
const Project = () => {
const loading = useSelector(state => state.loading);
return (
<Fragment>
<div className="alert col-span-1 lg:col-span-2 bg-base-100">
<div className="flex-1">
<div className="section-title pb-0-important mx-5">
<h5 className="card-title">
{loading ? skeleton({width: 'w-32', height: 'h-8'}) : 'Project'}
</h5>
</div>
</div>
</div>
</Fragment>
)
}
export default Project;

46
src/components/Skill.js Normal file
View File

@@ -0,0 +1,46 @@
import { useSelector } from "react-redux";
import config from "../config";
import { skeleton } from "../helpers/utils";
const Skill = () => {
const loading = useSelector(state => state.loading);
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 12; index++) {
array.push((
<div key={index}>
{skeleton({width: 'w-16', height: 'h-4'})}
</div>
))
}
return array;
}
return (
<>
{
(typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
<div className="card shadow-lg compact side bg-base-100">
<div className="card-body">
<div className="inline-flex gap-2 flex-wrap justify-center">
{
loading ? renderSkeleton() : (
config.skills.map((skill, index) => (
<div class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 badge-primary bg-opacity-75 rounded-full">
{skill}
</div>
))
)
}
</div>
</div>
</div>
)
}
</>
)
}
export default Skill;

27
src/components/ThemeChanger.js
View File

@@ -1,39 +1,38 @@
import { Fragment } from 'react';
import { Select } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { setTheme } from '../store/slices/themeSlice';
import config from '../config';
const { Option } = Select;
import { skeleton } from '../helpers/utils';
const ThemeChanger = () => {
const dispatch = useDispatch();
const theme = useSelector(state => state.theme);
const loading = useSelector(state => state.loading);
const handleChange = (value) => {
dispatch(setTheme(value));
const handleChange = (e) => {
dispatch(setTheme(e.target.value));
}
return (
<div className="card shadow-lg compact side bg-base-100">
<div className="flex-row items-center space-x-4 card-body">
<div className="flex-1">
<h2 className="card-title">{loading ? <div className="bg-base-300 w-20 h-8 animate-pulse rounded-full" /> : 'Theme'}</h2>
<p className="text-base-content text-opacity-40">{loading ? <div className="bg-base-300 w-24 h-4 animate-pulse rounded-full" /> : 'Change Theme'}</p>
<div className="section-title">
<h5 className="card-title">
{loading ? skeleton({width: 'w-20', height: 'h-8'}) : 'Theme'}
</h5>
</div>
<span className="text-base-content text-opacity-40">{loading ? skeleton({width: 'w-24', height: 'h-4'}) : 'Change Theme'}</span>
</div>
<div className="flex-0">
{
loading ? <div className="bg-base-300 w-28 h-8 animate-pulse rounded-full" /> : (
<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange} bordered={false} value={theme}>
loading ? skeleton({width: 'w-28', height: 'h-10'}) : (
<select class="select w-full max-w-xs opacity-50" value={theme} onChange={handleChange}>
{
config.themeConfig.themes.map((item, index) => (
<Option key={index} value={item}>
<span className="capitalize text-base-content text-opacity-60">{item === config.themeConfig.default ? 'Default' : item}</span>
</Option>
<option className="capitalize text-base-content text-opacity-60" value={item}>{item === config.themeConfig.default ? 'Default' : item}</option>
))
}
</Select>
</select>
)
}
</div>