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

Update layout

Browse Source
This commit is contained in:
MD. Ariful Alam 2021-08-23 01:36:41 +06:00
parent 3924ed3288
commit 29da6b59a9
8 changed files with 70 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/App.js
View File

@ -14,6 +14,7 @@ import Experience from "./components/Experience";
import Education from "./components/Education"; import Education from "./components/Education";
import Project from "./components/Project"; import Project from "./components/Project";
import { setRepo } from "./store/slices/repoSlice"; import { setRepo } from "./store/slices/repoSlice";
import Blog from "./components/Blog";
function App() { function App() {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -29,11 +30,10 @@ function App() {
}, [theme]) }, [theme])
useEffect(() => { useEffect(() => {
loadProfile(); loadData();
loadRepo();
}, []) }, [])
const loadProfile = () => { const loadData = () => {
axios.get(`https://api.github.com/users/${config.githubUsername}`) axios.get(`https://api.github.com/users/${config.githubUsername}`)
.then(response => { .then(response => {
let data = response.data; let data = response.data;
@ -49,6 +49,9 @@ function App() {
dispatch(setProfile(profileData)); dispatch(setProfile(profileData));
}) })
.then(() => {
loadRepo();
})
.catch((error) => { .catch((error) => {
console.error('Error:', error); console.error('Error:', error);
@ -75,8 +78,6 @@ function App() {
} }
const loadRepo = () => { const loadRepo = () => {
dispatch(setLoading(true));
axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`) axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`)
.then(response => { .then(response => {
let data = response.data; let data = response.data;
@ -96,10 +97,7 @@ function App() {
} catch (error2) { } catch (error2) {
console.error('Error:', error2); console.error('Error:', error2);
} }
}) });
.finally(() => {
dispatch(setLoading(false));
});;
} }
return ( return (
@ -148,12 +146,12 @@ function App() {
<AvatarCard/> <AvatarCard/>
<Details/> <Details/>
<Skill/> <Skill/>
<Experience/>
<Education/>
</div> </div>
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<div className="grid grid-cols-1 gap-6"> <div className="grid grid-cols-1 gap-6">
<Experience/>
<Education/>
<Project/> <Project/>
</div> </div>
</div> </div>

24
src/components/Blog.js Normal file
View File

@ -0,0 +1,24 @@
import { useSelector } from "react-redux";
import { skeleton } from "../helpers/utils";
const { Fragment } = require("react")
const Blog = () => {
const loading = useSelector(state => state.loading);
return (
<div className="card shadow-lg compact side bg-base-100">
<div className="flex-row items-center space-x-4 card-body">
<div className="flex-1">
<div className="section-title">
<h5 className="card-title">
{loading ? skeleton({width: 'w-20', height: 'h-8'}) : 'Blog'}
</h5>
</div>
</div>
</div>
</div>
)
}
export default Blog;

18
src/components/Education.js
View File

@ -10,13 +10,13 @@ const Education = () => {
let array = []; let array = [];
for (let index = 0; index < 2; index++) { for (let index = 0; index < 2; index++) {
array.push(( array.push((
<li> <li key={index}>
<span className="d-unset"> <span className="d-unset">
<div class="block md:flex justify-between"> <div className="block justify-between">
<div class="font-medium"> <div className="font-medium">
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })} {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
</div> </div>
<div class="opacity-80"> <div className="opacity-80">
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })} {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
</div> </div>
</div> </div>
@ -35,7 +35,7 @@ const Education = () => {
<> <>
{ {
(typeof config.education !== 'undefined' && config.education.length !== 0) && ( (typeof config.education !== 'undefined' && config.education.length !== 0) && (
<div className="card shadow-lg compact side bg-base-100 col-span-1 lg:col-span-2"> <div className="card shadow-lg compact side 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-40">
<li> <li>
@ -48,13 +48,13 @@ const Education = () => {
{ {
loading ? renderSkeleton() : ( loading ? renderSkeleton() : (
config.education.map((item, index) => ( config.education.map((item, index) => (
<li> <li key={index}>
<span className="d-unset"> <span className="d-unset">
<div class="block md:flex justify-between"> <div className="block justify-between">
<div class="font-medium"> <div className="font-medium">
{item.institution} {item.institution}
</div> </div>
<div class="opacity-80"> <div className="opacity-80">
{item.from} - {item.to} {item.from} - {item.to}
</div> </div>
</div> </div>

18
src/components/Experience.js
View File

@ -10,13 +10,13 @@ const Experience = () => {
let array = []; let array = [];
for (let index = 0; index < 2; index++) { for (let index = 0; index < 2; index++) {
array.push(( array.push((
<li> <li key={index}>
<span className="d-unset"> <span className="d-unset">
<div class="block md:flex justify-between"> <div className="block justify-between">
<div class="font-medium"> <div className="font-medium">
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })} {skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
</div> </div>
<div class="opacity-80"> <div className="opacity-80">
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })} {skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
</div> </div>
</div> </div>
@ -35,7 +35,7 @@ const Experience = () => {
<> <>
{ {
(typeof config.experiences !== 'undefined' && config.experiences.length !== 0) && ( (typeof config.experiences !== 'undefined' && config.experiences.length !== 0) && (
<div className="card shadow-lg compact side bg-base-100 col-span-1 lg:col-span-2"> <div className="card shadow-lg compact side 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-40">
<li> <li>
@ -48,13 +48,13 @@ const Experience = () => {
{ {
loading ? renderSkeleton() : ( loading ? renderSkeleton() : (
config.experiences.map((experience, index) => ( config.experiences.map((experience, index) => (
<li> <li key={index}>
<span className="d-unset"> <span className="d-unset">
<div class="block md:flex justify-between"> <div className="block justify-between">
<div class="font-medium"> <div className="font-medium">
{experience.company} {experience.company}
</div> </div>
<div class="opacity-80"> <div className="opacity-80">
{experience.from} - {experience.to} {experience.from} - {experience.to}
</div> </div>
</div> </div>

14
src/components/Project.js
View File

@ -14,11 +14,11 @@ const Project = () => {
} else { } else {
return repo.slice(0, LIMIT).map((project, index) => ( return repo.slice(0, LIMIT).map((project, index) => (
<div className="card shadow-lg compact side bg-base-100"> <div className="card shadow-lg compact side bg-base-100" key={index}>
<div className="flex justify-between flex-col p-8"> <div className="flex justify-between flex-col p-8">
<div> <div>
<div className="flex items-center"> <div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
<span>{project.name}</span> <span>{project.name}</span>
</div> </div>
<p className="mb-8">{project.description}</p> <p className="mb-8">{project.description}</p>
@ -36,8 +36,8 @@ const Project = () => {
return ( return (
<Fragment> <Fragment>
<div className="col-span-1 lg:col-span-2"> <div className="col-span-1 lg:col-span-2">
<div class="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
<div class="col-span-2"> {/* <div className="col-span-2">
<div className="card shadow-lg compact side bg-base-100"> <div className="card shadow-lg compact side 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-40">
@ -48,7 +48,7 @@ const Project = () => {
</h5> </h5>
{ {
loading ? skeleton({width: 'w-8', height: 'h-8'}) : ( loading ? skeleton({width: 'w-8', height: 'h-8'}) : (
<svg class="animate-bounce w-4 h-4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"> <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> <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg> </svg>
) )
@ -58,8 +58,8 @@ const Project = () => {
</ul> </ul>
</div> </div>
</div> </div>
</div> </div> */}
<div class="col-span-2"> <div className="col-span-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{renderProjects()} {renderProjects()}
</div> </div>

4
src/components/Skill.js
View File

@ -24,11 +24,11 @@ const Skill = () => {
(typeof config.skills !== 'undefined' && config.skills.length !== 0) && ( (typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
<div className="card shadow-lg compact side bg-base-100"> <div className="card shadow-lg compact side bg-base-100">
<div className="card-body"> <div className="card-body">
<div className="inline-flex gap-2 flex-wrap justify-center"> <div className="inline-flex gap-2 flex-wrap justify-center p-3">
{ {
loading ? renderSkeleton() : ( loading ? renderSkeleton() : (
config.skills.map((skill, index) => ( config.skills.map((skill, index) => (
<div class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 badge-primary bg-opacity-75 rounded-full"> <div key={index} className="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 badge-primary bg-opacity-75 rounded-full">
{skill} {skill}
</div> </div>
)) ))

6
src/components/ThemeChanger.js
View File

@ -14,7 +14,7 @@ const ThemeChanger = () => {
return ( return (
<div className="card shadow-lg compact side bg-base-100"> <div className="card shadow-lg compact side bg-base-100">
<div className="flex-row items-center space-x-4 card-body"> <div className="flex-row items-center space-x-4 card-body p-3">
<div className="flex-1"> <div className="flex-1">
<div className="section-title"> <div className="section-title">
<h5 className="card-title"> <h5 className="card-title">
@ -26,10 +26,10 @@ const ThemeChanger = () => {
<div className="flex-0"> <div className="flex-0">
{ {
loading ? skeleton({width: 'w-28', height: 'h-10'}) : ( loading ? skeleton({width: 'w-28', height: 'h-10'}) : (
<select class="select w-full max-w-xs opacity-50" value={theme} onChange={handleChange}> <select className="select w-full max-w-xs opacity-50" value={theme} onChange={handleChange}>
{ {
config.themeConfig.themes.map((item, index) => ( config.themeConfig.themes.map((item, index) => (
<option className="capitalize text-base-content text-opacity-60" value={item}>{item === config.themeConfig.default ? 'Default' : item}</option> <option className="capitalize text-base-content text-opacity-60" value={item} key={index}>{item === config.themeConfig.default ? 'Default' : item}</option>
)) ))
} }
</select> </select>

8
src/config.js
View File

@ -8,7 +8,13 @@ module.exports = {
'Laravel', 'Laravel',
'JavaScript', 'JavaScript',
'React.js', 'React.js',
'Node.js' 'Node.js',
'Tailwind',
'Antd',
'CSS',
'Git',
'Mysql',
'Jquery',
], ],
experiences: [ experiences: [
{ {