Done with Experiences layout

webdevsk · Sep 5, 2023 · 9214444 · 9214444
1 parent ff230e1
commit 9214444
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 34 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -3,27 +3,27 @@ import Template1 from "./templates/Template1"
 function App() {
   const url = new URL(window.location.href)
   const params = new URLSearchParams(url.search)
-  const resumeOnlyMode = params.get("resumeonly")
+  const printMode = params.get("printonly")
 
   return (
     <div
       className={
-        !resumeOnlyMode ? "flex flex-wrap justify-center gap-y-8 py-16" : ""
+        !printMode ? "flex flex-wrap justify-center gap-y-8 py-16" : ""
       }
     >
-      {!resumeOnlyMode && (
+      {!printMode && (
         <div className="w-full" id="other-body-stuff">
           <div className="container">
             <a
               className="rounded-sm bg-gray-400 p-4 text-white transition-colors hover:bg-gray-600"
-              href={url + "?resumeonly=true"}
+              href={url + "?printonly=true"}
             >
-              Resume Only Mode
+              Print Mode
             </a>
           </div>
         </div>
       )}
-      <div id={!resumeOnlyMode && "pdf-container"}>
+      <div id={!printMode && "pdf-container"}>
         <div id="pdf">
           <Template1 />
         </div>

diff --git a/src/resume.js b/src/resume.js
@@ -13,6 +13,7 @@ const resume = {
     linkedin: "https://linkedin.com/in/webdevsk",
     twitter: null,
     facebook: null,
+    liveLink: "https://webdevsk.github.io/react-resume/",
     about:
       "I am a Frontend Web Developer creating interactable solutions and solving both technical and design challenges using Vanilla JavaScript and React JS. I have more than 2 years of experience in creating pixel-perfect and mobile responsive Websites that met client requirements. I debug design and functional issues with my deep knowledge on Dev Tools and Search Engines.",
     skills: [
@@ -45,15 +46,30 @@ const resume = {
       //   },
     ],
     experiences: [
-      //   {
-      //     position: null,
-      //     company: null,
-      //     location: null,
-      //     dateFrom: null,
-      //     dateTo: null,
-      //     skillset: "",
-      //     responsibilities: [],
-      //   },
+      {
+        position:
+          "E-commerce Operations, Retail Operations and Inventory Management Associate.",
+        company: "Wadi Groceries",
+        location: "Riyadh, Saudiarabia",
+        dateFrom: "01-4-7",
+        dateTo: "Present",
+        skills: [
+          "Communication skills",
+          "Organizational skills",
+          "Ability to work independently and as part of a team",
+          "Attention to detail",
+          "Problem-solving skills",
+          "Technical skills (MS Excel, Ecommerce Dashboard)",
+          "Ability to learn new technologies quickly",
+        ],
+        responsibilities: [
+          "Process online orders accurately and efficiently",
+          "Assemble and package orders for shipping",
+          "Update shop database using MS Excel and online console inorder to maintain inventory records",
+          "Troubleshoot technical problems",
+          "Stay up-to-date on the latest ecommerce technologies",
+        ],
+      },
     ],
     educations: [
       //   {

diff --git a/src/templates/Template1.css b/src/templates/Template1.css
@@ -53,10 +53,46 @@
   }
 
   #skills .skillset {
-    @apply grid grid-flow-row justify-start gap-x-2 gap-y-1 pt-2 marker:text-xs marker:text-body md:grid-flow-col md:grid-rows-3;
+    @apply grid grid-flow-row justify-start gap-x-2 gap-y-1 pt-2 md:grid-flow-col md:grid-rows-3;
   }
 
-  #skills .skillset li {
-    @apply inline-flex items-center gap-1 before:content-["•"];
+  /* projects */
+  #experiences {
+    @apply border-t border-accent;
+  }
+  #experiences .heading {
+    @apply bg-theme py-1 text-center;
+  }
+  #experiences .heading > * {
+    @apply text-gray-50;
+  }
+  #experiences .content {
+    @apply mt-template flex flex-col gap-y-4;
+  }
+  #experiences .sections {
+    @apply flex flex-col gap-y-2;
+  }
+  #experiences .row {
+    @apply grid grid-cols-3 gap-x-2;
+  }
+  #experiences .company {
+    @apply text-center;
+  }
+  #experiences .date {
+    @apply text-end;
+  }
+  #experiences :where(.responsibilities, .soft-skills) {
+  }
+  /* #experiences .soft-skills {
+    @apply flex flex-wrap gap-x-2;
+  }
+  #experiences .soft-skills > * {
+    @apply w-1/4 grow;
+  } */
+}
+
+@layer utilities {
+  .bullet-list > * {
+    @apply flex items-center gap-1 before:leading-3 before:content-["•"];
   }
 }
diff --git a/src/templates/Template1.jsx b/src/templates/Template1.jsx
@@ -84,7 +84,7 @@ const Template1 = () => {
               <div key={category.heading} className="col">
                 <h6>{category.heading}</h6>
 
-                <ul className="skillset">
+                <ul className="skillset bullet-list">
                   {category.data.map((skill) => (
                     <li key={skill}>
                       <p>{skill}</p>
@@ -129,27 +129,45 @@ const Template1 = () => {
       {data.experiences.length !== 0 && (
         <div id="experiences">
           <div className="heading">
-            <h4>Work Experience</h4>
+            <h5>Work Experiences</h5>
           </div>
           <ul className="content">
             {data.experiences.map((job) => (
-              <li key={job.title}>
+              <li key={job.position} className="sections">
                 <div className="row">
-                  <h5>{job.title}</h5>
-                  <h5>{job.company}</h5>
-                  <small>{job.location}</small>
-                  <small>{job.dateFrom}</small>
-                  <small>{job.dateTo}</small>
+                  <div className="position">
+                    <h6>{job.position}</h6>
+                  </div>
+                  <div className="company">
+                    <h6>{job.company}</h6>
+                    <small>({job.location})</small>
+                  </div>
+                  <div className="date">
+                    <h6>
+                      {job.dateFrom} - {job.dateTo}
+                    </h6>
+                  </div>
                 </div>
-                <div className="row">
-                  <h5>Soft Skills Acquired:</h5>
-                  <p>{job.skillset}</p>
+                <div>
+                  <h6>Soft Skills Acquired:</h6>
+                  <ul className="soft-skills bullet-list">
+                    {job.skills.map((skill) => (
+                      <li key={skill}>
+                        <p>{skill}</p>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div>
+                  <h6>Responsibilites:</h6>
+                  <ul className="responsibilities bullet-list">
+                    {job.responsibilities.map((responsibility) => (
+                      <li key={responsibility}>
+                        <p>{responsibility}</p>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
-                <ul className="responsibilities">
-                  {job.responsibilities.map((responsibility) => (
-                    <li key={responsibility}>{responsibility}</li>
-                  ))}
-                </ul>
               </li>
             ))}
           </ul>