Refactor section
This commit is contained in:
MD. Ariful Alam
parent
7e890a7453
commit
fac3686168
@ -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;
|
||||
|
||||
@ -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);
|
||||
export default Blog;
|
||||
@ -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((
|
||||
<li key={index}>
|
||||
<span className="d-unset">
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium">
|
||||
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
<div className="opacity-90">
|
||||
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
{skeleton({ width: 'w-2', height: 'h-2', className: "mr-2" })}
|
||||
<div>
|
||||
{skeleton({ width: 'w-32', height: 'h-3' })}
|
||||
<div className="block justify-between">
|
||||
<div>
|
||||
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
<div>
|
||||
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{skeleton({ width: 'w-32', height: 'h-3' })}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
@ -36,11 +40,15 @@ const Education = () => {
|
||||
(typeof config.education !== 'undefined' && config.education.length !== 0) && (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<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>
|
||||
<div className="section-title pb-0-important mx-5">
|
||||
<div className="pb-0-important mx-5">
|
||||
<h5 className="card-title">
|
||||
{loading ? skeleton({width: 'w-32', height: 'h-8'}) : 'Education'}
|
||||
{
|
||||
loading ? skeleton({width: 'w-32', height: 'h-8'}) : (
|
||||
<span className="opacity-70">Education</span>
|
||||
)
|
||||
}
|
||||
</h5>
|
||||
</div>
|
||||
</li>
|
||||
@ -48,17 +56,20 @@ const Education = () => {
|
||||
loading ? renderSkeleton() : (
|
||||
config.education.map((item, index) => (
|
||||
<li key={index}>
|
||||
<span className="d-unset">
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium">
|
||||
{item.institution}
|
||||
</div>
|
||||
<div className="opacity-90">
|
||||
{item.from} - {item.to}
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<GoPrimitiveDot className="mr-2 opacity-40"/>
|
||||
<div>
|
||||
{item.degree}
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium opacity-70">
|
||||
{item.institution}
|
||||
</div>
|
||||
<div className="opacity-40">
|
||||
{item.from} - {item.to}
|
||||
</div>
|
||||
</div>
|
||||
<div className="opacity-70">
|
||||
{item.degree}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
@ -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((
|
||||
<li key={index}>
|
||||
<span className="d-unset">
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium">
|
||||
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
<div className="opacity-90">
|
||||
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
{skeleton({ width: 'w-2', height: 'h-2', className: "mr-2" })}
|
||||
<div>
|
||||
{skeleton({ width: 'w-32', height: 'h-3' })}
|
||||
<div className="block justify-between">
|
||||
<div>
|
||||
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
<div>
|
||||
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{skeleton({ width: 'w-32', height: 'h-3' })}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
@ -50,18 +54,21 @@ const Experience = () => {
|
||||
loading ? renderSkeleton() : (
|
||||
config.experiences.map((experience, index) => (
|
||||
<li key={index}>
|
||||
<span className="d-unset">
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium opacity-70">
|
||||
{experience.company}
|
||||
<span>
|
||||
<GoPrimitiveDot className="mr-2 opacity-40"/>
|
||||
<div>
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium opacity-70">
|
||||
{experience.company}
|
||||
</div>
|
||||
<div className="opacity-40">
|
||||
{experience.from} - {experience.to}
|
||||
</div>
|
||||
</div>
|
||||
<div className="opacity-50">
|
||||
{experience.from} - {experience.to}
|
||||
<div className="opacity-70">
|
||||
{experience.position}
|
||||
</div>
|
||||
</div>
|
||||
<div className="opacity-70">
|
||||
{experience.position}
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
))
|
||||
|
||||
@ -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 = () => {
|
||||
<div className="card shadow-lg compact bg-base-100" key={index}>
|
||||
<div className="flex justify-between flex-col p-8 h-full w-full">
|
||||
<div>
|
||||
<div className="flex items-center opacity-60">
|
||||
<div className="flex items-center">
|
||||
<span>
|
||||
<h5 className="card-title">
|
||||
{skeleton({width: 'w-32', height: 'h-8'})}
|
||||
{skeleton({ width: 'w-32', height: 'h-8' })}
|
||||
</h5>
|
||||
</span>
|
||||
</div>
|
||||
<div className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
|
||||
{skeleton({width: 'w-full', height: 'h-4', className: 'mb-2'})}
|
||||
{skeleton({width: 'w-full', height: 'h-4'})}
|
||||
<div className="mb-5 mt-1">
|
||||
{skeleton({ width: 'w-full', height: 'h-4', className: 'mb-2' })}
|
||||
{skeleton({ width: 'w-full', height: 'h-4' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-base-content text-opacity-40">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex flex-grow">
|
||||
<span className="mr-3 flex items-center">
|
||||
{skeleton({width: 'w-12', height: 'h-4'})}
|
||||
{skeleton({ width: 'w-12', height: 'h-4' })}
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
{skeleton({width: 'w-12', height: 'h-4'})}
|
||||
{skeleton({ width: 'w-12', height: 'h-4' })}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="flex items-center">
|
||||
{skeleton({width: 'w-12', height: 'h-4'})}
|
||||
{skeleton({ width: 'w-12', height: 'h-4' })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -65,24 +67,24 @@ const Project = () => {
|
||||
</h5>
|
||||
</span>
|
||||
</div>
|
||||
<p className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
|
||||
<p className="mb-5 mt-1 text-base-content text-opacity-60 text-sm">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-base-content text-opacity-40">
|
||||
<div className="flex justify-between text-sm text-base-content text-opacity-60">
|
||||
<div className="flex flex-grow">
|
||||
<span className="mr-3 flex items-center">
|
||||
<AiFillStar/>
|
||||
<AiFillStar />
|
||||
<span>{item.stargazers_count}</span>
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<VscSourceControl/>
|
||||
<AiOutlineFork />
|
||||
<span>{item.forks_count}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="flex items-center">
|
||||
<div className="w-3 h-3 rounded-full mr-1 opacity-75" style={{backgroundColor: languageColor(item.language)}}/>
|
||||
<div className="w-3 h-3 rounded-full mr-1 opacity-60" style={{ backgroundColor: languageColor(item.language) }} />
|
||||
<span>{item.language}</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -99,17 +101,26 @@ const Project = () => {
|
||||
<div className="col-span-2">
|
||||
<div className="card compact bg-base-100 shadow-sm">
|
||||
<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>
|
||||
<div className="section-title pb-0-important mx-5 flex items-center">
|
||||
<h5 className="card-title mr-3">
|
||||
{loading ? skeleton({width: 'w-28', height: 'h-8'}) : 'Project'}
|
||||
<div className="pb-0-important mx-4 flex items-center justify-between">
|
||||
<h5 className="card-title">
|
||||
{
|
||||
loading ? skeleton({ width: 'w-28', height: 'h-8' }) : (
|
||||
<span className="opacity-70">My Projects</span>
|
||||
)
|
||||
}
|
||||
</h5>
|
||||
{
|
||||
loading ? skeleton({width: 'w-8', height: 'h-8'}) : (
|
||||
<svg className="animate-bounce w-4 h-4" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
loading ? skeleton({ width: 'w-10', height: 'h-5' }) : (
|
||||
<a
|
||||
href={`https://github.com/${config.githubUsername}?tab=repositories`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="opacity-50"
|
||||
>
|
||||
See All
|
||||
</a>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -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);
|
||||
export default ThemeChanger;
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user