- implement cloud functions for printing

- implement AMOLED mode
- implement reset layout

.eslintrc

@@ -1,5 +1,7 @@
 {
   "globals": {
+    "Blob": true,
+    "fetch": true,
     "window": true,
     "document": true,
     "FileReader": true,

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "rx-resume"
+  }
+}

database.rules.json

@@ -0,0 +1,18 @@
+{
+  "rules": {
+    "resumes": {
+      ".indexOn": "user",
+      ".read": "auth !== null && query.orderByChild === 'user' && query.equalTo === auth.uid",
+      "$rid": {
+        ".read": "data.child('public').val() === true || data.child('user').val() === auth.uid",
+        ".write": " !data.exists() || data.child('user').val() === auth.uid || (!newData.exists() && data.child('user').val() === auth.uid)"
+      }
+    },
+    "users": {
+      "$uid": {
+        ".read": "$uid === auth.uid",
+        ".write": "$uid === auth.uid"
+      }
+    }
+  }
+}

firebase.json

@@ -0,0 +1,41 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "**/.*",
+      "firebase.json",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "/printSinglePageResume",
+        "function": "printSinglePageResume"
+      },
+      {
+        "source": "/printMultiPageResume",
+        "function": "printMultiPageResume"
+      },
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  },
+  "emulators": {
+    "functions": {
+      "port": 5001
+    },
+    "hosting": {
+      "port": 5000
+    },
+    "ui": {
+      "enabled": true
+    }
+  },
+  "functions": {
+    "predeploy": [
+      "npm --prefix \"$RESOURCE_DIR\" run lint"
+    ],
+    "source": "functions"
+  }
+}

functions/.eslintrc.json

@@ -0,0 +1,123 @@
+{
+  "parserOptions": {
+    // Required for certain syntax usages
+    "ecmaVersion": 2017
+  },
+  "plugins": [
+    "promise"
+  ],
+  "extends": "eslint:recommended",
+  "rules": {
+    // Removed rule "disallow the use of console" from recommended eslint rules
+    "no-console": "off",
+
+    // Removed rule "disallow multiple spaces in regular expressions" from recommended eslint rules
+    "no-regex-spaces": "off",
+
+    // Removed rule "disallow the use of debugger" from recommended eslint rules
+    "no-debugger": "off",
+
+    // Removed rule "disallow unused variables" from recommended eslint rules
+    "no-unused-vars": "off",
+
+    // Removed rule "disallow mixed spaces and tabs for indentation" from recommended eslint rules
+    "no-mixed-spaces-and-tabs": "off",
+
+    // Removed rule "disallow the use of undeclared variables unless mentioned in /*global */ comments" from recommended eslint rules
+    "no-undef": "off",
+
+    // Warn against template literal placeholder syntax in regular strings
+    "no-template-curly-in-string": 1,
+
+    // Warn if return statements do not either always or never specify values
+    "consistent-return": 1,
+
+    // Warn if no return statements in callbacks of array methods
+    "array-callback-return": 1,
+
+    // Require the use of === and !==
+    "eqeqeq": 2,
+
+    // Disallow the use of alert, confirm, and prompt
+    "no-alert": 2,
+
+    // Disallow the use of arguments.caller or arguments.callee
+    "no-caller": 2,
+
+    // Disallow null comparisons without type-checking operators
+    "no-eq-null": 2,
+
+    // Disallow the use of eval()
+    "no-eval": 2,
+
+    // Warn against extending native types
+    "no-extend-native": 1,
+
+    // Warn against unnecessary calls to .bind()
+    "no-extra-bind": 1,
+
+    // Warn against unnecessary labels    
+    "no-extra-label": 1,
+
+    // Disallow leading or trailing decimal points in numeric literals
+    "no-floating-decimal": 2,
+
+    // Warn against shorthand type conversions
+    "no-implicit-coercion": 1,
+
+    // Warn against function declarations and expressions inside loop statements
+    "no-loop-func": 1,
+
+    // Disallow new operators with the Function object
+    "no-new-func": 2,
+
+    // Warn against new operators with the String, Number, and Boolean objects
+    "no-new-wrappers": 1,
+
+    // Disallow throwing literals as exceptions
+    "no-throw-literal": 2,
+
+    // Require using Error objects as Promise rejection reasons
+    "prefer-promise-reject-errors": 2,
+
+    // Enforce “for” loop update clause moving the counter in the right direction
+    "for-direction": 2,
+
+    // Enforce return statements in getters
+    "getter-return": 2,
+
+    // Disallow await inside of loops
+    "no-await-in-loop": 2,
+
+    // Disallow comparing against -0
+    "no-compare-neg-zero": 2,
+
+    // Warn against catch clause parameters from shadowing variables in the outer scope
+    "no-catch-shadow": 1,
+
+    // Disallow identifiers from shadowing restricted names
+    "no-shadow-restricted-names": 2,
+
+    // Enforce return statements in callbacks of array methods
+    "callback-return": 2,
+
+    // Require error handling in callbacks
+    "handle-callback-err": 2,
+
+    // Warn against string concatenation with __dirname and __filename
+    "no-path-concat": 1,
+
+    // Prefer using arrow functions for callbacks
+    "prefer-arrow-callback": 1,
+
+    // Return inside each then() to create readable and reusable Promise chains.
+    // Forces developers to return console logs and http calls in promises. 
+    "promise/always-return": 2,
+
+    //Enforces the use of catch() on un-returned promises
+    "promise/catch-or-return": 2,
+
+    // Warn against nested then() or catch() statements
+    "promise/no-nesting": 1
+  }
+}

