added Gengar template, optimized images for fast loading

public/index.html

@@ -34,9 +34,24 @@
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
 
-  <script src="/__/firebase/7.12.0/firebase-app.js"></script>
-  <script src="/__/firebase/7.12.0/firebase-analytics.js"></script>
-  <script src="/__/firebase/init.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-analytics.js"></script>
+
+  <script>
+    var firebaseConfig = {
+      apiKey: "AIzaSyCfC075KJNwsMWDTm6k8QCtWno48okM7wY",
+      authDomain: "rx-resume.firebaseapp.com",
+      databaseURL: "https://rx-resume.firebaseio.com",
+      projectId: "rx-resume",
+      storageBucket: "rx-resume.appspot.com",
+      messagingSenderId: "493152774539",
+      appId: "1:493152774539:web:ecaa1222f5e1bcf8fb678e",
+      measurementId: "G-83G3Y6DPJ6"
+    };
+
+    firebase.initializeApp(firebaseConfig);
+    firebase.analytics();
+  </script>
 </body>
 
 </html>

src/components/App/App.js

@@ -1,11 +1,14 @@
 /* eslint-disable no-unused-vars */
 import React, { useEffect, useContext } from 'react';
 
-import Onyx from '../../templates/onyx';
 import LeftSidebar from '../LeftSidebar/LeftSidebar';
 import RightSidebar from '../RightSidebar/RightSidebar';
 import AppContext from '../../context/AppContext';
+
+// Resume Templates
+import Onyx from '../../templates/onyx';
 import Pikachu from '../../templates/pikachu/Pikachu';
