create glalie template

src/components/App/App.js

@@ -39,13 +39,15 @@ const App = () => {
         <div className="relative z-0 h-screen overflow-hidden col-span-3 flex justify-center items-center">
           <PanZoom
             ref={panZoomRef}
-            enableBoundingBox
             minZoom="0.4"
-            style={{
-              outline: 'none',
-            }}
+            autoCenter
+            autoCenterZoomLevel={0.8}
+            enableBoundingBox
+            boundaryRatioVertical={0.8}
+            boundaryRatioHorizontal={0.8}
+            style={{ outline: 'none' }}
           >
-            <div id="page" ref={pageRef} className="shadow-2xl">
+            <div id="page" ref={pageRef} className="shadow-2xl break-words">
               {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
             </div>
           </PanZoom>

src/i18n/index.js

@@ -1,7 +1,7 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
-import resources from './locales';
+import resources from './source';
 
 const languages = [
   {

src/i18n/source/index.js

@@ -3,7 +3,9 @@ import leftSidebar from './leftSidebar';
 import rightSidebar from './rightSidebar';
 
 export default {
+  en: {
     app,
     leftSidebar,
     rightSidebar,
+  },
 };

src/templates/glalie/Glalie.js

@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
 import AppContext from '../../context/AppContext';
 import { hexToRgb } from '../../utils';
 
@@ -9,6 +11,247 @@ const Glalie = () => {
 
   const { r, g, b } = hexToRgb(theme.colors.accent) || {};
 
+  const Photo = () =>
+    data.profile.photo !== '' && (
+      <img
+        className="w-40 h-40 rounded-full mx-auto"
+        src={data.profile.photo}
+        alt="Resume Photograph"
+      />
+    );
+
+  const FullName = () => (
+    <div className="text-4xl font-bold leading-none">
+      <h1>{data.profile.firstName}</h1>
+      <h1>{data.profile.lastName}</h1>
+    </div>
+  );
+
+  const Subtitle = () => (
+    <div className="tracking-wide text-xs uppercase font-medium">{data.profile.subtitle}</div>
+  );
+
+  const Divider = () => (
+    <div className="w-1/2 mx-auto my-2 border-b-2" style={{ borderColor: theme.colors.accent }} />
+  );
+
+  const ContactItem = ({ title, value }) =>
+    value && (
+      <div className="flex flex-col">
+        <h6 className="text-xs font-bold" style={{ color: theme.colors.accent }}>
+          {title}
+        </h6>
+        <p className="text-sm">{value}</p>
+      </div>
+    );
+
+  const ContactInformation = () => (
+    <div
+      className="w-full border-2 pl-4 pr-4 pb-6"
+      style={{
+        borderColor: theme.colors.accent,
+      }}
+    >
+      <div
+        className="inline-block relative px-4"
+        style={{ top: '-.9em', color: theme.colors.accent }}
+      >
+        <h2 className="flex">
+          <i className="material-icons">flare</i>
+        </h2>
+      </div>
+
+      <div className="grid grid-cols-1 row-gap-4">
+        <ContactItem title="Phone Number" value={data.profile.phone} />
+        <ContactItem title="Email Address" value={data.profile.email} />
+        <ContactItem title="Website" value={data.profile.website} />
+
+        <div className="flex flex-col">
+          <i className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+            home
+          </i>
+          <p className="text-sm">{data.profile.address.line1}</p>
+          <p className="text-sm">{data.profile.address.line2}</p>
+          <p className="text-sm">{data.profile.address.line3}</p>
+        </div>
+      </div>
+    </div>
+  );
+
+  const Heading = ({ title }) => (
+    <h6
+      className="text-sm font-semibold uppercase pb-1 mb-2 border-b"
+      style={{ borderColor: theme.colors.accent, color: theme.colors.accent }}
+    >
+      {title}
+    </h6>
+  );
+
+  const Objective = () =>
+    data.objective.enable && (
+      <div>
+        <Heading title={data.objective.heading} />
+        <p className="text-sm px-4 text-justify">{data.objective.body}</p>
+      </div>
+    );
+
+  const WorkItem = x => (
+    <div key={x.title} className="mt-3">
+      <div className="flex justify-between">
+        <div>
+          <h6 className="font-semibold text-sm">{x.title}</h6>
+          <p className="text-xs opacity-75 font-medium">
+            {x.role} / {x.start} - {x.end}
+          </p>
+        </div>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Work = () =>
+    data.work &&
+    data.work.enable && (
+      <div>
+        <Heading title={data.work.heading} />
+        {data.work.items.filter(x => x.enable).map(WorkItem)}
+      </div>
+    );
+
+  const EducationItem = x => (
+    <div key={x.name} className="mt-3">
+      <div>
+        <h6 className="font-semibold text-xs">{x.name}</h6>
+        <p className="text-xs opacity-75">{x.major}</p>
+        <p className="text-xs opacity-75">
+          {x.start} - {x.end}
+        </p>
+      </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="grid grid-cols-2 gap-4">
+          {data.education.items.filter(x => x.enable).map(EducationItem)}
+        </div>
+      </div>
+    );
+
+  const AwardItem = x => (
+    <div key={x.title} className="mt-3 text-left">
+      <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} />
+        {data.awards.items.filter(x => x.enable).map(AwardItem)}
+      </div>
+    );
+
+  const CertificationItem = x => (
+    <div key={x.title} className="mt-3 text-left">
+      <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} />
+        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
+      </div>
+    );
+
+  const SkillItem = x => (
+    <li key={x} className="text-xs font-medium">
+      {x}
+    </li>
+  );
+
+  const Skills = () =>
+    data.skills &&
+    data.skills.enable && (
+      <div>
+        <Heading title={data.skills.heading} />
+        <ul className="pt-2 grid grid-cols-2 gap-3">{data.skills.items.map(SkillItem)}</ul>
+      </div>
+    );
+
+  const LanguageItem = x => (
+    <div key={x.id} className="grid grid-cols-2 items-center py-2">
+      <h6 className="text-xs font-medium text-left">{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 &&
+    data.languages.enable && (
+      <div>
+        <Heading title={data.languages.heading} />
+        <div className="w-3/4">{data.languages.items.filter(x => x.enable).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 &&
+    data.references.enable && (
+      <div>
+        <Heading title={data.references.heading} />
+        <div className="grid grid-cols-3 gap-8">
+          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
+        </div>
+      </div>
+    );
+
+  const ExtraItem = x => (
+    <tr key={x.id}>
+      <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>
+  );
+
+  const Extras = () =>
+    data.extras &&
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <table className="w-2/3 table-auto">
+          <tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
+        </table>
+      </div>
+    );
+
   return (
     <div
       style={{
@@ -18,8 +261,35 @@ const Glalie = () => {
       }}
     >
       <div className="grid grid-cols-12">
-        <div className="col-span-4 bg-gray-200 py-10 px-5">Hello</div>
-        <div className="col-span-8 py-10 px-5">World</div>
+        <div
+          className="h-full col-span-4 p-8 grid grid-cols-1 row-gap-8 text-center"
+          style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
+        >
+          <div className="grid grid-cols-1 row-gap-4">
+            <Photo />
+            <FullName />
+            <Subtitle />
+          </div>
+
+          <Divider />
+          <ContactInformation />
+          <Divider />
+
+          <Objective />
+          <Languages />
+          <Certifications />
+        </div>
+
+        <div className="col-span-8 p-8">
+          <div className="grid grid-cols-1 row-gap-6">
+            <Work />
+            <Education />
+            <Skills />
+            <Awards />
+            <References />
+            <Extras />
+          </div>
+        </div>
       </div>
     </div>
   );