ilia/profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor section

Browse Source
This commit is contained in:
MD. Ariful Alam 2021-08-24 21:11:56 +06:00
parent 1f14db6b83
commit 7e890a7453
7 changed files with 142 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.js
View File

@ -39,8 +39,7 @@ function App() {
name: data.name, name: data.name,
bio: data.bio, bio: data.bio,
location: data.location, location: data.location,
company: data.company, company: data.company
twitter: data.twitter_username,
} }
dispatch(setProfile(profileData)); dispatch(setProfile(profileData));

2
src/components/AvatarCard.js
View File

@ -45,7 +45,7 @@ const AvatarCard = () => {
<div className="mt-3 text-base-content text-opacity-60"> <div className="mt-3 text-base-content text-opacity-60">
{ {
loading ? ( loading ? (
skeleton({ width: 'w-48', height: 'h-5', className: 'mt-4' }) skeleton({ width: 'w-48', height: 'h-5' })
) : profile.bio ) : profile.bio
} }
</div> </div>

139
src/components/Details.js
View File

@ -1,9 +1,9 @@
import { GoLocation } from 'react-icons/go'; import { MdLocationOn, MdMail } from 'react-icons/md';
import { AiFillGithub } from 'react-icons/ai'; import { AiFillGithub, AiFillMediumSquare } from 'react-icons/ai';
import { SiTwitter } from 'react-icons/si'; import { SiTwitter } from 'react-icons/si';
import { BiBuilding } from 'react-icons/bi'; import { GrLinkedinOption } from 'react-icons/gr';
import { GrLinkedinOption, GrMail } from 'react-icons/gr'; import { CgDribbble } from 'react-icons/cg';
import { ImDribbble } from 'react-icons/im'; import { FaBehanceSquare, FaBuilding, FaDev, FaFacebook, FaGlobe } from 'react-icons/fa';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import config from '../config'; import config from '../config';
import { skeleton } from '../helpers/utils'; import { skeleton } from '../helpers/utils';
@ -18,8 +18,8 @@ const Details = () => {
array.push(( array.push((
<li key={index}> <li key={index}>
<span> <span>
{skeleton({width: 'w-6', height: 'h-4', className: 'mr-2'})} {skeleton({ width: 'w-6', height: 'h-4', className: 'mr-2' })}
{skeleton({width: 'w-32', height: 'h-4'})} {skeleton({ width: 'w-32', height: 'h-4' })}
</span> </span>
</li> </li>
)) ))
@ -31,7 +31,7 @@ const Details = () => {
return ( return (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg compact bg-base-100">
<div className="card-body"> <div className="card-body">
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40"> <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-60">
{ {
loading ? renderSkeleton() : ( loading ? renderSkeleton() : (
<> <>
@ -39,7 +39,7 @@ const Details = () => {
profile && profile.location && ( profile && profile.location && (
<li> <li>
<span> <span>
<GoLocation className="mr-2"/> <MdLocationOn className="mr-2" />
{profile.location} {profile.location}
</span> </span>
</li> </li>
@ -49,7 +49,7 @@ const Details = () => {
profile && profile.company && ( profile && profile.company && (
<li> <li>
<span> <span>
<BiBuilding className="mr-2"/> <FaBuilding className="mr-2" />
{profile.company} {profile.company}
</span> </span>
</li> </li>
@ -57,7 +57,7 @@ const Details = () => {
} }
<li> <li>
<span> <span>
<AiFillGithub className="mr-2"/> <AiFillGithub className="mr-2" />
<a <a
href={`https://github.com/${config.githubUsername}`} href={`https://github.com/${config.githubUsername}`}
target="_blank" target="_blank"
@ -69,68 +69,153 @@ const Details = () => {
</span> </span>
</li> </li>
{ {
profile && profile.twitter && ( typeof config.social.linkedin !== 'undefined' && config.social.linkedin && (
<li> <li>
<span> <span>
<SiTwitter className="mr-2"/> <GrLinkedinOption className="mr-2" />
<a <a
href={`https://twitter.com/${profile.twitter}`} href={`https://www.linkedin.com/in/${config.social.linkedin}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-base-content-important" className="text-base-content-important"
> >
{profile.twitter} {config.social.linkedin}
</a> </a>
</span> </span>
</li> </li>
) )
} }
{ {
typeof config.linkedinUsername !== 'undefined' && config.linkedinUsername && ( typeof config.social.twitter !== 'undefined' && config.social.twitter && (
<li> <li>
<span> <span>
<GrLinkedinOption className="mr-2"/> <SiTwitter className="mr-2" />
<a <a
href={`https://www.linkedin.com/in/${config.linkedinUsername}`} href={`https://twitter.com/${config.social.twitter}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-base-content-important" className="text-base-content-important"
> >
{config.linkedinUsername} {config.social.twitter}
</a> </a>
</span> </span>
</li> </li>
) )
} }
{ {
typeof config.dribbbleUsername !== 'undefined' && config.dribbbleUsername && ( typeof config.social.dribbble !== 'undefined' && config.social.dribbble && (
<li> <li>
<span> <span>
<ImDribbble className="mr-2"/> <CgDribbble className="mr-2" />
<a <a
href={`https://dribbble.com/${config.dribbbleUsername}`} href={`https://dribbble.com/${config.social.dribbble}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-base-content-important" className="text-base-content-important"
> >
{config.dribbbleUsername} {config.social.dribbble}
</a> </a>
</span> </span>
</li> </li>
) )
} }
{ {
typeof config.email !== 'undefined' && config.email && ( typeof config.social.behance !== 'undefined' && config.social.behance && (
<li> <li>
<span> <span>
<GrMail className="mr-2"/> <FaBehanceSquare className="mr-2" />
<a <a
href={`mailto:${config.email}`} href={`https://www.behance.net/${config.social.behance}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-base-content-important" className="text-base-content-important"
> >
{config.email} {config.social.behance}
</a>
</span>
</li>
)
}
{
typeof config.social.facebook !== 'undefined' && config.social.facebook && (
<li>
<span>
<FaFacebook className="mr-2" />
<a
href={`https://www.facebook.com/${config.social.facebook}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.facebook}
</a>
</span>
</li>
)
}
{
typeof config.social.medium !== 'undefined' && config.social.medium && (
<li>
<span>
<AiFillMediumSquare className="mr-2" />
<a
href={`https://medium.com/@${config.social.medium}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.medium}
</a>
</span>
</li>
)
}
{
typeof config.social.devto !== 'undefined' && config.social.devto && (
<li>
<span>
<FaDev className="mr-2" />
<a
href={`https://dev.to/${config.social.devto}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.devto}
</a>
</span>
</li>
)
}
{
typeof config.social.website !== 'undefined' && config.social.website && (
<li>
<span>
<FaGlobe className="mr-2" />
<a
href={`${config.social.website}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.website}
</a>
</span>
</li>
)
}
{
typeof config.social.email !== 'undefined' && config.social.email && (
<li>
<span>
<MdMail className="mr-2" />
<a
href={`mailto:${config.social.email}`}
target="_blank"
rel="noreferrer"
className="text-base-content-important"
>
{config.social.email}
</a> </a>
</span> </span>
</li> </li>

14
src/components/Experience.js
View File

@ -36,11 +36,13 @@ const Experience = () => {
(typeof config.experiences !== 'undefined' && config.experiences.length !== 0) && ( (typeof config.experiences !== 'undefined' && config.experiences.length !== 0) && (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg compact bg-base-100">
<div className="card-body"> <div className="card-body">
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40"> <ul className="menu row-span-3 bg-base-100 text-base-content">
<li> <li>
<div className="section-title pb-0-important mx-5"> <div className="pb-0-important mx-5">
<h5 className="card-title"> <h5 className="card-title">
{loading ? skeleton({width: 'w-32', height: 'h-8'}) : 'Experience'} {loading ? skeleton({width: 'w-32', height: 'h-8'}) : (
<span className="opacity-70">Experience</span>
)}
</h5> </h5>
</div> </div>
</li> </li>
@ -50,14 +52,14 @@ const Experience = () => {
<li key={index}> <li key={index}>
<span className="d-unset"> <span className="d-unset">
<div className="block justify-between"> <div className="block justify-between">
<div className="font-medium"> <div className="font-medium opacity-70">
{experience.company} {experience.company}
</div> </div>
<div className="opacity-90"> <div className="opacity-50">
{experience.from} - {experience.to} {experience.from} - {experience.to}
</div> </div>
</div> </div>
<div> <div className="opacity-70">
{experience.position} {experience.position}
</div> </div>
</span> </span>

4
src/components/Skill.js
View File

@ -10,7 +10,7 @@ const Skill = () => {
for (let index = 0; index < 12; index++) { for (let index = 0; index < 12; index++) {
array.push(( array.push((
<div key={index}> <div key={index}>
{skeleton({width: 'w-16', height: 'h-4'})} {skeleton({ width: 'w-16', height: 'h-4' })}
</div> </div>
)) ))
} }
@ -24,7 +24,7 @@ const Skill = () => {
(typeof config.skills !== 'undefined' && config.skills.length !== 0) && ( (typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg compact bg-base-100">
<div className="card-body"> <div className="card-body">
<div className="inline-flex gap-2 flex-wrap justify-center p-3"> <div className="inline-flex gap-2 flex-wrap p-3">
{ {
loading ? renderSkeleton() : ( loading ? renderSkeleton() : (
config.skills.map((skill, index) => ( config.skills.map((skill, index) => (

16
src/config.js
View File

@ -1,12 +1,20 @@
module.exports = { module.exports = {
githubUsername: 'arifszn', // required githubUsername: 'arifszn', // required
email: 'contact@arifszn.com', // optional
linkedinUsername: 'ariful-alam', // optional
dribbbleUsername: '', // optional
blog: { blog: {
source: 'dev.to', // medium | dev.to source: 'dev.to', // medium | dev.to
username: 'arifszn', username: 'arifszn',
}, },
social: {
linkedin: 'ariful-alam',
twitter: 'arif_swozon',
facebook: '',
dribbble: '',
behance: '',
medium: '',
devto: '',
website: 'https://www.arifszn.com',
email: 'contact@arifszn.com'
},
skills: [ skills: [
'PHP', 'PHP',
'Laravel', 'Laravel',
@ -65,7 +73,7 @@ module.exports = {
// using user system preferences, instead of the hardcoded default // using user system preferences, instead of the hardcoded default
respectPrefersColorScheme: true, respectPrefersColorScheme: true,
// Available themes // Available themes. To remove any theme, exclude from here.
themes: [ themes: [
'light', 'light',
'dark', 'dark',

11
src/index.scss
View File

@ -58,17 +58,6 @@ svg {
transform: scale(1.03) !important; 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 { .d-unset {
display: unset !important; display: unset !important;
} }