mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-20 03:32:09 +10:00
- implement glalie template
This commit is contained in:
Amruth Pillai
104
src/templates/Castform.js
Normal file
104
src/templates/Castform.js
Normal file
@ -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 !== '' && (
|
||||
<img
|
||||
className="w-32 h-32 rounded-full"
|
||||
style={{
|
||||
borderWidth: 6,
|
||||
borderColor: data.metadata.colors.background,
|
||||
}}
|
||||
src={data.profile.photograph}
|
||||
alt={data.profile.firstName}
|
||||
/>
|
||||
);
|
||||
|
||||
const Profile = () => (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">
|
||||
{data.profile.firstName} {data.profile.lastName}
|
||||
</h1>
|
||||
<h5>{data.profile.subtitle}</h5>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<PageContext.Provider value={{ data, heading: HeadingD }}>
|
||||
<div
|
||||
id="page"
|
||||
className="rounded"
|
||||
style={{
|
||||
fontFamily: data.metadata.font,
|
||||
color: data.metadata.colors.text,
|
||||
backgroundColor: data.metadata.colors.background,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-12">
|
||||
<div
|
||||
className="col-span-4 p-5"
|
||||
style={{
|
||||
color: data.metadata.colors.background,
|
||||
backgroundColor: data.metadata.colors.primary,
|
||||
}}
|
||||
>
|
||||
<div className="grid gap-4">
|
||||
<Photo />
|
||||
<Profile />
|
||||
|
||||
<div>
|
||||
<HeadingD>Profile</HeadingD>
|
||||
<ContactC />
|
||||
</div>
|
||||
|
||||
{layout[0] &&
|
||||
layout[0].map((x) => {
|
||||
const Component = Blocks[x];
|
||||
return Component && <Component key={x} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-8 p-5">
|
||||
<div className="grid gap-4">
|
||||
{layout[1] &&
|
||||
layout[1].map((x) => {
|
||||
const Component = Blocks[x];
|
||||
return Component && <Component key={x} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Castform;
|
||||
98
src/templates/Glalie.js
Normal file
98
src/templates/Glalie.js
Normal file
@ -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 = () => (
|
||||
<div className="grid gap-2 text-center">
|
||||
{data.profile.photograph !== '' && (
|
||||
<img
|
||||
className="w-40 h-40 rounded-full mx-auto"
|
||||
src={data.profile.photograph}
|
||||
alt={data.profile.firstName}
|
||||
/>
|
||||
)}
|
||||
<div className="text-4xl font-bold leading-none">
|
||||
<h1>{data.profile.firstName}</h1>
|
||||
<h1>{data.profile.lastName}</h1>
|
||||
</div>
|
||||
<div className="tracking-wide text-xs uppercase font-medium">
|
||||
{data.profile.subtitle}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<PageContext.Provider value={{ data, heading: HeadingB }}>
|
||||
<div
|
||||
id="page"
|
||||
className="rounded"
|
||||
style={{
|
||||
fontFamily: data.metadata.font,
|
||||
color: data.metadata.colors.text,
|
||||
backgroundColor: data.metadata.colors.background,
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-12">
|
||||
<div
|
||||
className="col-span-4"
|
||||
style={{
|
||||
backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
|
||||
}}
|
||||
>
|
||||
<div className="grid gap-6 p-6">
|
||||
<Profile />
|
||||
<ContactD />
|
||||
|
||||
{layout[0] &&
|
||||
layout[0].map((x) => {
|
||||
const Component = Blocks[x];
|
||||
return Component && <Component key={x} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-8">
|
||||
<div className="grid gap-4 p-6">
|
||||
{layout[1] &&
|
||||
layout[1].map((x) => {
|
||||
const Component = Blocks[x];
|
||||
return Component && <Component key={x} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Glalie;
|
||||
@ -33,7 +33,7 @@ const Onyx = ({ data }) => {
|
||||
<PageContext.Provider value={{ data, heading: HeadingA }}>
|
||||
<div
|
||||
id="page"
|
||||
className="p-10 rounded"
|
||||
className="p-8 rounded"
|
||||
style={{
|
||||
fontFamily: data.metadata.font,
|
||||
color: data.metadata.colors.text,
|
||||
|
||||
@ -32,7 +32,7 @@ const Pikachu = ({ data }) => {
|
||||
<PageContext.Provider value={{ data, heading: HeadingB }}>
|
||||
<div
|
||||
id="page"
|
||||
className="p-10 rounded"
|
||||
className="p-6 rounded"
|
||||
style={{
|
||||
fontFamily: data.metadata.font,
|
||||
color: data.metadata.colors.text,
|
||||
|
||||
65
src/templates/blocks/Contact/ContactC.js
Normal file
65
src/templates/blocks/Contact/ContactC.js
Normal file
@ -0,0 +1,65 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import PageContext from '../../../contexts/PageContext';
|
||||
import { safetyCheck } from '../../../utils';
|
||||
|
||||
const ContactItem = ({ value, label, link }) => {
|
||||
return value ? (
|
||||
<div className="flex flex-col">
|
||||
<h6 className="capitalize font-semibold">{label}</h6>
|
||||
{link ? (
|
||||
<a href={link} target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-medium break-all">{value}</span>
|
||||
</a>
|
||||
) : (
|
||||
<span className="font-medium break-all">{value}</span>
|
||||
)}
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
const ContactC = () => {
|
||||
const { data } = useContext(PageContext);
|
||||
|
||||
return (
|
||||
<div className="text-xs grid gap-2">
|
||||
<div>
|
||||
<h6 className="capitalize font-semibold">Address</h6>
|
||||
<div className="flex flex-col text-xs">
|
||||
<span>{data.profile.address.line1}</span>
|
||||
<span>{data.profile.address.line2}</span>
|
||||
<span>
|
||||
{data.profile.address.city} {data.profile.address.pincode}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContactItem
|
||||
label="phone"
|
||||
value={data.profile.phone}
|
||||
link={`tel:${data.profile.phone}`}
|
||||
/>
|
||||
<ContactItem
|
||||
label="website"
|
||||
value={data.profile.website}
|
||||
link={`http://${data.profile.website}`}
|
||||
/>
|
||||
<ContactItem
|
||||
label="email"
|
||||
value={data.profile.email}
|
||||
link={`mailto:${data.profile.email}`}
|
||||
/>
|
||||
|
||||
{safetyCheck(data.social) &&
|
||||
data.social.items.map((x) => (
|
||||
<ContactItem
|
||||
key={x.id}
|
||||
value={x.username}
|
||||
label={x.network}
|
||||
link={x.url}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ContactC);
|
||||
83
src/templates/blocks/Contact/ContactD.js
Normal file
83
src/templates/blocks/Contact/ContactD.js
Normal file
@ -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 ? (
|
||||
<div className="flex flex-col">
|
||||
<h6 className="capitalize font-semibold">{label}</h6>
|
||||
{link ? (
|
||||
<a href={link} target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-medium break-all">{value}</span>
|
||||
</a>
|
||||
) : (
|
||||
<span className="font-medium break-all">{value}</span>
|
||||
)}
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
const ContactC = () => {
|
||||
const { data } = useContext(PageContext);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="my-4 relative w-full border-2 grid gap-2 text-center text-xs py-5"
|
||||
style={{
|
||||
borderColor: data.metadata.colors.primary,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute text-center"
|
||||
style={{
|
||||
top: '-11px',
|
||||
left: '50%',
|
||||
marginLeft: '-10px',
|
||||
color: data.metadata.colors.primary,
|
||||
}}
|
||||
>
|
||||
<MdFlare size="20px" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 className="capitalize font-semibold">Address</h6>
|
||||
<div className="flex flex-col text-xs">
|
||||
<span>{data.profile.address.line1}</span>
|
||||
<span>{data.profile.address.line2}</span>
|
||||
<span>
|
||||
{data.profile.address.city} {data.profile.address.pincode}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContactItem
|
||||
label="phone"
|
||||
value={data.profile.phone}
|
||||
link={`tel:${data.profile.phone}`}
|
||||
/>
|
||||
<ContactItem
|
||||
label="website"
|
||||
value={data.profile.website}
|
||||
link={`http://${data.profile.website}`}
|
||||
/>
|
||||
<ContactItem
|
||||
label="email"
|
||||
value={data.profile.email}
|
||||
link={`mailto:${data.profile.email}`}
|
||||
/>
|
||||
|
||||
{safetyCheck(data.social) &&
|
||||
data.social.items.map((x) => (
|
||||
<ContactItem
|
||||
key={x.id}
|
||||
value={x.username}
|
||||
label={x.network}
|
||||
link={x.url}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ContactC);
|
||||
23
src/templates/blocks/Heading/HeadingD.js
Normal file
23
src/templates/blocks/Heading/HeadingD.js
Normal file
@ -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 (
|
||||
<h6
|
||||
className="py-1 px-4 rounded-r leading-loose font-bold text-xs uppercase tracking-wide mb-3"
|
||||
style={{
|
||||
marginLeft: '-15px',
|
||||
color: data.metadata.colors.background,
|
||||
backgroundColor: `rgba(${r - 40}, ${g - 40}, ${b - 40}, 0.8)`,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</h6>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(HeadingC);
|
||||
Reference in New Issue
Block a user