From 7e890a74532209f7666614ee697d8473ca155ebf Mon Sep 17 00:00:00 2001 From: "MD. Ariful Alam" Date: Tue, 24 Aug 2021 21:11:56 +0600 Subject: [PATCH] Refactor section --- src/App.js | 3 +- src/components/AvatarCard.js | 2 +- src/components/Details.js | 151 +++++++++++++++++++++++++++-------- src/components/Experience.js | 14 ++-- src/components/Skill.js | 4 +- src/config.js | 16 +++- src/index.scss | 11 --- 7 files changed, 142 insertions(+), 59 deletions(-) diff --git a/src/App.js b/src/App.js index b29be22..8f68c0c 100644 --- a/src/App.js +++ b/src/App.js @@ -39,8 +39,7 @@ function App() { name: data.name, bio: data.bio, location: data.location, - company: data.company, - twitter: data.twitter_username, + company: data.company } dispatch(setProfile(profileData)); diff --git a/src/components/AvatarCard.js b/src/components/AvatarCard.js index 9c10b50..dba40f7 100644 --- a/src/components/AvatarCard.js +++ b/src/components/AvatarCard.js @@ -45,7 +45,7 @@ const AvatarCard = () => {
{ loading ? ( - skeleton({ width: 'w-48', height: 'h-5', className: 'mt-4' }) + skeleton({ width: 'w-48', height: 'h-5' }) ) : profile.bio }
diff --git a/src/components/Details.js b/src/components/Details.js index 986178c..73086a9 100644 --- a/src/components/Details.js +++ b/src/components/Details.js @@ -1,9 +1,9 @@ -import { GoLocation } from 'react-icons/go'; -import { AiFillGithub } from 'react-icons/ai'; +import { MdLocationOn, MdMail } from 'react-icons/md'; +import { AiFillGithub, AiFillMediumSquare } from 'react-icons/ai'; import { SiTwitter } from 'react-icons/si'; -import { BiBuilding } from 'react-icons/bi'; -import { GrLinkedinOption, GrMail } from 'react-icons/gr'; -import { ImDribbble } from 'react-icons/im'; +import { GrLinkedinOption } from 'react-icons/gr'; +import { CgDribbble } from 'react-icons/cg'; +import { FaBehanceSquare, FaBuilding, FaDev, FaFacebook, FaGlobe } from 'react-icons/fa'; import { useSelector } from 'react-redux'; import config from '../config'; import { skeleton } from '../helpers/utils'; @@ -18,8 +18,8 @@ const Details = () => { array.push((
  • - {skeleton({width: 'w-6', height: 'h-4', className: 'mr-2'})} - {skeleton({width: 'w-32', height: 'h-4'})} + {skeleton({ width: 'w-6', height: 'h-4', className: 'mr-2' })} + {skeleton({ width: 'w-32', height: 'h-4' })}
    • )) @@ -31,7 +31,7 @@ const Details = () => { return (
    -
      +
        { loading ? renderSkeleton() : ( <> @@ -39,7 +39,7 @@ const Details = () => { profile && profile.location && (
      • - + {profile.location}
        • @@ -49,7 +49,7 @@ const Details = () => { profile && profile.company && (
      • - + {profile.company}
        • @@ -57,9 +57,9 @@ const Details = () => { }
      • - - + {
        • { - profile && profile.twitter && ( + typeof config.social.linkedin !== 'undefined' && config.social.linkedin && (
      • - - + - {profile.twitter} + {config.social.linkedin}
        • ) } { - typeof config.linkedinUsername !== 'undefined' && config.linkedinUsername && ( + typeof config.social.twitter !== 'undefined' && config.social.twitter && (
      • - - + - {config.linkedinUsername} + {config.social.twitter}
        • ) } { - typeof config.dribbbleUsername !== 'undefined' && config.dribbbleUsername && ( + typeof config.social.dribbble !== 'undefined' && config.social.dribbble && (
      • - - + - {config.dribbbleUsername} + {config.social.dribbble}
        • ) } { - typeof config.email !== 'undefined' && config.email && ( + typeof config.social.behance !== 'undefined' && config.social.behance && (
      • - - + - {config.email} + {config.social.behance} + + +
        • + ) + } + { + typeof config.social.facebook !== 'undefined' && config.social.facebook && ( +
      • + + + + {config.social.facebook} + + +
        • + ) + } + { + typeof config.social.medium !== 'undefined' && config.social.medium && ( +
      • + + + + {config.social.medium} + + +
        • + ) + } + { + typeof config.social.devto !== 'undefined' && config.social.devto && ( +
      • + + + + {config.social.devto} + + +
        • + ) + } + { + typeof config.social.website !== 'undefined' && config.social.website && ( +
      • + + + + {config.social.website} + + +
        • + ) + } + { + typeof config.social.email !== 'undefined' && config.social.email && ( +
      • + + + + {config.social.email}
        • diff --git a/src/components/Experience.js b/src/components/Experience.js index 7876dfd..25e12dd 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -36,11 +36,13 @@ const Experience = () => { (typeof config.experiences !== 'undefined' && config.experiences.length !== 0) && (
        -
          +
          • -
            +
            - {loading ? skeleton({width: 'w-32', height: 'h-8'}) : 'Experience'} + {loading ? skeleton({width: 'w-32', height: 'h-8'}) : ( + Experience + )}
            • @@ -50,14 +52,14 @@ const Experience = () => {
          • -
            +
            {experience.company}
            -
            +
            {experience.from} - {experience.to}
            -
            +
            {experience.position}
            diff --git a/src/components/Skill.js b/src/components/Skill.js index b1ff0eb..b083cd2 100644 --- a/src/components/Skill.js +++ b/src/components/Skill.js @@ -10,7 +10,7 @@ const Skill = () => { for (let index = 0; index < 12; index++) { array.push((
            - {skeleton({width: 'w-16', height: 'h-4'})} + {skeleton({ width: 'w-16', height: 'h-4' })}
            )) } @@ -24,7 +24,7 @@ const Skill = () => { (typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
            -
            +
            { loading ? renderSkeleton() : ( config.skills.map((skill, index) => ( diff --git a/src/config.js b/src/config.js index a20c84f..c0b9257 100644 --- a/src/config.js +++ b/src/config.js @@ -1,12 +1,20 @@ module.exports = { githubUsername: 'arifszn', // required - email: 'contact@arifszn.com', // optional - linkedinUsername: 'ariful-alam', // optional - dribbbleUsername: '', // optional blog: { source: 'dev.to', // medium | dev.to username: 'arifszn', }, + social: { + linkedin: 'ariful-alam', + twitter: 'arif_swozon', + facebook: '', + dribbble: '', + behance: '', + medium: '', + devto: '', + website: 'https://www.arifszn.com', + email: 'contact@arifszn.com' + }, skills: [ 'PHP', 'Laravel', @@ -65,7 +73,7 @@ module.exports = { // using user system preferences, instead of the hardcoded default respectPrefersColorScheme: true, - // Available themes + // Available themes. To remove any theme, exclude from here. themes: [ 'light', 'dark', diff --git a/src/index.scss b/src/index.scss index e0a261a..d2fe776 100644 --- a/src/index.scss +++ b/src/index.scss @@ -58,17 +58,6 @@ 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; }