Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 16:22:59 +10:00
Code Issues Packages Projects Releases Wiki Activity

added hobbies section, updated templates

Browse Source
This commit is contained in:
Amruth Pillai
2020-04-28 13:49:22 +05:30
parent e2d9b00f7d
commit 00d5a5e979
9 changed files with 296 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/LeftSidebar/LeftSidebar.js
View File

@ -12,6 +12,7 @@ import SkillsTab from './tabs/Skills';
import ExtrasTab from './tabs/Extras';
import LanguagesTab from './tabs/Languages';
import ReferencesTab from './tabs/References';
import HobbiesTab from './tabs/Hobbies';
const LeftSidebar = () => {
const context = useContext(AppContext);
@ -26,11 +27,12 @@ const LeftSidebar = () => {
{ key: 'awards', name: data.awards.heading },
{ key: 'certifications', name: data.certifications.heading },
{ key: 'skills', name: data.skills.heading },
{ key: 'hobbies', name: data.hobbies.heading },
{ key: 'languages', name: data.languages.heading },
{ key: 'references', name: data.references.heading },
{ key: 'extras', name: data.extras.heading },
];
const [currentTab, setCurrentTab] = useState(tabs[6].key);
const [currentTab, setCurrentTab] = useState(tabs[0].key);
const onChange = (key, value) => {
dispatch({
type: 'on_input',
@ -45,25 +47,27 @@ const LeftSidebar = () => {
const renderTabs = () => {
switch (currentTab) {
case tabs[0].key:
case 'profile':
return <ProfileTab data={data} onChange={onChange} />;
case tabs[1].key:
case 'objective':
return <ObjectiveTab data={data} onChange={onChange} />;
case tabs[2].key:
case 'work':
return <WorkTab data={data} onChange={onChange} />;
case tabs[3].key:
case 'education':
return <EducationTab data={data} onChange={onChange} />;
case tabs[4].key:
case 'awards':
return <AwardsTab data={data} onChange={onChange} />;
case tabs[5].key:
case 'certifications':
return <CertificationsTab data={data} onChange={onChange} />;
case tabs[6].key:
case 'skills':
return <SkillsTab data={data} onChange={onChange} />;
case tabs[7].key:
case 'hobbies':
return <HobbiesTab data={data} onChange={onChange} />;
case 'languages':
return <LanguagesTab data={data} onChange={onChange} />;
case tabs[8].key:
case 'references':
return <ReferencesTab data={data} onChange={onChange} />;
case tabs[9].key:
case 'extras':
return <ExtrasTab data={data} onChange={onChange} />;
default:
return null;

133
src/components/LeftSidebar/tabs/Hobbies.js Normal file
View File

@ -0,0 +1,133 @@
import React, { useState, useContext } from 'react';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import TextField from '../../../shared/TextField';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
import ItemHeading from '../../../shared/ItemHeading';
const HobbiesTab = ({ data, onChange }) => {
const context = useContext(AppContext);
const { dispatch } = context;
return (
<>
<div className="my-6 grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox
checked={data.hobbies.enable}
onChange={v => onChange('data.hobbies.enable', v)}
/>
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.hobbies.heading}
onChange={v => onChange('data.hobbies.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
{data.hobbies.items.map((x, index) => (
<Item item={x} key={index} index={index} onChange={onChange} dispatch={dispatch} />
))}
<AddItem heading={data.hobbies.heading} dispatch={dispatch} />
</>
);
};
const Form = ({ item, onChange }) => {
return (
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
placeholder="Beatboxing"
value={item}
onChange={e => onChange(e.target.value)}
type="text"
/>
);
};
const AddItem = ({ heading, dispatch }) => {
const [isOpen, setOpen] = useState(false);
const [item, setItem] = useState('');
const add = () => {
if (item === '') return;
addItem(dispatch, 'hobbies', item);
setItem('');
};
return (
<div className="my-4 border border-gray-200 rounded p-5">
<ItemHeading heading={heading} setOpen={setOpen} isOpen={isOpen} />
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<div className="grid grid-cols-4 gap-4">
<div className="col-span-3">
<Form item={item} onChange={setItem} />
</div>
<button
type="button"
onClick={add}
className="col-span-1 bg-gray-600 hover:bg-gray-700 text-sm font-medium rounded"
>
<div className="flex justify-center items-center">
<i className="material-icons font-bold text-white text-lg">add</i>
</div>
</button>
</div>
</div>
</div>
);
};
const Item = ({ item, index, onChange, dispatch }) => {
const identifier = `data.hobbies.items[${index}]`;
return (
<div className="my-4 grid grid-cols-12">
<div className="col-span-9">
<Form item={item} onChange={v => onChange(identifier, v)} />
</div>
<button
type="button"
onClick={() => moveItemUp(dispatch, 'hobbies', item)}
className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
>
<div className="flex justify-end items-center">
<i className="material-icons font-bold text-lg">arrow_upward</i>
</div>
</button>
<button
type="button"
onClick={() => moveItemDown(dispatch, 'hobbies', item)}
className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
>
<div className="flex justify-end items-center">
<i className="material-icons font-bold text-lg">arrow_downward</i>
</div>
</button>
<button
type="button"
onClick={() => deleteItem(dispatch, 'hobbies', item)}
className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
>
<div className="flex justify-end items-center">
<i className="material-icons font-bold text-lg">close</i>
</div>
</button>
</div>
);
};
export default HobbiesTab;

27
src/context/AppContext.js
View File

@ -24,47 +24,52 @@ const initialState = {
email: '',
},
objective: {
enable: false,
enable: true,
heading: 'Objective',
body: '',
},
work: {
enable: false,
enable: true,
heading: 'Work Experience',
items: [],
},
education: {
enable: false,
enable: true,
heading: 'Education',
items: [],
},
awards: {
enable: false,
enable: true,
heading: 'Honors & Awards',
items: [],
},
certifications: {
enable: false,
enable: true,
heading: 'Certifications',
items: [],
},
skills: {
enable: false,
heading: 'Skills & Hobbies',
enable: true,
heading: 'Skills',
items: [],
},
hobbies: {
enable: true,
heading: 'Hobbies',
items: [],
},
languages: {
enable: false,
enable: true,
heading: 'Languages',
items: [],
},
references: {
enable: false,
enable: true,
heading: 'References',
items: [],
},
extras: {
enable: false,
enable: true,
heading: 'Personal Information',
items: [],
},
@ -97,7 +102,7 @@ const reducer = (state, { type, payload }) => {
return set({ ...state }, `data.${payload.key}.items`, items);
case 'delete_item':
items = get({ ...state }, `data.${payload.key}.items`, []);
remove(items, (x) => x === payload.value);
remove(items, x => x === payload.value);
return set({ ...state }, `data.${payload.key}.items`, items);
case 'move_item_up':
items = get({ ...state }, `data.${payload.key}.items`, []);

20
src/templates/castform/Castform.js
View File

@ -93,6 +93,21 @@ const Castform = () => {
</div>
);
const HobbyItem = x => (
<li key={x} className="text-sm my-2">
{x}
</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 && <p className="m-5 text-sm">{data.objective.body}</p>;
@ -251,7 +266,7 @@ const Castform = () => {
data.extras &&
data.extras.enable && (
<div>
<Heading title={data.extras.heading} />
<Heading light title={data.extras.heading} />
{data.extras.items.filter(x => x.enable).map(ExtraItem)}
</div>
);
@ -276,9 +291,9 @@ const Castform = () => {
<PersonalInformation />
<ContactInformation />
<Skills />
<Hobbies />
<Languages />
<Certifications />
<Extras />
</div>
<div className="col-span-8">
<Objective />
@ -286,6 +301,7 @@ const Castform = () => {
<Education />
<Awards />
<References />
<Extras />
</div>
</div>
</div>

17
src/templates/celebi/Celebi.js
View File

@ -144,7 +144,21 @@ const Celebi = () => {
<Heading title="Skills" className="w-3/4 mx-auto" />
<ul className="list-none text-sm">
{data.skills.items.map(x => (
<li key="x" className="my-2">
<li key={x} className="my-2">
{x}
</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} className="my-2">
{x}
</li>
))}
@ -266,6 +280,7 @@ const Celebi = () => {
<Photo />
<Contact />
<Skills />
<Hobbies />
<Languages />
<Certifications />
<Extras />

16
src/templates/gengar/Gengar.js
View File

@ -79,6 +79,21 @@ const Gengar = () => {
</div>
);
const HobbyItem = x => (
<li key={x} className="text-sm py-1">
{x}
</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">
@ -285,6 +300,7 @@ const Gengar = () => {
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
>
<Skills />
<Hobbies />
<Languages />
<Education />
<Certifications />

50
src/templates/glalie/Glalie.js
View File

@ -31,10 +31,6 @@ const Glalie = () => {
<div className="tracking-wide text-xs uppercase font-medium">{data.profile.subtitle}</div>
);
const Divider = () => (
<div className="w-1/2 mx-auto my-2 border-b-2" style={{ borderColor: theme.colors.accent }} />
);
const ContactItem = ({ title, value }) =>
value && (
<div className="flex flex-col">
@ -47,14 +43,14 @@ const Glalie = () => {
const ContactInformation = () => (
<div
className="w-full border-2 pl-4 pr-4 pb-6"
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: '-.9em', color: theme.colors.accent }}
style={{ top: '-.75em', color: theme.colors.accent }}
>
<h2 className="flex">
<i className="material-icons">flare</i>
@ -191,6 +187,23 @@ const Glalie = () => {
</div>
);
const HobbyItem = x => (
<li key={x} className="text-xs font-medium">
{x}
</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>
@ -267,33 +280,28 @@ const Glalie = () => {
>
<div className="grid grid-cols-12">
<div
className="h-full col-span-4 p-8 grid grid-cols-1 row-gap-8 text-center"
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)` }}
>
<div className="grid grid-cols-1 row-gap-4">
<div className="grid grid-cols-1 gap-2">
<Photo />
<FullName />
<Subtitle />
</div>
<Divider />
<ContactInformation />
<Divider />
<Objective />
<Hobbies />
<Languages />
<Certifications />
</div>
<div className="col-span-8 p-8">
<div className="grid grid-cols-1 row-gap-6">
<Work />
<Education />
<Skills />
<Awards />
<References />
<Extras />
</div>
<div className="col-span-8 p-8 grid grid-cols-1 row-gap-4">
<Work />
<Education />
<Skills />
<Awards />
<References />
<Extras />
</div>
</div>
</div>

32
src/templates/onyx/Onyx.js
View File

@ -145,6 +145,28 @@ const Onyx = () => {
</div>
);
const HobbyItem = 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 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}
@ -227,7 +249,7 @@ const Onyx = () => {
data.extras.enable && (
<div>
<Heading title={data.extras.heading} />
<table className="w-2/3 table-auto">
<table className="table-auto">
<tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
</table>
</div>
@ -277,11 +299,15 @@ const Onyx = () => {
<div className="grid grid-cols-2 gap-6">
<Skills />
<Languages />
<Hobbies />
</div>
<References />
<Extras />
<div className="grid grid-cols-2 gap-6">
<Extras />
<Languages />
</div>
</div>
);
};

29
src/templates/pikachu/Pikachu.js
View File

@ -76,6 +76,24 @@ const Pikachu = () => {
</div>
);
const HobbyItem = x => (
<span
key={x}
className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
>
{x}
</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>
@ -91,7 +109,7 @@ const Pikachu = () => {
data.references.enable && (
<div>
<Heading title={data.references.heading} />
<div className="grid grid-cols-2 gap-6">
<div className="grid grid-cols-2 gap-2 mb-6">
{data.references.items.filter(x => x.enable).map(ReferenceItem)}
</div>
</div>
@ -136,7 +154,7 @@ const Pikachu = () => {
data.extras.enable && (
<div>
<Heading title={data.extras.heading} />
<div className="flex flex-col mb-6">
<div className="grid grid-cols-2">
{data.extras.items.filter(x => x.enable).map(ExtraItem)}
</div>
</div>
@ -169,7 +187,7 @@ const Pikachu = () => {
);
const EducationItem = x => (
<div key={x.id} className="mb-3">
<div key={x.id} className="mb-2">
<div className="flex justify-between items-center">
<div>
<h6 className="font-semibold">{x.name}</h6>
@ -200,7 +218,7 @@ const Pikachu = () => {
);
const AwardItem = x => (
<div key={x.id} className="mb-3">
<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} />
@ -274,9 +292,9 @@ const Pikachu = () => {
</div>
<Skills />
<Hobbies />
<Languages />
<Certifications />
<Extras />
</div>
<div className="col-span-8">
@ -284,6 +302,7 @@ const Pikachu = () => {
<Education />
<Awards />
<References />
<Extras />
</div>
</div>
</div>