Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-07-10 13:05:48 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5 from AmruthPillai/feature/add-language-refs

Browse Source 
Feature: New Resume Sections, Languages & References
This commit is contained in:
Amruth Pillai
2020-03-27 18:07:02 +05:30
committed by GitHub
parent cebca55274 d3c6b23564
commit fdf1e56000
23 changed files with 837 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+3 -3
View File
@@ -5544,9 +5544,9 @@
}
},
"eslint-plugin-react-hooks": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz",
"integrity": "sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g==",
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-3.0.0.tgz",
"integrity": "sha512-EjxTHxjLKIBWFgDJdhKKzLh5q+vjTFrqNZX36uIxWS4OfyXe5DawqPj3U5qeJ1ngLwatjzQnmR0Lz0J0YH3kxw==",
"dev": true
},
"eslint-scope": {
package.json
+2 -2
View File
@@ -52,8 +52,8 @@
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"eslint-plugin-react-hooks": "^3.0.0",
"postcss-cli": "^7.1.0",
"tailwindcss": "^1.2.0"
}
}
}
public/index.html
+4
View File
@@ -25,9 +25,13 @@
<title>Reactive Resume</title>
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
src/components/App/App.js
+5 -1
View File
@@ -38,7 +38,11 @@ const App = () => {
<LeftSidebar />
<div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll">
<div id="page" className="p-10 my-auto shadow-2xl">
<div
id="page"
className="animated fadeIn p-10 my-auto shadow-2xl"
style={{ animationDelay: '500ms' }}
>
{renderTemplate()}
</div>
</div>
src/components/LeftSidebar/LeftSidebar.js
+9 -1
View File
@@ -10,6 +10,8 @@ import AwardsTab from './tabs/Awards';
import CertificationsTab from './tabs/Certifications';
import SkillsTab from './tabs/Skills';
import ExtrasTab from './tabs/Extras';
import LanguagesTab from './tabs/Languages';
import ReferencesTab from './tabs/References';
const tabs = [
'Profile',
@@ -19,6 +21,8 @@ const tabs = [
'Awards',
'Certifications',
'Skills',
'Languages',
'References',
'Extras',
];
@@ -56,6 +60,10 @@ const LeftSidebar = () => {
return <CertificationsTab data={data} onChange={onChange} />;
case 'Skills':
return <SkillsTab data={data} onChange={onChange} />;
case 'Languages':
return <LanguagesTab data={data} onChange={onChange} />;
case 'References':
return <ReferencesTab data={data} onChange={onChange} />;
case 'Extras':
return <ExtrasTab data={data} onChange={onChange} />;
default:
@@ -66,7 +74,7 @@ const LeftSidebar = () => {
return (
<div
id="leftSidebar"
className="z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
className="animated slideInLeft z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
>
<TabBar tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
<div className="px-6">{renderTabs()}</div>
src/components/LeftSidebar/tabs/Awards.js
+7 -39
View File
@@ -6,6 +6,7 @@ import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import TextArea from '../../../shared/TextArea';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
const AwardsTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@@ -59,16 +60,10 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(set({ ...item }, key, value));
const addItem = () => {
const onSubmit = () => {
if (item.title === '') return;
dispatch({
type: 'add_item',
payload: {
key: 'awards',
value: item,
},
});
addItem(dispatch, 'awards', item);
setItem({
id: uuidv4(),
@@ -116,7 +111,7 @@ const AddItem = ({ dispatch }) => {
<button
type="button"
onClick={addItem}
onClick={onSubmit}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -133,33 +128,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
const [isOpen, setOpen] = useState(false);
const identifier = `data.awards.items[${index}]`;
const deleteItem = () =>
dispatch({
type: 'delete_item',
payload: {
key: 'awards',
value: item,
},
});
const moveItemUp = () =>
dispatch({
type: 'move_item_up',
payload: {
key: 'awards',
value: item,
},
});
const moveItemDown = () =>
dispatch({
type: 'move_item_down',
payload: {
key: 'awards',
value: item,
},
});
return (
<div className="my-4 border border-gray-200 rounded p-5">
<div
@@ -197,7 +165,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className="flex justify-between">
<button
type="button"
onClick={deleteItem}
onClick={() => deleteItem(dispatch, 'awards', item)}
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -210,7 +178,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!first && (
<button
type="button"
onClick={moveItemUp}
onClick={() => moveItemUp(dispatch, 'awards', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
>
<div className="flex items-center">
@@ -222,7 +190,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!last && (
<button
type="button"
onClick={moveItemDown}
onClick={() => moveItemDown(dispatch, 'awards', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
>
<div className="flex items-center">
src/components/LeftSidebar/tabs/Certifications.js
+7 -39
View File
@@ -6,6 +6,7 @@ import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import TextArea from '../../../shared/TextArea';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
const CertificationsTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@@ -59,16 +60,10 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(set({ ...item }, key, value));
const addItem = () => {
const onSubmit = () => {
if (item.title === '') return;
dispatch({
type: 'add_item',
payload: {
key: 'certifications',
value: item,
},
});
addItem(dispatch, 'certifications', item);
setItem({
id: uuidv4(),
@@ -116,7 +111,7 @@ const AddItem = ({ dispatch }) => {
<button
type="button"
onClick={addItem}
onClick={onSubmit}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -133,33 +128,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
const [isOpen, setOpen] = useState(false);
const identifier = `data.certifications.items[${index}]`;
const deleteItem = () =>
dispatch({
type: 'delete_item',
payload: {
key: 'certifications',
value: item,
},
});
const moveItemUp = () =>
dispatch({
type: 'move_item_up',
payload: {
key: 'certifications',
value: item,
},
});
const moveItemDown = () =>
dispatch({
type: 'move_item_down',
payload: {
key: 'certifications',
value: item,
},
});
return (
<div className="my-4 border border-gray-200 rounded p-5">
<div
@@ -197,7 +165,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className="flex justify-between">
<button
type="button"
onClick={deleteItem}
onClick={() => deleteItem(dispatch, 'certifications', item)}
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -210,7 +178,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!first && (
<button
type="button"
onClick={moveItemUp}
onClick={() => moveItemUp(dispatch, 'certifications', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
>
<div className="flex items-center">
@@ -222,7 +190,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!last && (
<button
type="button"
onClick={moveItemDown}
onClick={() => moveItemDown(dispatch, 'certifications', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
>
<div className="flex items-center">
src/components/LeftSidebar/tabs/Education.js
+7 -39
View File
@@ -6,6 +6,7 @@ import TextField from '../../../shared/TextField';
import TextArea from '../../../shared/TextArea';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
const EducationTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@@ -62,16 +63,10 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(set({ ...item }, key, value));
const addItem = () => {
const onSubmit = () => {
if (item.name === '' || item.major === '') return;
dispatch({
type: 'add_item',
payload: {
key: 'education',
value: item,
},
});
addItem(dispatch, 'education', item);
setItem({
id: uuidv4(),
@@ -150,7 +145,7 @@ const AddItem = ({ dispatch }) => {
<button
type="button"
onClick={addItem}
onClick={onSubmit}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -167,33 +162,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
const [isOpen, setOpen] = useState(false);
const identifier = `data.education.items[${index}]`;
const deleteItem = () =>
dispatch({
type: 'delete_item',
payload: {
key: 'education',
value: item,
},
});
const moveItemUp = () =>
dispatch({
type: 'move_item_up',
payload: {
key: 'education',
value: item,
},
});
const moveItemDown = () =>
dispatch({
type: 'move_item_down',
payload: {
key: 'education',
value: item,
},
});
return (
<div className="my-4 border border-gray-200 rounded p-5">
<div
@@ -259,7 +227,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className="flex justify-between">
<button
type="button"
onClick={deleteItem}
onClick={() => deleteItem(dispatch, 'education', item)}
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -272,7 +240,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!first && (
<button
type="button"
onClick={moveItemUp}
onClick={() => moveItemUp(dispatch, 'education', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
>
<div className="flex items-center">
@@ -284,7 +252,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!last && (
<button
type="button"
onClick={moveItemDown}
onClick={() => moveItemDown(dispatch, 'education', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
>
<div className="flex items-center">
src/components/LeftSidebar/tabs/Extras.js
+7 -39
View File
@@ -5,6 +5,7 @@ import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
const ExtrasTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@@ -57,16 +58,10 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(items => set({ ...items }, key, value));
const addItem = () => {
const onSubmit = () => {
if (item.key === '' || item.value === '') return;
dispatch({
type: 'add_item',
payload: {
key: 'extras',
value: item,
},
});
addItem(dispatch, 'extras', item);
setItem({
id: uuidv4(),
@@ -106,7 +101,7 @@ const AddItem = ({ dispatch }) => {
<button
type="button"
onClick={addItem}
onClick={onSubmit}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -123,33 +118,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
const [isOpen, setOpen] = useState(false);
const identifier = `data.extras.items[${index}]`;
const deleteItem = () =>
dispatch({
type: 'delete_item',
payload: {
key: 'extras',
value: item,
},
});
const moveItemUp = () =>
dispatch({
type: 'move_item_up',
payload: {
key: 'extras',
value: item,
},
});
const moveItemDown = () =>
dispatch({
type: 'move_item_down',
payload: {
key: 'extras',
value: item,
},
});
return (
<div className="my-4 border border-gray-200 rounded p-5">
<div
@@ -180,7 +148,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className="mt-6 flex justify-between">
<button
type="button"
onClick={deleteItem}
onClick={() => deleteItem(dispatch, 'extras', item)}
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -193,7 +161,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!first && (
<button
type="button"
onClick={moveItemUp}
onClick={() => moveItemUp(dispatch, 'extras', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
>
<div className="flex items-center">
@@ -205,7 +173,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!last && (
<button
type="button"
onClick={moveItemDown}
onClick={() => moveItemDown(dispatch, 'extras', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
>
<div className="flex items-center">
src/components/LeftSidebar/tabs/Languages.js
+212
View File
@@ -0,0 +1,212 @@
import React, { useState, useEffect, useContext } from 'react';
import { v4 as uuidv4 } from 'uuid';
import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import Counter from '../../../shared/Counter';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
const LanguagesTab = ({ data, onChange }) => {
const context = useContext(AppContext);
const { dispatch } = context;
useEffect(() => {
if (!('languages' in data)) {
dispatch({
type: 'migrate_section',
payload: {
key: 'languages',
value: {
enable: false,
heading: 'Languages',
items: [],
},
},
});
dispatch({ type: 'save_data' });
}
}, [data, dispatch]);
return (
'languages' in data && (
<>
<div className="mb-6 grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox
checked={data.languages.enable}
onChange={v => onChange('data.languages.enable', v)}
/>
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.languages.heading}
onChange={v => onChange('data.languages.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
{data.languages.items.map((x, index) => (
<Item
item={x}
key={x.id}
index={index}
onChange={onChange}
dispatch={dispatch}
first={index === 0}
last={index === data.languages.items.length - 1}
/>
))}
<AddItem dispatch={dispatch} />
</>
)
);
};
const AddItem = ({ dispatch }) => {
const [isOpen, setOpen] = useState(false);
const [item, setItem] = useState({
id: uuidv4(),
key: '',
value: 1,
});
const onChange = (key, value) => setItem(items => set({ ...items }, key, value));
const onSubmit = () => {
if (item.key === '') return;
addItem(dispatch, 'languages', item);
setItem({
id: uuidv4(),
key: '',
value: 1,
});
setOpen(false);
};
return (
<div className="my-4 border border-gray-200 rounded p-5">
<div
className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)}
>
<h6 className="text-sm font-medium">Add Language</h6>
<i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
</div>
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField
label="Key"
className="mb-6"
placeholder="Dothraki"
value={item.key}
onChange={v => onChange('key', v)}
/>
<Counter
label="Rating"
className="mb-6"
value={item.value}
onDecrement={() => item.value > 1 && onChange('value', item.value - 1)}
onIncrement={() => item.value < 5 && onChange('value', item.value + 1)}
/>
<button
type="button"
onClick={onSubmit}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">add</i>
<span className="text-sm">Add</span>
</div>
</button>
</div>
</div>
);
};
const Item = ({ item, index, onChange, dispatch, first, last }) => {
const [isOpen, setOpen] = useState(false);
const identifier = `data.languages.items[${index}]`;
return (
<div className="my-4 border border-gray-200 rounded p-5">
<div
className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)}
>
<h6 className="text-sm font-medium">{item.key}</h6>
<i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
</div>
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField
label="Name"
className="mb-6"
placeholder="Dothraki"
value={item.key}
onChange={v => onChange(`${identifier}.key`, v)}
/>
<Counter
label="Rating"
className="mb-6"
value={item.value}
onDecrement={() => item.value > 1 && onChange(`${identifier}.value`, item.value - 1)}
onIncrement={() => item.value < 5 && onChange(`${identifier}.value`, item.value + 1)}
/>
<div className="mt-6 flex justify-between">
<button
type="button"
onClick={() => deleteItem(dispatch, 'languages', item)}
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">delete</i>
<span className="text-sm">Delete</span>
</div>
</button>
<div className="flex">
{!first && (
<button
type="button"
onClick={() => moveItemUp(dispatch, 'languages', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
>
<div className="flex items-center">
<i className="material-icons font-bold text-base">arrow_upward</i>
</div>
</button>
)}
{!last && (
<button
type="button"
onClick={() => moveItemDown(dispatch, 'languages', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
>
<div className="flex items-center">
<i className="material-icons font-bold text-base">arrow_downward</i>
</div>
</button>
)}
</div>
</div>
</div>
</div>
);
};
export default LanguagesTab;
src/components/LeftSidebar/tabs/References.js
+268
View File
@@ -0,0 +1,268 @@
import React, { useState, useEffect, useContext } from 'react';
import { v4 as uuidv4 } from 'uuid';
import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import TextArea from '../../../shared/TextArea';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
const ReferencesTab = ({ data, onChange }) => {
const context = useContext(AppContext);
const { dispatch } = context;
useEffect(() => {
if (!('references' in data)) {
dispatch({
type: 'migrate_section',
payload: {
key: 'references',
value: {
enable: false,
heading: 'References',
items: [],
},
},
});
dispatch({ type: 'save_data' });
}
}, [data, dispatch]);
return (
'references' in data && (
<>
<div className="mb-6 grid grid-cols-6 items-center">
<div className="col-span-1">
<Checkbox
checked={data.references.enable}
onChange={v => onChange('data.references.enable', v)}
/>
</div>
<div className="col-span-5">
<TextField
placeholder="Heading"
value={data.references.heading}
onChange={v => onChange('data.references.heading', v)}
/>
</div>
</div>
<hr className="my-6" />
{data.references.items.map((x, index) => (
<Item
item={x}
key={x.id}
index={index}
onChange={onChange}
dispatch={dispatch}
first={index === 0}
last={index === data.references.items.length - 1}
/>
))}
<AddItem dispatch={dispatch} />
</>
)
);
};
const AddItem = ({ dispatch }) => {
const [isOpen, setOpen] = useState(false);
const [item, setItem] = useState({
id: uuidv4(),
name: '',
position: '',
phone: '',
email: '',
description: '',
});
const onChange = (key, value) => setItem(set({ ...item }, key, value));
const onSubmit = () => {
if (item.name === '' || item.position === '') return;
addItem(dispatch, 'references', item);
setItem({
id: uuidv4(),
name: '',
position: '',
phone: '',
email: '',
description: '',
});
setOpen(false);
};
return (
<div className="my-4 border border-gray-200 rounded p-5">
<div
className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)}
>
<h6 className="text-sm font-medium">Add Reference</h6>
<i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
</div>
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField
label="Name"
className="mb-6"
placeholder="Steve Jobs"
value={item.name}
onChange={v => onChange('name', v)}
/>
<TextField
label="Position"
className="mb-6"
placeholder="CEO of Apple"
value={item.position}
onChange={v => onChange('position', v)}
/>
<TextField
label="Phone Number"
className="mb-6"
placeholder="+1 123 456 7890"
value={item.phone}
onChange={v => onChange('phone', v)}
/>
<TextField
label="Email Address"
className="mb-6"
placeholder="steve@apple.com"
value={item.email}
onChange={v => onChange('email', v)}
/>
<TextArea
rows="5"
className="mb-6"
label="Description"
placeholder="You can write about how you and the reference contact worked together and which projects you were a part of."
value={item.description}
onChange={v => onChange('description', v)}
/>
<button
type="button"
onClick={onSubmit}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">add</i>
<span className="text-sm">Add</span>
</div>
</button>
</div>
</div>
);
};
const Item = ({ item, index, onChange, dispatch, first, last }) => {
const [isOpen, setOpen] = useState(false);
const identifier = `data.references.items[${index}]`;
return (
<div className="my-4 border border-gray-200 rounded p-5">
<div
className="flex justify-between items-center cursor-pointer"
onClick={() => setOpen(!isOpen)}
>
<h6 className="text-sm font-medium">{item.name}</h6>
<i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
</div>
<div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
<TextField
label="Name"
className="mb-6"
placeholder="Steve Jobs"
value={item.name}
onChange={v => onChange(`${identifier}.name`, v)}
/>
<TextField
label="Position"
className="mb-6"
placeholder="CEO of Apple"
value={item.position}
onChange={v => onChange(`${identifier}.position`, v)}
/>
<TextField
label="Phone Number"
className="mb-6"
placeholder="+1 123 456 7890"
value={item.phone}
onChange={v => onChange(`${identifier}.phone`, v)}
/>
<TextField
label="Email Address"
className="mb-6"
placeholder="steve@apple.com"
value={item.email}
onChange={v => onChange(`${identifier}.email`, v)}
/>
<TextArea
rows="5"
className="mb-6"
label="Description"
placeholder="You can write about how you and the reference contact worked together and which projects you were a part of."
value={item.description}
onChange={v => onChange(`${identifier}.description`, v)}
/>
<div className="flex justify-between">
<button
type="button"
onClick={() => deleteItem(dispatch, 'references', item)}
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">delete</i>
<span className="text-sm">Delete</span>
</div>
</button>
<div className="flex">
{!first && (
<button
type="button"
onClick={() => moveItemUp(dispatch, 'references', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
>
<div className="flex items-center">
<i className="material-icons font-bold text-base">arrow_upward</i>
</div>
</button>
)}
{!last && (
<button
type="button"
onClick={() => moveItemDown(dispatch, 'references', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
>
<div className="flex items-center">
<i className="material-icons font-bold text-base">arrow_downward</i>
</div>
</button>
)}
</div>
</div>
</div>
</div>
);
};
export default ReferencesTab;
src/components/LeftSidebar/tabs/Skills.js
+6 -20
View File
@@ -3,6 +3,7 @@ import React, { useState, useContext } from 'react';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import TextField from '../../../shared/TextField';
import { addItem, deleteItem } from '../../../utils';
const SkillsTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@@ -29,7 +30,7 @@ const SkillsTab = ({ data, onChange }) => {
<hr className="my-6" />
{data.skills.items.map((x, index) => (
<Item item={x} key={x} index={index} onChange={onChange} dispatch={dispatch} />
<Item item={x} key={index} index={index} onChange={onChange} dispatch={dispatch} />
))}
<AddItem dispatch={dispatch} />
@@ -41,16 +42,10 @@ const AddItem = ({ dispatch }) => {
const [isOpen, setOpen] = useState(false);
const [item, setItem] = useState('');
const addItem = () => {
const add = () => {
if (item === '') return;
dispatch({
type: 'add_item',
payload: {
key: 'skills',
value: item,
},
});
addItem(dispatch, 'skills', item);
setItem('');
};
@@ -79,7 +74,7 @@ const AddItem = ({ dispatch }) => {
<button
type="button"
onClick={addItem}
onClick={add}
className="col-span-1 bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium rounded"
>
<div className="flex justify-center items-center">
@@ -95,15 +90,6 @@ const AddItem = ({ dispatch }) => {
const Item = ({ item, index, onChange, dispatch }) => {
const identifier = `data.skills.items[${index}]`;
const deleteItem = () =>
dispatch({
type: 'delete_item',
payload: {
key: 'skills',
value: item,
},
});
return (
<div className="my-4 grid grid-cols-6">
<div className="col-span-5">
@@ -118,7 +104,7 @@ const Item = ({ item, index, onChange, dispatch }) => {
<button
type="button"
onClick={deleteItem}
onClick={() => deleteItem(dispatch, 'skills', item)}
className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
>
<div className="flex justify-end items-center">
src/components/LeftSidebar/tabs/Work.js
+7 -39
View File
@@ -6,6 +6,7 @@ import TextField from '../../../shared/TextField';
import TextArea from '../../../shared/TextArea';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
const WorkTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@@ -58,16 +59,10 @@ const AddItem = ({ dispatch }) => {
const onChange = (key, value) => setItem(set({ ...item }, key, value));
const addItem = () => {
const onSubmit = () => {
if (item.title === '' || item.role === '') return;
dispatch({
type: 'add_item',
payload: {
key: 'work',
value: item,
},
});
addItem(dispatch, 'work', item);
setItem({
id: uuidv4(),
@@ -137,7 +132,7 @@ const AddItem = ({ dispatch }) => {
<button
type="button"
onClick={addItem}
onClick={onSubmit}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -154,33 +149,6 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
const [isOpen, setOpen] = useState(false);
const identifier = `data.work.items[${index}]`;
const deleteItem = () =>
dispatch({
type: 'delete_item',
payload: {
key: 'work',
value: item,
},
});
const moveItemUp = () =>
dispatch({
type: 'move_item_up',
payload: {
key: 'work',
value: item,
},
});
const moveItemDown = () =>
dispatch({
type: 'move_item_down',
payload: {
key: 'work',
value: item,
},
});
return (
<div className="my-4 border border-gray-200 rounded p-5">
<div
@@ -238,7 +206,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
<div className="flex justify-between">
<button
type="button"
onClick={deleteItem}
onClick={() => deleteItem(dispatch, 'work', item)}
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
@@ -251,7 +219,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!first && (
<button
type="button"
onClick={moveItemUp}
onClick={() => moveItemUp(dispatch, 'work', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
>
<div className="flex items-center">
@@ -263,7 +231,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
{!last && (
<button
type="button"
onClick={moveItemDown}
onClick={() => moveItemDown(dispatch, 'work', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
>
<div className="flex items-center">
src/components/RightSidebar/RightSidebar.js
+1 -1
View File
@@ -45,7 +45,7 @@ const RightSidebar = () => {
return (
<div
id="rightSidebar"
className="z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
className="animated slideInRight z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
>
<TabBar tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
<div className="px-6">{renderTabs()}</div>
src/components/RightSidebar/tabs/Fonts.js
+1 -2
View File
@@ -3,11 +3,10 @@ import TextField from '../../../shared/TextField';
const fontOptions = [
'Lato',
'Merriweather',
'Montserrat',
'Nunito',
'Open Sans',
'Raleway',
'Roboto',
'Rubik',
'Source Sans Pro',
'Titillium Web',
src/context/AppContext.js
+12
View File
@@ -55,6 +55,16 @@ const initialState = {
heading: 'Skills & Hobbies',
items: [],
},
languages: {
enable: false,
heading: 'Languages',
items: [],
},
references: {
enable: false,
heading: 'References',
items: [],
},
extras: {
enable: false,
heading: 'Personal Information',
@@ -78,6 +88,8 @@ const reducer = (state, { type, payload }) => {
let items;
switch (type) {
case 'migrate_section':
return set({ ...state }, `data.${payload.key}`, payload.value);
case 'add_item':
items = get({ ...state }, `data.${payload.key}.items`, []);
items.push(payload.value);
src/index.css
+25 -6
View File
@@ -1,13 +1,12 @@
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
html,
body {
@@ -24,6 +23,24 @@ li {
}
@media screen {
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input:focus {
outline: none !important;
}
button:focus {
outline: none !important;
}
input:checked + i.material-icons {
display: block;
}
@@ -36,12 +53,14 @@ li {
#tabs {
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
#tabs::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent; /* make scrollbar transparent */
background: transparent;
}
#page {
src/shared/Counter.js
+35
View File
@@ -0,0 +1,35 @@
import React from 'react';
const Counter = ({ label, value, onDecrement, onIncrement, className }) => {
return (
<div className={className}>
<label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
{label}
</label>
<div className="flex flex-row h-10 w-full rounded-lg relative bg-transparent mt-1">
<button
type="button"
onClick={onDecrement}
className="bg-gray-200 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-l cursor-pointer px-2"
>
<span className="m-auto text-2xl">−</span>
</button>
<input
readOnly
type="number"
className="text-center w-full bg-gray-200 font-semibold text-md hover:text-black focus:text-black md:text-basecursor-default flex items-center text-gray-600"
value={value}
/>
<button
type="button"
onClick={onIncrement}
className="bg-gray-200 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-r cursor-pointer px-2"
>
<span className="m-auto text-2xl">+</span>
</button>
</div>
</div>
);
};
export default Counter;
src/shared/TextField.js
+10 -2
View File
@@ -1,6 +1,14 @@
import React from 'react';
const TextField = ({ label, placeholder, value, onChange, className, disabled }) => (
const TextField = ({
label,
placeholder,
value,
onChange,
className,
disabled = false,
type = 'text',
}) => (
<div className={`w-full flex flex-col ${className}`}>
{label && (
<label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
@@ -9,7 +17,7 @@ const TextField = ({ label, placeholder, value, onChange, className, disabled })
)}
<input
className="appearance-none block w-full bg-gray-200 text-gray-800 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
type="text"
type={type}
disabled={disabled}
value={value}
onChange={e => onChange(e.target.value)}
src/templates/gengar/Gengar.js
+64 -22
View File
@@ -54,7 +54,7 @@ const Gengar = () => {
const Objective = () =>
data.objective.enable && (
<div className="h-full flex flex-col justify-center items-start">
<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>
@@ -68,7 +68,7 @@ const Gengar = () => {
const Skills = () =>
data.skills.enable && (
<div className="mb-8">
<div className="mb-6">
<Heading title={data.skills.heading} />
<ul>{data.skills.items.map(SkillItem)}</ul>
</div>
@@ -102,7 +102,7 @@ const Gengar = () => {
const Education = () =>
data.education.enable && (
<div className="mb-8">
<div className="mb-6">
<Heading title={data.education.heading} />
{data.education.items.map(EducationItem)}
</div>
@@ -118,7 +118,7 @@ const Gengar = () => {
const Certifications = () =>
data.certifications.enable && (
<div className="mb-8">
<div className="mb-6">
<Heading title={data.certifications.heading} />
{data.certifications.items.map(CertificationItem)}
</div>
@@ -134,12 +134,30 @@ const Gengar = () => {
const Awards = () =>
data.awards.enable && (
<div className="mb-8">
<div className="mb-6">
<Heading title={data.awards.heading} />
{data.awards.items.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.enable && (
<div>
<Heading title={data.references.heading} />
<div className="grid grid-cols-2 gap-6">{data.references.items.map(ReferenceItem)}</div>
</div>
);
const WorkItem = x => (
<div key={x.title} className="mb-3">
<div className="flex justify-between items-center">
@@ -157,26 +175,45 @@ const Gengar = () => {
const Work = () =>
data.work.enable && (
<div className="mb-8">
<div className="mb-6">
<Heading title={data.work.heading} />
{data.work.items.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">
{Array.from(Array(x.value)).map((_, i) => (
<i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
star
</i>
))}
</div>
</div>
);
const Languages = () =>
data.languages.enable && (
<div>
<Heading title={data.languages.heading} />
<div className="mb-6">{data.languages.items.map(LanguageItem)}</div>
</div>
);
const ExtraItem = x => (
<tr key={x.key}>
<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>
<div key={x.key} className="text-sm my-1">
<h6 className="text-xs font-bold">{x.key}</h6>
<h6>{x.value}</h6>
</div>
);
const Extras = () =>
data.extras.enable && (
<div>
<Heading title={data.extras.heading} />
<table className="table-auto">
<tbody>{data.extras.items.map(ExtraItem)}</tbody>
</table>
<div className="grid grid-cols-2">{data.extras.items.map(ExtraItem)}</div>
</div>
);
@@ -188,9 +225,9 @@ const Gengar = () => {
color: theme.colors.primary,
}}
>
<div className="grid grid-cols-5">
<div className="grid grid-cols-12">
<div
className="col-span-2 px-6 py-8"
className="col-span-4 px-6 py-8"
style={{ backgroundColor: theme.colors.accent, color: theme.colors.background }}
>
<div className="flex items-center">
@@ -207,26 +244,31 @@ const Gengar = () => {
</div>
<div
className="col-span-3 px-6 py-8"
className="col-span-8 px-6 py-8"
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
>
<Objective />
<Extras />
</div>
<div
className="col-span-2 px-6 py-8"
className="col-span-4 px-6 py-8"
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
>
<Skills />
<Languages />
<Education />
<Certifications />
</div>
<div className="col-span-3 px-6 py-8">
<div className="col-span-8 px-6 py-8">
<Work />
<Awards />
<Extras />
<div className="grid grid-cols-2 gap-6">
<Awards />
<Certifications />
</div>
<References />
</div>
</div>
</div>
src/templates/onyx/Onyx.js
+46 -2
View File
@@ -159,6 +159,45 @@ const Onyx = () => {
</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">
{Array.from(Array(x.value)).map((_, i) => (
<i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
star
</i>
))}
</div>
</div>
);
const Languages = () =>
data.languages.enable && (
<div>
<Heading title={data.languages.heading} />
<div className="w-3/4">{data.languages.items.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.enable && (
<div>
<Heading title={data.references.heading} />
<div className="grid grid-cols-3 gap-6">{data.references.items.map(ReferenceItem)}</div>
</div>
);
const ExtraItem = x => (
<tr key={x.key}>
<td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
@@ -203,12 +242,17 @@ const Onyx = () => {
<Work />
<Education />
<div className="grid grid-cols-2">
<div className="grid grid-cols-2 gap-6">
<Awards />
<Certifications />
</div>
<Skills />
<div className="grid grid-cols-2 gap-6">
<Skills />
<Languages />
</div>
<References />
<Extras />
</div>
);
src/templates/pikachu/Pikachu.js
+48 -7
View File
@@ -10,14 +10,14 @@ const Pikachu = () => {
const Photo = () =>
data.profile.photo !== '' && (
<div className="self-center col-span-3">
<img className="rounded-full object-cover" src={data.profile.photo} alt="" />
<div className="self-center col-span-4">
<img className="h-48 rounded-full mx-auto object-cover" src={data.profile.photo} alt="" />
</div>
);
const Header = () => (
<div
className="rounded flex flex-col justify-center"
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">
@@ -68,6 +68,45 @@ const Pikachu = () => {
</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.enable && (
<div>
<Heading title={data.references.heading} />
<div className="grid grid-cols-2 gap-6">{data.references.items.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">
{Array.from(Array(x.value)).map((_, i) => (
<i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
star
</i>
))}
</div>
</div>
);
const Languages = () =>
data.languages.enable && (
<div>
<Heading title={data.languages.heading} />
<div className="mb-6">{data.languages.items.map(LanguageItem)}</div>
</div>
);
const ExtraItem = x => (
<div key={x.key} className="text-sm my-1">
<h6 className="text-xs font-bold">{x.key}</h6>
@@ -79,7 +118,7 @@ const Pikachu = () => {
data.extras.enable && (
<div>
<Heading title={data.extras.heading} />
<div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
<div className="flex flex-col mb-6">{data.extras.items.map(ExtraItem)}</div>
</div>
);
@@ -177,11 +216,11 @@ const Pikachu = () => {
<div className="grid grid-cols-12 col-gap-6 row-gap-8">
<Photo />
<div className={`${data.profile.photo !== '' ? 'col-span-9' : 'col-span-12'}`}>
<div className={`${data.profile.photo !== '' ? 'col-span-8' : 'col-span-12'}`}>
<Header />
</div>
<div className="col-span-3 overflow-hidden">
<div className="col-span-4 overflow-hidden">
<div className="text-sm mb-6">
<ContactItem icon="phone" value={data.profile.phone} />
<ContactItem icon="language" value={data.profile.website} />
@@ -190,14 +229,16 @@ const Pikachu = () => {
</div>
<Skills />
<Languages />
<Extras />
</div>
<div className="col-span-9">
<div className="col-span-8">
<Work />
<Education />
<Awards />
<Certifications />
<References />
</div>
</div>
</div>
src/utils/index.js
+51 -1
View File
@@ -40,4 +40,54 @@ const copyToClipboard = text => {
return successful;
};
export { move, hexToRgb, copyToClipboard };
const saveData = dispatch => dispatch({ type: 'save_data' });
const addItem = (dispatch, key, value) => {
dispatch({
type: 'add_item',
payload: {
key,
value,
},
});
saveData(dispatch);
};
const deleteItem = (dispatch, key, value) => {
dispatch({
type: 'delete_item',
payload: {
key,
value,
},
});
saveData(dispatch);
};
const moveItemUp = (dispatch, key, value) => {
dispatch({
type: 'move_item_up',
payload: {
key,
value,
},
});
saveData(dispatch);
};
const moveItemDown = (dispatch, key, value) => {
dispatch({
type: 'move_item_down',
payload: {
key,
value,
},
});
saveData(dispatch);
};
export { move, hexToRgb, copyToClipboard, saveData, addItem, deleteItem, moveItemUp, moveItemDown };