Refactor section
This commit is contained in:
MD. Ariful Alam
parent
1f14db6b83
commit
7e890a7453
@ -39,8 +39,7 @@ function App() {
|
||||
name: data.name,
|
||||
bio: data.bio,
|
||||
location: data.location,
|
||||
company: data.company,
|
||||
twitter: data.twitter_username,
|
||||
company: data.company
|
||||
}
|
||||
|
||||
dispatch(setProfile(profileData));
|
||||
|
||||
@ -45,7 +45,7 @@ const AvatarCard = () => {
|
||||
<div className="mt-3 text-base-content text-opacity-60">
|
||||
{
|
||||
loading ? (
|
||||
skeleton({ width: 'w-48', height: 'h-5', className: 'mt-4' })
|
||||
skeleton({ width: 'w-48', height: 'h-5' })
|
||||
) : profile.bio
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { GoLocation } from 'react-icons/go';
|
||||
import { AiFillGithub } from 'react-icons/ai';
|
||||
import { MdLocationOn, MdMail } from 'react-icons/md';
|
||||
import { AiFillGithub, AiFillMediumSquare } from 'react-icons/ai';
|
||||
import { SiTwitter } from 'react-icons/si';
|
||||
import { BiBuilding } from 'react-icons/bi';
|
||||
import { GrLinkedinOption, GrMail } from 'react-icons/gr';
|
||||
import { ImDribbble } from 'react-icons/im';
|
||||
import { GrLinkedinOption } from 'react-icons/gr';
|
||||
import { CgDribbble } from 'react-icons/cg';
|
||||
import { FaBehanceSquare, FaBuilding, FaDev, FaFacebook, FaGlobe } from 'react-icons/fa';
|
||||
import { useSelector } from 'react-redux';
|
||||
import config from '../config';
|
||||
import { skeleton } from '../helpers/utils';
|
||||
@ -18,8 +18,8 @@ const Details = () => {
|
||||
array.push((
|
||||
<li key={index}>
|
||||
<span>
|
||||
{skeleton({width: 'w-6', height: 'h-4', className: 'mr-2'})}
|
||||
{skeleton({width: 'w-32', height: 'h-4'})}
|
||||
{skeleton({ width: 'w-6', height: 'h-4', className: 'mr-2' })}
|
||||
{skeleton({ width: 'w-32', height: 'h-4' })}
|
||||
</span>
|
||||
</li>
|
||||
))
|
||||
@ -31,7 +31,7 @@ const Details = () => {
|
||||
return (
|
||||
<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 text-opacity-60">
|
||||
{
|
||||
loading ? renderSkeleton() : (
|
||||
<>
|
||||
@ -39,7 +39,7 @@ const Details = () => {
|
||||
profile && profile.location && (
|
||||
<li>
|
||||
<span>
|
||||
<GoLocation className="mr-2"/>
|
||||
<MdLocationOn className="mr-2" />
|
||||
{profile.location}
|
||||
</span>
|
||||
</li>
|
||||
@ -49,7 +49,7 @@ const Details = () => {
|
||||
profile && profile.company && (
|
||||
<li>
|
||||
<span>
|
||||
<BiBuilding className="mr-2"/>
|
||||
<FaBuilding className="mr-2" />
|
||||
{profile.company}
|
||||
</span>
|
||||
</li>
|
||||
@ -57,7 +57,7 @@ const Details = () => {
|
||||
}
|
||||
<li>
|
||||
<span>
|
||||
<AiFillGithub className="mr-2"/>
|
||||
<AiFillGithub className="mr-2" />
|
||||
<a
|
||||
href={`https://github.com/${config.githubUsername}`}
|
||||
target="_blank"
|
||||
@ -69,68 +69,153 @@ const Details = () => {
|
||||
</span>
|
||||
</li>
|
||||
{
|
||||
profile && profile.twitter && (
|
||||
typeof config.social.linkedin !== 'undefined' && config.social.linkedin && (
|
||||
<li>
|
||||
<span>
|
||||
<SiTwitter className="mr-2"/>
|
||||
<GrLinkedinOption className="mr-2" />
|
||||
<a
|
||||
href={`https://twitter.com/${profile.twitter}`}
|
||||
href={`https://www.linkedin.com/in/${config.social.linkedin}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content-important"
|
||||
>
|
||||
{profile.twitter}
|
||||
{config.social.linkedin}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
typeof config.linkedinUsername !== 'undefined' && config.linkedinUsername && (
|
||||
typeof config.social.twitter !== 'undefined' && config.social.twitter && (
|
||||
<li>
|
||||
<span>
|
||||
<GrLinkedinOption className="mr-2"/>
|
||||
<SiTwitter className="mr-2" />
|
||||
<a
|
||||
href={`https://www.linkedin.com/in/${config.linkedinUsername}`}
|
||||
href={`https://twitter.com/${config.social.twitter}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content-important"
|
||||
>
|
||||
{config.linkedinUsername}
|
||||
{config.social.twitter}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
typeof config.dribbbleUsername !== 'undefined' && config.dribbbleUsername && (
|
||||
typeof config.social.dribbble !== 'undefined' && config.social.dribbble && (
|
||||
<li>
|
||||
<span>
|
||||
<ImDribbble className="mr-2"/>
|
||||
<CgDribbble className="mr-2" />
|
||||
<a
|
||||
href={`https://dribbble.com/${config.dribbbleUsername}`}
|
||||
href={`https://dribbble.com/${config.social.dribbble}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content-important"
|
||||
>
|
||||
{config.dribbbleUsername}
|
||||
{config.social.dribbble}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
typeof config.email !== 'undefined' && config.email && (
|
||||
typeof config.social.behance !== 'undefined' && config.social.behance && (
|
||||
<li>
|
||||
<span>
|
||||
<GrMail className="mr-2"/>
|
||||
<FaBehanceSquare className="mr-2" />
|
||||
<a
|
||||
href={`mailto:${config.email}`}
|
||||
href={`https://www.behance.net/${config.social.behance}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content-important"
|
||||
>
|
||||
{config.email}
|
||||
{config.social.behance}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
typeof config.social.facebook !== 'undefined' && config.social.facebook && (
|
||||
<li>
|
||||
<span>
|
||||
<FaFacebook className="mr-2" />
|
||||
<a
|
||||
href={`https://www.facebook.com/${config.social.facebook}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content-important"
|
||||
>
|
||||
{config.social.facebook}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
typeof config.social.medium !== 'undefined' && config.social.medium && (
|
||||
<li>
|
||||
<span>
|
||||
<AiFillMediumSquare className="mr-2" />
|
||||
<a
|
||||
href={`https://medium.com/@${config.social.medium}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content-important"
|
||||
>
|
||||
{config.social.medium}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
typeof config.social.devto !== 'undefined' && config.social.devto && (
|
||||
<li>
|
||||
<span>
|
||||
<FaDev className="mr-2" />
|
||||
<a
|
||||
href={`https://dev.to/${config.social.devto}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content-important"
|
||||
>
|
||||
{config.social.devto}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
typeof config.social.website !== 'undefined' && config.social.website && (
|
||||
<li>
|
||||
<span>
|
||||
<FaGlobe className="mr-2" />
|
||||
<a
|
||||
href={`${config.social.website}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content-important"
|
||||
>
|
||||
{config.social.website}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
typeof config.social.email !== 'undefined' && config.social.email && (
|
||||
<li>
|
||||
<span>
|
||||
<MdMail className="mr-2" />
|
||||
<a
|
||||
href={`mailto:${config.social.email}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-base-content-important"
|
||||
>
|
||||
{config.social.email}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
@ -36,11 +36,13 @@ const Experience = () => {
|
||||
(typeof config.experiences !== 'undefined' && config.experiences.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'}) : 'Experience'}
|
||||
{loading ? skeleton({width: 'w-32', height: 'h-8'}) : (
|
||||
<span className="opacity-70">Experience</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
</li>
|
||||
@ -50,14 +52,14 @@ const Experience = () => {
|
||||
<li key={index}>
|
||||
<span className="d-unset">
|
||||
<div className="block justify-between">
|
||||
<div className="font-medium">
|
||||
<div className="font-medium opacity-70">
|
||||
{experience.company}
|
||||
</div>
|
||||
<div className="opacity-90">
|
||||
<div className="opacity-50">
|
||||
{experience.from} - {experience.to}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="opacity-70">
|
||||
{experience.position}
|
||||
</div>
|
||||
</span>
|
||||
|
||||
@ -10,7 +10,7 @@ const Skill = () => {
|
||||
for (let index = 0; index < 12; index++) {
|
||||
array.push((
|
||||
<div key={index}>
|
||||
{skeleton({width: 'w-16', height: 'h-4'})}
|
||||
{skeleton({ width: 'w-16', height: 'h-4' })}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
@ -24,7 +24,7 @@ const Skill = () => {
|
||||
(typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="inline-flex gap-2 flex-wrap justify-center p-3">
|
||||
<div className="inline-flex gap-2 flex-wrap p-3">
|
||||
{
|
||||
loading ? renderSkeleton() : (
|
||||
config.skills.map((skill, index) => (
|
||||
|
||||
@ -1,12 +1,20 @@
|
||||
module.exports = {
|
||||
githubUsername: 'arifszn', // required
|
||||
email: 'contact@arifszn.com', // optional
|
||||
linkedinUsername: 'ariful-alam', // optional
|
||||
dribbbleUsername: '', // optional
|
||||
blog: {
|
||||
source: 'dev.to', // medium | dev.to
|
||||
username: 'arifszn',
|
||||
},
|
||||
social: {
|
||||
linkedin: 'ariful-alam',
|
||||
twitter: 'arif_swozon',
|
||||
facebook: '',
|
||||
dribbble: '',
|
||||
behance: '',
|
||||
medium: '',
|
||||
devto: '',
|
||||
website: 'https://www.arifszn.com',
|
||||
email: 'contact@arifszn.com'
|
||||
},
|
||||
skills: [
|
||||
'PHP',
|
||||
'Laravel',
|
||||
@ -65,7 +73,7 @@ module.exports = {
|
||||
// using user system preferences, instead of the hardcoded default
|
||||
respectPrefersColorScheme: true,
|
||||
|
||||
// Available themes
|
||||
// Available themes. To remove any theme, exclude from here.
|
||||
themes: [
|
||||
'light',
|
||||
'dark',
|
||||
|
||||
@ -58,17 +58,6 @@ svg {
|
||||
transform: scale(1.03) !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 700;
|
||||
font-size: .75rem;
|
||||
line-height: 1rem;
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
// text-transform: uppercase;
|
||||
--tw-text-opacity: 0.6;
|
||||
color: hsla(var(--bc)/var(--tw-text-opacity,1)) !important;
|
||||
}
|
||||
|
||||
.d-unset {
|
||||
display: unset !important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user