mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-15 17:21:35 +10:00
added markdown, organized templates, fixed email overflow issue in pikachu
This commit is contained in:
Amruth Pillai
@ -1,4 +1,6 @@
|
||||
import React, { useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import AppContext from '../../context/AppContext';
|
||||
import { hexToRgb } from '../../utils';
|
||||
|
||||
@ -9,6 +11,25 @@ const Gengar = () => {
|
||||
|
||||
const { r, g, b } = hexToRgb(theme.colors.accent);
|
||||
|
||||
const Photo = () =>
|
||||
data.profile.photo !== '' && (
|
||||
<img
|
||||
className="w-24 h-24 rounded-full mr-4 object-cover border-4"
|
||||
style={{
|
||||
borderColor: theme.colors.background,
|
||||
}}
|
||||
src={data.profile.photo}
|
||||
alt="Resume Photograph"
|
||||
/>
|
||||
);
|
||||
|
||||
const FullName = () => (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
|
||||
<h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ContactItem = ({ icon, value }) =>
|
||||
value && (
|
||||
<div className="flex items-center mb-3">
|
||||
@ -31,12 +52,28 @@ const Gengar = () => {
|
||||
<h6 className="font-bold text-xs uppercase tracking-wide mb-2">{title}</h6>
|
||||
);
|
||||
|
||||
const Objective = () =>
|
||||
data.objective.enable && (
|
||||
<div className="h-full flex flex-col justify-center items-start">
|
||||
<Heading title={data.objective.heading} />
|
||||
<ReactMarkdown className="text-sm" source={data.objective.body} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const SkillItem = x => (
|
||||
<li key={x} className="text-sm py-1">
|
||||
{x}
|
||||
</li>
|
||||
);
|
||||
|
||||
const Skills = () =>
|
||||
data.skills.enable && (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.skills.heading} />
|
||||
<ul>{data.skills.items.map(SkillItem)}</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const EducationItem = x => (
|
||||
<div key={x.name} className="mb-3">
|
||||
<div className="flex justify-between items-center">
|
||||
@ -59,14 +96,45 @@ const Gengar = () => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{x.description}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardCertificationItem = x => (
|
||||
const Education = () =>
|
||||
data.education.enable && (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.education.heading} />
|
||||
{data.education.items.map(EducationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const CertificationItem = x => (
|
||||
<div key={x.title} className="mb-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Certifications = () => (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.certifications.heading} />
|
||||
{data.certifications.items.map(CertificationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardItem = x => (
|
||||
<div key={x.title} className="mb-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Awards = () => (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.awards.heading} />
|
||||
{data.awards.items.map(AwardItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -81,10 +149,35 @@ const Gengar = () => {
|
||||
({x.start} - {x.end})
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{x.description}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Work = () =>
|
||||
data.work.enable && (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.work.heading} />
|
||||
{data.work.items.map(WorkItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const ExtraItem = 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>
|
||||
);
|
||||
|
||||
const Extras = () =>
|
||||
data.extras.enable && (
|
||||
<div>
|
||||
<Heading title={data.extras.heading} />
|
||||
<table className="table-auto">
|
||||
<tbody>{data.extras.items.map(ExtraItem)}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@ -99,20 +192,8 @@ const Gengar = () => {
|
||||
style={{ backgroundColor: theme.colors.accent, color: theme.colors.background }}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
{data.profile.photo !== '' && (
|
||||
<img
|
||||
className="w-24 h-24 rounded-full mr-4 object-cover border-4"
|
||||
style={{
|
||||
borderColor: theme.colors.background,
|
||||
}}
|
||||
src={data.profile.photo}
|
||||
alt="Resume Photograph"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
|
||||
<h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
|
||||
</div>
|
||||
<Photo />
|
||||
<FullName />
|
||||
</div>
|
||||
|
||||
<hr className="w-1/4 my-5 opacity-50" />
|
||||
@ -127,70 +208,23 @@ const Gengar = () => {
|
||||
className="col-span-3 px-6 py-8"
|
||||
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
|
||||
>
|
||||
{data.objective.enable && (
|
||||
<div className="h-full flex flex-col justify-center items-start">
|
||||
<Heading title={data.objective.heading} />
|
||||
<p className="text-sm whitespace-pre-wrap">{data.objective.body}</p>
|
||||
</div>
|
||||
)}
|
||||
<Objective />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="col-span-2 px-6 py-8"
|
||||
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
|
||||
>
|
||||
{data.skills.enable && (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.skills.heading} />
|
||||
<ul className="list-disc ml-5">{data.skills.items.map(SkillItem)}</ul>
|
||||
</div>
|
||||
)}
|
||||
<Skills />
|
||||
<Education />
|
||||
|
||||
{data.education.enable && (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.education.heading} />
|
||||
{data.education.items.map(EducationItem)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.certifications.enable && (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.certifications.heading} />
|
||||
{data.certifications.items.map(AwardCertificationItem)}
|
||||
</div>
|
||||
)}
|
||||
<Certifications />
|
||||
</div>
|
||||
|
||||
<div className="col-span-3 px-6 py-8">
|
||||
{data.work.enable && (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.work.heading} />
|
||||
{data.work.items.map(WorkItem)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.awards.enable && (
|
||||
<div className="mb-8">
|
||||
<Heading title={data.awards.heading} />
|
||||
{data.awards.items.map(AwardCertificationItem)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.extras.enable && (
|
||||
<div>
|
||||
<Heading title={data.extras.heading} />
|
||||
<table className="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>
|
||||
)}
|
||||
<Work />
|
||||
<Awards />
|
||||
<Extras />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import React, { useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import AppContext from '../../context/AppContext';
|
||||
|
||||
const Onyx = () => {
|
||||
@ -6,6 +8,174 @@ const Onyx = () => {
|
||||
const { state } = context;
|
||||
const { data, theme } = state;
|
||||
|
||||
const Photo = () =>
|
||||
data.profile.photo && (
|
||||
<img
|
||||
className="rounded object-cover mr-4"
|
||||
src={data.profile.photo}
|
||||
alt="Resume Photograph"
|
||||
style={{ width: '120px', height: '120px' }}
|
||||
/>
|
||||
);
|
||||
|
||||
const Profile = () => (
|
||||
<div>
|
||||
<h1 className="font-bold text-4xl" style={{ color: theme.colors.accent }}>
|
||||
{data.profile.firstName} {data.profile.lastName}
|
||||
</h1>
|
||||
<h6 className="font-medium text-sm">{data.profile.subtitle}</h6>
|
||||
|
||||
<div className="flex flex-col mt-4 text-xs">
|
||||
<span>{data.profile.address.line1}</span>
|
||||
<span>{data.profile.address.line2}</span>
|
||||
<span>{data.profile.address.line3}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ContactItem = ({ icon, value }) =>
|
||||
value && (
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
{icon}
|
||||
</span>
|
||||
<span className="font-medium">{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Heading = ({ title }) => (
|
||||
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
|
||||
{title}
|
||||
</h6>
|
||||
);
|
||||
|
||||
const Objective = () =>
|
||||
data.objective.enable && (
|
||||
<div>
|
||||
<Heading title={data.objective.heading} />
|
||||
<ReactMarkdown className="text-sm" source={data.objective.body} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const WorkItem = x => (
|
||||
<div key={x.title} className="mt-3">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.role}</p>
|
||||
</div>
|
||||
<span className="text-xs font-medium">
|
||||
({x.start} - {x.end})
|
||||
</span>
|
||||
</div>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Work = () =>
|
||||
data.work.enable && (
|
||||
<div>
|
||||
<Heading title={data.work.heading} />
|
||||
{data.work.items.map(WorkItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const EducationItem = x => (
|
||||
<div key={x.name} className="mt-3">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<h6 className="font-semibold">{x.name}</h6>
|
||||
<p className="text-xs">{x.major}</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-sm font-bold">{x.grade}</span>
|
||||
<span className="text-xs font-medium">
|
||||
({x.start} - {x.end})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Education = () =>
|
||||
data.education.enable && (
|
||||
<div>
|
||||
<Heading title={data.education.heading} />
|
||||
{data.education.items.map(EducationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardItem = x => (
|
||||
<div key={x.title} className="mt-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Awards = () =>
|
||||
data.awards.enable && (
|
||||
<div>
|
||||
<Heading title={data.awards.heading} />
|
||||
{data.awards.items.map(AwardItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const CertificationItem = x => (
|
||||
<div key={x.title} className="mt-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Certifications = () =>
|
||||
data.certifications.enable && (
|
||||
<div>
|
||||
<Heading title={data.certifications.heading} />
|
||||
{data.certifications.items.map(CertificationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const SkillItem = x => (
|
||||
<span
|
||||
key={x}
|
||||
className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
|
||||
style={{
|
||||
backgroundColor: theme.colors.primary,
|
||||
color: theme.colors.background,
|
||||
}}
|
||||
>
|
||||
{x}
|
||||
</span>
|
||||
);
|
||||
|
||||
const Skills = () =>
|
||||
data.skills.enable && (
|
||||
<div>
|
||||
<Heading title={data.skills.heading} />
|
||||
<div className="mt-1 flex flex-wrap">{data.skills.items.map(SkillItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ExtraItem = 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>
|
||||
);
|
||||
|
||||
const Extras = () =>
|
||||
data.extras.enable && (
|
||||
<div>
|
||||
<Heading title={data.extras.heading} />
|
||||
<table className="w-2/3 table-auto">
|
||||
<tbody>{data.extras.items.map(ExtraItem)}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@ -16,203 +186,30 @@ const Onyx = () => {
|
||||
>
|
||||
<div className="grid grid-cols-4 items-center">
|
||||
<div className="col-span-3 flex items-center">
|
||||
{data.profile.photo && (
|
||||
<img
|
||||
className="rounded object-cover mr-4"
|
||||
src={data.profile.photo}
|
||||
alt="Resume Photograph"
|
||||
style={{ width: '120px', height: '120px' }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="font-bold text-4xl" style={{ color: theme.colors.accent }}>
|
||||
{data.profile.firstName} {data.profile.lastName}
|
||||
</h1>
|
||||
<h6 className="font-medium text-sm">{data.profile.subtitle}</h6>
|
||||
|
||||
<div className="flex flex-col mt-4 text-xs">
|
||||
<span>{data.profile.address.line1}</span>
|
||||
<span>{data.profile.address.line2}</span>
|
||||
<span>{data.profile.address.line3}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Photo />
|
||||
<Profile />
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 text-xs">
|
||||
{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>
|
||||
)}
|
||||
<ContactItem icon="phone" value={data.profile.phone} />
|
||||
<ContactItem icon="language" value={data.profile.website} />
|
||||
<ContactItem icon="alternate_email" value={data.profile.email} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-6" />
|
||||
|
||||
{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>
|
||||
)}
|
||||
|
||||
{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>
|
||||
)}
|
||||
|
||||
{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>
|
||||
)}
|
||||
<Objective />
|
||||
<Work />
|
||||
<Education />
|
||||
|
||||
<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>
|
||||
)}
|
||||
<Awards />
|
||||
<Certifications />
|
||||
</div>
|
||||
|
||||
{data.skills.enable && (
|
||||
<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.primary,
|
||||
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.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>
|
||||
)}
|
||||
<Skills />
|
||||
<Extras />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import React, { useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import AppContext from '../../context/AppContext';
|
||||
|
||||
const Pikachu = () => {
|
||||
@ -6,7 +8,12 @@ const Pikachu = () => {
|
||||
const { state } = context;
|
||||
const { data, theme } = state;
|
||||
|
||||
const Photo = () => <img className="rounded-full object-cover" src={data.profile.photo} alt="" />;
|
||||
const Photo = () =>
|
||||
data.profile.photo !== '' && (
|
||||
<div className="self-center col-span-3">
|
||||
<img className="rounded-full object-cover" src={data.profile.photo} alt="" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Header = () => (
|
||||
<div
|
||||
@ -21,7 +28,7 @@ const Pikachu = () => {
|
||||
|
||||
<hr className="my-4 opacity-50" />
|
||||
|
||||
<div className="text-sm">{data.objective.body}</div>
|
||||
<ReactMarkdown className="text-sm" source={data.objective.body} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -32,11 +39,11 @@ const Pikachu = () => {
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
{icon}
|
||||
</span>
|
||||
<span className="font-medium">{value}</span>
|
||||
<span className="font-medium break-all">{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const SectionHeading = ({ title }) => (
|
||||
const Heading = ({ title }) => (
|
||||
<div
|
||||
className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
|
||||
style={{ color: theme.colors.accent, borderColor: theme.colors.accent }}
|
||||
@ -54,6 +61,13 @@ const Pikachu = () => {
|
||||
</span>
|
||||
);
|
||||
|
||||
const Skills = () => (
|
||||
<div>
|
||||
<Heading title={data.skills.heading} />
|
||||
<div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ExtraItem = x => (
|
||||
<div key={x.key} className="text-sm my-1">
|
||||
<h6 className="text-xs font-bold">{x.key}</h6>
|
||||
@ -61,6 +75,14 @@ const Pikachu = () => {
|
||||
</div>
|
||||
);
|
||||
|
||||
const Extras = () =>
|
||||
data.extras.enable && (
|
||||
<div>
|
||||
<Heading title={data.extras.heading} />
|
||||
<div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const WorkItem = x => (
|
||||
<div key={x.title} className="mb-3">
|
||||
<div className="flex justify-between items-center">
|
||||
@ -72,10 +94,18 @@ const Pikachu = () => {
|
||||
({x.start} - {x.end})
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{x.description}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Work = () =>
|
||||
data.work.enable && (
|
||||
<div>
|
||||
<Heading title={data.work.heading} />
|
||||
<div className="flex flex-col mb-4">{data.work.items.map(WorkItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const EducationItem = x => (
|
||||
<div key={x.name} className="mb-3">
|
||||
<div className="flex justify-between items-center">
|
||||
@ -92,17 +122,50 @@ const Pikachu = () => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm">{x.description}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardCertificationItem = x => (
|
||||
const Education = () =>
|
||||
data.education.enable && (
|
||||
<div>
|
||||
<Heading title={data.education.heading} />
|
||||
<div className="flex flex-col mb-4">{data.education.items.map(EducationItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardItem = x => (
|
||||
<div key={x.title} className="mb-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Awards = () =>
|
||||
data.awards.enable && (
|
||||
<div>
|
||||
<Heading title={data.awards.heading} />
|
||||
<div className="flex flex-col mb-2">{data.awards.items.map(AwardItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CertificationItem = x => (
|
||||
<div key={x.title} className="mb-3">
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs">{x.subtitle}</p>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Certifications = () =>
|
||||
data.certifications.enable && (
|
||||
<div>
|
||||
<Heading title={data.certifications.heading} />
|
||||
<div className="flex flex-col mb-2">{data.certifications.items.map(CertificationItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@ -111,18 +174,14 @@ const Pikachu = () => {
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-8 col-gap-6 row-gap-8">
|
||||
{data.profile.photo !== '' && (
|
||||
<div className="self-center col-span-2">
|
||||
<Photo />
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-12 col-gap-6 row-gap-8">
|
||||
<Photo />
|
||||
|
||||
<div className={`${data.profile.photo !== '' ? 'col-span-6' : 'col-span-8'}`}>
|
||||
<div className={`${data.profile.photo !== '' ? 'col-span-9' : 'col-span-12'}`}>
|
||||
<Header />
|
||||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<div className="col-span-3 overflow-hidden">
|
||||
<div className="text-sm mb-6">
|
||||
<ContactItem icon="phone" value={data.profile.phone} />
|
||||
<ContactItem icon="language" value={data.profile.website} />
|
||||
@ -130,53 +189,15 @@ const Pikachu = () => {
|
||||
<ContactItem icon="location_on" value={data.profile.address.line3} />
|
||||
</div>
|
||||
|
||||
{data.skills.enable && (
|
||||
<div>
|
||||
<SectionHeading title={data.skills.heading} />
|
||||
<div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.extras.enable && (
|
||||
<div>
|
||||
<SectionHeading title={data.extras.heading} />
|
||||
<div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
|
||||
</div>
|
||||
)}
|
||||
<Skills />
|
||||
<Extras />
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
{data.work.enable && (
|
||||
<div>
|
||||
<SectionHeading title={data.work.heading} />
|
||||
<div className="flex flex-col mb-4">{data.work.items.map(WorkItem)}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.education.enable && (
|
||||
<div>
|
||||
<SectionHeading title={data.education.heading} />
|
||||
<div className="flex flex-col mb-4">{data.education.items.map(EducationItem)}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.awards.enable && (
|
||||
<div>
|
||||
<SectionHeading title={data.awards.heading} />
|
||||
<div className="flex flex-col mb-4">
|
||||
{data.awards.items.map(AwardCertificationItem)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.certifications.enable && (
|
||||
<div>
|
||||
<SectionHeading title={data.certifications.heading} />
|
||||
<div className="flex flex-col mb-4">
|
||||
{data.certifications.items.map(AwardCertificationItem)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-span-9">
|
||||
<Work />
|
||||
<Education />
|
||||
<Awards />
|
||||
<Certifications />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user