functions/.gitignore

@@ -0,0 +1 @@
+node_modules/

functions/index.js

@@ -0,0 +1,95 @@
+const functions = require("firebase-functions");
+const puppeteer = require("puppeteer");
+
+require('dotenv').config();
+const cors = require("cors")({
+  origin: true,
+});
+
+const BASE_URL =  process.env.SITE_URL + "/r/";
+
+function timeout(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+exports.printSinglePageResume = functions.https.onRequest((req, res) => {
+  if (req.method !== "POST") {
+    return res.status(403).send("Forbidden!");
+  }
+
+  if (!req.query.id) {
+    return res.status(400).send("Bad Request!");
+  }
+
+  async function run() {
+    const browser = await puppeteer.launch({ headless: true });
+    const page = await browser.newPage();
+    await page.goto(BASE_URL + req.query.id);
+    await timeout(5000);
+    await page.emulateMediaType("print");
+    const height = await page.evaluate(() => {
+      var body = document.body,
+        html = document.documentElement;
+
+      var height = Math.max(
+        body.scrollHeight,
+        body.offsetHeight,
+        html.clientHeight,
+        html.scrollHeight,
+        html.offsetHeight
+      );
+
+      return height;
+    });
+    const pdf = await page.pdf({
+      printBackground: true,
+      width: `21cm`,
+      height: `${height}px`,
+      pageRanges: "1",
+    });
+    await browser.close();
+    return pdf;
+  }
+
+  return cors(req, res, async () => {
+    const pdf = await run();
+    res.set({
+      "Content-Type": "application/pdf",
+      "Content-Length": pdf.length,
+    });
+    return res.send(pdf);
+  });
+});
+
+exports.printMultiPageResume = functions.https.onRequest((req, res) => {
+  if (req.method !== "POST") {
+    return res.status(403).send("Forbidden!");
+  }
+
+  if (!req.query.id) {
+    return res.status(400).send("Bad Request!");
+  }
+
+  async function run() {
+    const browser = await puppeteer.launch({ headless: true });
+    const page = await browser.newPage();
+    await page.goto(BASE_URL + req.query.id);
+    await timeout(5000);
+    await page.emulateMediaType("print");
+    const pdf = await page.pdf({
+      printBackground: true,
+      width: `21cm`,
+    });
+    await browser.close();
+    return pdf;
+  }
+
+  return cors(req, res, async () => {
+    const pdf = await run();
+    res.set({
+      "Content-Type": "application/pdf",
+      "Content-Length": pdf.length,
+    });
+    return res.send(pdf);
+  });
+});

functions/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "functions",
+  "description": "Cloud Functions for Firebase",
+  "scripts": {
+    "lint": "eslint .",
+    "serve": "firebase emulators:start --only functions",
+    "shell": "firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "10"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^8.2.0",
+    "firebase-admin": "^8.10.0",
+    "firebase-functions": "^3.7.0",
+    "puppeteer": "^5.0.0"
+  },
+  "devDependencies": {
+    "eslint": "^5.12.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "firebase-functions-test": "^0.2.0"
+  },
+  "private": true
+}

