Template2 - version 1.0

webdevsk · Sep 10, 2023 · c3cb452 · c3cb452
1 parent 55c8b8c
commit c3cb452
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 43 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,7 +6,7 @@ function App() {
   const printMode = params.get("printonly") ? true : false
 
   return (
-    <div className={!printMode ? "container" : ""}>
+    <>
       <div className={!printMode ? "pdf-container" : ""}>
         <div
           id="pdf"
@@ -19,15 +19,17 @@ function App() {
 
       {!printMode && (
         <div className="container" id="other-body-stuff">
-          <a
-            className="ms-auto rounded-sm bg-gray-600 px-4 py-2 text-white transition-colors hover:bg-gray-600"
-            href={url + "?printonly=true"}
-          >
-            Print Mode
-          </a>
+          <div className="my-4 text-center">
+            <a
+              className="underline transition-colors hover:text-blue-500"
+              href={url + "?printonly=true"}
+            >
+              <h5>Print Mode</h5>
+            </a>
+          </div>
         </div>
       )}
-    </div>
+    </>
   )
 }
 

diff --git a/src/index.css b/src/index.css
@@ -12,9 +12,9 @@
 
 /* Set the lowest viewport size to @media(min-width: 480px) to tackle this issue. For mobile, use initial sizes. For print, use @media(min-width: 480px). If you decrease the pdf margin, you can crank up the lowest viewport slightly if you want. Though you have to test it the hard way */
 
-/* How to test: Style an element with an obvious difference in mobile and non mobile view. Something like className="text-red-500 sm:text-blue-500". Then crank up the lowest viewport by 20. Generate pdf using puppeteer and see if it chose the mobile version or non mobile version. If it chose the non mobile one (text is blue) you are good to go */
+/* How to test: Style an element with an obvious difference in mobile and non mobile view. Something like className="text-red-500 xs:text-blue-500". Then crank up the lowest viewport by 20. Generate pdf using puppeteer and see if it chose the mobile version or non mobile version. If it chose the non mobile one (text is blue) you are good to go */
 
-/* As this project has Tailwind, you can set the lowest viewport in tailwind.config.js and use sm:property-styles as base style for printing. */
+/* As this project has Tailwind, you can create an even smaller viewport "xs". Add it in tailwind.config.js and use xs:property-styles as base styles for printing. */
 
 /* The css mode in puppeteer is set to screen mode. So @media print{} won't work */
 
@@ -24,7 +24,7 @@
   /* for mobile browsers */
   @apply px-4;
   /* for print and non mobile browsers */
-  @apply sm:px-8;
+  @apply xs:px-8;
 }
 
 /* -------------------- main css starts here -------------------- */
@@ -49,7 +49,7 @@
 
 /* for non live version/non print mode */
 .pdf-container {
-  @apply mx-auto mt-16 w-full max-w-max border border-black p-4 md:p-[--pdf-margin];
+  @apply mx-auto mt-12 w-full max-w-max border border-black p-4 md:p-[--pdf-margin];
 }
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
 
@@ -84,38 +84,38 @@
   }
 
   h1 {
-    @apply text-3xl sm:text-4xl;
+    @apply xs:text-4xl text-3xl;
   }
 
   h2 {
-    @apply text-xl sm:text-2xl;
+    @apply xs:text-2xl text-xl;
   }
 
   h3 {
-    @apply text-lg sm:text-xl;
+    @apply xs:text-xl text-lg;
   }
 
   h4 {
-    @apply text-base sm:text-lg;
+    @apply xs:text-lg text-base;
   }
 
   h5 {
-    @apply text-sm sm:text-base;
+    @apply xs:text-base text-sm;
   }
 
   h6 {
-    @apply text-xs sm:text-sm;
+    @apply xs:text-sm text-xs;
   }
 
   p {
-    @apply text-xs sm:text-sm;
+    @apply xs:text-sm text-xs;
   }
 
   small {
     @apply block text-xs;
   }
 
   span {
-    @apply text-xs sm:text-sm;
+    @apply xs:text-sm text-xs;
   }
 }
