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

Feature: New Resume Sections, Languages & References

package-lock.json

@@ -5544,9 +5544,9 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "2.5.1",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-3.0.0.tgz",
-      "integrity": "sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g==",
+      "integrity": "sha512-EjxTHxjLKIBWFgDJdhKKzLh5q+vjTFrqNZX36uIxWS4OfyXe5DawqPj3U5qeJ1ngLwatjzQnmR0Lz0J0YH3kxw==",
       "dev": true
     },
     "eslint-scope": {

package.json

@@ -52,7 +52,7 @@
     "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

@@ -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

@@ -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

@@ -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

@@ -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({
+    addItem(dispatch, 'awards', item);
-      type: 'add_item',
-      payload: {
-        key: 'awards',
-        value: 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

@@ -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({
+    addItem(dispatch, 'certifications', item);
-      type: 'add_item',
-      payload: {
-        key: 'certifications',
-        value: 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

@@ -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({
+    addItem(dispatch, 'education', item);
-      type: 'add_item',
-      payload: {
-        key: 'education',
-        value: 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

@@ -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({
+    addItem(dispatch, 'extras', item);
-      type: 'add_item',
-      payload: {
-        key: 'extras',
-        value: 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

@@ -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

@@ -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

@@ -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({
+    addItem(dispatch, 'skills', item);
-      type: 'add_item',
-      payload: {
-        key: 'skills',
-        value: 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

@@ -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({
+    addItem(dispatch, 'work', item);
-      type: 'add_item',
-      payload: {
-        key: 'work',
-        value: 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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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}>
+    <div key={x.key} className="text-sm my-1">
-      <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
+      <h6 className="text-xs font-bold">{x.key}</h6>
-      <td className="border px-4 py-2 text-sm">{x.value}</td>
+      <h6>{x.value}</h6>
-    </tr>
+    </div>
   );
 
   const Extras = () =>
     data.extras.enable && (
       <div>
         <Heading title={data.extras.heading} />
-        <table className="table-auto">
+        <div className="grid grid-cols-2">{data.extras.items.map(ExtraItem)}</div>
-          <tbody>{data.extras.items.map(ExtraItem)}</tbody>
-        </table>
       </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

@@ -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

@@ -10,14 +10,14 @@ const Pikachu = () => {
 
   const Photo = () =>
     data.profile.photo !== '' && (
-      <div className="self-center col-span-3">
+      <div className="self-center col-span-4">
-        <img className="rounded-full object-cover" src={data.profile.photo} alt="" />
+        <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

@@ -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 };