designed new castform template

public/index.html

@@ -26,7 +26,7 @@
   <title>Reactive Resume</title>
 
   <!-- Animate.css -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.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">

src/components/App/App.js

@@ -7,8 +7,9 @@ import AppContext from '../../context/AppContext';
 
 // Resume Templates
 import Onyx from '../../templates/onyx';
-import Pikachu from '../../templates/pikachu/Pikachu';
+import Pikachu from '../../templates/pikachu';
-import Gengar from '../../templates/gengar/Gengar';
+import Gengar from '../../templates/gengar';
+import Castform from '../../templates/castform';
 
 const App = () => {
   const context = useContext(AppContext);
@@ -28,6 +29,8 @@ const App = () => {
         return <Pikachu />;
       case 'Gengar':
         return <Gengar />;
+      case 'Castform':
+        return <Castform />;
       default:
         return null;
     }

src/components/RightSidebar/tabs/Templates.js

@@ -2,6 +2,7 @@ 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';
+import Castform, { Image as CastformPreview } from '../../../templates/castform';
 
 const templates = [
   {
@@ -19,6 +20,11 @@ const templates = [
     component: Gengar,
     preview: GengarPreview,
   },
+  {
+    name: 'Castform',
+    component: Castform,
+    preview: CastformPreview,
+  },
 ];
 
 const TemplatesTab = ({ theme, onChange }) => {

src/index.css

@@ -17,7 +17,7 @@ body {
   font-family: 'Montserrat', sans-serif;
 }
 
-li {
+ul {
   list-style: disc;
   list-style-position: inside !important;
 }
@@ -66,8 +66,8 @@ li {
   #page {
     width: 21cm;
     height: 29.7cm;
-    zoom: 0.8;
     padding: 2.5em;
+    zoom: 0.8;
     overflow: scroll;
     background-color: white;
   }
@@ -94,9 +94,9 @@ li {
   }
 
   #page {
+    width: 21cm;
+    height: 29.7cm;
     background-color: white;
-    margin: 0;
-    padding: 0;
     box-shadow: none;
     position: absolute;
     left: 0;

src/templates/castform/Castform.js

@@ -0,0 +1,274 @@
+import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import AppContext from '../../context/AppContext';
+
+const Castform = () => {
+  const context = useContext(AppContext);
+  const { state } = context;
+  const { data, theme } = state;
+
+  const PersonalInformation = () => (
+    <div className="pt-5 px-5">
+      <h1 className="text-2xl font-bold">
+        {data.profile.firstName} {data.profile.lastName}
+      </h1>
+      <h5>{data.profile.subtitle}</h5>
+    </div>
+  );
+
+  const Heading = ({ title, light = false }) => (
+    <div
+      className={`py-2 my-4 ${light ? 'mx-5 border-t border-b border-gray-400' : ''}`}
+      style={{ backgroundColor: light ? '' : 'rgba(0, 0, 0, 0.25)' }}
+    >
+      <h6 className={`${light ? '' : 'pl-5'} font-semibold`}>{title}</h6>
+    </div>
+  );
+
+  const Address = () => (
+    <div className="px-5 my-2">
+      <h6 className="text-xs font-bold">Address</h6>
+      <div className="text-sm">{data.profile.address.line1}</div>
+      <div className="text-sm">{data.profile.address.line2}</div>
+      <div className="text-sm">{data.profile.address.line3}</div>
+    </div>
+  );
+
+  const ContactItem = ({ title, value, link = '#' }) =>
+    value && (
+      <div className="px-5 my-2">
+        <h6 className="text-xs font-bold">{title}</h6>
+        <a href={link}>
+          <div className="text-sm">{value}</div>
+        </a>
+      </div>
+    );
+
+  const ContactInformation = () => (
+    <div>
+      <Heading title="Contact Information" />
+      <Address />
+      <ContactItem title="Phone" value={data.profile.phone} link={`tel:${data.profile.phone}`} />
+      <ContactItem
+        title="Email Address"
+        value={data.profile.email}
+        link={`mailto:${data.profile.email}`}
+      />
+      <ContactItem
+        title="Website"
+        value={data.profile.website}
+        link={`http://${data.profile.website}`}
+      />
+    </div>
+  );
+
+  const SkillItem = x => (
+    <li key={x} className="text-sm my-2">
+      {x}
+    </li>
+  );
+
+  const Skills = () =>
+    data.skills.enable && (
+      <div>
+        <Heading title="Skills" />
+        <ul className="list-none px-5">{data.skills.items.map(SkillItem)}</ul>
+      </div>
+    );
+
+  const Objective = () =>
+    data.objective.enable && <p className="m-5 text-sm">{data.objective.body}</p>;
+
+  const WorkItem = x => (
+    <div key={x.title} className="my-3 px-5">
+      <div className="flex justify-between">
+        <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.enable && (
+      <div>
+        <Heading light title={data.work.heading} />
+        {data.work.items.map(WorkItem)}
+      </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 light title={data.references.heading} />
+        <div className="grid grid-cols-2 gap-6 px-5">
+          {data.references.items.map(ReferenceItem)}
+        </div>
+      </div>
+    );
+
+  const LanguageItem = x => (
+    <div key={x.id} className="flex flex-col my-2">
+      <h6 className="text-sm font-medium mb-1">{x.key}</h6>
+      <div className="relative h-5">
+        <div
+          className="absolute mb-1 inset-0"
+          style={{
+            backgroundColor: 'rgba(0, 0, 0, 0.25)',
+          }}
+        />
+        <div
+          className="absolute mb-1 inset-0 rounded"
+          style={{
+            width: `${x.value * 20}%`,
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+          }}
+        />
+      </div>
+    </div>
+  );
+
+  const Languages = () =>
+    data.languages.enable && (
+      <div>
+        <Heading title={data.languages.heading} />
+        <div className="px-5 mb-6">{data.languages.items.map(LanguageItem)}</div>
+      </div>
+    );
+
+  const EducationItem = x => (
+    <div key={x.name} className="my-3 px-5">
+      <div className="flex justify-between">
+        <div>
+          <h6 className="font-semibold">{x.name}</h6>
+          <p className="text-xs">{x.major}</p>
+        </div>
+        <div className="flex flex-col items-end">
+          <span className="text-sm font-bold">{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.enable && (
+      <div>
+        <Heading light title={data.education.heading} />
+        {data.education.items.map(EducationItem)}
+      </div>
+    );
+
+  const AwardItem = x => (
+    <div key={x.title} className="my-3 px-5">
+      <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.enable && (
+      <div>
+        <Heading light title={data.awards.heading} />
+        {data.awards.items.map(AwardItem)}
+      </div>
+    );
+
+  const CertificationItem = x => (
+    <div key={x.title} className="my-3 px-5">
+      <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.enable && (
+      <div>
+        <Heading title={data.certifications.heading} />
+        {data.certifications.items.map(CertificationItem)}
+      </div>
+    );
+
+  const ExtraItem = ({ key, value }) => (
+    <div className="px-5 my-2">
+      <h6 className="text-xs font-bold">{key}</h6>
+      <div className="text-sm">{value}</div>
+    </div>
+  );
+
+  const Extras = () =>
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        {data.extras.items.map(ExtraItem)}
+      </div>
+    );
+
+  return (
+    <div
+      style={{
+        fontFamily: theme.font.family,
+        backgroundColor: theme.colors.background,
+        color: theme.colors.primary,
+      }}
+    >
+      <div className="grid grid-cols-12">
+        <div
+          className="col-span-4 rounded"
+          style={{
+            color: theme.colors.background,
+            backgroundColor: theme.colors.accent,
+          }}
+        >
+          <div className="mt-5 ml-5">
+            <img
+              className="w-32 h-32 rounded-full"
+              style={{
+                borderWidth: 6,
+                borderColor: theme.colors.background,
+              }}
+              src={data.profile.photo}
+              alt="Profile Photograph"
+            />
+          </div>
+          <PersonalInformation />
+          <ContactInformation />
+          <Skills />
+          <Languages />
+          <Certifications />
+          <Extras />
+        </div>
+        <div className="col-span-8">
+          <Objective />
+          <Work />
+          <Education />
+          <Awards />
+          <References />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Castform;

src/templates/castform/index.js

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

src/templates/gengar/Gengar.js

@@ -25,8 +25,8 @@ const Gengar = () => {
 
   const FullName = () => (
     <div>
-      <h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
+      <h1 className="text-2xl font-bold">{data.profile.firstName}</h1>
-      <h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
+      <h1 className="text-2xl font-bold">{data.profile.lastName}</h1>
     </div>
   );