From c3cb452902a9833c42cde3ffd983e9187983d66c Mon Sep 17 00:00:00 2001 From: webdevzsk <72684302+webdevsk@users.noreply.github.com> Date: Sun, 10 Sep 2023 13:51:33 +0600 Subject: [PATCH] Template2 - version 1.0 --- src/App.jsx | 18 +++++----- src/index.css | 24 ++++++------- src/resume.js | 26 +++++++------- src/sample-resume.js | 67 +++++++++++++++++++++++++++++++++++++ src/templates/Template1.css | 8 ++--- src/templates/Template2.css | 4 +-- src/templates/Template2.jsx | 4 +-- tailwind.config.js | 5 +-- 8 files changed, 113 insertions(+), 43 deletions(-) create mode 100644 src/sample-resume.js diff --git a/src/App.jsx b/src/App.jsx index d5811c7..b8de8d3 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,7 +6,7 @@ function App() { const printMode = params.get("printonly") ? true : false return ( -
+ <>
)} -
+ ) } diff --git a/src/index.css b/src/index.css index 56a9b24..827618d 100644 --- 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,31 +84,31 @@ } 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 { @@ -116,6 +116,6 @@ } span { - @apply text-xs sm:text-sm; + @apply xs:text-sm text-xs; } } diff --git a/src/resume.js b/src/resume.js index 05048bd..108038e 100644 --- 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 new file mode 100644 index 0000000..b555449 --- /dev/null +++ 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 index 3934f9b..484346a 100644 --- 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 index 9967341..4264bb5 100644 --- 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 index 94082da..6df9522 100644 --- a/src/templates/Template2.jsx +++ b/src/templates/Template2.jsx @@ -181,10 +181,10 @@ const Template = ({ printMode }) => { {" "} - + {project.repo.replace("https://github.com/", "")} - Github + Github

diff --git a/tailwind.config.js b/tailwind.config.js index cc55d88..d150194 100644 --- 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],