noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-25 04:17:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor section

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-25 01:44:53 +06:00
parent 7e890a7453
commit fac3686168
7 changed files with 103 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@@ -1,5 +1,5 @@
import axios from "axios"; 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 { useDispatch, useSelector } from "react-redux";
import AvatarCard from "./components/AvatarCard"; import AvatarCard from "./components/AvatarCard";
import ErrorPage from "./components/ErrorPage"; import ErrorPage from "./components/ErrorPage";
@@ -92,7 +92,7 @@ function App() {
}, [dispatch]) }, [dispatch])
useEffect(() => { useEffect(() => {
loadData(); // loadData();
}, [loadData]) }, [loadData])
return ( return (
@@ -160,4 +160,4 @@ function App() {
); );
} }
export default memo(App); export default App;

4
src/components/Blog.js
View File

@@ -1,6 +1,6 @@
import { getDevtoArticle, getMediumArticle } from "article-api"; import { getDevtoArticle, getMediumArticle } from "article-api";
import moment from "moment"; import moment from "moment";
import { memo, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { CgHashtag } from 'react-icons/cg'; import { CgHashtag } from 'react-icons/cg';
import config from "../config"; import config from "../config";
import { skeleton } from "../helpers/utils"; import { skeleton } from "../helpers/utils";
@@ -105,4 +105,4 @@ const Blog = () => {
) )
} }
export default memo(Blog); export default Blog;

31
src/components/Education.js
View File

