diff --git a/docs/changelog/README.md b/docs/changelog/README.md index cc152d70..580b3cfc 100644 --- a/docs/changelog/README.md +++ b/docs/changelog/README.md @@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file. ## April 2020 +### April 6, 2020 + +- Designed Celebi Template + ### April 5, 2020 - Added Print Dialog to set Quality & Print Type before Exporting PDF diff --git a/docs/templates/README.md b/docs/templates/README.md index 962887bf..ed6fde7b 100644 --- a/docs/templates/README.md +++ b/docs/templates/README.md @@ -26,4 +26,8 @@ title: Templates

# Glalie

+
+

# Celebi

+ +
diff --git a/docs/templates/images/Celebi.png b/docs/templates/images/Celebi.png new file mode 100644 index 00000000..03be8f4b Binary files /dev/null and b/docs/templates/images/Celebi.png differ diff --git a/src/templates/celebi/Celebi.js b/src/templates/celebi/Celebi.js new file mode 100644 index 00000000..887e55dc --- /dev/null +++ b/src/templates/celebi/Celebi.js @@ -0,0 +1,281 @@ +import React, { useContext } from 'react'; +import ReactMarkdown from 'react-markdown'; + +import AppContext from '../../context/AppContext'; +import { hexToRgb } from '../../utils'; + +const styles = { + image: { + width: '100%', + height: '160px', + objectFit: 'cover', + objectPosition: 'top center', + }, + 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 }) => ( +
+ {title} +
+ ); + + const Photo = () => + data.profile.photo !== '' && ( + Resume Photograph + ); + + const Header = () => ( +
+
+

+ {data.profile.firstName} {data.profile.lastName} +

+
{data.profile.subtitle}
+
+
+ ); + + const Objective = () => + data.objective && + data.objective.enable && ( +
+ + +
+ ); + + const ContactItem = ({ label, value }) => + value && ( +
+
{label}
+

{value}

+
+ ); + + const Contact = () => ( +
+ +
+
Address
+

{data.profile.address.line1}

+

{data.profile.address.line2}

+

{data.profile.address.line3}

+
+ + + +
+ ); + + const WorkItem = (x) => ( +
+
+
{x.title}
+

+ {x.role} | {x.start} - {x.end} +

+
+ +
+ ); + + const Work = () => + data.work && + data.work.enable && ( +
+ + {data.work.items.filter((x) => x.enable).map(WorkItem)} +
+ ); + + const EducationItem = (x) => ( +
+
{x.name}
+

{x.major}

+
+ {x.start} - {x.end} +
+ +
+ ); + + const Education = () => + data.education && + data.education.enable && ( +
+ + {data.education.items.filter((x) => x.enable).map(EducationItem)} +
+ ); + + const Skills = () => + data.skills.enable && ( +
+ + +
+ ); + + const ReferenceItem = (x) => ( +
+
{x.name}
+ {x.position} + {x.phone} + {x.email} + +
+ ); + + const References = () => + data.references && + data.references.enable && ( +
+ +
+ {data.references.items.filter((x) => x.enable).map(ReferenceItem)} +
+
+ ); + + const LanguageItem = (x) => ( +
+
{x.key}
+
+ {Array.from(Array(x.value)).map((_, i) => ( + + star + + ))} +
+
+ ); + + const Languages = () => + data.languages && + data.languages.enable && ( +
+ +
{data.languages.items.filter((x) => x.enable).map(LanguageItem)}
+
+ ); + + const AwardItem = (x) => ( +
+
{x.title}
+

{x.subtitle}

+ +
+ ); + + const Awards = () => + data.awards && + data.awards.enable && ( +
+ + {data.awards.items.filter((x) => x.enable).map(AwardItem)} +
+ ); + + const CertificationItem = (x) => ( +
+
{x.title}
+

{x.subtitle}

+ +
+ ); + + const Certifications = () => + data.certifications && + data.certifications.enable && ( +
+ + {data.certifications.items.filter((x) => x.enable).map(CertificationItem)} +
+ ); + + const ExtraItem = (x) => ( +
+
{x.key}
+
{x.value}
+
+ ); + + const Extras = () => + data.extras && + data.extras.enable && ( +
+ + {data.extras.items.filter((x) => x.enable).map(ExtraItem)} +
+ ); + + return ( +
+
+
+ + + + + + +
+
+
+ +
+ + + + + +
+
+
+
+ ); +}; + +export default Celebi; diff --git a/src/templates/celebi/index.js b/src/templates/celebi/index.js new file mode 100644 index 00000000..6f3eb775 --- /dev/null +++ b/src/templates/celebi/index.js @@ -0,0 +1,5 @@ +import Celebi from './Celebi'; +import image from './preview.png'; + +export const Image = image; +export default Celebi; diff --git a/src/templates/celebi/preview.png b/src/templates/celebi/preview.png new file mode 100644 index 00000000..9dae2cc5 Binary files /dev/null and b/src/templates/celebi/preview.png differ diff --git a/src/templates/index.js b/src/templates/index.js index 825dc875..bb88c526 100644 --- a/src/templates/index.js +++ b/src/templates/index.js @@ -3,6 +3,7 @@ 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 [ { @@ -35,4 +36,10 @@ export default [ component: Glalie, preview: GlaliePreview, }, + { + key: 'celebi', + name: 'Celebi', + component: Celebi, + preview: CelebiPreview, + }, ];