ilia/profile
1
0
Fork 0
Code Issues Pull Requests Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1356
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -8,9 +8,9 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^4.16.12",
"axios": "^0.21.1",
"daisyui": "^1.12.1",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",

26
src/App.js
View File

@ -2,7 +2,6 @@ import axios from "axios";
import { Fragment, memo, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import AvatarCard from "./components/AvatarCard";
import Demo from "./components/Demo";
import ErrorPage from "./components/ErrorPage";
import ThemeChanger from "./components/ThemeChanger";
import config from "./config";
@ -10,6 +9,10 @@ import moment from 'moment';
import { setLoading } from "./store/slices/loadingSlice";
import { setProfile } from "./store/slices/profileSlice";
import Details from "./components/Details";
import Skill from "./components/Skill";
import Experience from "./components/Experience";
import Education from "./components/Education";
import Project from "./components/Project";
function App() {
const dispatch = useDispatch();
@ -73,7 +76,7 @@ function App() {
return (
<Fragment>
<div className="fade-in h-screen">
<div className="p-4 lg:p-10 min-h-full bg-base-200">
{
error ? (
<ErrorPage
@ -104,19 +107,24 @@ function App() {
}
/>
) : (
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3 lg:bg-base-200 rounded-box">
<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">
<div className="row-span-3">
<div className="grid grid-cols-1 gap-6">
{
!config.themeConfig.disableSwitch && (
<ThemeChanger />
<ThemeChanger/>
)
}
<AvatarCard />
<Details />
<AvatarCard/>
<Details/>
<Skill/>
</div>
</div>
<div className="card shadow-lg compact side bg-base-100">
<Experience/>
<Education/>
<Project/>
{/* <div className="card shadow-lg compact side bg-base-100">
<div className="flex-row items-center space-x-4 card-body">
<div>
<div className="avatar">
@ -206,11 +214,11 @@ function App() {
</button>
</div>
</div>
</div>
</div> */}
</div>
</div>
)
}
</div>
</div>
</Fragment>
);

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>

43
src/config.js
View File

@ -1,8 +1,49 @@
module.exports = {
githubUsername: 'arifszn', // required
githubUsername: 'tailwindlabs', // required
email: 'contact@arifszn.com', // optional
linkedinUsername: 'ariful-alam', // optional
dribbbleUsername: '', // optional
skills: [
'PHP',
'Laravel',
'JavaScript',
'React.js',
'Node.js'
],
experiences: [
{
company: 'Orangetoolz - My Offer 360 Degree',
position: 'Jr. Full Stack Engineer',
from: 'July 2019',
to: 'Present'
},
{
company: 'Techvillage',
position: 'Jr. Software Engineer',
from: 'January 2019',
to: ' June 2019'
}
],
education: [
{
institution: 'American International University-Bangladesh',
degree: 'Bachelor of Science',
from: '2015',
to: '2019'
},
{
institution: 'Cantonment College, Jessore',
degree: 'Higher Secondary Certificate (HSC)',
from: '2012',
to: '2014',
},
{
institution: 'Chowgacha Shahadat Pilot High School',
degree: 'Secondary School Certificate (SSC)',
from: '2007',
to: '2012'
}
],
themeConfig: {
default: 'light',

4
src/helpers/utils.js
View File

@ -17,6 +17,10 @@ export const getThemeValue = () => {
return config.themeConfig.default;
}
export const skeleton = ({width = null, height = null, style = {}, shape = 'rounded-full', className = null}) => {
return <div className={`bg-base-300 animate-pulse ${shape}${className ? ` ${className}` : ''}${width ? ` ${width}` : ''}${height ? ` ${height}` : ''}`} style={style}/>;
}
export const fallbackImage = (
"data:image/png;base64,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"
)

49
src/index.scss
View File

@ -33,36 +33,6 @@ code {
monospace;
}
html:not([data-theme="dark"]),
html:not([data-theme="halloween"]),
html:not([data-theme="forest"]),
html:not([data-theme="black"]),
html:not([data-theme="synthwave"]),
html:not([data-theme="aqua"]),
html:not([data-theme="luxury"]),
html:not([data-theme="dracula"]) {
@include meta.load-css("node_modules/antd/dist/antd.css", $with: null);
p, ul {
margin-bottom: 0;
}
}
html[data-theme="dark"],
html[data-theme="halloween"],
html[data-theme="forest"],
html[data-theme="black"],
html[data-theme="synthwave"],
html[data-theme="aqua"],
html[data-theme="luxury"],
html[data-theme="dracula"] {
@include meta.load-css("node_modules/antd/dist/antd.dark.css", $with: null);
p, ul {
margin-bottom: 0;
}
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@ -88,6 +58,25 @@ svg {
transform: scale(1.03) !important;
}
.section-title {
font-weight: 700;
font-size: .75rem;
line-height: 1rem;
padding-top: .25rem;
padding-bottom: .25rem;
// text-transform: uppercase;
--tw-text-opacity: 0.6;
color: hsla(var(--bc)/var(--tw-text-opacity,1)) !important;
}
.d-unset {
display: unset !important;
}
.pb-0-important {
padding-bottom: 0 !important;
}
.fade-in {
opacity: 1;
animation-name: fadeIn;