gatsby-config.js

@@ -65,7 +65,7 @@ module.exports = {
         short_name: 'RxResume',
         description: 'A free and open-source resume builder.',
         start_url: '/?source=pwa',
-        icon: `assets/images/logo.png`,
+        icon: `static/images/logo.png`,
         background_color: '#FFFFFF',
         theme_color: '#444444',
         display: 'standalone',
@@ -99,7 +99,7 @@ module.exports = {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'images',
-        path: `${__dirname}/assets/images/`,
+        path: `${__dirname}/static/images/`,
       },
     },
     'gatsby-plugin-sharp',

package-lock.json

@@ -2189,6 +2189,15 @@
         "defer-to-connect": "^1.0.1"
       }
     },
+    "@types/body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==",
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -2204,6 +2213,14 @@
       "resolved": "https://registry.npmjs.org/@types/configstore/-/configstore-2.1.1.tgz",
       "integrity": "sha1-zR6FU2M60xhcPy8jns/10mQ+krY="
     },
+    "@types/connect": {
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
+      "integrity": "sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/debug": {
       "version": "0.0.30",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-0.0.30.tgz",
@@ -2219,6 +2236,26 @@
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
       "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
     },
+    "@types/express": {
+      "version": "4.17.3",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.3.tgz",
+      "integrity": "sha512-I8cGRJj3pyOLs/HndoP+25vOqhqWkAZsWMEmq1qXy/b/M3ppufecUwaK2/TVDVxcV61/iSdhykUjQQ2DLSrTdg==",
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.8",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.8.tgz",
+      "integrity": "sha512-1SJZ+R3Q/7mLkOD9ewCBDYD2k0WyZQtWYqF/2VvoNN2/uhI49J9CDN4OAm+wGMA0DbArA4ef27xl4+JwMtGggw==",
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "@types/get-port": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@types/get-port/-/get-port-3.2.0.tgz",
@@ -2296,6 +2333,11 @@
         "@types/unist": "*"
       }
     },
+    "@types/mime": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz",
+      "integrity": "sha512-4kPlzbljFcsttWEq6aBW0OZe6BDajAmyvr2xknBG92tejQnvdGtT9+kXSZ580DqpxY9qG2xeQVF9Dq0ymUTo5Q=="
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2329,6 +2371,16 @@
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "@types/qs": {
+      "version": "6.9.3",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.3.tgz",
+      "integrity": "sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA=="
+    },
+    "@types/range-parser": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
+      "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA=="
+    },
     "@types/reach__router": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.5.tgz",
@@ -2364,6 +2416,15 @@
         "@types/node": "*"
       }
     },
+    "@types/serve-static": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.4.tgz",
+      "integrity": "sha512-jTDt0o/YbpNwZbQmE/+2e+lfjJEJJR0I3OFaKQKPWkASkCoW3i6fsUnqudSMcNAfbtmADGu8f4MV4q+GqULmug==",
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/mime": "*"
+      }
+    },
     "@types/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/tmp/-/tmp-0.0.33.tgz",