diff --git a/src/resume.js b/src/resume.js
@@ -1,12 +1,12 @@
 const resume = {
   data: {
-    honorifics: "Mohammed",
+    honorific: "Mohammed",
     firstName: "Salman",
     lastName: "Khan",
     photo: null,
     title: "Frontend Web Developer",
     location: "Dhaka, Bangladesh",
-    phone: "+880 1305 335 088",
+    phone: "+880 1305 335088",
     email: "webdevz.sk@gmail.com",
     telephone: null,
     github: "https://github.com/webdevsk",
@@ -15,7 +15,7 @@ const resume = {
     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 React and Vanilla 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 intermediate knowledge on Dev Tools and Search Engines.",
+      "I am a Frontend Web Developer skilled in creating interactable solutions and solving technical and design problems using React and Vanilla JS. I have more than 2 years of experience in creating pixel-perfect and mobile responsive Websites that meet client requirements. I debug design and functional issues with my intermediate knowledge of Dev Tools, Search Engines and ChatGPT.",
     skills: [
       {
         heading: "Frontend",
@@ -34,40 +34,40 @@ const resume = {
       },
       {
         heading: "Technologies",
-        data: ["Git", "GitHub", "WordPress", "Adobe Xd", "Figma"],
+        data: ["Git", "GitHub", "WordPress", "Adobe Xd", "Figma", "ChatGPT"],
       },
     ],
     projects: [
       {
         title: "React TODO App",
-        shortDescription: "A TODO APP built with React JS.",
+        shortDescription: "A TODO APP built with React JS",
         link: "https://celadon-cactus-42acbb.netlify.app/",
         repo: "https://github.com/webdevsk/react-todo-app",
         builtWith: [
           "React",
           "React-Router",
           "TailwindCSS",
-          "Material-Tailwind",
+          "Material-Tailwind UI",
         ],
         features: [
           "Create, mark, pin or delete tasks. Bulk check and remove completed tasks.",
-          "Handheld device accessible. Bottom input field improves reachability.",
-          "Create dynamic categories either from within the APP or from browser URL directly",
-          "Side Menu visibility is dynamically managed based on device orientation and viewport.",
+          "Handheld device accessibility. Bottom input field improves reachability.",
+          "Create dynamic categories either from within the app or from the browser URL directly",
+          "Side Menu visibility state is dynamically managed based on device orientation and viewport",
         ],
       },
       {
         title: "Random Task Today",
         shortDescription:
-          "Generate a random task to do today and see a refreshing photo related to it.",
+          "Generate a random task to do today and see a refreshing photo related to it",
         link: "https://splendid-narwhal-4770fd.netlify.app/",
         repo: "https://github.com/webdevsk/Random-task-today",
         builtWith: ["React", "TailwindCSS", "Netlify Serverless Functions"],
         features: [
-          "Fetches a Random task from Bored API then fetches a related Photo from Unsplash API.",
-          "Preloading, loading and status states are managed based on async functions.",
+          "Fetches a random task from Bored API and then fetches a related photo from Unsplash API",
+          "Preloading, loading, and status states are managed using asynchronous functions",
           "Implemented Netlify Serverless Functions (Lambda) to handle the backend.",
-          "All API calls are made from the backend functions, keeping API credentials secret.",
+          "All API calls are made from the backend functions, keeping API credentials secret",
         ],
       },
       // {

diff --git a/src/sample-resume.js b/src/sample-resume.js
@@ -0,0 +1,67 @@
+// This is a boilerplate resume file. Copy the object below and create a "resume.js" file and fill all the information there.
+// If you want to skip some fields, just pass null to them
+
+// Wrong
+// location: "null"
+
+// Correct
+// location: null
+
+const resume = {
+  data: {
+    honorific: "",
+    firstName: "",
+    lastName: "",
+    photo: "",
+    title: "",
+    location: "",
+    phone: "",
+    email: "",
+    telephone: "",
+    github: "",
+    linkedin: "",
+    twitter: "",
+    facebook: "",
+    liveLink: "",
+    about: "",
+    skills: [
+      {
+        heading: "",
+        data: [""],
+      },
+    ],
+    projects: [
+      {
+        title: "",
+        shortDescription: "",
+        link: "",
+        repo: "",
+        builtWith: [""],
+        features: [""],
+      },
+    ],
+    experiences: [
+      {
+        position: "",
+        company: "",
+        location: "",
+        dateFrom: "",
+        dateTo: "",
+        skills: [""],
+        responsibilities: [""],
+      },
+    ],
+    educations: [
+      {
+        title: "",
+        institute: "",
+        location: "",
+        dateFrom: "",
+        dateTo: "",
+      },
+    ],
+    spokenLanguages: [""],
+  },
+}
+
+export default resume
diff --git a/src/templates/Template1.css b/src/templates/Template1.css
@@ -36,7 +36,7 @@
     }
 
     .title {
-      @apply hidden font-semibold capitalize sm:block;
+      @apply xs:block hidden font-semibold capitalize;
     }
   }
 
@@ -55,7 +55,7 @@
     }
 
     .skillset {
-      @apply grid grid-flow-row justify-start gap-x-3 pt-2 sm:grid-flow-col sm:grid-rows-3;
+      @apply xs:grid-flow-col xs:grid-rows-3 grid grid-flow-row justify-start gap-x-3 pt-2;
     }
   }
 
@@ -127,7 +127,7 @@
     }
 
     .row {
-      @apply flex-wrap items-center justify-between sm:flex;
+      @apply xs:flex flex-wrap items-center justify-between;
     }
   }
 }
