Decide if the card should be displayed at higher level
This commit is contained in:
Ariful Alam
parent
c5318da457
commit
034dbe0d2c
@ -59,46 +59,40 @@ const CertificationCard = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{certifications?.length !== 0 && (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Certification
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="text-base-content text-opacity-60">
|
||||
<ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
|
||||
{loading ? (
|
||||
renderSkeleton()
|
||||
) : (
|
||||
<>
|
||||
{certifications.map((certification, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
year={`${certification.year}`}
|
||||
name={certification.name}
|
||||
body={certification.body}
|
||||
link={
|
||||
certification.link ? certification.link : undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Certification
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<div className="text-base-content text-opacity-60">
|
||||
<ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
|
||||
{loading ? (
|
||||
renderSkeleton()
|
||||
) : (
|
||||
<>
|
||||
{certifications.map((certification, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
year={`${certification.year}`}
|
||||
name={certification.name}
|
||||
body={certification.body}
|
||||
link={certification.link ? certification.link : undefined}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -53,43 +53,37 @@ const EducationCard = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{educations?.length !== 0 && (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Education
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="text-base-content text-opacity-60">
|
||||
<ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
|
||||
{loading ? (
|
||||
renderSkeleton()
|
||||
) : (
|
||||
<>
|
||||
{educations.map((item, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
time={`${item.from} - ${item.to}`}
|
||||
degree={item.degree}
|
||||
institution={item.institution}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">Education</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<div className="text-base-content text-opacity-60">
|
||||
<ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
|
||||
{loading ? (
|
||||
renderSkeleton()
|
||||
) : (
|
||||
<>
|
||||
{educations.map((item, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
time={`${item.from} - ${item.to}`}
|
||||
degree={item.degree}
|
||||
institution={item.institution}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -58,48 +58,42 @@ const ExperienceCard = ({
|
||||
return array;
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{experiences?.length !== 0 && (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Experience
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="text-base-content text-opacity-60">
|
||||
<ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
|
||||
{loading ? (
|
||||
renderSkeleton()
|
||||
) : (
|
||||
<Fragment>
|
||||
{experiences.map((experience, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
time={`${experience.from} - ${experience.to}`}
|
||||
position={experience.position}
|
||||
company={experience.company}
|
||||
companyLink={
|
||||
experience.companyLink
|
||||
? experience.companyLink
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">Experience</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<div className="text-base-content text-opacity-60">
|
||||
<ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
|
||||
{loading ? (
|
||||
renderSkeleton()
|
||||
) : (
|
||||
<Fragment>
|
||||
{experiences.map((experience, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
time={`${experience.from} - ${experience.to}`}
|
||||
position={experience.position}
|
||||
company={experience.company}
|
||||
companyLink={
|
||||
experience.companyLink
|
||||
? experience.companyLink
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
)}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -217,22 +217,30 @@ const GitProfile = ({ config }: { config: Config }) => {
|
||||
github={sanitizedConfig.github}
|
||||
social={sanitizedConfig.social}
|
||||
/>
|
||||
<SkillCard
|
||||
loading={loading}
|
||||
skills={sanitizedConfig.skills}
|
||||
/>
|
||||
<ExperienceCard
|
||||
loading={loading}
|
||||
experiences={sanitizedConfig.experiences}
|
||||
/>
|
||||
<CertificationCard
|
||||
loading={loading}
|
||||
certifications={sanitizedConfig.certifications}
|
||||
/>
|
||||
<EducationCard
|
||||
loading={loading}
|
||||
educations={sanitizedConfig.educations}
|
||||
/>
|
||||
{sanitizedConfig.skills.length !== 0 && (
|
||||
<SkillCard
|
||||
loading={loading}
|
||||
skills={sanitizedConfig.skills}
|
||||
/>
|
||||
)}
|
||||
{sanitizedConfig.experiences.length !== 0 && (
|
||||
<ExperienceCard
|
||||
loading={loading}
|
||||
experiences={sanitizedConfig.experiences}
|
||||
/>
|
||||
)}
|
||||
{sanitizedConfig.certifications.length !== 0 && (
|
||||
<CertificationCard
|
||||
loading={loading}
|
||||
certifications={sanitizedConfig.certifications}
|
||||
/>
|
||||
)}
|
||||
{sanitizedConfig.educations.length !== 0 && (
|
||||
<EducationCard
|
||||
loading={loading}
|
||||
educations={sanitizedConfig.educations}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-2 col-span-1">
|
||||
|
||||
@ -21,39 +21,33 @@ const SkillCard = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{skills?.length !== 0 && (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">
|
||||
Tech Stack
|
||||
</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="p-3 flow-root">
|
||||
<div className="-m-1 flex flex-wrap justify-center">
|
||||
{loading
|
||||
? renderSkeleton()
|
||||
: skills.map((skill, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="m-1 text-xs inline-flex items-center font-bold leading-sm px-3 py-1 badge-primary bg-opacity-90 rounded-full"
|
||||
>
|
||||
{skill}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="mx-3">
|
||||
<h5 className="card-title">
|
||||
{loading ? (
|
||||
skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
|
||||
) : (
|
||||
<span className="text-base-content opacity-70">Tech Stack</span>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="p-3 flow-root">
|
||||
<div className="-m-1 flex flex-wrap justify-center">
|
||||
{loading
|
||||
? renderSkeleton()
|
||||
: skills.map((skill, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="m-1 text-xs inline-flex items-center font-bold leading-sm px-3 py-1 badge-primary bg-opacity-90 rounded-full"
|
||||
>
|
||||
{skill}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user