added print styles

src/App.tsx

@@ -23,10 +23,13 @@ const App = () => {
         )}></div>
       <Transition
         show={show}
-        className="transition-all ease-in-out duration-1000 shadow h-auto sm:h-[56rem] w-[43rem] sm:overflow-hidden overflow-scroll flex flex-col bg-white relative px-10  sm:rounded-lg"
-        enterFrom="sm:opacity-0 sm:scale-90 sm:translate-y-0 translate-y-full">
+        className="print:hidden print:absolute transition-all ease-in-out duration-1000 shadow h-auto sm:h-[56rem] w-[43rem] sm:overflow-hidden overflow-scroll flex flex-col bg-white relative px-10  sm:rounded-lg"
+        enterFrom="opacity-0 scale-90 translate-y-0">
         <Resume />
       </Transition>
+      <div className="absolute invisible print:visible print:relative h-full w-full z-100 top-0 left-0">
+        <Resume />
+      </div>
     </div>
   );
 };

src/components/About.tsx

@@ -3,7 +3,7 @@ import Section from './Section';
 const About = () => {
   return (
     <Section title="About">
-      <p className="text-gray-500 text-xs  text-justify">
+      <p className="text-gray-500 text-xs print:text-sm  text-justify">
         Nathan is a passionate, driven, and highly ambitious worker who takes immense pride in the
         things he creates. He cares deeply about the end user experience, and is dedicated to
         providing humane and beautiful interfaces for everyday use.

src/components/Education.tsx

@@ -8,11 +8,11 @@ import Section from './Section';
 const EducationItem = ({ education }: { education: EducationType }) => {
   return (
     <div>
-      <h4 className="text-xs  w-40  text-gray-500">
+      <h4 className="text-xs print:text-sm  w-40  text-gray-500">
         <span className="font-medium text-gray-700">{education.title}</span>, {education.subTitle}
       </h4>
-      <h5 className="text-xs mt-1 font-medium text-motif">{education.school}</h5>
-      <h5 className="text-xs opacity-80 mt-1 text-motif">{education.duration}</h5>
+      <h5 className="text-xs print:text-sm mt-1 font-medium text-motif">{education.school}</h5>
+      <h5 className="text-xs print:text-sm opacity-80 mt-1 text-motif">{education.duration}</h5>
     </div>
   );
 };

src/components/Experience.tsx

@@ -1,4 +1,3 @@
-import classnames from 'classnames';
 import { BsDot } from 'react-icons/bs';
 import { HiChevronRight } from 'react-icons/hi';
 import Skeleton from 'react-loading-skeleton';
@@ -13,14 +12,16 @@ const Job = ({ job }: { job: JobType }) => {
   return (
     <div className="text-motif">
       <SubHeading text={job.title} />
-      <div className="flex items-center  space-x-1  text-xs  tracking-wider ">
+      <div className="flex items-center  space-x-1  text-xs print:text-sm  tracking-wider ">
         <span className="font-medium ">{job.company}</span>
         <BsDot className="h-4 w-4" />
         <span className="opacity-90"> {job.duration}</span>
       </div>
-      <p className="text-xs text-gray-500 text-justify mt-2 mb-2">{job.description}</p>
+      <p className="text-xs print:text-sm text-gray-500 text-justify mt-2 mb-2">
+        {job.description}
+      </p>
       {job.responsibilities.map((resp) => (
-        <li key={resp} className="text-xs text-gray-500 ml-2">
+        <li key={resp} className="text-xs print:text-sm text-gray-500 ml-2">
           {resp}
         </li>
       ))}

src/components/Footer.tsx

@@ -41,12 +41,12 @@ const Footer = () => {
   const humanReadable = convertTimestamp(lastUpdated);
 
   return (
-    <footer className="border-t border-orange-800/60 w-full h-20 text-xs py-4 text-gray-500 space-y-2 relative ">
+    <footer className=" w-full h-20 text-xs print:text-sm  text-gray-500 space-y-2 relative print:px-16 ">
       {contactInfo.isLoading ? (
         <Skeleton />
       ) : (
         <>
-          <div className="sm:flex items-center sm:space-x-3 mb-4 space-y-1 sm:space-y-0">
+          <div className="sm:flex print:flex border-t  border-orange-800/60 pt-4 items-center sm:space-x-3 print:space-x-3 mb-4 space-y-1 sm:space-y-0 print:space-y-0">
             <FooterItem
               icon={{ value: HiOutlineMail }}
               text={contactInfo.data?.email}
@@ -59,7 +59,7 @@ const Footer = () => {
               link={`https://${contactInfo.data?.linkedin}`}
             />
           </div>
-          <div className="flex items-center  pb-4 sm:pb-0 sm:space-x-3">
+          <div className="flex items-center  pb-4 sm:pb-0 sm:space-x-3 print:space-x-3 ">
             <FooterItem icon={{ value: FaReact }} text="This resume was built with React" />
             <FooterItem
               icon={{ value: BsCode }}
@@ -70,7 +70,7 @@ const Footer = () => {
           </div>
         </>
       )}
-      <div className="text-xs text-gray-400 absolute bottom-4 right-0">
+      <div className="text-xs  text-gray-400 absolute bottom-4 right-0 print:right-16  ">
         Last updated: {humanReadable}
       </div>
     </footer>

src/components/Header.tsx

@@ -5,17 +5,17 @@ import COVER_PIC from '~/assets/cover.webp';
 
 const Header = () => {
   return (
-    <header className="flex items-start  shrink-0 pt-6">
+    <header className="flex items-start  shrink-0 pt-6 print:px-16">
       <img src={COVER_PIC} className=" object-cover absolute top-0 left-0  w-full h-28 " />
       <img
-        className="rounded-full ring-2 ring-white h-14 w-14 sm:h-16 sm:w-16 z-20 relative object-cover mr-8"
+        className="rounded-full ring-2 ring-white h-14 w-14 sm:h-16 sm:w-16 print:h-16 print:w-16 z-20 relative object-cover mr-8"
         src={PROFILE_PIC}
       />
       <div>
-        <h1 className="text-2xl sm:text-4xl font-thin relative tracking-wide  font-serif text-white ">
+        <h1 className="text-2xl sm:text-4xl print:text-4xl font-thin  relative tracking-wide  font-serif text-white ">
           <span className="font-sans">Nathan</span> MacDonald
         </h1>
-        <div className="flex items-center sm:font-thin flex-wrap text-sm sm:text-lg relative text-white/70">
+        <div className="flex items-center sm:font-thin flex-wrap text-sm sm:text-lg print:text-lg relative text-white/70 print:text-white">
           Lead Frontend Developer
           <HiPlus className="mx-2 h-3 w-3" /> Lead UX Designer
         </div>

src/components/Resume.tsx

@@ -9,12 +9,12 @@ const Resume = () => {
   return (
     <>
       <Header />
-      <div className="flex sm:space-x-16 mt-12 sm:mt-10  flex-grow flex-wrap  ">
-        <section className="w-full sm:w-[24rem] ">
+      <div className="flex sm:space-x-16 print:space-x-10 mt-12 sm:mt-10 print:mt-16  flex-grow flex-wrap print:pl-16 ">
+        <section className="w-full sm:w-[24rem] print:w-[28rem]">
           <About />
           <Experience />
         </section>
-        <aside className=" sm:mt-8  space-x-12 sm:space-x-0 sm:w-40 flex sm:flex-col px-2 sm:px-0">
+        <aside className=" sm:mt-8  space-x-12 sm:space-x-0 print:space-x-0 sm:w-40 print:w-56  flex sm:flex-col px-2 sm:px-0 print:flex-col">
           <Skills />
           <Education />
         </aside>

src/components/Section.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 const Section = ({ title, children }: { title: string; children: ReactNode }) => {
   return (
-    <div className="mb-6">
+    <div className="mb-6 print:mb-10">
       <h3 className="tracking-widest text-md font-medium mb-2 uppercase">{title}</h3>
       {children}
     </div>

src/components/Skills.tsx

@@ -17,7 +17,7 @@ const Skills = () => {
         <Skeleton count={4} />
       ) : (
         technicalSkills.data?.map((skill) => (
-          <li key={skill.id} className="text-xs text-gray-500">
+          <li key={skill.id} className="text-xs print:text-sm text-gray-500">
             {skill.skill}
           </li>
         ))
@@ -28,7 +28,7 @@ const Skills = () => {
         <Skeleton count={4} />
       ) : (
         leadershipSkills.data?.map((skill) => (
-          <li key={skill.id} className="text-xs text-gray-500">
+          <li key={skill.id} className="text-xs print:text-sm text-gray-500">
             {skill.skill}
           </li>
         ))

src/components/SubHeading.tsx

@@ -1,5 +1,7 @@
 const SubHeading = ({ text }: { text: string }) => {
-  return <h5 className=" tracking-widest text-xs  mb-2 text-gray-700  uppercase">{text}</h5>;
+  return (
+    <h5 className=" tracking-widest text-xs print:text-sm mb-2 text-gray-700  uppercase">{text}</h5>
+  );
 };
 
 export default SubHeading;

src/contexts/QueryContext.tsx

@@ -7,7 +7,9 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: In
 export const QueryContext = ({ children }: { children: ReactNode }) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools initialIsOpen={false} />
+      <div className="print:hidden">
+        <ReactQueryDevtools initialIsOpen={false} />
+      </div>
       {children}
     </QueryClientProvider>
   );