From fac36861686fb2ed91c16eafd5cac01c4eea71f5 Mon Sep 17 00:00:00 2001 From: "MD. Ariful Alam" Date: Wed, 25 Aug 2021 01:44:53 +0600 Subject: [PATCH] Refactor section --- src/App.js | 6 ++-- src/components/Blog.js | 4 +-- src/components/Education.js | 57 ++++++++++++++++++++-------------- src/components/Experience.js | 45 +++++++++++++++------------ src/components/Project.js | 57 ++++++++++++++++++++-------------- src/components/ThemeChanger.js | 3 +- src/index.scss | 10 ++---- 7 files changed, 103 insertions(+), 79 deletions(-) diff --git a/src/App.js b/src/App.js index 8f68c0c..e55aa10 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import axios from "axios"; -import { Fragment, memo, useCallback, useEffect, useState } from "react"; +import { Fragment, useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import AvatarCard from "./components/AvatarCard"; import ErrorPage from "./components/ErrorPage"; @@ -92,7 +92,7 @@ function App() { }, [dispatch]) useEffect(() => { - loadData(); + // loadData(); }, [loadData]) return ( @@ -160,4 +160,4 @@ function App() { ); } -export default memo(App); +export default App; diff --git a/src/components/Blog.js b/src/components/Blog.js index d9dfcc5..d22c9d0 100644 --- a/src/components/Blog.js +++ b/src/components/Blog.js @@ -1,6 +1,6 @@ import { getDevtoArticle, getMediumArticle } from "article-api"; import moment from "moment"; -import { memo, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { CgHashtag } from 'react-icons/cg'; import config from "../config"; import { skeleton } from "../helpers/utils"; @@ -105,4 +105,4 @@ const Blog = () => { ) } -export default memo(Blog); \ No newline at end of file +export default Blog; \ No newline at end of file diff --git a/src/components/Education.js b/src/components/Education.js index a1f295e..d09897f 100644 --- a/src/components/Education.js +++ b/src/components/Education.js @@ -1,5 +1,6 @@ import { useSelector } from "react-redux"; import config from "../config"; +import { GoPrimitiveDot } from 'react-icons/go'; import { skeleton } from "../helpers/utils"; const Education = () => { @@ -10,17 +11,20 @@ const Education = () => { for (let index = 0; index < 2; index++) { array.push((
  • - -
    -
    - {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })} -
    -
    - {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })} -
    -
    + + {skeleton({ width: 'w-2', height: 'h-2', className: "mr-2" })}
    - {skeleton({ width: 'w-32', height: 'h-3' })} +
    +
    + {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })} +
    +
    + {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })} +
    +
    +
    + {skeleton({ width: 'w-32', height: 'h-3' })} +
    • @@ -36,11 +40,15 @@ const Education = () => { (typeof config.education !== 'undefined' && config.education.length !== 0) && (
    -
      +
      • -
        +
        - {loading ? skeleton({width: 'w-32', height: 'h-8'}) : 'Education'} + { + loading ? skeleton({width: 'w-32', height: 'h-8'}) : ( + Education + ) + }
        • @@ -48,17 +56,20 @@ const Education = () => { loading ? renderSkeleton() : ( config.education.map((item, index) => (
      • - -
        -
        - {item.institution} -
        -
        - {item.from} - {item.to} -
        -
        + +
        - {item.degree} +
        +
        + {item.institution} +
        +
        + {item.from} - {item.to} +
        +
        +
        + {item.degree} +
        • diff --git a/src/components/Experience.js b/src/components/Experience.js index 25e12dd..525dea3 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -1,5 +1,6 @@ import { useSelector } from "react-redux"; import config from "../config"; +import { GoPrimitiveDot } from 'react-icons/go'; import { skeleton } from "../helpers/utils"; const Experience = () => { @@ -10,17 +11,20 @@ const Experience = () => { for (let index = 0; index < 2; index++) { array.push((
      • - -
        -
        - {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })} -
        -
        - {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })} -
        -
        + + {skeleton({ width: 'w-2', height: 'h-2', className: "mr-2" })}
        - {skeleton({ width: 'w-32', height: 'h-3' })} +
        +
        + {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })} +
        +
        + {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })} +
        +
        +
        + {skeleton({ width: 'w-32', height: 'h-3' })} +
        • @@ -50,18 +54,21 @@ const Experience = () => { loading ? renderSkeleton() : ( config.experiences.map((experience, index) => (
      • - -
        -
        - {experience.company} + + +
        +
        +
        + {experience.company} +
        +
        + {experience.from} - {experience.to} +
        -
        - {experience.from} - {experience.to} +
        + {experience.position}
        -
        - {experience.position} -
        • )) diff --git a/src/components/Project.js b/src/components/Project.js index fdd44f8..9a791ba 100644 --- a/src/components/Project.js +++ b/src/components/Project.js @@ -1,8 +1,10 @@ import { Fragment } from "react"; import { useSelector } from "react-redux"; import { languageColor, skeleton } from "../helpers/utils"; -import { AiFillStar } from 'react-icons/ai'; +import { AiFillStar, AiOutlineFork } from 'react-icons/ai'; import { VscSourceControl } from 'react-icons/vsc'; +import config from "../config"; +import { CgGitFork } from "react-icons/cg"; const LIMIT = 8; @@ -17,30 +19,30 @@ const Project = () => {
        -
        +
        - {skeleton({width: 'w-32', height: 'h-8'})} + {skeleton({ width: 'w-32', height: 'h-8' })}
        -
        - {skeleton({width: 'w-full', height: 'h-4', className: 'mb-2'})} - {skeleton({width: 'w-full', height: 'h-4'})} +
        + {skeleton({ width: 'w-full', height: 'h-4', className: 'mb-2' })} + {skeleton({ width: 'w-full', height: 'h-4' })}
        -
        +
        - {skeleton({width: 'w-12', height: 'h-4'})} + {skeleton({ width: 'w-12', height: 'h-4' })} - {skeleton({width: 'w-12', height: 'h-4'})} + {skeleton({ width: 'w-12', height: 'h-4' })}
        - {skeleton({width: 'w-12', height: 'h-4'})} + {skeleton({ width: 'w-12', height: 'h-4' })}
        @@ -65,24 +67,24 @@ const Project = () => {
        -

        +

        {item.description}

        -
        +
        - + {item.stargazers_count} - + {item.forks_count}
        -
        +
        {item.language}
        @@ -99,17 +101,26 @@ const Project = () => {
        -
          +
          • -
            -
            - {loading ? skeleton({width: 'w-28', height: 'h-8'}) : 'Project'} +
            +
            + { + loading ? skeleton({ width: 'w-28', height: 'h-8' }) : ( + My Projects + ) + }
            { - loading ? skeleton({width: 'w-8', height: 'h-8'}) : ( - - - + loading ? skeleton({ width: 'w-10', height: 'h-5' }) : ( + + See All + ) }
            diff --git a/src/components/ThemeChanger.js b/src/components/ThemeChanger.js index 6a04016..991006d 100644 --- a/src/components/ThemeChanger.js +++ b/src/components/ThemeChanger.js @@ -2,7 +2,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { setTheme } from '../store/slices/themeSlice'; import config from '../config'; import { skeleton } from '../helpers/utils'; -import { memo } from 'react'; import { AiOutlineControl } from 'react-icons/ai'; const ThemeChanger = () => { @@ -71,4 +70,4 @@ const ThemeChanger = () => { ) } -export default memo(ThemeChanger); \ No newline at end of file +export default ThemeChanger; \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index d2fe776..450066b 100644 --- a/src/index.scss +++ b/src/index.scss @@ -53,13 +53,9 @@ svg { .z-hover:focus, .z-hover:active { transition: transform 0.3s !important; - -ms-transform: scale(1.03) !important; - -webkit-transform: scale(1.03) !important; - transform: scale(1.03) !important; -} - -.d-unset { - display: unset !important; + -ms-transform: scale(1.01) !important; + -webkit-transform: scale(1.01) !important; + transform: scale(1.01) !important; } .pb-0-important {