mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-20 03:32:09 +10:00
clearing the slate
This commit is contained in:
Amruth Pillai
@ -1,311 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import AppContext from '../../context/AppContext';
|
||||
|
||||
const Castform = () => {
|
||||
const context = useContext(AppContext);
|
||||
const { state } = context;
|
||||
const { data, theme } = state;
|
||||
|
||||
const Photo = () =>
|
||||
data.profile.photo !== '' && (
|
||||
<div className="mt-5 ml-5">
|
||||
<img
|
||||
className="w-32 h-32 rounded-full"
|
||||
style={{
|
||||
borderWidth: 6,
|
||||
borderColor: theme.colors.background,
|
||||
}}
|
||||
src={data.profile.photo}
|
||||
alt="Profile Photograph"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const PersonalInformation = () => (
|
||||
<div className="pt-5 px-5">
|
||||
<h1 className="text-2xl font-bold">
|
||||
{data.profile.firstName} {data.profile.lastName}
|
||||
</h1>
|
||||
<h5>{data.profile.subtitle}</h5>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Heading = ({ title, light = false }) => (
|
||||
<div
|
||||
className={`py-2 my-4 ${light ? 'mx-5 border-t border-b border-gray-400' : ''}`}
|
||||
style={{ backgroundColor: light ? '' : 'rgba(0, 0, 0, 0.25)' }}
|
||||
>
|
||||
<h6 className={`${light ? '' : 'pl-5'} font-semibold`}>{title}</h6>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Address = () => (
|
||||
<div className="px-5 my-2">
|
||||
<h6 className="text-xs font-bold">Address</h6>
|
||||
<div className="text-sm">{data.profile.address.line1}</div>
|
||||
<div className="text-sm">{data.profile.address.line2}</div>
|
||||
<div className="text-sm">{data.profile.address.line3}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ContactItem = ({ title, value, link = '#' }) =>
|
||||
value && (
|
||||
<div className="px-5 my-2">
|
||||
<h6 className="text-xs font-bold">{title}</h6>
|
||||
<a href={link}>
|
||||
<div className="text-sm">{value}</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ContactInformation = () => (
|
||||
<div>
|
||||
<Heading title={data.profile.heading} />
|
||||
<Address />
|
||||
<ContactItem title="Phone" value={data.profile.phone} link={`tel:${data.profile.phone}`} />
|
||||
<ContactItem
|
||||
title="Email Address"
|
||||
value={data.profile.email}
|
||||
link={`mailto:${data.profile.email}`}
|
||||
/>
|
||||
<ContactItem
|
||||
title="Website"
|
||||
value={data.profile.website}
|
||||
link={`http://${data.profile.website}`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const SkillItem = x => (
|
||||
<li key={x.id} className="text-sm my-2">
|
||||
{x.skill}
|
||||
</li>
|
||||
);
|
||||
|
||||
const Skills = () =>
|
||||
data.skills &&
|
||||
data.skills.enable && (
|
||||
<div>
|
||||
<Heading title={data.skills.heading} />
|
||||
<ul className="list-none px-5">{data.skills.items.map(SkillItem)}</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const HobbyItem = x => (
|
||||
<li key={x.id} className="text-sm my-2">
|
||||
{x.hobby}
|
||||
</li>
|
||||
);
|
||||
|
||||
const Hobbies = () =>
|
||||
data.hobbies &&
|
||||
data.hobbies.enable && (
|
||||
<div>
|
||||
<Heading title={data.hobbies.heading} />
|
||||
<ul className="list-none px-5">{data.hobbies.items.map(HobbyItem)}</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Objective = () =>
|
||||
data.objective && data.objective.enable && <ReactMarkdown className="m-5 text-sm" source={data.objective.body} />;
|
||||
|
||||
const WorkItem = x => (
|
||||
<div key={x.id} className="my-3 px-5">
|
||||
<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 &&
|
||||
data.work.enable && (
|
||||
<div>
|
||||
<Heading light title={data.work.heading} />
|
||||
{data.work.items.filter(x => x.enable).map(WorkItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const ReferenceItem = x => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
<h6 className="text-sm font-medium">{x.name}</h6>
|
||||
<span className="text-xs">{x.position}</span>
|
||||
<span className="text-xs">{x.phone}</span>
|
||||
<span className="text-xs">{x.email}</span>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const References = () =>
|
||||
data.references &&
|
||||
data.references.enable && (
|
||||
<div>
|
||||
<Heading light title={data.references.heading} />
|
||||
<div className="grid grid-cols-2 gap-6 px-5">
|
||||
{data.references.items.filter(x => x.enable).map(ReferenceItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const LanguageItem = x => (
|
||||
<div key={x.id} className="flex flex-col my-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<h6 className="text-sm font-medium mb-1">{x.key}</h6>
|
||||
{x.level !== '' && <div className="font-bold text-sm">{x.level}</div>}
|
||||
</div>
|
||||
|
||||
{x.rating !== 0 && (
|
||||
<div className="relative h-5">
|
||||
<div
|
||||
className="absolute mb-1 inset-0"
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute mb-1 inset-0 rounded"
|
||||
style={{
|
||||
width: `${x.rating * 20}%`,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Languages = () =>
|
||||
data.languages &&
|
||||
data.languages.enable && (
|
||||
<div>
|
||||
<Heading title={data.languages.heading} />
|
||||
<div className="px-5 mb-6">
|
||||
{data.languages.items.filter(x => x.enable).map(LanguageItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const EducationItem = x => (
|
||||
<div key={x.id} className="my-3 px-5">
|
||||
<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 &&
|
||||
data.education.enable && (
|
||||
<div>
|
||||
<Heading light title={data.education.heading} />
|
||||
{data.education.items.filter(x => x.enable).map(EducationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardItem = x => (
|
||||
<div key={x.id} className="my-3 px-5">
|
||||
<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 &&
|
||||
data.awards.enable && (
|
||||
<div>
|
||||
<Heading light title={data.awards.heading} />
|
||||
{data.awards.items.filter(x => x.enable).map(AwardItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const CertificationItem = x => (
|
||||
<div key={x.id} className="my-3 px-5">
|
||||
<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 &&
|
||||
data.certifications.enable && (
|
||||
<div>
|
||||
<Heading title={data.certifications.heading} />
|
||||
{data.certifications.items.filter(x => x.enable).map(CertificationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const ExtraItem = x => (
|
||||
<div key={x.id} className="px-5 my-2">
|
||||
<h6 className="text-xs font-bold">{x.key}</h6>
|
||||
<div className="text-sm">{x.value}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Extras = () =>
|
||||
data.extras &&
|
||||
data.extras.enable && (
|
||||
<div>
|
||||
<Heading light title={data.extras.heading} />
|
||||
{data.extras.items.filter(x => x.enable).map(ExtraItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
fontFamily: theme.font.family,
|
||||
backgroundColor: theme.colors.background,
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-12">
|
||||
<div
|
||||
className="col-span-4"
|
||||
style={{
|
||||
color: theme.colors.background,
|
||||
backgroundColor: theme.colors.accent,
|
||||
}}
|
||||
>
|
||||
<Photo />
|
||||
<PersonalInformation />
|
||||
<ContactInformation />
|
||||
<Skills />
|
||||
<Hobbies />
|
||||
<Languages />
|
||||
<Certifications />
|
||||
</div>
|
||||
<div className="col-span-8">
|
||||
<Objective />
|
||||
<Work />
|
||||
<Education />
|
||||
<Awards />
|
||||
<References />
|
||||
<Extras />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Castform;
|
||||
@ -1,5 +0,0 @@
|
||||
import Castform from './Castform';
|
||||
import image from './preview.png';
|
||||
|
||||
export const Image = image;
|
||||
export default Castform;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 130 KiB |
@ -1,304 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import AppContext from '../../context/AppContext';
|
||||
import { hexToRgb } from '../../utils';
|
||||
|
||||
const styles = {
|
||||
header: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'start',
|
||||
color: 'white',
|
||||
backgroundColor: '#222',
|
||||
height: '160px',
|
||||
paddingLeft: '270px',
|
||||
},
|
||||
section: {
|
||||
marginTop: '167px',
|
||||
marginLeft: '20px',
|
||||
},
|
||||
};
|
||||
|
||||
const Celebi = () => {
|
||||
const context = useContext(AppContext);
|
||||
const { state } = context;
|
||||
const { data, theme } = state;
|
||||
|
||||
const { r, g, b } = hexToRgb(theme.colors.accent) || {};
|
||||
|
||||
const Heading = ({ title, className }) => (
|
||||
<h5
|
||||
className={`my-2 text-md uppercase font-semibold tracking-wider pb-1 border-b-2 border-gray-800 ${className}`}
|
||||
>
|
||||
{title}
|
||||
</h5>
|
||||
);
|
||||
|
||||
const Photo = () =>
|
||||
data.profile.photo !== '' && (
|
||||
<div className="relative z-40">
|
||||
<img
|
||||
className="w-full object-cover object-center"
|
||||
src={data.profile.photo}
|
||||
alt="Resume Photograph"
|
||||
style={{
|
||||
height: '160px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Header = () => (
|
||||
<header style={styles.header}>
|
||||
<div className="ml-6">
|
||||
<h1 className="tracking-wide uppercase font-semibold" style={{ fontSize: '2.75em' }}>
|
||||
{data.profile.firstName} {data.profile.lastName}
|
||||
</h1>
|
||||
<h6 className="text-lg tracking-wider uppercase">{data.profile.subtitle}</h6>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
const Objective = () =>
|
||||
data.objective &&
|
||||
data.objective.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.objective.heading} />
|
||||
<ReactMarkdown className="my-3 mr-10 text-sm" source={data.objective.body} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const ContactItem = ({ label, value }) =>
|
||||
value && (
|
||||
<div className="mb-3">
|
||||
<h6 className="text-xs font-bold">{label}</h6>
|
||||
<p className="text-sm">{value}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Contact = () => (
|
||||
<div className="mb-6">
|
||||
<Heading title="Contact" className="mt-8 w-3/4 mx-auto" />
|
||||
<div className="mb-3">
|
||||
<h6 className="text-xs font-bold">Address</h6>
|
||||
<p className="text-sm">{data.profile.address.line1}</p>
|
||||
<p className="text-sm">{data.profile.address.line2}</p>
|
||||
<p className="text-sm">{data.profile.address.line3}</p>
|
||||
</div>
|
||||
<ContactItem label="Phone" value={data.profile.phone} />
|
||||
<ContactItem label="Email Address" value={data.profile.email} />
|
||||
<ContactItem label="Website" value={data.profile.website} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const WorkItem = x => (
|
||||
<div key={x.id} className="my-3 mr-10">
|
||||
<div>
|
||||
<h6 className="font-semibold">{x.title}</h6>
|
||||
<p className="text-xs text-gray-800">
|
||||
{x.role} | {x.start} - {x.end}
|
||||
</p>
|
||||
</div>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Work = () =>
|
||||
data.work &&
|
||||
data.work.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.work.heading} />
|
||||
{data.work.items.filter(x => x.enable).map(WorkItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const EducationItem = x => (
|
||||
<div key={x.id} className="my-3 mr-10">
|
||||
<h6 className="font-semibold">{x.name}</h6>
|
||||
<p className="text-xs">{x.major}</p>
|
||||
<div className="text-xs">
|
||||
{x.start} - {x.end}
|
||||
</div>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Education = () =>
|
||||
data.education &&
|
||||
data.education.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.education.heading} />
|
||||
{data.education.items.filter(x => x.enable).map(EducationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Skills = () =>
|
||||
data.skills.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title="Skills" className="w-3/4 mx-auto" />
|
||||
<ul className="list-none text-sm">
|
||||
{data.skills.items.map(x => (
|
||||
<li key={x.id} className="my-2">
|
||||
{x.skill}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Hobbies = () =>
|
||||
data.hobbies.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title="Hobbies" className="w-3/4 mx-auto" />
|
||||
<ul className="list-none text-sm">
|
||||
{data.hobbies.items.map(x => (
|
||||
<li key={x.id} className="my-2">
|
||||
{x.hobby}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ReferenceItem = x => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
<h6 className="text-sm font-semibold">{x.name}</h6>
|
||||
<span className="text-sm">{x.position}</span>
|
||||
<span className="text-sm">{x.phone}</span>
|
||||
<span className="text-sm">{x.email}</span>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const References = () =>
|
||||
data.references &&
|
||||
data.references.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.references.heading} />
|
||||
<div className="grid grid-cols-2 col-gap-4 row-gap-2">
|
||||
{data.references.items.filter(x => x.enable).map(ReferenceItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const LanguageItem = x => (
|
||||
<div key={x.id} className="grid grid-cols-2 items-center py-2">
|
||||
<h6 className="text-xs font-medium text-left">{x.key}</h6>
|
||||
<div className="flex">
|
||||
{x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
|
||||
{x.rating !== 0 && (
|
||||
<div className="flex">
|
||||
{Array.from(Array(x.rating)).map((_, i) => (
|
||||
<i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
|
||||
star
|
||||
</i>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Languages = () =>
|
||||
data.languages &&
|
||||
data.languages.enable && (
|
||||
<div className="w-3/4 mx-auto mb-6">
|
||||
<Heading title={data.languages.heading} />
|
||||
<div>{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardItem = x => (
|
||||
<div key={x.id} className="my-2">
|
||||
<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 &&
|
||||
data.awards.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading light title={data.awards.heading} />
|
||||
{data.awards.items.filter(x => x.enable).map(AwardItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const CertificationItem = x => (
|
||||
<div key={x.id} className="my-2">
|
||||
<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 &&
|
||||
data.certifications.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.certifications.heading} className="w-3/4 mx-auto" />
|
||||
{data.certifications.items.filter(x => x.enable).map(CertificationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const ExtraItem = x => (
|
||||
<div key={x.id} className="my-3">
|
||||
<h6 className="text-xs font-bold">{x.key}</h6>
|
||||
<div className="text-sm">{x.value}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Extras = () =>
|
||||
data.extras &&
|
||||
data.extras.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.extras.heading} className="w-3/4 mx-auto" />
|
||||
{data.extras.items.filter(x => x.enable).map(ExtraItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
fontFamily: theme.font.family,
|
||||
backgroundColor: theme.colors.background,
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-12">
|
||||
<div
|
||||
className="sidebar col-span-4 pb-8 ml-8 z-10 text-center"
|
||||
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
|
||||
>
|
||||
<Photo />
|
||||
<Contact />
|
||||
<Skills />
|
||||
<Hobbies />
|
||||
<Languages />
|
||||
<Certifications />
|
||||
<Extras />
|
||||
</div>
|
||||
<div className="col-span-8">
|
||||
<Header />
|
||||
|
||||
<section className="py-4" style={styles.section}>
|
||||
<Objective />
|
||||
<Work />
|
||||
<Education />
|
||||
<Awards />
|
||||
<References />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Celebi;
|
||||
@ -1,5 +0,0 @@
|
||||
import Celebi from './Celebi';
|
||||
import image from './preview.png';
|
||||
|
||||
export const Image = image;
|
||||
export default Celebi;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 138 KiB |
@ -1,319 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import AppContext from '../../context/AppContext';
|
||||
import { hexToRgb } from '../../utils';
|
||||
|
||||
const Gengar = () => {
|
||||
const context = useContext(AppContext);
|
||||
const { state } = context;
|
||||
const { data, theme } = state;
|
||||
|
||||
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-2xl font-bold leading-tight">{data.profile.firstName}</h1>
|
||||
<h1 className="text-2xl font-bold leading-tight">{data.profile.lastName}</h1>
|
||||
<div className="text-xs font-medium mt-2">{data.profile.subtitle}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ContactItem = ({ icon, value, link = '#' }) =>
|
||||
value && (
|
||||
<div className="flex items-center mb-3">
|
||||
<div
|
||||
className="w-5 h-5 rounded-full flex justify-center items-center mr-2"
|
||||
style={{ backgroundColor: theme.colors.background }}
|
||||
>
|
||||
<i
|
||||
className="flex justify-center items-center material-icons text-xs"
|
||||
style={{ color: theme.colors.accent }}
|
||||
>
|
||||
{icon}
|
||||
</i>
|
||||
</div>
|
||||
<a href={link}>
|
||||
<span className="text-sm font-medium break-all">{value}</span>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Heading = ({ title }) => (
|
||||
<h6 className="font-bold text-xs uppercase tracking-wide mb-2">{title}</h6>
|
||||
);
|
||||
|
||||
const Objective = () =>
|
||||
data.objective &&
|
||||
data.objective.enable && (
|
||||
<div className="flex flex-col justify-center items-start mb-6">
|
||||
<Heading title={data.objective.heading} />
|
||||
<ReactMarkdown className="text-sm" source={data.objective.body} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const SkillItem = x => (
|
||||
<li key={x.id} className="text-sm py-1">
|
||||
{x.skill}
|
||||
</li>
|
||||
);
|
||||
|
||||
const Skills = () =>
|
||||
data.skills &&
|
||||
data.skills.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.skills.heading} />
|
||||
<ul>{data.skills.items.map(SkillItem)}</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const HobbyItem = x => (
|
||||
<li key={x.id} className="text-sm py-1">
|
||||
{x.hobby}
|
||||
</li>
|
||||
);
|
||||
|
||||
const Hobbies = () =>
|
||||
data.hobbies &&
|
||||
data.hobbies.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.hobbies.heading} />
|
||||
<ul>{data.hobbies.items.map(HobbyItem)}</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const EducationItem = x => (
|
||||
<div key={x.id} className="mb-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h6 className="font-semibold">
|
||||
{x.name}
|
||||
<small className="ml-2">
|
||||
{x.start !== '' && x.end !== '' && (
|
||||
<span className="text-xs font-medium">
|
||||
({x.start} - {x.end})
|
||||
</span>
|
||||
)}
|
||||
</small>
|
||||
</h6>
|
||||
<p className="text-xs">{x.major}</p>
|
||||
</div>
|
||||
<div className="flex flex-col text-right items-end">
|
||||
<span className="text-sm font-bold" style={{ color: theme.colors.accent }}>
|
||||
{x.grade}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Education = () =>
|
||||
data.education &&
|
||||
data.education.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.education.heading} />
|
||||
{data.education.items.filter(x => x.enable).map(EducationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const CertificationItem = x => (
|
||||
<div key={x.id} 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 &&
|
||||
data.certifications.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.certifications.heading} />
|
||||
{data.certifications.items.filter(x => x.enable).map(CertificationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardItem = x => (
|
||||
<div key={x.id} 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 &&
|
||||
data.awards.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.awards.heading} />
|
||||
{data.awards.items.filter(x => x.enable).map(AwardItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const ReferenceItem = x => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
<h6 className="text-sm font-medium">{x.name}</h6>
|
||||
<span className="text-xs">{x.position}</span>
|
||||
<span className="text-xs">{x.phone}</span>
|
||||
<span className="text-xs">{x.email}</span>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const References = () =>
|
||||
data.references &&
|
||||
data.references.enable && (
|
||||
<div>
|
||||
<Heading title={data.references.heading} />
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{data.references.items.filter(x => x.enable).map(ReferenceItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const WorkItem = x => (
|
||||
<div key={x.id} className="mb-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<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 &&
|
||||
data.work.enable && (
|
||||
<div className="mb-6">
|
||||
<Heading title={data.work.heading} />
|
||||
{data.work.items.filter(x => x.enable).map(WorkItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const LanguageItem = x => (
|
||||
<div key={x.id} className="grid grid-cols-2 items-center py-2">
|
||||
<h6 className="text-sm font-medium">{x.key}</h6>
|
||||
<div className="flex">
|
||||
{x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
|
||||
{x.rating !== 0 && (
|
||||
<div className="flex">
|
||||
{Array.from(Array(x.rating)).map((_, i) => (
|
||||
<i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
|
||||
star
|
||||
</i>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Languages = () =>
|
||||
data.languages &&
|
||||
data.languages.enable && (
|
||||
<div>
|
||||
<Heading title={data.languages.heading} />
|
||||
<div className="mb-6">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ExtraItem = x => (
|
||||
<div key={x.id} className="text-sm my-1">
|
||||
<h6 className="text-xs font-bold">{x.key}</h6>
|
||||
<h6>{x.value}</h6>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Extras = () =>
|
||||
data.extras &&
|
||||
data.extras.enable && (
|
||||
<div>
|
||||
<Heading title={data.extras.heading} />
|
||||
<div className="grid grid-cols-2">
|
||||
{data.extras.items.filter(x => x.enable).map(ExtraItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
fontFamily: theme.font.family,
|
||||
backgroundColor: theme.colors.background,
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-12">
|
||||
<div
|
||||
className="col-span-4 px-6 py-8"
|
||||
style={{ backgroundColor: theme.colors.accent, color: theme.colors.background }}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Photo />
|
||||
<FullName />
|
||||
</div>
|
||||
|
||||
<hr className="w-1/4 my-5 opacity-50" />
|
||||
|
||||
<ContactItem icon="phone" value={data.profile.phone} link={`tel:${data.profile.phone}`} />
|
||||
<ContactItem
|
||||
icon="email"
|
||||
value={data.profile.email}
|
||||
link={`mailto:${data.profile.email}`}
|
||||
/>
|
||||
<ContactItem
|
||||
icon="language"
|
||||
value={data.profile.website}
|
||||
link={`http://${data.profile.website}`}
|
||||
/>
|
||||
<ContactItem icon="location_on" value={data.profile.address.line3} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="col-span-8 px-6 py-8"
|
||||
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
|
||||
>
|
||||
<Objective />
|
||||
<Extras />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="col-span-4 px-6 py-8"
|
||||
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
|
||||
>
|
||||
<Skills />
|
||||
<Hobbies />
|
||||
<Languages />
|
||||
<Education />
|
||||
<Certifications />
|
||||
</div>
|
||||
|
||||
<div className="col-span-8 px-6 py-8">
|
||||
<Work />
|
||||
<Awards />
|
||||
<References />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Gengar;
|
||||
@ -1,5 +0,0 @@
|
||||
import Gengar from './Gengar';
|
||||
import image from './preview.png';
|
||||
|
||||
export const Image = image;
|
||||
export default Gengar;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
@ -1,311 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import AppContext from '../../context/AppContext';
|
||||
import { hexToRgb } from '../../utils';
|
||||
|
||||
const Glalie = () => {
|
||||
const context = useContext(AppContext);
|
||||
const { state } = context;
|
||||
const { data, theme } = state;
|
||||
|
||||
const { r, g, b } = hexToRgb(theme.colors.accent) || {};
|
||||
|
||||
const Photo = () =>
|
||||
data.profile.photo !== '' && (
|
||||
<img
|
||||
className="w-40 h-40 rounded-full mx-auto"
|
||||
src={data.profile.photo}
|
||||
alt="Resume Photograph"
|
||||
/>
|
||||
);
|
||||
|
||||
const FullName = () => (
|
||||
<div className="text-4xl font-bold leading-none">
|
||||
<h1>{data.profile.firstName}</h1>
|
||||
<h1>{data.profile.lastName}</h1>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Subtitle = () => (
|
||||
<div className="tracking-wide text-xs uppercase font-medium">{data.profile.subtitle}</div>
|
||||
);
|
||||
|
||||
const ContactItem = ({ title, value }) =>
|
||||
value && (
|
||||
<div className="flex flex-col">
|
||||
<h6 className="text-xs font-bold" style={{ color: theme.colors.accent }}>
|
||||
{title}
|
||||
</h6>
|
||||
<p className="text-sm">{value}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ContactInformation = () => (
|
||||
<div
|
||||
className="w-full border-2 pl-4 pr-4 mb-6"
|
||||
style={{
|
||||
borderColor: theme.colors.accent,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="inline-block relative px-4"
|
||||
style={{ top: '-.75em', color: theme.colors.accent }}
|
||||
>
|
||||
<h2 className="flex">
|
||||
<i className="material-icons">flare</i>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 row-gap-4">
|
||||
<ContactItem title="Phone Number" value={data.profile.phone} />
|
||||
<ContactItem title="Email Address" value={data.profile.email} />
|
||||
<ContactItem title="Website" value={data.profile.website} />
|
||||
|
||||
<div className="flex flex-col">
|
||||
<i className="material-icons text-lg" style={{ color: theme.colors.accent }}>
|
||||
home
|
||||
</i>
|
||||
<p className="text-sm">{data.profile.address.line1}</p>
|
||||
<p className="text-sm">{data.profile.address.line2}</p>
|
||||
<p className="text-sm">{data.profile.address.line3}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Heading = ({ title }) => (
|
||||
<h6
|
||||
className="text-sm font-semibold uppercase pb-1 mb-2 border-b"
|
||||
style={{ borderColor: theme.colors.accent, color: theme.colors.accent }}
|
||||
>
|
||||
{title}
|
||||
</h6>
|
||||
);
|
||||
|
||||
const Objective = () =>
|
||||
data.objective.enable && (
|
||||
<div>
|
||||
<Heading title={data.objective.heading} />
|
||||
<ReactMarkdown className="text-sm text-justify" source={data.objective.body} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const WorkItem = x => (
|
||||
<div key={x.id} className="mt-3">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<h6 className="font-semibold text-sm">{x.title}</h6>
|
||||
<p className="text-xs opacity-75 font-medium">
|
||||
{x.role} / {x.start} - {x.end}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Work = () =>
|
||||
data.work &&
|
||||
data.work.enable && (
|
||||
<div>
|
||||
<Heading title={data.work.heading} />
|
||||
{data.work.items.filter(x => x.enable).map(WorkItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const EducationItem = x => (
|
||||
<div key={x.id} className="mt-3">
|
||||
<div>
|
||||
<h6 className="font-semibold text-xs">{x.name}</h6>
|
||||
<p className="text-xs opacity-75">{x.major}</p>
|
||||
<p className="text-xs opacity-75">
|
||||
{x.start} - {x.end}
|
||||
</p>
|
||||
</div>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Education = () =>
|
||||
data.education &&
|
||||
data.education.enable && (
|
||||
<div>
|
||||
<Heading title={data.education.heading} />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{data.education.items.filter(x => x.enable).map(EducationItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardItem = x => (
|
||||
<div key={x.id} className="mt-3 text-left">
|
||||
<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 &&
|
||||
data.awards.enable && (
|
||||
<div>
|
||||
<Heading title={data.awards.heading} />
|
||||
{data.awards.items.filter(x => x.enable).map(AwardItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const CertificationItem = x => (
|
||||
<div key={x.id} className="mt-3 text-left">
|
||||
<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 &&
|
||||
data.certifications.enable && (
|
||||
<div>
|
||||
<Heading title={data.certifications.heading} />
|
||||
{data.certifications.items.filter(x => x.enable).map(CertificationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const SkillItem = x => (
|
||||
<li key={x.id} className="text-xs font-medium">
|
||||
{x.skill}
|
||||
</li>
|
||||
);
|
||||
|
||||
const Skills = () =>
|
||||
data.skills &&
|
||||
data.skills.enable && (
|
||||
<div>
|
||||
<Heading title={data.skills.heading} />
|
||||
<ul className="pt-2 grid grid-cols-2 gap-3">{data.skills.items.map(SkillItem)}</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const HobbyItem = x => (
|
||||
<li key={x.id} className="text-xs font-medium">
|
||||
{x.hobby}
|
||||
</li>
|
||||
);
|
||||
|
||||
const Hobbies = () =>
|
||||
data.hobbies &&
|
||||
data.hobbies.enable && (
|
||||
<div>
|
||||
<Heading title={data.hobbies.heading} />
|
||||
<ul className="pt-2 grid grid-cols-2 row-gap-3 text-left">
|
||||
{data.hobbies.items.map(HobbyItem)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const LanguageItem = x => (
|
||||
<div key={x.id} className="grid grid-cols-2 items-center py-2">
|
||||
<h6 className="text-xs font-medium text-left">{x.key}</h6>
|
||||
<div className="flex">
|
||||
{x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
|
||||
{x.rating !== 0 && (
|
||||
<div className="flex">
|
||||
{Array.from(Array(x.rating)).map((_, i) => (
|
||||
<i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
|
||||
star
|
||||
</i>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Languages = () =>
|
||||
data.languages &&
|
||||
data.languages.enable && (
|
||||
<div>
|
||||
<Heading title={data.languages.heading} />
|
||||
<div className="w-3/4">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ReferenceItem = x => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
<h6 className="text-sm font-medium">{x.name}</h6>
|
||||
<span className="text-xs">{x.position}</span>
|
||||
<span className="text-xs">{x.phone}</span>
|
||||
<span className="text-xs">{x.email}</span>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const References = () =>
|
||||
data.references &&
|
||||
data.references.enable && (
|
||||
<div>
|
||||
<Heading title={data.references.heading} />
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
{data.references.items.filter(x => x.enable).map(ReferenceItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ExtraItem = x => (
|
||||
<tr key={x.id}>
|
||||
<td className="border font-medium px-4 py-2 text-xs">{x.key}</td>
|
||||
<td className="border px-4 py-2 text-xs">{x.value}</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
const Extras = () =>
|
||||
data.extras &&
|
||||
data.extras.enable && (
|
||||
<div>
|
||||
<Heading title={data.extras.heading} />
|
||||
<table className="mt-4 w-2/3 table-auto">
|
||||
<tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
fontFamily: theme.font.family,
|
||||
backgroundColor: theme.colors.background,
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-12">
|
||||
<div
|
||||
className="h-full col-span-4 p-8 grid grid-cols-1 row-gap-4 text-center"
|
||||
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`, minHeight: '29.7cm' }}
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<Photo />
|
||||
<FullName />
|
||||
<Subtitle />
|
||||
</div>
|
||||
<ContactInformation />
|
||||
<Objective />
|
||||
<Hobbies />
|
||||
<Languages />
|
||||
<Certifications />
|
||||
</div>
|
||||
|
||||
<div className="col-span-8 p-8 grid grid-cols-1 row-gap-4">
|
||||
<Work />
|
||||
<Education />
|
||||
<Skills />
|
||||
<Awards />
|
||||
<References />
|
||||
<Extras />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Glalie;
|
||||
@ -1,5 +0,0 @@
|
||||
import Glalie from './Glalie';
|
||||
import image from './preview.png';
|
||||
|
||||
export const Image = image;
|
||||
export default Glalie;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 335 KiB |
@ -1,45 +0,0 @@
|
||||
import Onyx, { Image as OnyxPreview } from './onyx';
|
||||
import Pikachu, { Image as PikachuPreview } from './pikachu';
|
||||
import Gengar, { Image as GengarPreview } from './gengar';
|
||||
import Castform, { Image as CastformPreview } from './castform';
|
||||
import Glalie, { Image as GlaliePreview } from './glalie';
|
||||
import Celebi, { Image as CelebiPreview } from './celebi';
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'onyx',
|
||||
name: 'Onyx',
|
||||
component: Onyx,
|
||||
preview: OnyxPreview,
|
||||
},
|
||||
{
|
||||
key: 'pikachu',
|
||||
name: 'Pikachu',
|
||||
component: Pikachu,
|
||||
preview: PikachuPreview,
|
||||
},
|
||||
{
|
||||
key: 'gengar',
|
||||
name: 'Gengar',
|
||||
component: Gengar,
|
||||
preview: GengarPreview,
|
||||
},
|
||||
{
|
||||
key: 'castform',
|
||||
name: 'Castform',
|
||||
component: Castform,
|
||||
preview: CastformPreview,
|
||||
},
|
||||
{
|
||||
key: 'glalie',
|
||||
name: 'Glalie',
|
||||
component: Glalie,
|
||||
preview: GlaliePreview,
|
||||
},
|
||||
{
|
||||
key: 'celebi',
|
||||
name: 'Celebi',
|
||||
component: Celebi,
|
||||
preview: CelebiPreview,
|
||||
},
|
||||
];
|
||||
@ -1,315 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import AppContext from '../../context/AppContext';
|
||||
|
||||
const Onyx = () => {
|
||||
const context = useContext(AppContext);
|
||||
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, link = '#' }) =>
|
||||
value && (
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
{icon}
|
||||
</span>
|
||||
<a href={link}>
|
||||
<span className="font-medium break-all">{value}</span>
|
||||
</a>
|
||||
</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 &&
|
||||
data.objective.enable && (
|
||||
<div>
|
||||
<Heading title={data.objective.heading} />
|
||||
<ReactMarkdown className="text-sm" source={data.objective.body} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const WorkItem = x => (
|
||||
<div key={x.id} 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 &&
|
||||
data.work.enable && (
|
||||
<div>
|
||||
<Heading title={data.work.heading} />
|
||||
{data.work.items.filter(x => x.enable).map(WorkItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const EducationItem = x => (
|
||||
<div key={x.id} 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 &&
|
||||
data.education.enable && (
|
||||
<div>
|
||||
<Heading title={data.education.heading} />
|
||||
{data.education.items.filter(x => x.enable).map(EducationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardItem = x => (
|
||||
<div key={x.id} 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 &&
|
||||
data.awards.enable && (
|
||||
<div>
|
||||
<Heading title={data.awards.heading} />
|
||||
{data.awards.items.filter(x => x.enable).map(AwardItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const CertificationItem = x => (
|
||||
<div key={x.id} 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 &&
|
||||
data.certifications.enable && (
|
||||
<div>
|
||||
<Heading title={data.certifications.heading} />
|
||||
{data.certifications.items.filter(x => x.enable).map(CertificationItem)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const HobbyItem = x => (
|
||||
<span
|
||||
key={x.id}
|
||||
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.hobby}
|
||||
</span>
|
||||
);
|
||||
|
||||
const Hobbies = () =>
|
||||
data.hobbies &&
|
||||
data.hobbies.enable && (
|
||||
<div>
|
||||
<Heading title={data.hobbies.heading} />
|
||||
<div className="mt-1 flex flex-wrap">{data.hobbies.items.map(HobbyItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const SkillItem = x => (
|
||||
<span
|
||||
key={x.id}
|
||||
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.skill}
|
||||
</span>
|
||||
);
|
||||
|
||||
const Skills = () =>
|
||||
data.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 LanguageItem = x => (
|
||||
<div key={x.id} className="grid grid-cols-2 items-center py-2">
|
||||
<h6 className="text-sm font-medium">{x.key}</h6>
|
||||
<div className="flex">
|
||||
{x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
|
||||
{x.rating !== 0 && (
|
||||
<div className="flex">
|
||||
{Array.from(Array(x.rating)).map((_, i) => (
|
||||
<i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
|
||||
star
|
||||
</i>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Languages = () =>
|
||||
data.languages &&
|
||||
data.languages.enable && (
|
||||
<div>
|
||||
<Heading title={data.languages.heading} />
|
||||
<div className="w-3/4">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ReferenceItem = x => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
<h6 className="text-sm font-medium">{x.name}</h6>
|
||||
<span className="text-xs">{x.position}</span>
|
||||
<span className="text-xs">{x.phone}</span>
|
||||
<span className="text-xs">{x.email}</span>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const References = () =>
|
||||
data.references &&
|
||||
data.references.enable && (
|
||||
<div>
|
||||
<Heading title={data.references.heading} />
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{data.references.items.filter(x => x.enable).map(ReferenceItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ExtraItem = x => (
|
||||
<tr key={x.id}>
|
||||
<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 &&
|
||||
data.extras.enable && (
|
||||
<div>
|
||||
<Heading title={data.extras.heading} />
|
||||
<table className="table-auto">
|
||||
<tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="p-10"
|
||||
style={{
|
||||
fontFamily: theme.font.family,
|
||||
backgroundColor: theme.colors.background,
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-4 items-center">
|
||||
<div className="col-span-3 flex items-center">
|
||||
<Photo />
|
||||
<Profile />
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 text-xs">
|
||||
<ContactItem icon="phone" value={data.profile.phone} link={`tel:${data.profile.phone}`} />
|
||||
<ContactItem
|
||||
icon="language"
|
||||
value={data.profile.website}
|
||||
link={`http://${data.profile.website}`}
|
||||
/>
|
||||
<ContactItem
|
||||
icon="email"
|
||||
value={data.profile.email}
|
||||
link={`mailto:${data.profile.email}`}
|
||||
/>
|
||||
<ContactItem icon="location_on" value={data.profile.address.line3} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-6" />
|
||||
|
||||
<Objective />
|
||||
<Work />
|
||||
<Education />
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<Awards />
|
||||
<Certifications />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<Skills />
|
||||
<Hobbies />
|
||||
</div>
|
||||
|
||||
<References />
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<Extras />
|
||||
<Languages />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Onyx;
|
||||
@ -1,5 +0,0 @@
|
||||
import Onyx from './Onyx';
|
||||
import image from './preview.png';
|
||||
|
||||
export const Image = image;
|
||||
export default Onyx;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
@ -1,312 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import AppContext from '../../context/AppContext';
|
||||
|
||||
const Pikachu = () => {
|
||||
const context = useContext(AppContext);
|
||||
const { state } = context;
|
||||
const { data, theme } = state;
|
||||
|
||||
const Photo = () =>
|
||||
data.profile.photo !== '' && (
|
||||
<div className="self-center col-span-4">
|
||||
<img
|
||||
className="w-48 h-48 rounded-full mx-auto object-cover"
|
||||
src={data.profile.photo}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Header = () => (
|
||||
<div
|
||||
className="h-48 rounded flex flex-col justify-center"
|
||||
style={{ backgroundColor: theme.colors.accent, color: theme.colors.background }}
|
||||
>
|
||||
<div className="flex flex-col justify-center mx-8 my-6">
|
||||
<h1 className="text-3xl font-bold leading-tight">
|
||||
{data.profile.firstName} {data.profile.lastName}
|
||||
</h1>
|
||||
<div className="text-sm font-medium tracking-wide">{data.profile.subtitle}</div>
|
||||
|
||||
<hr className="my-4 opacity-50" />
|
||||
|
||||
<ReactMarkdown className="text-sm" source={data.objective.body} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ContactItem = ({ icon, value, link = '#' }) =>
|
||||
value && (
|
||||
<div className="flex items-center my-3">
|
||||
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
|
||||
{icon}
|
||||
</span>
|
||||
<a href={link}>
|
||||
<span className="font-medium break-all">{value}</span>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
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 }}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
|
||||
const SkillItem = x => (
|
||||
<span
|
||||
key={x.id}
|
||||
className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
|
||||
>
|
||||
{x.skill}
|
||||
</span>
|
||||
);
|
||||
|
||||
const Skills = () =>
|
||||
data.skills &&
|
||||
data.skills.enable && (
|
||||
<div>
|
||||
<Heading title={data.skills.heading} />
|
||||
<div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const HobbyItem = x => (
|
||||
<span
|
||||
key={x.id}
|
||||
className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
|
||||
>
|
||||
{x.hobby}
|
||||
</span>
|
||||
);
|
||||
|
||||
const Hobbies = () =>
|
||||
data.hobbies &&
|
||||
data.hobbies.enable && (
|
||||
<div>
|
||||
<Heading title={data.hobbies.heading} />
|
||||
<div className="flex flex-col mb-6">{data.hobbies.items.map(HobbyItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ReferenceItem = x => (
|
||||
<div key={x.id} className="flex flex-col">
|
||||
<h6 className="text-sm font-medium">{x.name}</h6>
|
||||
<span className="text-xs">{x.position}</span>
|
||||
<span className="text-xs">{x.phone}</span>
|
||||
<span className="text-xs">{x.email}</span>
|
||||
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const References = () =>
|
||||
data.references &&
|
||||
data.references.enable && (
|
||||
<div>
|
||||
<Heading title={data.references.heading} />
|
||||
<div className="grid grid-cols-2 gap-2 mb-6">
|
||||
{data.references.items.filter(x => x.enable).map(ReferenceItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const LanguageItem = x => (
|
||||
<div key={x.id} className="grid grid-cols-2 items-center py-2">
|
||||
<h6 className="text-sm font-medium">{x.key}</h6>
|
||||
<div className="flex">
|
||||
{x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
|
||||
{x.rating !== 0 && (
|
||||
<div className="flex">
|
||||
{Array.from(Array(x.rating)).map((_, i) => (
|
||||
<i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
|
||||
star
|
||||
</i>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Languages = () =>
|
||||
data.languages &&
|
||||
data.languages.enable && (
|
||||
<div>
|
||||
<Heading title={data.languages.heading} />
|
||||
<div className="mb-6">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ExtraItem = x => (
|
||||
<div key={x.id} className="text-sm my-1">
|
||||
<h6 className="text-xs font-bold">{x.key}</h6>
|
||||
<h6 className="">{x.value}</h6>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Extras = () =>
|
||||
data.extras &&
|
||||
data.extras.enable && (
|
||||
<div>
|
||||
<Heading title={data.extras.heading} />
|
||||
<div className="grid grid-cols-2">
|
||||
{data.extras.items.filter(x => x.enable).map(ExtraItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const WorkItem = x => (
|
||||
<div key={x.id} className="mb-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<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 &&
|
||||
data.work.enable && (
|
||||
<div>
|
||||
<Heading title={data.work.heading} />
|
||||
<div className="flex flex-col mb-4">
|
||||
{data.work.items.filter(x => x.enable).map(WorkItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const EducationItem = x => (
|
||||
<div key={x.id} className="mb-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h6 className="font-semibold">{x.name}</h6>
|
||||
<p className="text-xs">{x.major}</p>
|
||||
</div>
|
||||
<div className="flex flex-col text-right items-end">
|
||||
<span className="text-sm font-bold" style={{ color: theme.colors.accent }}>
|
||||
{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 &&
|
||||
data.education.enable && (
|
||||
<div>
|
||||
<Heading title={data.education.heading} />
|
||||
<div className="flex flex-col mb-4">
|
||||
{data.education.items.filter(x => x.enable).map(EducationItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const AwardItem = x => (
|
||||
<div key={x.id} className="mb-2">
|
||||
<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 &&
|
||||
data.awards.enable && (
|
||||
<div>
|
||||
<Heading title={data.awards.heading} />
|
||||
<div className="flex flex-col mb-2">
|
||||
{data.awards.items.filter(x => x.enable).map(AwardItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CertificationItem = x => (
|
||||
<div key={x.id} 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 &&
|
||||
data.certifications.enable && (
|
||||
<div>
|
||||
<Heading title={data.certifications.heading} />
|
||||
<div className="flex flex-col mb-2">
|
||||
{data.certifications.items.filter(x => x.enable).map(CertificationItem)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="p-10"
|
||||
style={{
|
||||
fontFamily: theme.font.family,
|
||||
backgroundColor: theme.colors.background,
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-12 col-gap-6 row-gap-8">
|
||||
<Photo />
|
||||
|
||||
<div className={`${data.profile.photo !== '' ? 'col-span-8' : 'col-span-12'}`}>
|
||||
<Header />
|
||||
</div>
|
||||
|
||||
<div className="col-span-4 overflow-hidden">
|
||||
<div className="text-sm mb-6">
|
||||
<ContactItem
|
||||
icon="phone"
|
||||
value={data.profile.phone}
|
||||
link={`tel:${data.profile.phone}`}
|
||||
/>
|
||||
<ContactItem
|
||||
icon="language"
|
||||
value={data.profile.website}
|
||||
link={`http://${data.profile.website}`}
|
||||
/>
|
||||
<ContactItem
|
||||
icon="email"
|
||||
value={data.profile.email}
|
||||
link={`mailto:${data.profile.email}`}
|
||||
/>
|
||||
<ContactItem icon="location_on" value={data.profile.address.line3} />
|
||||
</div>
|
||||
|
||||
<Skills />
|
||||
<Hobbies />
|
||||
<Languages />
|
||||
<Certifications />
|
||||
</div>
|
||||
|
||||
<div className="col-span-8">
|
||||
<Work />
|
||||
<Education />
|
||||
<Awards />
|
||||
<References />
|
||||
<Extras />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pikachu;
|
||||
@ -1,5 +0,0 @@
|
||||
import Pikachu from './Pikachu';
|
||||
import image from './preview.png';
|
||||
|
||||
export const Image = image;
|
||||
export default Pikachu;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
Reference in New Issue
Block a user