diff --git a/src/components/builder/center/Artboard.js b/src/components/builder/center/Artboard.js index 20e7c576..bb74b589 100644 --- a/src/components/builder/center/Artboard.js +++ b/src/components/builder/center/Artboard.js @@ -1,10 +1,12 @@ import React, { memo } from 'react'; import { Helmet } from 'react-helmet'; import { useSelector } from '../../../contexts/ResumeContext'; +import Castform from '../../../templates/Castform'; +import Gengar from '../../../templates/Gengar'; +import Glalie from '../../../templates/Glalie'; import Onyx from '../../../templates/Onyx'; import Pikachu from '../../../templates/Pikachu'; import styles from './Artboard.module.css'; -import Gengar from '../../../templates/Gengar'; const Artboard = () => { const state = useSelector(); @@ -22,6 +24,8 @@ const Artboard = () => { {template === 'onyx' && } {template === 'pikachu' && } {template === 'gengar' && } + {template === 'castform' && } + {template === 'glalie' && } ); diff --git a/src/contexts/DatabaseContext.js b/src/contexts/DatabaseContext.js index fbb8aefe..0dbab069 100644 --- a/src/contexts/DatabaseContext.js +++ b/src/contexts/DatabaseContext.js @@ -68,8 +68,6 @@ const DatabaseProvider = ({ children }) => { }; const duplicateResume = (originalResume) => { - console.trace(); - const id = uuid(); const createdAt = firebase.database.ServerValue.TIMESTAMP; diff --git a/src/data/demoState.json b/src/data/demoState.json index bc6a4e0e..2258f1d5 100644 --- a/src/data/demoState.json +++ b/src/data/demoState.json @@ -143,6 +143,14 @@ ["objective", "skills"], ["awards", "certifications", "languages", "references", "hobbies"], ["work", "education", "projects"] + ], + "castform": [ + ["awards", "certifications", "languages", "hobbies"], + ["work", "education", "skills", "projects", "references"] + ], + "glalie": [ + ["awards", "certifications", "hobbies"], + ["work", "education", "skills", "projects", "languages", "references"] ] }, "template": "pikachu" diff --git a/src/data/initialState.json b/src/data/initialState.json index 8d6a8ee4..a2cdbf5a 100644 --- a/src/data/initialState.json +++ b/src/data/initialState.json @@ -87,6 +87,14 @@ ["objective", "skills"], ["awards", "certifications", "languages", "references", "hobbies"], ["work", "education", "projects"] + ], + "castform": [ + ["awards", "certifications", "languages", "hobbies"], + ["work", "education", "skills", "projects", "references"] + ], + "glalie": [ + ["awards", "certifications", "hobbies"], + ["work", "education", "skills", "projects", "languages", "references"] ] }, "colors": { diff --git a/src/data/templateOptions.js b/src/data/templateOptions.js index bc2d0c02..bd218aa9 100644 --- a/src/data/templateOptions.js +++ b/src/data/templateOptions.js @@ -14,6 +14,16 @@ const templateOptions = [ name: 'Gengar', preview: 'https://source.unsplash.com/random/302x502', }, + { + id: 'castform', + name: 'Castform', + preview: 'https://source.unsplash.com/random/303x503', + }, + { + id: 'glalie', + name: 'Glalie', + preview: 'https://source.unsplash.com/random/304x504', + }, ]; export default templateOptions; diff --git a/src/pages/r/view.js b/src/pages/r/view.js index 81c88f24..399dcb2e 100644 --- a/src/pages/r/view.js +++ b/src/pages/r/view.js @@ -1,13 +1,15 @@ -import { navigate, Link } from '@reach/router'; +import { Link, navigate } from '@reach/router'; import React, { memo, useContext, useEffect, useMemo, useState } from 'react'; import { Helmet } from 'react-helmet'; import { toast } from 'react-toastify'; import LoadingScreen from '../../components/router/LoadingScreen'; import DatabaseContext from '../../contexts/DatabaseContext'; -import Onyx from '../../templates/Onyx'; -import styles from './view.module.css'; -import Pikachu from '../../templates/Pikachu'; +import Castform from '../../templates/Castform'; import Gengar from '../../templates/Gengar'; +import Glalie from '../../templates/Glalie'; +import Onyx from '../../templates/Onyx'; +import Pikachu from '../../templates/Pikachu'; +import styles from './view.module.css'; const ResumeViewer = ({ id }) => { const [resume, setResume] = useState(null); @@ -50,6 +52,10 @@ const ResumeViewer = ({ id }) => { {resume.metadata.template === 'onyx' && } {resume.metadata.template === 'pikachu' && } {resume.metadata.template === 'gengar' && } + {resume.metadata.template === 'castform' && ( + + )} + {resume.metadata.template === 'glalie' && }

diff --git a/src/templates/Castform.js b/src/templates/Castform.js new file mode 100644 index 00000000..147721cf --- /dev/null +++ b/src/templates/Castform.js @@ -0,0 +1,104 @@ +import React from 'react'; +import PageContext from '../contexts/PageContext'; +import AwardsA from './blocks/Awards/AwardsA'; +import CertificationsA from './blocks/Certifications/CertificationsA'; +import ContactC from './blocks/Contact/ContactC'; +import EducationA from './blocks/Education/EducationA'; +import HeadingD from './blocks/Heading/HeadingD'; +import HobbiesA from './blocks/Hobbies/HobbiesA'; +import LanguagesA from './blocks/Languages/LanguagesA'; +import ObjectiveA from './blocks/Objective/ObjectiveA'; +import ProjectsA from './blocks/Projects/ProjectsA'; +import ReferencesA from './blocks/References/ReferencesA'; +import SkillsA from './blocks/Skills/SkillsA'; +import WorkA from './blocks/Work/WorkA'; + +const Blocks = { + objective: ObjectiveA, + work: WorkA, + education: EducationA, + projects: ProjectsA, + awards: AwardsA, + certifications: CertificationsA, + skills: SkillsA, + hobbies: HobbiesA, + languages: LanguagesA, + references: ReferencesA, +}; + +const Castform = ({ data }) => { + const layout = data.metadata.layout.castform; + + const Photo = () => + data.profile.photograph !== '' && ( + {data.profile.firstName} + ); + + const Profile = () => ( +

+

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

+
{data.profile.subtitle}
+
+ ); + + return ( + +
+
+
+
+ + + +
+ Profile + +
+ + {layout[0] && + layout[0].map((x) => { + const Component = Blocks[x]; + return Component && ; + })} +
+
+
+
+ {layout[1] && + layout[1].map((x) => { + const Component = Blocks[x]; + return Component && ; + })} +
+
+
+
+ + ); +}; + +export default Castform; diff --git a/src/templates/Glalie.js b/src/templates/Glalie.js new file mode 100644 index 00000000..0a243c86 --- /dev/null +++ b/src/templates/Glalie.js @@ -0,0 +1,98 @@ +import React from 'react'; +import PageContext from '../contexts/PageContext'; +import { hexToRgb } from '../utils'; +import AwardsA from './blocks/Awards/AwardsA'; +import CertificationsA from './blocks/Certifications/CertificationsA'; +import ContactD from './blocks/Contact/ContactD'; +import EducationA from './blocks/Education/EducationA'; +import HeadingB from './blocks/Heading/HeadingB'; +import HobbiesA from './blocks/Hobbies/HobbiesA'; +import LanguagesA from './blocks/Languages/LanguagesA'; +import ObjectiveA from './blocks/Objective/ObjectiveA'; +import ProjectsA from './blocks/Projects/ProjectsA'; +import ReferencesA from './blocks/References/ReferencesA'; +import SkillsA from './blocks/Skills/SkillsA'; +import WorkA from './blocks/Work/WorkA'; + +const Blocks = { + objective: ObjectiveA, + work: WorkA, + education: EducationA, + projects: ProjectsA, + awards: AwardsA, + certifications: CertificationsA, + skills: SkillsA, + hobbies: HobbiesA, + languages: LanguagesA, + references: ReferencesA, +}; + +const Glalie = ({ data }) => { + const layout = data.metadata.layout.glalie; + const { r, g, b } = hexToRgb(data.metadata.colors.primary) || {}; + + const Profile = () => ( +
+ {data.profile.photograph !== '' && ( + {data.profile.firstName} + )} +
+

{data.profile.firstName}

+

{data.profile.lastName}

+
+
+ {data.profile.subtitle} +
+
+ ); + + return ( + +
+
+
+
+ + + + {layout[0] && + layout[0].map((x) => { + const Component = Blocks[x]; + return Component && ; + })} +
+
+ +
+
+ {layout[1] && + layout[1].map((x) => { + const Component = Blocks[x]; + return Component && ; + })} +
+
+
+
+ + ); +}; + +export default Glalie; diff --git a/src/templates/Onyx.js b/src/templates/Onyx.js index 450b1556..5f44924f 100644 --- a/src/templates/Onyx.js +++ b/src/templates/Onyx.js @@ -33,7 +33,7 @@ const Onyx = ({ data }) => {
{
{ + return value ? ( +
+
{label}
+ {link ? ( + + {value} + + ) : ( + {value} + )} +
+ ) : null; +}; + +const ContactC = () => { + const { data } = useContext(PageContext); + + return ( +
+
+
Address
+
+ {data.profile.address.line1} + {data.profile.address.line2} + + {data.profile.address.city} {data.profile.address.pincode} + +
+
+ + + + + + {safetyCheck(data.social) && + data.social.items.map((x) => ( + + ))} +
+ ); +}; + +export default memo(ContactC); diff --git a/src/templates/blocks/Contact/ContactD.js b/src/templates/blocks/Contact/ContactD.js new file mode 100644 index 00000000..b17b7d39 --- /dev/null +++ b/src/templates/blocks/Contact/ContactD.js @@ -0,0 +1,83 @@ +import React, { memo, useContext } from 'react'; +import { MdFlare } from 'react-icons/md'; +import PageContext from '../../../contexts/PageContext'; +import { safetyCheck } from '../../../utils'; + +const ContactItem = ({ value, label, link }) => { + return value ? ( +
+
{label}
+ {link ? ( + + {value} + + ) : ( + {value} + )} +
+ ) : null; +}; + +const ContactC = () => { + const { data } = useContext(PageContext); + + return ( +
+
+ +
+ +
+
Address
+
+ {data.profile.address.line1} + {data.profile.address.line2} + + {data.profile.address.city} {data.profile.address.pincode} + +
+
+ + + + + + {safetyCheck(data.social) && + data.social.items.map((x) => ( + + ))} +
+ ); +}; + +export default memo(ContactC); diff --git a/src/templates/blocks/Heading/HeadingD.js b/src/templates/blocks/Heading/HeadingD.js new file mode 100644 index 00000000..c735c752 --- /dev/null +++ b/src/templates/blocks/Heading/HeadingD.js @@ -0,0 +1,23 @@ +import React, { memo, useContext } from 'react'; +import PageContext from '../../../contexts/PageContext'; +import { hexToRgb } from '../../../utils'; + +const HeadingC = ({ children }) => { + const { data } = useContext(PageContext); + const { r, g, b } = hexToRgb(data.metadata.colors.primary) || {}; + + return ( +
+ {children} +
+ ); +}; + +export default memo(HeadingC);