mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-17 02:01:29 +10:00
add enable/disable checkbox, and heading modifier
This commit is contained in:
Amruth Pillai
@ -38,133 +38,178 @@ const Onyx = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 text-xs">
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
phone
|
||||
</span>
|
||||
<span className="font-medium">{data.profile.phone}</span>
|
||||
</div>
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
language
|
||||
</span>
|
||||
<span className="font-medium">{data.profile.website}</span>
|
||||
</div>
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
alternate_email
|
||||
</span>
|
||||
<span className="font-medium">{data.profile.email}</span>
|
||||
</div>
|
||||
{data.profile.phone && (
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
phone
|
||||
</span>
|
||||
<span className="font-medium">{data.profile.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
{data.profile.website && (
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
language
|
||||
</span>
|
||||
<span className="font-medium">{data.profile.website}</span>
|
||||
</div>
|
||||
)}
|
||||
{data.profile.email && (
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
alternate_email
|
||||
</span>
|
||||
<span className="font-medium">{data.profile.email}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-6" />
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.objective.heading}
|
||||
</h6>
|
||||
<p className="text-sm">{data.objective.body}</p>
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.work.heading}
|
||||
</h6>
|
||||
{data.work.items.map(exp => (
|
||||
<div key={exp.title} className="mt-3">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<h6 className="font-semibold">{exp.title}</h6>
|
||||
<p className="text-xs">{exp.role}</p>
|
||||
</div>
|
||||
<span className="text-xs font-medium">
|
||||
({exp.start} - {exp.end})
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{exp.description}</p>
|
||||
{data.objective.enable && (
|
||||
<div>
|
||||
<h6
|
||||
className="text-xs font-bold uppercase mt-6 mb-2"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{data.objective.heading}
|
||||
</h6>
|
||||
<p className="text-sm">{data.objective.body}</p>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.education.heading}
|
||||
</h6>
|
||||
{data.education.items.map(edu => (
|
||||
<div key={edu.name} className="mt-3">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<h6 className="font-semibold">{edu.name}</h6>
|
||||
<p className="text-xs">{edu.major}</p>
|
||||
{data.work.enable && (
|
||||
<div>
|
||||
<h6
|
||||
className="text-xs font-bold uppercase mt-6 mb-2"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{data.work.heading}
|
||||
</h6>
|
||||
{data.work.items.map(exp => (
|
||||
<div key={exp.title} className="mt-3">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<h6 className="font-semibold">{exp.title}</h6>
|
||||
<p className="text-xs">{exp.role}</p>
|
||||
</div>
|
||||
<span className="text-xs font-medium">
|
||||
({exp.start} - {exp.end})
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{exp.description}</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-sm font-bold">{edu.grade}</span>
|
||||
<span className="text-xs font-medium">
|
||||
({edu.start} - {edu.end})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{edu.description}</p>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
|
||||
{data.education.enable && (
|
||||
<div>
|
||||
<h6
|
||||
className="text-xs font-bold uppercase mt-6 mb-2"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{data.education.heading}
|
||||
</h6>
|
||||
{data.education.items.map(edu => (
|
||||
<div key={edu.name} className="mt-3">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<h6 className="font-semibold">{edu.name}</h6>
|
||||
<p className="text-xs">{edu.major}</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-sm font-bold">{edu.grade}</span>
|
||||
<span className="text-xs font-medium">
|
||||
({edu.start} - {edu.end})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{edu.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2">
|
||||
{data.awards.enable && (
|
||||
<div>
|
||||
<h6
|
||||
className="text-xs font-bold uppercase mt-6 mb-2"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{data.awards.heading}
|
||||
</h6>
|
||||
{data.awards.items.map(x => (
|
||||
<div key={x.title} className="mt-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.certifications.enable && (
|
||||
<div>
|
||||
<h6
|
||||
className="text-xs font-bold uppercase mt-6 mb-2"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{data.certifications.heading}
|
||||
</h6>
|
||||
{data.certifications.items.map(x => (
|
||||
<div key={x.title} className="mt-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{data.skills.enable && (
|
||||
<div>
|
||||
<h6
|
||||
className="text-xs font-bold uppercase mt-6 mb-2"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{data.awards.heading}
|
||||
{data.skills.heading}
|
||||
</h6>
|
||||
{data.awards.items.map(x => (
|
||||
<div key={x.title} className="mt-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
</div>
|
||||
))}
|
||||
<div className="mt-1 flex flex-wrap">
|
||||
{data.skills.items.map(x => (
|
||||
<span
|
||||
key={x}
|
||||
className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
|
||||
style={{ backgroundColor: theme.colors.body, color: theme.colors.background }}
|
||||
>
|
||||
{x}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.extras.enable && (
|
||||
<div>
|
||||
<h6
|
||||
className="text-xs font-bold uppercase mt-6 mb-2"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{data.certifications.heading}
|
||||
{data.extras.heading}
|
||||
</h6>
|
||||
{data.certifications.items.map(x => (
|
||||
<div key={x.title} className="mt-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
</div>
|
||||
))}
|
||||
<table className="w-2/3 table-auto">
|
||||
<tbody>
|
||||
{data.extras.items.map(x => (
|
||||
<tr key={x.key}>
|
||||
<td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
|
||||
<td className="border px-4 py-2 text-sm">{x.value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.skills.heading}
|
||||
</h6>
|
||||
<div className="mt-1 flex flex-wrap">
|
||||
{data.skills.items.map(x => (
|
||||
<span
|
||||
key={x}
|
||||
className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
|
||||
style={{ backgroundColor: theme.colors.body, color: theme.colors.background }}
|
||||
>
|
||||
{x}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{data.extras.heading}
|
||||
</h6>
|
||||
<table className="w-2/3 table-auto">
|
||||
<tbody>
|
||||
{data.extras.items.map(x => (
|
||||
<tr key={x.key}>
|
||||
<td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
|
||||
<td className="border px-4 py-2 text-sm">{x.value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user