improved layout

effect-ak · Feb 18, 2025 · abdd28f · abdd28f
1 parent 555c4ff
commit abdd28f
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 92 deletions.
diff --git a/src/cv-maker/core/template.tsx b/src/cv-maker/core/template.tsx
@@ -100,7 +100,7 @@ function ProjectStack(project: ProjectDetails) {
 function ResumeHead(resume: ResumeObject) {
   return (
     <div id="head" className="pb-6">
-      <div className="text-5xl font-thin">{resume.me.name}</div>
+      <div className="text-4xl font-thin">{resume.me.name}</div>
       <div className="text-lg font-light">{Headline(resume)}</div>
       <div id="location">{resume.me?.location}</div>
       <div className="flex gap-1 text-sky-600 text-sm">
@@ -117,7 +117,7 @@ function ResumeHead(resume: ResumeObject) {
           > {resume.me.phone}</a>
         </div>
       </div>
-      <div id="profiles">
+      <div className="pt-5 flex gap-1">
         {resume.me.profiles.map(p => {
           const iconClass = `fa-${p.icon.split(' ').at(0)}`;
           return (

diff --git a/src/cv-maker/index.html b/src/cv-maker/index.html
@@ -23,15 +23,18 @@
   </script>
 </head>
 
-<body x-data="state" class="flex flex-col p-16 pt-8">
+<body x-data="state" class="flex flex-col p-16 pt-8 justify-center">
   <!-- navigation -->
   <div 
-    class="no-print pb-2 flex gap-2 justify-center"
+    class="no-print pb-2 flex gap-2 justify-center items-baseline md:w-3/4"
     x-init="$watch('mode', value => $dispatch('mode-was-changed', value))"
   >
-
+    <label 
+      class="font-light text-sm" id="resumeSelect"
+    >Current resume:</label>
     <select
-      class="self-start"
+      id="resumeSelect"
+      class="self-start select"
       x-model="currentResume"
       @change="$dispatch('init-resume')"
     >
@@ -40,84 +43,78 @@
           :value="resume.id"
           x-text="resume.name"
           :selected="currentResume === resume.id"
-        V></option>
+        ></option>
       </template>
     </select>
 
-    <div class="mx-auto">
+    <div
+      class="mx-auto flex gap-3"
+    >
+    <template x-for="m in $store.modes" :key="m.id">
       <label 
-      class="hover:cursor-pointer text-lg"
-      :class="{ 'text-orange-400 underline': mode === 'editor' }"
+      class="hover:cursor-pointer text-lg hover"
+      :class="{
+        'text-orange-400 border-1 px-3': mode == m.id,
+        'hover:text-orange-300': mode != m.id,
+      }"
     >
       <input
         type="radio"
         class="appearance-none"
-        value="editor" 
+        :value="m.id" 
         x-model="mode" 
-      /> Editor
+      /> <span x-text="m.label"></span>
     </label>
-
-    <label 
-      class="hover:cursor-pointer text-lg" 
-      :class="{ 'text-orange-400 underline': mode === 'view' }"
-      x-show="!editorHasError" x-transition
-    >
-      <input 
-        type="radio" 
-        value="view" 
-        x-model="mode"
-        class="appearance-none"
-      /> View
-    </label>
-    </div>
+    </template>
 
+    </div>
 
   </div>
 
   <!-- code editor and code section -->
   <div
-    class="flex gap-2 pb-2"
+    class="flex gap-2 pb-2 items-end"
     x-show="mode == 'editor'"
   >
-    <div class="self-start">
+    <div>
       <button
         class="btn bg-sky-500 hover:bg-sky-700 text-sm"
         x-on:click="$dispatch('save')"
-      >Save as</button>
+      >Duplicate</button>
       <button
         class="btn bg-[#DC382D] hover:bg-[#B93224]"
         x-on:click="$dispatch('delete')"
       >Delete</button>
       </div>
 
-    <div
-      class="self-end ml-auto"
-    >
+      <label 
+        class="font-light text-sm ml-auto" id="resumeSection"
+      >Current section:</label>
       <select
-        class=" bg-white border border-gray-300 py-2 px-3 rounded focus:outline-none focus:ring-0"
+        id="resumeSection"
+        class="self-end select"
         @change="$dispatch('section-changed')"
         x-model="editorSection"
       >
-        <template x-for="section in $store.sections" :key="section.id">
-          <option 
-            :value="section.id" 
-            :selected="editorSection === section.id"
-            x-text="section.label"
-          ></option>
-        </template>
-      </select>
-    </div>
+      <template x-for="section in $store.sections" :key="section.id">
+        <option 
+          :value="section.id" 
+          :selected="editorSection === section.id"
+          x-text="section.label"
+        ></option>
+      </template>
+    </select>
 
   </div>
 
   <div
-    class="w-full h-full"
+    class="w-full h-screen"
     x-show="mode == 'editor'"
     id="code-editor"
   ></div>
 
   <div
-    class="self-center" 
+    class="self-center sm:w-3/4" 
     x-show="mode == 'view'"
   >
     <div
@@ -128,7 +125,7 @@
   <button
     @click="window.print()"
     x-show="mode == 'view'"
-    class="no-print hover:cursor-pointer fixed top-10 right-20 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full shadow-lg"
+    class="no-print hover:cursor-pointer fixed top-8 right-20 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full shadow-lg"
   >
     Print
   </button>
@@ -141,7 +138,7 @@
           target="_blank"
           href="https://www.linkedin.com/in/alexander-kondaurov/"
           rel="noopener noreferrer" 
-          class="fa-brands fa-lg fa-linkedin text-blue-300"
+          class="fa-brands fa-lg fa-linkedin text-blue-500"
         ></a>
         <a 
           target="_blank"

diff --git a/src/cv-maker/main.ts b/src/cv-maker/main.ts
@@ -15,9 +15,20 @@ window.Alpine = Alpine;
 
 setup();
 
+Alpine.store("modes", () => [
+  {
+    id: "editor",
+    label: "Editor"
+  },
+  {
+    id: "view",
+    label: "View"
+  }
+])
+
 Alpine.store("sections", () => [{
   id: "all",
-  label: "Everything",
+  label: "All together",
 }, {
   id: "me",
   label: "Me",
@@ -169,6 +180,7 @@ async function setup() {
     const name = window.prompt("Enter name of your resume", "simple");
     if (!name) return;
     localStorage.setItem(name, JSON.stringify(state.resumeObject));
+    state.availableResumes.push({ id: name, name });
   });
 
   window.addEventListener('resize', () => {

diff --git a/src/cv-maker/static/john-doe.json b/src/cv-maker/static/john-doe.json
@@ -110,24 +110,6 @@
       "category": "programming language",
       "url": "https://en.wikipedia.org/wiki/JavaScript"
     },
-    {
-      "id": "scala",
-      "name": "Scala",
-      "category": "programming language",
-      "url": "https://www.scala-lang.org/"
-    },
-    {
-      "id": "play-framework",
-      "name": "Play Framework",
-      "category": "framework",
-      "url": "https://en.wikipedia.org/wiki/Play_Framework"
-    },
-    {
-      "id": "java",
-      "name": "Java",
-      "category": "programming language",
-      "url": "https://en.wikipedia.org/wiki/Java_(programming_language)"
-    },
     {
       "id": "aws",
       "name": "AWS",
@@ -146,12 +128,6 @@
       "category": "database",
       "url": "https://en.wikipedia.org/wiki/MySQL"
     },
-    {
-      "id": "h2",
-      "name": "H2",
-      "category": "database",
-      "url": "https://en.wikipedia.org/wiki/H2_(database)"
-    },
     {
       "id": "postgres",
       "name": "PostgreSQL",
@@ -176,13 +152,6 @@
       "category": "frontend",
       "url": "https://en.wikipedia.org/wiki/AngularJS"
     },
-
-    {
-      "id": "azure",
-      "name": "Azure",
-      "category": "cloud computing",
-      "url": "https://azure.microsoft.com/"
-    },
     {
       "id": "jenkins",
       "name": "Jenkins",
@@ -225,13 +194,6 @@
       "category": "testing",
       "url": "https://vitest.dev/"
     },
-    {
-      "id": "scalatest",
-      "name": "ScalaTest",
-      "category": "testing",
-      "url": "https://www.scalatest.org/"
-    },
-
     {
       "id": "jest",
       "name": "Jest",
@@ -273,12 +235,6 @@
       "name": "Electron",
       "category": "frontend",
       "url": "https://en.wikipedia.org/wiki/Electron_(software_framework)"
-    },
-    {
-      "id": "akka",
-      "name": "Akka",
-      "category": "framework",
-      "url": "https://en.wikipedia.org/wiki/Akka_(toolkit)"
     }
   ]
 }
diff --git a/src/cv-maker/style.css b/src/cv-maker/style.css
@@ -5,6 +5,10 @@
   --color-so: #f1f8ff;
 }
 
+.select {
+  @apply bg-white border border-gray-300 py-1 px-2 rounded focus:outline-none focus:ring-0
+}
+
 .btn {
   @apply text-sm rounded py-1 px-2 text-white font-bold hover:cursor-pointer;
 }
@@ -14,7 +18,7 @@
 }
 
 @media print {
-  html,
+  html
   body {
     margin: 0;
     padding: 0;