diff --git a/src/components/LeftSidebar/tabs/Languages.js b/src/components/LeftSidebar/tabs/Languages.js
new file mode 100644
index 00000000..3a7f5bca
--- /dev/null
+++ b/src/components/LeftSidebar/tabs/Languages.js
@@ -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 && (
+ <>
+
+
+ onChange('data.languages.enable', v)}
+ />
+
+
+ onChange('data.languages.heading', v)}
+ />
+
+
+
+
+
+ {data.languages.items.map((x, index) => (
+
+ ))}
+
+
+
+ )
+ );
+};
+
+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 (
+
+
setOpen(!isOpen)}
+ >
+
Add Language
+ {isOpen ? 'expand_less' : 'expand_more'}
+
+
+
+
onChange('key', v)}
+ />
+
+ item.value > 1 && onChange('value', item.value - 1)}
+ onIncrement={() => item.value < 5 && onChange('value', item.value + 1)}
+ />
+
+
+
+
+ );
+};
+
+const Item = ({ item, index, onChange, dispatch, first, last }) => {
+ const [isOpen, setOpen] = useState(false);
+ const identifier = `data.languages.items[${index}]`;
+
+ return (
+
+
setOpen(!isOpen)}
+ >
+
{item.key}
+ {isOpen ? 'expand_less' : 'expand_more'}
+
+
+
+
onChange(`${identifier}.key`, v)}
+ />
+
+ item.value > 1 && onChange(`${identifier}.value`, item.value - 1)}
+ onIncrement={() => item.value < 5 && onChange(`${identifier}.value`, item.value + 1)}
+ />
+
+
+
+
+
+ {!first && (
+
+ )}
+
+ {!last && (
+
+ )}
+
+
+
+ );
+};
+
+export default LanguagesTab;
diff --git a/src/components/LeftSidebar/tabs/References.js b/src/components/LeftSidebar/tabs/References.js
new file mode 100644
index 00000000..ec1749e2
--- /dev/null
+++ b/src/components/LeftSidebar/tabs/References.js
@@ -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 && (
+ <>
+
+
+ onChange('data.references.enable', v)}
+ />
+
+
+ onChange('data.references.heading', v)}
+ />
+
+
+
+
+
+ {data.references.items.map((x, index) => (
+
+ ))}
+
+
+
+ )
+ );
+};
+
+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 (
+
+
setOpen(!isOpen)}
+ >
+
Add Reference
+ {isOpen ? 'expand_less' : 'expand_more'}
+
+
+
+ onChange('name', v)}
+ />
+
+ onChange('position', v)}
+ />
+
+ onChange('phone', v)}
+ />
+
+ onChange('email', v)}
+ />
+
+