@@ -8077,6 +8138,17 @@
         "@firebase/util": "0.2.50"
       }
     },
+    "firebase-functions": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/firebase-functions/-/firebase-functions-3.7.0.tgz",
+      "integrity": "sha512-+ROj2Gs2/KyM+T8jYo7AKaHynFsN49sXbgZMll3zuGa9/8oiDsXp9e1Iy2JMkFmSZg67jeYw5Ue2OSpz0XiqFQ==",
+      "requires": {
+        "@types/express": "4.17.3",
+        "cors": "^2.8.5",
+        "express": "^4.17.1",
+        "lodash": "^4.17.14"
+      }
+    },
     "flat-cache": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",

src/components/builder/right/sections/Layout.js

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import { move, reorder } from '../../../../utils';
+import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import styles from './Layout.module.css';
 
 const Layout = () => {
+  const [resetLayoutText, setResetLayoutText] = useState('Reset Layout');
+
   const blocks = useSelector('metadata.layout');
   const dispatch = useDispatch();
 
@@ -44,6 +47,16 @@ const Layout = () => {
     }
   };
 
+  const handleResetLayout = () => {
+    if (resetLayoutText === 'Reset Layout') {
+      setResetLayoutText('Are you sure?');
+      return;
+    }
+
+    dispatch({ type: 'reset_layout' });
+    setResetLayoutText('Reset Layout');
+  };
+
   return (
     <section>
       <Heading>Layout</Heading>
@@ -89,6 +102,10 @@ const Layout = () => {
           ))}
         </DragDropContext>
       </div>
+
+      <div className="flex">
+        <Button onClick={handleResetLayout}>{resetLayoutText}</Button>
+      </div>
     </section>
   );
 };

src/components/shared/Avatar.js

@@ -1,20 +1,49 @@
 import cx from 'classnames';
 import { toUrl } from 'gatsby-source-gravatar';
-import React, { memo, useContext, useMemo } from 'react';
+import React, { memo, useContext, useMemo, useState } from 'react';
+import { Menu, MenuItem } from '@material-ui/core';
 import UserContext from '../../contexts/UserContext';
 import styles from './Avatar.module.css';
+import { handleKeyUp } from '../../utils';
 
 const Avatar = ({ className }) => {
-  const { user } = useContext(UserContext);
+  const { user, logout } = useContext(UserContext);
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  const handleLogout = () => {
+    logout();
+    handleClose();
+  };
 
   const photoURL = useMemo(() => toUrl(user.email, 'size=128'), [user.email]);
 
   return (
+    <div>
+      <div
+        tabIndex="0"
+        role="button"
+        className="flex focus:outline-none"
+        onClick={handleClick}
+        onKeyUp={(e) => handleKeyUp(e, handleClick)}
+      >
         <img
           src={photoURL}
           alt={user.displayName}
           className={cx(styles.container, className)}
         />
+      </div>
+      <Menu
+        keepMounted
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        open={Boolean(anchorEl)}
+      >
+        <MenuItem onClick={handleLogout}>Logout</MenuItem>
+      </Menu>
+    </div>
   );
 };
 

src/contexts/ResumeContext.js

