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

Decide if the card should be displayed at higher level

Browse Source
This commit is contained in:
Ariful Alam 2024-01-20 18:34:32 +06:00
parent c5318da457
commit 034dbe0d2c
5 changed files with 147 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/certification-card/index.tsx
View File

@ -59,46 +59,40 @@ const CertificationCard = ({
}; };
return ( return (
<> <div className="card shadow-lg compact bg-base-100">
{certifications?.length !== 0 && ( <div className="card-body">
<div className="card shadow-lg compact bg-base-100"> <div className="mx-3">
<div className="card-body"> <h5 className="card-title">
<div className="mx-3"> {loading ? (
<h5 className="card-title"> skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
{loading ? ( ) : (
skeleton({ widthCls: 'w-32', heightCls: 'h-8' }) <span className="text-base-content opacity-70">
) : ( Certification
<span className="text-base-content opacity-70"> </span>
Certification )}
</span> </h5>
)}
</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> </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>
); );
}; };

66
src/components/education-card/index.tsx
View File

@ -53,43 +53,37 @@ const EducationCard = ({
}; };
return ( return (
<> <div className="card shadow-lg compact bg-base-100">
{educations?.length !== 0 && ( <div className="card-body">
<div className="card shadow-lg compact bg-base-100"> <div className="mx-3">
<div className="card-body"> <h5 className="card-title">
<div className="mx-3"> {loading ? (
<h5 className="card-title"> skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
{loading ? ( ) : (
skeleton({ widthCls: 'w-32', heightCls: 'h-8' }) <span className="text-base-content opacity-70">Education</span>
) : ( )}
<span className="text-base-content opacity-70"> </h5>
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> </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>
); );
}; };

76
src/components/experience-card/index.tsx
View File

@ -58,48 +58,42 @@ const ExperienceCard = ({
return array; return array;
}; };
return ( return (
<> <div className="card shadow-lg compact bg-base-100">
{experiences?.length !== 0 && ( <div className="card-body">
<div className="card shadow-lg compact bg-base-100"> <div className="mx-3">
<div className="card-body"> <h5 className="card-title">
<div className="mx-3"> {loading ? (
<h5 className="card-title"> skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
{loading ? ( ) : (
skeleton({ widthCls: 'w-32', heightCls: 'h-8' }) <span className="text-base-content opacity-70">Experience</span>
) : ( )}
<span className="text-base-content opacity-70"> </h5>
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> </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>
); );
}; };

40
src/components/gitprofile.tsx
View File

@ -217,22 +217,30 @@ const GitProfile = ({ config }: { config: Config }) => {
github={sanitizedConfig.github} github={sanitizedConfig.github}
social={sanitizedConfig.social} social={sanitizedConfig.social}
/> />
<SkillCard {sanitizedConfig.skills.length !== 0 && (
loading={loading} <SkillCard
skills={sanitizedConfig.skills} loading={loading}
/> skills={sanitizedConfig.skills}
<ExperienceCard />
loading={loading} )}
experiences={sanitizedConfig.experiences} {sanitizedConfig.experiences.length !== 0 && (
/> <ExperienceCard
<CertificationCard loading={loading}
loading={loading} experiences={sanitizedConfig.experiences}
certifications={sanitizedConfig.certifications} />
/> )}
<EducationCard {sanitizedConfig.certifications.length !== 0 && (
loading={loading} <CertificationCard
educations={sanitizedConfig.educations} loading={loading}
/> certifications={sanitizedConfig.certifications}
/>
)}
{sanitizedConfig.educations.length !== 0 && (
<EducationCard
loading={loading}
educations={sanitizedConfig.educations}
/>
)}
</div> </div>
</div> </div>
<div className="lg:col-span-2 col-span-1"> <div className="lg:col-span-2 col-span-1">

56
src/components/skill-card/index.tsx
View File

@ -21,39 +21,33 @@ const SkillCard = ({
}; };
return ( return (
<> <div className="card shadow-lg compact bg-base-100">
{skills?.length !== 0 && ( <div className="card-body">
<div className="card shadow-lg compact bg-base-100"> <div className="mx-3">
<div className="card-body"> <h5 className="card-title">
<div className="mx-3"> {loading ? (
<h5 className="card-title"> skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
{loading ? ( ) : (
skeleton({ widthCls: 'w-32', heightCls: 'h-8' }) <span className="text-base-content opacity-70">Tech Stack</span>
) : ( )}
<span className="text-base-content opacity-70"> </h5>
Tech Stack </div>
</span> <div className="p-3 flow-root">
)} <div className="-m-1 flex flex-wrap justify-center">
</h5> {loading
</div> ? renderSkeleton()
<div className="p-3 flow-root"> : skills.map((skill, index) => (
<div className="-m-1 flex flex-wrap justify-center"> <div
{loading key={index}
? renderSkeleton() className="m-1 text-xs inline-flex items-center font-bold leading-sm px-3 py-1 badge-primary bg-opacity-90 rounded-full"
: skills.map((skill, index) => ( >
<div {skill}
key={index} </div>
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>
</div> </div>
)} </div>
</> </div>
); );
}; };