@@ -142,7 +142,7 @@
   .bullet-item {
     @apply relative ps-4;
     &:before {
-      @apply absolute inset-0 text-xs leading-4 text-theme content-["◆"] sm:leading-5;
+      @apply xs:leading-5 absolute inset-0 text-xs leading-4 text-theme content-["◆"];
     }
   }
   .date > * {

diff --git a/src/templates/Template2.css b/src/templates/Template2.css
@@ -67,7 +67,7 @@
     }
 
     .skillset {
-      @apply grid grid-flow-row justify-start gap-x-3 pt-2 sm:grid-flow-col sm:grid-rows-3;
+      @apply xs:grid-flow-col xs:grid-rows-3 grid grid-flow-row justify-start gap-x-3 pt-2;
     }
   }
 
@@ -153,7 +153,7 @@
   .bullet-item {
     @apply relative ps-4;
     &:before {
-      @apply absolute inset-0 text-base leading-4 text-[--rand-color] content-["●"] sm:leading-4;
+      @apply xs:leading-4 absolute inset-0 text-base leading-4 text-[--rand-color] content-["●"];
     }
   }
   .date > * {

diff --git a/src/templates/Template2.jsx b/src/templates/Template2.jsx
@@ -181,10 +181,10 @@ const Template = ({ printMode }) => {
                       <a className="date" href={project.repo}>
                         <small>
                           <FontAwesomeIcon icon="fa-brands fa-github" />{" "}
-                          <span className="max-sm:hidden">
+                          <span className="max-xs:hidden">
                             {project.repo.replace("https://github.com/", "")}
                           </span>
-                          <span className="sm:hidden">Github</span>
+                          <span className="xs:hidden">Github</span>
                         </small>
                       </a>
                     </p>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,12 +13,13 @@ export default {
       center: true,
       padding: {
         DEFAULT: "1rem",
-        sm: "2rem",
+        xs: "2rem",
       },
     },
     extend: {
       screens: {
-        sm: "520px",
+        xs: "520px",
+        ...defaultTheme.screens,
       },
       fontFamily: {
         sans: ["Inter Variable", ...defaultTheme.fontFamily.sans],