@@ -1,14 +1,14 @@
 import arrayMove from 'array-move';
 import {
   clone,
+  concat,
   findIndex,
+  flatten,
   get,
   isUndefined,
-  setWith,
-  flatten,
-  concat,
-  times,
   merge,
+  setWith,
+  times,
 } from 'lodash';
 import React, {
   createContext,
@@ -17,9 +17,10 @@ import React, {
   useContext,
   useReducer,
 } from 'react';
-import DatabaseContext from './DatabaseContext';
-import initialState from '../data/initialState';
 import demoState from '../data/demoState.json';
+import initialState from '../data/initialState';
+import DatabaseContext from './DatabaseContext';
+import leftSections from '../data/leftSections';
 
 const ResumeContext = createContext({});
 
@@ -108,6 +109,25 @@ const ResumeProvider = ({ children }) => {
           debouncedUpdateResume(newState);
           return newState;
 
+        case 'set_fixed_sections':
+          items = get(state, 'metadata.layout');
+
+          items = items.map((x) => {
+            return x.filter((y) => {
+              return !payload.includes(y);
+            });
+          });
+
+          newState = setWith(clone(state), 'metadata.layout', items, clone);
+          debouncedUpdateResume(newState);
+          return newState;
+
+        case 'reset_layout':
+          items = [leftSections.filter((x) => !x.fixed).map((x) => x.id)];
+          newState = setWith(clone(state), 'metadata.layout', items, clone);
+          debouncedUpdateResume(newState);
+          return newState;
+
         case 'on_input':
           newState = setWith(clone(state), payload.path, payload.value, clone);
           debouncedUpdateResume(newState);

src/modals/sections/ExportModal.js

@@ -1,5 +1,6 @@
 import { clone } from 'lodash';
 import React, { memo, useContext, useEffect, useState } from 'react';
+import { FaPrint } from 'react-icons/fa';
 import Button from '../../components/shared/Button';
 import ModalContext from '../../contexts/ModalContext';
 import { useSelector } from '../../contexts/ResumeContext';
@@ -8,6 +9,8 @@ import BaseModal from '../BaseModal';
 const ExportModal = () => {
   const state = useSelector();
   const [open, setOpen] = useState(false);
+  const [isLoadingSingle, setLoadingSingle] = useState(false);
+  const functionsUrl = 'http://localhost:5001/rx-resume/us-central1';
 
   const { emitter, events } = useContext(ModalContext);
 
@@ -23,6 +26,21 @@ const ExportModal = () => {
     }
   };
 
+  const handleSinglePageDownload = async () => {
+    setLoadingSingle(true);
+    fetch(`${functionsUrl}/printSinglePageResume?id=${state.id}`, {
+      method: 'POST',
+    })
+      .then((response) => response.blob())
+      .then((data) => {
+        if (typeof window !== `undefined`) {
+          const url = window.URL.createObjectURL(data, { oneTimeOnly: true });
+          window && window.open(url);
+          setLoadingSingle(false);
+        }
+      });
+  };
+
   const handleExportToJson = () => {
     const backupObj = clone(state);
     delete backupObj.id;
@@ -56,8 +74,8 @@ const ExportModal = () => {
           printed immediately.
         </p>
 
-        <Button className="mt-5" onClick={handleOpenPrintDialog}>
+        <Button icon={FaPrint} className="mt-5" onClick={handleOpenPrintDialog}>
-          Open Print Dialog
+          Print Resume
         </Button>
       </div>
 
@@ -73,9 +91,14 @@ const ExportModal = () => {
           as well with just one click.
         </p>
 
-        <div className="mt-5">
+        <div className="mt-5 mb-4">
           <div className="flex">
-            <Button>Single Page Resume</Button>
+            <Button
+              isLoading={isLoadingSingle}
+              onClick={handleSinglePageDownload}
+            >
+              Single Page Resume
+            </Button>
             <Button className="ml-8">Multi Page Resume</Button>
           </div>
         </div>

src/pages/index.js

@@ -46,6 +46,15 @@ const Home = () => {
             just not in a position to pay hundreds of dollars to create a resume
             to bootstrap their career.
           </Feature>
+
+          <Feature title="Your data is your data, none of my data.">
+            You must be thinking, if you&apos;re not paying for the product,
+            then you are the product. Or, at least your data is?{' '}
+            <strong>Well, this is the exception</strong>. Your data is your own,
+            as stated in the ridiculously simple <a href="">Privacy Policy</a>,
+            I don&apos;t do anything with the data, it just exists on a database
+            for the convinient features provided by Reactive Resume.
+          </Feature>
         </div>
 
         <footer className="my-24">

src/templates/Onyx.js

@@ -31,6 +31,10 @@ const Onyx = ({ data }) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
+    dispatch({
+      type: 'set_fixed_sections',
+      payload: ['profile', 'social'],
+    });
     dispatch({ type: 'set_block_count', payload: 3 });
   }, []);
 

src/templates/Pikachu.js

@@ -0,0 +1,340 @@
+import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+const Pikachu = () => {
+  const context = useContext(AppContext);
+  const { state } = context;
+  const { data, theme } = state;
+
+  const Photo = () =>
+    data.profile.photo !== '' && (
+      <div className="self-center col-span-4">
+        <img
+          className="w-48 h-48 rounded-full mx-auto object-cover"
+          src={data.profile.photo}
+          alt=""
+        />
+      </div>
+    );
+
+  const Header = () => (
+    <div
+      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">
+        <h1 className="text-3xl font-bold leading-tight">
+          {data.profile.firstName} {data.profile.lastName}
+        </h1>
+        <div className="text-sm font-medium tracking-wide">
+          {data.profile.subtitle}
+        </div>
+
+        <hr className="my-4 opacity-50" />
+
+        <ReactMarkdown className="text-sm" source={data.objective.body} />
+      </div>
+    </div>
+  );
+
+  const ContactItem = ({ icon, value, link = '#' }) =>
+    value && (
+      <div className="flex items-center my-3">
+        <span
+          className="material-icons text-lg mr-2"
+          style={{ color: theme.colors.accent }}
+        >
+          {icon}
+        </span>
+        <a href={link}>
+          <span className="font-medium break-all">{value}</span>
+        </a>
+      </div>
+    );
+
+  const Heading = ({ title }) => (
+    <div
+      className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
+      style={{ color: theme.colors.accent, borderColor: theme.colors.accent }}
+    >
+      {title}
+    </div>
+  );
+
+  const SkillItem = (x) => (
+    <span
+      key={x.id}
+      className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
+    >
+      {x.skill}
+    </span>
+  );
+
+  const Skills = () =>
+    data.skills &&
+    data.skills.enable && (
+      <div>
+        <Heading title={data.skills.heading} />
+        <div className="flex flex-col mb-6">
+          {data.skills.items.map(SkillItem)}
+        </div>
+      </div>
+    );
+
+  const HobbyItem = (x) => (
+    <span
+      key={x.id}
+      className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
+    >
+      {x.hobby}
+    </span>
+  );
+
+  const Hobbies = () =>
+    data.hobbies &&
+    data.hobbies.enable && (
+      <div>
+        <Heading title={data.hobbies.heading} />
+        <div className="flex flex-col mb-6">
+          {data.hobbies.items.map(HobbyItem)}
+        </div>
+      </div>
+    );
+
+  const ReferenceItem = (x) => (
+    <div key={x.id} className="flex flex-col">
+      <h6 className="text-sm font-medium">{x.name}</h6>
+      <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 &&
+    data.references.enable && (
+      <div>
+        <Heading title={data.references.heading} />
+        <div className="grid grid-cols-2 gap-2 mb-6">
+          {data.references.items.filter((x) => x.enable).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">
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
+        {x.rating !== 0 && (
+          <div className="flex">
+            {Array.from(Array(x.rating)).map((_, i) => (
+              <i
+                key={i}
+                className="material-icons text-lg"
+                style={{ color: theme.colors.accent }}
+              >
+                star
+              </i>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  const Languages = () =>
+    data.languages &&
+    data.languages.enable && (
+      <div>
+        <Heading title={data.languages.heading} />
+        <div className="mb-6">
+          {data.languages.items.filter((x) => x.enable).map(LanguageItem)}
+        </div>
+      </div>
+    );
+
+  const ExtraItem = (x) => (
+    <div key={x.id} className="text-sm my-1">
+      <h6 className="text-xs font-bold">{x.key}</h6>
+      <h6 className="">{x.value}</h6>
+    </div>
+  );
+
+  const Extras = () =>
+    data.extras &&
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <div className="grid grid-cols-2">
+          {data.extras.items.filter((x) => x.enable).map(ExtraItem)}
+        </div>
+      </div>
+    );
+
+  const WorkItem = (x) => (
+    <div key={x.id} className="mb-3">
+      <div className="flex justify-between items-center">
+        <div>
+          <h6 className="font-semibold">{x.title}</h6>
+          <p className="text-xs">{x.role}</p>
+        </div>
+        <span className="text-xs font-medium">
+          ({x.start} - {x.end})
+        </span>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Work = () =>
+    data.work &&
+    data.work.enable && (
+      <div>
+        <Heading title={data.work.heading} />
+        <div className="flex flex-col mb-4">
+          {data.work.items.filter((x) => x.enable).map(WorkItem)}
+        </div>
+      </div>
+    );
+
+  const EducationItem = (x) => (
+    <div key={x.id} className="mb-2">
+      <div className="flex justify-between items-center">
+        <div>
+          <h6 className="font-semibold">{x.name}</h6>
+          <p className="text-xs">{x.major}</p>
+        </div>
+        <div className="flex flex-col text-right items-end">
+          <span
+            className="text-sm font-bold"
+            style={{ color: theme.colors.accent }}
+          >
+            {x.grade}
+          </span>
+          <span className="text-xs font-medium">
+            ({x.start} - {x.end})
+          </span>
+        </div>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Education = () =>
+    data.education &&
+    data.education.enable && (
+      <div>
+        <Heading title={data.education.heading} />
+        <div className="flex flex-col mb-4">
+          {data.education.items.filter((x) => x.enable).map(EducationItem)}
+        </div>
+      </div>
+    );
+
+  const AwardItem = (x) => (
+    <div key={x.id} className="mb-2">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Awards = () =>
+    data.awards &&
+    data.awards.enable && (
+      <div>
+        <Heading title={data.awards.heading} />
+        <div className="flex flex-col mb-2">
+          {data.awards.items.filter((x) => x.enable).map(AwardItem)}
+        </div>
+      </div>
+    );
+
+  const CertificationItem = (x) => (
+    <div key={x.id} className="mb-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Certifications = () =>
+    data.certifications &&
+    data.certifications.enable && (
+      <div>
+        <Heading title={data.certifications.heading} />
+        <div className="flex flex-col mb-2">
+          {data.certifications.items
+            .filter((x) => x.enable)
+            .map(CertificationItem)}
+        </div>
+      </div>
+    );
+
+  return (
+    <div
+      className="p-10"
+      style={{
+        fontFamily: theme.font.family,
+        backgroundColor: theme.colors.background,
+        color: theme.colors.primary,
+      }}
+    >
+      <div className="grid grid-cols-12 col-gap-6 row-gap-8">
+        <Photo />
+
+        <div
+          className={`${
+            data.profile.photo !== '' ? 'col-span-8' : 'col-span-12'
+          }`}
+        >
+          <Header />
+        </div>
+
+        <div className="col-span-4 overflow-hidden">
+          <div className="text-sm mb-6">
+            <ContactItem
+              icon="phone"
+              value={data.profile.phone}
+              link={`tel:${data.profile.phone}`}
+            />
+            <ContactItem
+              icon="language"
+              value={data.profile.website}
+              link={`http://${data.profile.website}`}
+            />
+            <ContactItem
+              icon="email"
+              value={data.profile.email}
+              link={`mailto:${data.profile.email}`}
+            />
+            <ContactItem
+              icon="location_on"
+              value={data.profile.address.line3}
+            />
+          </div>
+
+          <Skills />
+          <Hobbies />
+          <Languages />
+          <Certifications />
+        </div>
+
+        <div className="col-span-8">
+          <Work />
+          <Education />
+          <Awards />
+          <References />
+          <Extras />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pikachu;