@@ -1,5 +1,6 @@
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import config from "../config"; import config from "../config";
import { GoPrimitiveDot } from 'react-icons/go';
import { skeleton } from "../helpers/utils"; import { skeleton } from "../helpers/utils";
const Education = () => { const Education = () => {
@@ -10,18 +11,21 @@ const Education = () => {
for (let index = 0; index < 2; index++) { for (let index = 0; index < 2; index++) {
array.push(( array.push((
<li key={index}> <li key={index}>
<span className="d-unset"> <span>
{skeleton({ width: 'w-2', height: 'h-2', className: "mr-2" })}
<div>
<div className="block justify-between"> <div className="block justify-between">
<div className="font-medium"> <div>
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })} {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
</div> </div>
<div className="opacity-90"> <div>
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })} {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
</div> </div>
</div> </div>
<div> <div>
{skeleton({ width: 'w-32', height: 'h-3' })} {skeleton({ width: 'w-32', height: 'h-3' })}
</div> </div>
</div>
</span> </span>
</li> </li>
)) ))
@@ -36,11 +40,15 @@ const Education = () => {
(typeof config.education !== 'undefined' && config.education.length !== 0) && ( (typeof config.education !== 'undefined' && config.education.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'}) : 'Education'} {
loading ? skeleton({width: 'w-32', height: 'h-8'}) : (
<span className="opacity-70">Education</span>
)
}
</h5> </h5>
</div> </div>
</li> </li>
@@ -48,18 +56,21 @@ const Education = () => {
loading ? renderSkeleton() : ( loading ? renderSkeleton() : (
config.education.map((item, index) => ( config.education.map((item, index) => (
<li key={index}> <li key={index}>
<span className="d-unset"> <span>
<GoPrimitiveDot className="mr-2 opacity-40"/>
<div>
<div className="block justify-between"> <div className="block justify-between">
<div className="font-medium"> <div className="font-medium opacity-70">
{item.institution} {item.institution}
</div> </div>
<div className="opacity-90"> <div className="opacity-40">
{item.from} - {item.to} {item.from} - {item.to}
</div> </div>
</div> </div>
<div> <div className="opacity-70">
{item.degree} {item.degree}
</div> </div>
</div>
</span> </span>
</li> </li>
)) ))

17
src/components/Experience.js
View File

@@ -1,5 +1,6 @@
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import config from "../config"; import config from "../config";
import { GoPrimitiveDot } from 'react-icons/go';
import { skeleton } from "../helpers/utils"; import { skeleton } from "../helpers/utils";
const Experience = () => { const Experience = () => {
@@ -10,18 +11,21 @@ const Experience = () => {
for (let index = 0; index < 2; index++) { for (let index = 0; index < 2; index++) {
array.push(( array.push((
<li key={index}> <li key={index}>
<span className="d-unset"> <span>
{skeleton({ width: 'w-2', height: 'h-2', className: "mr-2" })}
<div>
<div className="block justify-between"> <div className="block justify-between">
<div className="font-medium"> <div>
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })} {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
</div> </div>
<div className="opacity-90"> <div>
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })} {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
</div> </div>
</div> </div>
<div> <div>
{skeleton({ width: 'w-32', height: 'h-3' })} {skeleton({ width: 'w-32', height: 'h-3' })}
</div> </div>
</div>
</span> </span>
</li> </li>
)) ))
@@ -50,18 +54,21 @@ const Experience = () => {
loading ? renderSkeleton() : ( loading ? renderSkeleton() : (
config.experiences.map((experience, index) => ( config.experiences.map((experience, index) => (
<li key={index}> <li key={index}>
<span className="d-unset"> <span>
<GoPrimitiveDot className="mr-2 opacity-40"/>
<div>
<div className="block justify-between"> <div className="block justify-between">
<div className="font-medium opacity-70"> <div className="font-medium opacity-70">
{experience.company} {experience.company}
</div> </div>
<div className="opacity-50"> <div className="opacity-40">
{experience.from} - {experience.to} {experience.from} - {experience.to}
</div> </div>
</div> </div>
<div className="opacity-70"> <div className="opacity-70">
{experience.position} {experience.position}
</div> </div>
</div>
</span> </span>
</li> </li>
)) ))

43
src/components/Project.js
View File

@@ -1,8 +1,10 @@
import { Fragment } from "react"; import { Fragment } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { languageColor, skeleton } from "../helpers/utils"; 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 { VscSourceControl } from 'react-icons/vsc';
import config from "../config";
import { CgGitFork } from "react-icons/cg";
const LIMIT = 8; const LIMIT = 8;
@@ -17,19 +19,19 @@ const Project = () => {
<div className="card shadow-lg compact bg-base-100" key={index}> <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 className="flex justify-between flex-col p-8 h-full w-full">
<div> <div>
<div className="flex items-center opacity-60"> <div className="flex items-center">
<span> <span>
<h5 className="card-title"> <h5 className="card-title">
{skeleton({ width: 'w-32', height: 'h-8' })} {skeleton({ width: 'w-32', height: 'h-8' })}
</h5> </h5>
</span> </span>
</div> </div>
<div className="mb-5 mt-1 text-base-content text-opacity-40 text-sm"> <div className="mb-5 mt-1">
{skeleton({ width: 'w-full', height: 'h-4', className: 'mb-2' })} {skeleton({ width: 'w-full', height: 'h-4', className: 'mb-2' })}
{skeleton({ width: 'w-full', height: 'h-4' })} {skeleton({ width: 'w-full', height: 'h-4' })}
</div> </div>
</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"> <div className="flex flex-grow">
<span className="mr-3 flex items-center"> <span className="mr-3 flex items-center">
{skeleton({ width: 'w-12', height: 'h-4' })} {skeleton({ width: 'w-12', height: 'h-4' })}
@@ -65,24 +67,24 @@ const Project = () => {
</h5> </h5>
</span> </span>
</div> </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} {item.description}
</p> </p>
</div> </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"> <div className="flex flex-grow">
<span className="mr-3 flex items-center"> <span className="mr-3 flex items-center">
<AiFillStar /> <AiFillStar />
<span>{item.stargazers_count}</span> <span>{item.stargazers_count}</span>
</span> </span>
<span className="flex items-center"> <span className="flex items-center">
<VscSourceControl/> <AiOutlineFork />
<span>{item.forks_count}</span> <span>{item.forks_count}</span>
</span> </span>
</div> </div>
<div> <div>
<span className="flex items-center"> <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>{item.language}</span>
</span> </span>
</div> </div>
@@ -99,17 +101,26 @@ const Project = () => {
<div className="col-span-2"> <div className="col-span-2">
<div className="card compact bg-base-100 shadow-sm"> <div className="card compact bg-base-100 shadow-sm">
<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 flex items-center"> <div className="pb-0-important mx-4 flex items-center justify-between">
<h5 className="card-title mr-3"> <h5 className="card-title">
{loading ? skeleton({width: 'w-28', height: 'h-8'}) : 'Project'} {
loading ? skeleton({ width: 'w-28', height: 'h-8' }) : (
<span className="opacity-70">My Projects</span>
)
}
</h5> </h5>
{ {
loading ? skeleton({width: 'w-8', height: 'h-8'}) : ( loading ? skeleton({ width: 'w-10', height: 'h-5' }) : (
<svg className="animate-bounce w-4 h-4" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor"> <a
<path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> href={`https://github.com/${config.githubUsername}?tab=repositories`}
</svg> target="_blank"
rel="noreferrer"
className="opacity-50"
>
See All
</a>
) )
} }
</div> </div>

3
src/components/ThemeChanger.js
View File

@@ -2,7 +2,6 @@ import { useDispatch, useSelector } from 'react-redux';
import { setTheme } from '../store/slices/themeSlice'; import { setTheme } from '../store/slices/themeSlice';
import config from '../config'; import config from '../config';
import { skeleton } from '../helpers/utils'; import { skeleton } from '../helpers/utils';
import { memo } from 'react';
import { AiOutlineControl } from 'react-icons/ai'; import { AiOutlineControl } from 'react-icons/ai';
const ThemeChanger = () => { const ThemeChanger = () => {
@@ -71,4 +70,4 @@ const ThemeChanger = () => {
) )
} }
export default memo(ThemeChanger); export default ThemeChanger;

10
src/index.scss
View File

@@ -53,13 +53,9 @@ svg {
.z-hover:focus, .z-hover:focus,
.z-hover:active { .z-hover:active {
transition: transform 0.3s !important; transition: transform 0.3s !important;
-ms-transform: scale(1.03) !important; -ms-transform: scale(1.01) !important;
-webkit-transform: scale(1.03) !important; -webkit-transform: scale(1.01) !important;
transform: scale(1.03) !important; transform: scale(1.01) !important;
}
.d-unset {
display: unset !important;
} }
.pb-0-important { .pb-0-important {