Update layout
This commit is contained in:
MD. Ariful Alam
parent
3924ed3288
commit
29da6b59a9
20
src/App.js
20
src/App.js
@ -14,6 +14,7 @@ import Experience from "./components/Experience";
|
||||
import Education from "./components/Education";
|
||||
import Project from "./components/Project";
|
||||
import { setRepo } from "./store/slices/repoSlice";
|
||||
import Blog from "./components/Blog";
|
||||
|
||||
function App() {
|
||||
const dispatch = useDispatch();
|
||||
@ -29,11 +30,10 @@ function App() {
|
||||
}, [theme])
|
||||
|
||||
useEffect(() => {
|
||||
loadProfile();
|
||||
loadRepo();
|
||||
loadData();
|
||||
}, [])
|
||||
|
||||
const loadProfile = () => {
|
||||
const loadData = () => {
|
||||
axios.get(`https://api.github.com/users/${config.githubUsername}`)
|
||||
.then(response => {
|
||||
let data = response.data;
|
||||
@ -49,6 +49,9 @@ function App() {
|
||||
|
||||
dispatch(setProfile(profileData));
|
||||
})
|
||||
.then(() => {
|
||||
loadRepo();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
|
||||
@ -75,8 +78,6 @@ function App() {
|
||||
}
|
||||
|
||||
const loadRepo = () => {
|
||||
dispatch(setLoading(true));
|
||||
|
||||
axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`)
|
||||
.then(response => {
|
||||
let data = response.data;
|
||||
@ -96,10 +97,7 @@ function App() {
|
||||
} catch (error2) {
|
||||
console.error('Error:', error2);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
dispatch(setLoading(false));
|
||||
});;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
@ -148,12 +146,12 @@ function App() {
|
||||
<AvatarCard/>
|
||||
<Details/>
|
||||
<Skill/>
|
||||
<Experience/>
|
||||
<Education/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<Experience/>
|
||||
<Education/>
|
||||
<Project/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
24
src/components/Blog.js
Normal file
24
src/components/Blog.js
Normal 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;
|
||||
@ -10,13 +10,13 @@ const Education = () => {
|
||||
let array = [];
|
||||
for (let index = 0; index < 2; index++) {
|
||||
array.push((
|
||||
<li>
|
||||
<li key={index}>
|
||||
<span className="d-unset">
|
||||
<div class="block md:flex justify-between">
|
||||
<div class="font-medium">
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium">
|
||||
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
<div class="opacity-80">
|
||||
<div className="opacity-80">
|
||||
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
</div>
|
||||
@ -35,7 +35,7 @@ const Education = () => {
|
||||
<>
|
||||
{
|
||||
(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">
|
||||
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
|
||||
<li>
|
||||
@ -48,13 +48,13 @@ const Education = () => {
|
||||
{
|
||||
loading ? renderSkeleton() : (
|
||||
config.education.map((item, index) => (
|
||||
<li>
|
||||
<li key={index}>
|
||||
<span className="d-unset">
|
||||
<div class="block md:flex justify-between">
|
||||
<div class="font-medium">
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium">
|
||||
{item.institution}
|
||||
</div>
|
||||
<div class="opacity-80">
|
||||
<div className="opacity-80">
|
||||
{item.from} - {item.to}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,13 +10,13 @@ const Experience = () => {
|
||||
let array = [];
|
||||
for (let index = 0; index < 2; index++) {
|
||||
array.push((
|
||||
<li>
|
||||
<li key={index}>
|
||||
<span className="d-unset">
|
||||
<div class="block md:flex justify-between">
|
||||
<div class="font-medium">
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium">
|
||||
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
<div class="opacity-80">
|
||||
<div className="opacity-80">
|
||||
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
|
||||
</div>
|
||||
</div>
|
||||
@ -35,7 +35,7 @@ const Experience = () => {
|
||||
<>
|
||||
{
|
||||
(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">
|
||||
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
|
||||
<li>
|
||||
@ -48,13 +48,13 @@ const Experience = () => {
|
||||
{
|
||||
loading ? renderSkeleton() : (
|
||||
config.experiences.map((experience, index) => (
|
||||
<li>
|
||||
<li key={index}>
|
||||
<span className="d-unset">
|
||||
<div class="block md:flex justify-between">
|
||||
<div class="font-medium">
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium">
|
||||
{experience.company}
|
||||
</div>
|
||||
<div class="opacity-80">
|
||||
<div className="opacity-80">
|
||||
{experience.from} - {experience.to}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,11 +14,11 @@ const Project = () => {
|
||||
|
||||
} else {
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
<p className="mb-8">{project.description}</p>
|
||||
@ -36,8 +36,8 @@ const Project = () => {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="col-span-2">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* <div className="col-span-2">
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="card-body">
|
||||
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
|
||||
@ -48,7 +48,7 @@ const Project = () => {
|
||||
</h5>
|
||||
{
|
||||
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>
|
||||
</svg>
|
||||
)
|
||||
@ -58,8 +58,8 @@ const Project = () => {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
</div> */}
|
||||
<div className="col-span-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{renderProjects()}
|
||||
</div>
|
||||
|
||||
@ -24,11 +24,11 @@ const Skill = () => {
|
||||
(typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<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() : (
|
||||
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}
|
||||
</div>
|
||||
))
|
||||
|
||||
@ -14,7 +14,7 @@ const ThemeChanger = () => {
|
||||
|
||||
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-row items-center space-x-4 card-body p-3">
|
||||
<div className="flex-1">
|
||||
<div className="section-title">
|
||||
<h5 className="card-title">
|
||||
@ -26,10 +26,10 @@ const ThemeChanger = () => {
|
||||
<div className="flex-0">
|
||||
{
|
||||
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) => (
|
||||
<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>
|
||||
|
||||
@ -8,7 +8,13 @@ module.exports = {
|
||||
'Laravel',
|
||||
'JavaScript',
|
||||
'React.js',
|
||||
'Node.js'
|
||||
'Node.js',
|
||||
'Tailwind',
|
||||
'Antd',
|
||||
'CSS',
|
||||
'Git',
|
||||
'Mysql',
|
||||
'Jquery',
|
||||
],
|
||||
experiences: [
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user