fix: better print to export to pdf

karimhossenbux · Apr 2, 2024 · 3198728 · 3198728
1 parent 9b24aef
commit 3198728
Show file tree

Hide file tree

Showing 14 changed files with 722 additions and 829 deletions.
diff --git a/components/About.js b/components/About.js
@@ -8,9 +8,9 @@ const About = (props) => {
 
   return (
     <div className="section mt-2">
-      <div className="flex items-center justify-center">
-        <div className="m-2 text-right">
-          <h1 className="text-2xl md:text-3xl font-extrabold tracking-tight">
+      <div className="flex items-center justify-center print:justify-between">
+        <div className="m-2 text-right print:text-left print:m-0">
+          <h1 className="text-2xl md:text-3xl font-extrabold tracking-tight print:text-slate-700">
             {info.name}
           </h1>
           <h2 className="text-xs uppercase font-bold text-green-500">
@@ -25,9 +25,9 @@ const About = (props) => {
           </div>
         </div>
 
-        <div className="relative flex my-2 mx-4">
+        <div className="relative flex my-2 mx-4 print:ml-6 print:self-end">
           <Link href={twitter.url} className="relative z-10">
-            <span className="inline-flex items-center justify-center w-20 h-20 md:w-16 md:h-16 rounded-full ring-4 ring-green-400 ring-offset-2 dark:ring-offset-gray-900 text-center text-4xl font-black">
+            <span className="inline-flex items-center justify-center w-20 h-20 md:w-16 md:h-16 rounded-full ring-4 ring-green-400 ring-offset-2 dark:ring-offset-gray-900 text-center text-4xl font-black print:text-slate-700">
               {info.name
                 .split(' ')
                 .map((n) => n[0])
@@ -39,7 +39,7 @@ const About = (props) => {
               alt={`Picture of ${info.name}`}
             /> */}
           </Link>
-          <div className="absolute inline-flex w-20 h-20 md:w-16 md:h-16 rounded-full ring-8 ring-green-400 animate-ping opacity-20"></div>
+          <div className="absolute inline-flex w-20 h-20 md:w-16 md:h-16 rounded-full ring-8 ring-green-400 animate-ping opacity-20 print:animate-none print:scale-150 print:opacity-10"></div>
         </div>
 
         <div className="ml-2 mb-2 md:mb-0 text-xs text-gray-500 hidden md:block border-l pl-4 border-gray-700">
@@ -51,11 +51,13 @@ const About = (props) => {
         </div>
       </div>
 
-      <div className="text-sm text-center italic text-gray-400 mt-2">
+      <div className="text-sm print:w-full text-center print:text-left italic text-gray-400 mt-2">
         {info.summary.map((line, i) => (
-          <p key={i}>{line}</p>
+          <p className="print:w-full" key={i}>
+            {line}
+          </p>
         ))}
-        <p>Based in {info.location.address}</p>
+        <p className="print:hidden">Based in {info.location.address}</p>
       </div>
     </div>
   );

diff --git a/components/DarkMode.js b/components/DarkMode.js
@@ -1,25 +1,26 @@
-import {useTheme} from 'next-themes'
+import { useTheme } from 'next-themes';
 
 const DarkMode = () => {
-
-  const {theme, setTheme} = useTheme()
-
+  const { theme, setTheme } = useTheme();
+
   return (
     <svg
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-      className="absolute cursor-pointer top-2 right-2 w-6 h-6"
-      fill="none" stroke="currentColor"
+      className="absolute cursor-pointer top-2 right-2 w-6 h-6 print:hidden"
+      fill="none"
+      stroke="currentColor"
       viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg">
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          fill="#fff"
-          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-        ></path>
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        fill="#fff"
+        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+      ></path>
     </svg>
-  )
-}
+  );
+};
 
-export default DarkMode
+export default DarkMode;
diff --git a/components/Educations.js b/components/Educations.js
@@ -1,27 +1,30 @@
-import Link from 'next/link'
-import Title from './Title'
-import Item from './Item'
+import Link from 'next/link';
+import Title from './Title';
+import Item from './Item';
 
 const Educations = (props) => {
-  const items = props.items
+  const items = props.items;
 
   return (
-    <div className="section">   
-      <Title title="Educations" icon={`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path></svg>`} />
+    <div className="section pt-4">
+      <Title
+        title="Educations"
+        icon={`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path></svg>`}
+      />
 
       <div className="pl-8">
-        {items.map((item, index) => 
+        {items.map((item, index) => (
           <Item
             key={index}
             title={item.area}
             location={item.institution}
             startDate={item.startDate}
             endDate={item.endDate}
           />
-        )}
+        ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Educations
+export default Educations;
diff --git a/components/Footer.js b/components/Footer.js
@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 const Title = (props) => {
   return (
-    <footer className="text-center text-xs">
+    <footer className="text-center text-xs print:hidden">
       <Link
         href="https://github.com/karimhossenbux/resume"
         className="text-gray-400 dark:text-gray-700"

diff --git a/components/Interests.js b/components/Interests.js
@@ -1,22 +1,25 @@
-import Title from './Title'
+import Title from './Title';
 
 const Interests = (props) => {
-  const items = props.items
+  const items = props.items;
 
   return (
     <div className="section">
-      <Title title="Interests" icon={`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path></svg>`} />
+      <Title
+        title="Interests"
+        icon={`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path></svg>`}
+      />
 
       <div className="pl-8 text-sm text-gray-600 dark:text-gray-500">
-        {items.map((item, index) => 
+        {items.map((item, index) => (
           <span key={index}>
             {item.name}
             {index !== props.items.length - 1 ? ', ' : ''}
           </span>
-        )}
+        ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Interests
+export default Interests;
diff --git a/components/Item.js b/components/Item.js
@@ -15,9 +15,9 @@ const Item = (props) => {
 
   return (
     <div
-      className={`mb-4 pl-4 border-l-4 border-${
-        props.endDate === null ? 'green-200' : 'gray-100'
-      } dark:border-${props.endDate ? 'gray-600' : 'green-200'}`}
+      className={`mb-4 pl-4 border-l-4 print:mb-6 ${
+        props.endDate ? 'border-gray100' : 'border-green-200'
+      } ${props.endDate ? 'dark:border-gray-600' : 'dark:border-green-200'}`}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
@@ -35,17 +35,17 @@ const Item = (props) => {
           </small>
         </div>
 
-        <span className="text-xs text-gray-400 font-mono md:w-auto w-12 text-center ml-2">
+        <span className="text-xs text-gray-400 font-mono md:w-auto w-12 text-center ml-2 print:mr-8 print:flex">
           <span className="block md:inline">{props.startDate}</span>
-          <span className="px-1 hidden md:inline">-</span>
+          <span className="px-1 md:inline hidden print:block">-</span>
           <span>{props.endDate ? props.endDate : 'Present'}</span>
         </span>
       </div>
 
       {props.content?.length &&
         props.content.map((item, i) => (
           <p
-            className="text-sm mt-1 text-gray-600 dark:text-gray-500 w-3/4"
+            className="text-sm mt-1 text-gray-600 dark:text-gray-500 w-3/4 print:w-[88%]"
             dangerouslySetInnerHTML={{ __html: item }}
             key={i}
           ></p>

diff --git a/components/Languages.js b/components/Languages.js
@@ -1,27 +1,28 @@
-import Title from './Title'
+import Title from './Title';
 
 const Languages = (props) => {
-  const items = props.items
+  const items = props.items;
 
   return (
     <div className="section">
-      <Title title="Languages" icon={`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path></svg>`} />
+      <Title
+        title="Languages"
+        icon={`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path></svg>`}
+      />
 
       <div className="md:flex justify-between pl-8">
-        {items.map((item, index) => 
+        {items.map((item, index) => (
           <div className="flex items-center" key={index}>
-            <div className="mr-2 text-sm">
-              {item.flag}
-            </div>
+            <div className="mr-2 text-sm">{item.flag}</div>
             <div className="text-sm">
               <span className="mr-1">{item.language}</span>
               <small className="text-gray-400 text-sm">[{item.fluency}]</small>
             </div>
           </div>
-        )}
+        ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Languages
+export default Languages;
diff --git a/components/Skills.js b/components/Skills.js
@@ -10,22 +10,27 @@ const Skills = ({ items, highlightedSkills }) => {
 
       <div className="md:flex justify-between pl-4">
         {items.map((item, index) => (
-          <div className="md:w-1/3 px-4 mb-4 md:mb-0" key={index}>
-            <h3 className="text-xs font-semibold uppercase mb-1">
+          <div
+            className="md:w-1/3 px-4 mb-4 md:mb-0 print:pr-0 print:flex print:items-baseline print:gap-2"
+            key={index}
+          >
+            <h3 className="text-xs font-semibold uppercase mb-1 print:min-w-20">
               {item.name}
             </h3>
-            {item.keywords.map((keyword, kindex) => (
-              <span
-                className={`inline-flex mr-2 text-xs font-semibold text-opacity-70 text-black border px-1 rounded border-purple-100 dark:border-gray-900 transition-colors ${
-                  highlightedSkills?.includes(keyword)
-                    ? 'bg-green-400'
-                    : 'dark:bg-gray-600 bg-purple-50'
-                }`}
-                key={kindex}
-              >
-                {keyword}
-              </span>
-            ))}
+            <div>
+              {item.keywords.map((keyword, kindex) => (
+                <span
+                  className={`inline-flex mr-2 text-xs font-semibold text-opacity-70 text-black border px-1 rounded border-purple-100 dark:border-gray-900 transition-colors ${
+                    highlightedSkills?.includes(keyword)
+                      ? 'bg-green-400'
+                      : 'dark:bg-gray-600 bg-purple-50'
+                  }`}
+                  key={kindex}
+                >
+                  {keyword}
+                </span>
+              ))}
+            </div>
           </div>
         ))}
       </div>

diff --git a/components/Title.js b/components/Title.js
@@ -1,12 +1,13 @@
 const Title = (props) => {
   return (
-    <h2 className="text-2xl font-light mb-4 flex">
-      <span className="mr-2 mt-1 text-gray-400" dangerouslySetInnerHTML={{__html: props.icon}}></span>
-      <span className="border-b-4 border-green-400 pb-1">
-        {props.title}
-      </span>
+    <h2 className="text-2xl font-light mb-4 flex print:text-black">
+      <span
+        className="mr-2 mt-1 text-gray-400 print:text-slate-500"
+        dangerouslySetInnerHTML={{ __html: props.icon }}
+      ></span>
+      <span className="border-b-4 border-green-400 pb-1">{props.title}</span>
     </h2>
-  )
-}
+  );
+};
 
-export default Title
+export default Title;
diff --git a/components/Work.js b/components/Work.js
@@ -9,7 +9,7 @@ const Work = ({ items, setHighlightedSkills }) => {
         icon={`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>`}
       />
 
-      <div className="pl-8">
+      <div className="pl-8 print:pt-2">
         {items.map((item, index) => (
           <Item
             key={index}