+import Gengar from '../../templates/gengar/Gengar';
 
 const App = () => {
   const context = useContext(AppContext);
@@ -23,6 +26,8 @@ const App = () => {
         return <Onyx />;
       case 'Pikachu':
         return <Pikachu />;
+      case 'Gengar':
+        return <Gengar />;
       default:
         return null;
     }

src/components/RightSidebar/RightSidebar.js

@@ -2,19 +2,19 @@ import React, { useState, useContext } from 'react';
 
 import AppContext from '../../context/AppContext';
 import TabBar from '../../shared/TabBar';
-import LayoutTab from './tabs/Layout';
+import TemplatesTab from './tabs/Templates';
 import ColorsTab from './tabs/Colors';
 import FontsTab from './tabs/Fonts';
 import ActionsTab from './tabs/Actions';
 
-const tabs = ['Layout', 'Colors', 'Fonts', 'Actions'];
+const tabs = ['Templates', 'Colors', 'Fonts', 'Actions'];
 
 const RightSidebar = () => {
   const context = useContext(AppContext);
   const { state, dispatch } = context;
   const { data, theme } = state;
 
-  const [currentTab, setCurrentTab] = useState('Layout');
+  const [currentTab, setCurrentTab] = useState('Templates');
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -29,8 +29,8 @@ const RightSidebar = () => {
 
   const renderTabs = () => {
     switch (currentTab) {
-      case 'Layout':
-        return <LayoutTab theme={theme} onChange={onChange} />;
+      case 'Templates':
+        return <TemplatesTab theme={theme} onChange={onChange} />;
       case 'Colors':
         return <ColorsTab theme={theme} onChange={onChange} />;
       case 'Fonts':

src/components/RightSidebar/tabs/Templates.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import Onyx, { Image as OnyxPreview } from '../../../templates/onyx';
 import Pikachu, { Image as PikachuPreview } from '../../../templates/pikachu';
+import Gengar, { Image as GengarPreview } from '../../../templates/gengar';
 
-const layouts = [
+const templates = [
   {
     name: 'Onyx',
     component: Onyx,
@@ -13,12 +14,17 @@ const layouts = [
     component: Pikachu,
     preview: PikachuPreview,
   },
+  {
+    name: 'Gengar',
+    component: Gengar,
+    preview: GengarPreview,
+  },
 ];
 
-const LayoutTab = ({ theme, onChange }) => {
+const TemplatesTab = ({ theme, onChange }) => {
   return (
     <div className="grid grid-cols-2 gap-6">
-      {layouts.map(x => (
+      {templates.map(x => (
         <div key={x.name} className="text-center" onClick={() => onChange('theme.layout', x.name)}>
           <img
             className={`rounded cursor-pointer object-cover border shadow hover:shadow-md ${
@@ -36,4 +42,4 @@ const LayoutTab = ({ theme, onChange }) => {
   );
 };
 
-export default LayoutTab;
+export default TemplatesTab;

src/templates/gengar/Gengar.js

@@ -0,0 +1,200 @@
+import React, { useContext } from 'react';
+import AppContext from '../../context/AppContext';
+import { hexToRgb } from '../../utils';
+
+const Gengar = () => {
+  const context = useContext(AppContext);
+  const { state } = context;
+  const { data, theme } = state;
+
+  const { r, g, b } = hexToRgb(theme.colors.accent);
+
+  const ContactItem = ({ icon, value }) =>
+    value && (
+      <div className="flex items-center mb-3">
+        <div
+          className="w-5 h-5 rounded-full flex justify-center items-center mr-2"
+          style={{ backgroundColor: theme.colors.background }}
+        >
+          <i
+            className="flex justify-center items-center material-icons text-xs"
+            style={{ color: theme.colors.accent }}
+          >
+            {icon}
+          </i>
+        </div>
+        <span className="text-sm font-medium">{value}</span>
+      </div>
+    );
+
+  const Heading = ({ title }) => (
+    <h6 className="font-bold text-xs uppercase tracking-wide mb-2">{title}</h6>
+  );
+
+  const SkillItem = x => (
+    <li key={x} className="text-sm py-1">
+      {x}
+    </li>
+  );
+
+  const EducationItem = x => (
+    <div key={x.name} className="mb-3">
+      <div className="flex justify-between items-center">
+        <div>
+          <h6 className="font-semibold">
+            {x.name}
+            <small className="ml-2">
+              {x.start !== '' && x.end !== '' && (
+                <span className="text-xs font-medium">
+                  ({x.start} - {x.end})
+                </span>
+              )}
+            </small>
+          </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>
+        </div>
+      </div>
+      <p className="mt-2 text-sm">{x.description}</p>
+    </div>
+  );
+
+  const AwardCertificationItem = x => (
+    <div key={x.title} className="mb-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+    </div>
+  );
+
+  const WorkItem = x => (
+    <div key={x.title} 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>
+      <p className="mt-2 text-sm">{x.description}</p>
+    </div>
+  );
+
+  return (
+    <div
+      style={{
+        fontFamily: theme.font.family,
+        backgroundColor: theme.colors.background,
+        color: theme.colors.primary,
+      }}
+    >
+      <div className="grid grid-cols-5">
+        <div
+          className="col-span-2 px-6 py-8"
+          style={{ backgroundColor: theme.colors.accent, color: theme.colors.background }}
+        >
+          <div className="flex items-center">
+            {data.profile.photo !== '' && (
+              <img
+                className="w-24 h-24 rounded-full mr-4 object-cover border-4"
+                style={{
+                  borderColor: theme.colors.background,
+                }}
+                src={data.profile.photo}
+                alt="Resume Photograph"
+              />
+            )}
+            <div>
+              <h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
+              <h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
+            </div>
+          </div>
+
+          <hr className="w-1/4 my-5 opacity-50" />
+
+          <ContactItem icon="phone" value={data.profile.phone} />
+          <ContactItem icon="alternate_email" value={data.profile.email} />
+          <ContactItem icon="language" value={data.profile.website} />
+          <ContactItem icon="location_on" value={data.profile.address.line3} />
+        </div>
+
+        <div
+          className="col-span-3 px-6 py-8"
+          style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
+        >
+          {data.objective.enable && (
+            <div className="h-full flex flex-col justify-center items-start">
+              <Heading title={data.objective.heading} />
+              <p className="text-sm whitespace-pre-wrap">{data.objective.body}</p>
+            </div>
+          )}
+        </div>
+
+        <div
+          className="col-span-2 px-6 py-8"
+          style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
+        >
+          {data.skills.enable && (
+            <div className="mb-8">
+              <Heading title={data.skills.heading} />
+              <ul className="list-disc ml-5">{data.skills.items.map(SkillItem)}</ul>
+            </div>
+          )}
+
+          {data.education.enable && (
+            <div className="mb-8">
+              <Heading title={data.education.heading} />
+              {data.education.items.map(EducationItem)}
+            </div>
+          )}
+
+          {data.certifications.enable && (
+            <div className="mb-8">
+              <Heading title={data.certifications.heading} />
+              {data.certifications.items.map(AwardCertificationItem)}
+            </div>
+          )}
+        </div>
+
+        <div className="col-span-3 px-6 py-8">
+          {data.work.enable && (
+            <div className="mb-8">
+              <Heading title={data.work.heading} />
+              {data.work.items.map(WorkItem)}
+            </div>
+          )}
+
+          {data.awards.enable && (
+            <div className="mb-8">
+              <Heading title={data.awards.heading} />
+              {data.awards.items.map(AwardCertificationItem)}
+            </div>
+          )}
+
+          {data.extras.enable && (
+            <div>
+              <Heading title={data.extras.heading} />
+              <table className="table-auto">
+                <tbody>
+                  {data.extras.items.map(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>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Gengar;

src/templates/gengar/index.js

@@ -0,0 +1,5 @@
+import Gengar from './Gengar';
+import image from './preview.png';
+
+export const Image = image;
+export default Gengar;

src/templates/pikachu/Pikachu.js

@@ -83,7 +83,7 @@ const Pikachu = () => {
           <h6 className="font-semibold">{x.name}</h6>
           <p className="text-xs">{x.major}</p>
         </div>
-        <div className="flex flex-col items-end">
+        <div className="flex flex-col text-right items-end">
           <span className="text-sm font-bold" style={{ color: theme.colors.accent }}>
             {x.grade}
           </span>