UI/editor rework

TODO.md

@@ -2,23 +2,26 @@
 TODO
     [X] Skills input doesn't work
     [X] Implement Certifications input. It already exists, but has no input logic.
-    [ ] Allow the custom fields in inputs
-    [ ] Add hyperlinks to text in CV Socials, Projects and Certifications
-    [ ] Add other sections:
-        Recommendations, Articles, Awards, etc...
     [X] Create Homepage
     [X] Fix PDF Print
     [X] Create Credits section in readme and thank Jake Gutierrez for the template
     [X] Create Roadmap section in readme - Add multiple Template selection
     [X] Create new release when homepage is done and when pdf printing works
+    [ ] Allow the custom fields in inputs
+    [ ] Add hyperlinks to text in CV Socials, Projects and Certifications
+    [ ] Add other sections:
+        Recommendations, Articles, Awards, etc...
     [ ] Add Drag & Drop functionality
+    [ ] Create /tips page
+    [ ] Create 404 Page
     ~~[ ] Recreate CV without Tailwind~~
 
 #########
 Bugs (create issue and add to Kanban):
     [X] Removing all experience inputs does not remove Experience title from CV
     [X] Adding an empty project show a separator ("|") in the CV Preview and date renders.
     [X] Fix socials spacing in CV preview
+    [X] Fix CV position (add scrollable)
+    [X] Certifications remove button triggers on input border.
     [ ] Fix CV Pagination
-    [ ] Fix CV position (add scrollable)
-    [X] Certifications remove button triggers on input border.
+    [ ] Remove outside scrollbar

src/App.tsx

@@ -1,13 +1,11 @@
 import { Outlet } from "react-router";
 import Navbar from "./components/Navbar";
-import Footer from "./components/Footer";
 
 export default function App() {
   return (
     <>
       <Navbar />
       <Outlet />
-      <Footer />
     </>
   );
 }

src/components/EditorInputs.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 export default function EditorInputs({ cvData, setCvData }: Props) {
   return (
-    <div className="bg-white p-4 rounded-3xl">
+    <div className="bg-white p-4">
       <h2 className="text-2xl font-bold text-slate-900 mb-2">Editor Inputs</h2>
       <p className="text-slate-500 text-sm mb-6">
         Your progress is saved automatically on Local Storage.

src/components/Navbar.tsx

@@ -1,7 +1,7 @@
 import { NavLink } from "react-router";
 export default function Navbar() {
   return (
-    <nav className="w-full bg-white sticky top-0 z-50 shadow-sm mx-auto p-4 lg:px-8 lg:py-5 flex items-center justify-between">
+    <nav className="w-full bg-white shadow-sm mx-auto p-4 lg:px-8 lg:py-5 flex items-center justify-between border-b border-gray-300">
       <NavLink
         to="/"
       >

src/components/Toolbar.tsx

@@ -16,55 +16,58 @@ export default function Toolbar({
   resetCv,
 }: Props) {
   return (
-    <div className="flex gap-5 justify-center items-center">
-      <div className="bg-white flex items-center justify-center rounded-2xl gap-1 text-gray-100">
+    <div className="fixed bottom-10 mx-auto flex gap-5 w-fit justify-center items-center bg-white rounded-full px-2 py-2 border border-slate-200 shadow-lg z-9999">
+      <div className="bg-white flex gap-1 items-center justify-center text-gray-100">
         <button
-          className="flex gap-2 items-center px-5 py-2 rounded-l-2xl bg-slate-900 hover:bg-slate-800 hover:scale-105 cursor-pointer transition-all"
-          onClick={() => zoomIn()}
+          className="text-slate-500 hover:text-slate-800 cursor-pointer transition-all"
+          onClick={() => zoomOut()}
         >
-          <i className="fas fa-magnifying-glass-plus"></i>
-          Zoom In
+          <i className="fas fa-minus"></i>
         </button>
 
         <input
           key={scaleFactor}
           aria-label="Zoom percentage"
           defaultValue={(scaleFactor * 100).toFixed(0) + "%"}
-          className="text-black font-bold w-[50px] text-center focus:outline-none"
+          className="text-slate-500 w-[5ch] font-bold px-1 text-center focus:outline-none text-xs"
           onKeyDown={(e) => {
             if (e.key == "Enter") {
               const val = parseInt(e.currentTarget.value);
               if (!isNaN(val)) {
-                const clamped = Math.min(MAX_ZOOM * 100, Math.max(MIN_ZOOM * 100, val));
+                const clamped = Math.min(
+                  MAX_ZOOM * 100,
+                  Math.max(MIN_ZOOM * 100, val),
+                );
                 setScaleFactor(clamped / 100);
               }
             }
           }}
         />
 
         <button
-          className="flex gap-2 items-center px-5 py-2 rounded-r-2xl bg-slate-900 hover:bg-slate-800 hover:scale-105 cursor-pointer transition-all"
-          onClick={() => zoomOut()}
+          className="text-slate-500 hover:text-slate-800 cursor-pointer transition-all"
+          onClick={() => zoomIn()}
         >
-          <i className="fas fa-magnifying-glass-minus"></i>
-          Zoom Out
+          <i className="fas fa-plus"></i>
         </button>
       </div>
 
-      <button
-        className="flex items-center gap-2 bg-slate-900 text-white px-5 py-2 rounded-xl font-bold hover:bg-slate-800 hover:scale-105 cursor-pointer transition-all shadow-md active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
-        onClick={() => window.print()}
-      >
-        <i className="fas fa-download"></i>Download PDF
-      </button>
+      <span className="w-px h-4 bg-slate-300"></span>
 
       <button
-        className="flex items-center gap-2 bg-red-500 text-white px-5 py-2 rounded-xl font-bold hover:bg-red-600 hover:scale-105 cursor-pointer transition-all shadow-md active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="text-slate-500 hover:text-slate-800 cursor-pointer transition-all"
         onClick={() => {
           resetCv();
         }}
       >
-        <i className="fas fa-redo"></i>Reset CV
+        <i className="fas fa-redo"></i>
+      </button>
+
+      <button
+        className="flex items-center gap-2 bg-indigo-600 text-white px-6 py-2 rounded-full font-bold hover:bg-slate-800 cursor-pointer transition-all shadow-md active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+        onClick={() => window.print()}
+      >
+        <i className="fas fa-print"></i>Print PDF
       </button>
     </div>
   );

src/index.css

@@ -4,10 +4,6 @@
   font-family: "Inter";
 }
 
-.screen-height {
-  height: calc(100vh - 150px);
-}
-
 @media print {
   @page {
     size: A4;
@@ -21,6 +17,8 @@
   #print-target,
   #print-target > * {
     display: block !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
   }
 }
 

src/pages/Editor.tsx

@@ -36,14 +36,16 @@ export default function Editor() {
         document.getElementById("print-target")!,
       )}
 
-      <div className="flex px-6 py-6 gap-4 screen-height">
-        <div className="w-1/2 border border-gray-500 rounded-lg p-6 overflow-y-scroll">
+      <div className="flex h-[calc(100vh-72px)]">
+        <div className="w-2/5 border-r border-gray-500 overflow-y-scroll z-1">
           <EditorInputs cvData={cvData} setCvData={setCvData} />
         </div>
 
         <div
           ref={containerRef}
-          className="w-1/2 flex flex-col items-center gap-4 border border-gray-500 rounded-lg p-6 overflow-y-scroll"
+          className="w-3/5 flex flex-col items-center gap-4 rounded-lg z-0 
+           bg-gray-100 pt-6 h-full overflow-scroll"
+
         >
           <Toolbar
             scaleFactor={scaleFactor}
@@ -54,8 +56,8 @@ export default function Editor() {
           />
 
           <div
-            className="w-fit shadow"
-            style={{ scale: `${scaleFactor}`, transformOrigin: "top center" }}
+            className="w-fit shadow mx-auto block"
+            style={{ zoom: `${scaleFactor}` }}
           >
             <JakesResume cvData={cvData} />
           </div>

src/pages/Home.tsx

@@ -1,44 +1,50 @@
+import Footer from "../components/Footer";
+
 export default function Home() {
   return (
-    <div className="w-full min-h-screen bg-gray-50">
-      <div className="p-5 ">
-        <div className="text-center items-center mt-16">
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 text-indigo-700 text-xs font-bold uppercase tracking-wider">
-            <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
-            </span>
-            100% free and open-source
-          </div>
+    <>
+      <div className="w-full min-h-screen bg-gray-50">
+        <div className="p-5 ">
+          <div className="text-center items-center mt-16">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 text-indigo-700 text-xs font-bold uppercase tracking-wider">
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
+              </span>
+              100% free and open-source
+            </div>
 
-          <h1 className="text-5xl font-bold text-center text-gray-900 mt-3">
-            <span className="text-indigo-700">Getcv.dev</span> is the easiest
-            way to create a<span className="block">recruiter-approved CV </span>
-          </h1>
-          <p className="mt-3 text-gray-500 text-base">
-            Create an ATS-optimized CV in minutes, using a template made by
-            engineers for engineers.
-          </p>
+            <h1 className="text-5xl font-bold text-center text-gray-900 mt-3">
+              <span className="text-indigo-700">Getcv.dev</span> is the easiest
+              way to create a
+              <span className="block">recruiter-approved CV </span>
+            </h1>
+            <p className="mt-3 text-gray-500 text-base">
+              Create an ATS-optimized CV in minutes, using a template made by
+              engineers for engineers.
+            </p>
+          </div>
         </div>
-      </div>
 
-      <div className="relative mt-6">
-        <div className="h-[50vh]"></div>
+        <div className="relative mt-6">
+          <div className="h-[50vh]"></div>
 
-        {/* <img
+          {/* <img
           className="w-[600px] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 shadow-2xl"
           src="https://placehold.co/794x1123/png"
           alt="Preview"
         /> */}
 
-        <img
-          className="w-[800px] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 shadow-2xl"
-          src="/assets/hero-cropped.jpg"
-          alt="Preview"
-        />
+          <img
+            className="w-[800px] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 shadow-2xl"
+            src="/assets/hero-cropped.jpg"
+            alt="Preview"
+          />
 
-        <div className="h-[50vh] bg-neutral-800"></div>
+          <div className="h-[50vh] bg-neutral-800"></div>
+        </div>
       </div>
-    </div>
+      <Footer />
+    </>
   );
 }

src/templates/JakesResume.tsx

@@ -23,7 +23,7 @@ export default function JakesResume({ cvData }: CvProps) {
 
   return (
     <div>
-      <div className="my-0 mx-auto lm leading-[1em] text-[10.91pt] w-[8.27in] h-[11.69in] p-[0.5in] bg-white text-black box-border">
+      <div className="m-0 lm leading-[1em] text-[10.91pt] w-[8.27in] h-[11.69in] p-[0.5in] bg-white text-black box-border block z-10">
         <section className="mt-[5pt] mb-[5pt]">
           <h1 className="text-center text-[24.79pt] font-bold mb-[9pt]">
             {cvData.personalInfo.name}

src/templates/jakesResume.css

@@ -61,6 +61,7 @@
   display: block;
   width: 100%;
   height: 1px;
+  border-top: 1px solid black;
   background-color: black;
   margin-top: 3pt;
 }