rastuhacode · rastuhacode · Jul 29, 2026 · Jun 22, 2026 · Jun 30, 2026 · Jun 30, 2026
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Build professional CVs using HTML (YAML + Handlebars) and CSS with a live previe
 
 ## Philosophy
 
-You can read about the motivation in my article [Stop using Word for your resume](https://rastuharem.netlify.app/posts/stop-using-word-for-your-resume).
+You can read about philosophy in my articles [Stop using Word for your resume](https://rastuharem.netlify.app/posts/stop-using-word-for-your-resume) and [Stop using HTML for you resume](https://rastuharem.netlify.app/posts/stop-using-html-for-your-resume).
 
 ## Features
 

diff --git a/app/components/editor/PreviewToolbar.vue b/app/components/editor/PreviewToolbar.vue
@@ -11,7 +11,7 @@ const { isPreviewMarkup } = useCvEditor()
         variant="ghost"
         size="sm"
         aria-label="Toggle Preview Markup"
-        @click="isPreviewMarkup = !isPreviewMarkup"
+        @click="() => { isPreviewMarkup = !isPreviewMarkup }"
       />
     </UTooltip>
   </div>

diff --git a/app/composables/editor/useCvEditor.ts b/app/composables/editor/useCvEditor.ts
@@ -1,4 +1,4 @@
-import * as yamlJs from 'js-yaml'
+import { load as loadYaml } from 'js-yaml'
 import Handlebars from 'handlebars'
 
 import type { ActiveTab, EditorRefs } from './model'
@@ -23,7 +23,7 @@ export function useCvEditor() {
 
   const compiledHtml = computed(() => {
     const [html, err] = trycatch(() => {
-      const cvData = yamlJs.load(yaml.value) || {}
+      const cvData = loadYaml(yaml.value) || {}
       const template = Handlebars.compile(hbs.value)
       return template({ cv: cvData })
     })

diff --git a/bun.lock b/bun.lock
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -21,7 +21,7 @@ export default defineNuxtConfig({
 
   css: ['~/assets/css/main.css'],
 
-  compatibilityDate: '2025-01-15',
+  compatibilityDate: '2026-06-22',
 
   vite: {
     optimizeDeps: {

diff --git a/package.json b/package.json
@@ -12,27 +12,26 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.111",
-    "@iconify-json/simple-icons": "^1.2.86",
-    "@nuxt/ui": "^4.8.2",
+    "@iconify-json/lucide": "^1.2.120",
+    "@iconify-json/simple-icons": "^1.2.92",
+    "@nuxt/ui": "^4.10.0",
     "@tailwindcss/typography": "^0.5.20",
-    "@vueuse/core": "^14.3.0",
-    "@vueuse/nuxt": "^14.3.0",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/nuxt": "^14.4.0",
     "handlebars": "^4.7.9",
-    "js-yaml": "^4.2.0",
+    "js-yaml": "^5.2.2",
     "jszip": "^3.10.1",
-    "monaco-editor": "^0.55.1",
-    "nuxt": "^4.4.8",
-    "nuxt-monaco-editor": "^1.4.0",
-    "prettier": "^3.8.4",
-    "tailwindcss": "^4.3.0"
+    "monaco-editor": "^0.56.0",
+    "nuxt": "^4.5.1",
+    "nuxt-monaco-editor": "^1.4.1",
+    "prettier": "^3.9.6",
+    "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
-    "@nuxt/eslint": "^1.15.2",
-    "@types/js-yaml": "^4.0.9",
-    "eslint": "^10.4.1",
+    "@nuxt/eslint": "^1.16.0",
+    "eslint": "^10.8.0",
     "typescript": "~6.0.3",
-    "vue-tsc": "^3.3.4"
+    "vue-tsc": "^3.3.8"
   },
   "packageManager": "bun@1.3.14"
 }
diff --git a/public/templates/default/content.yaml b/public/templates/default/content.yaml
diff --git a/public/templates/default/template.hbs b/public/templates/default/template.hbs
@@ -4,7 +4,7 @@
 <body class="bg-white">
   <article
     lang="en"
-    class="resume mx-auto w-[210mm] min-h-[297mm] bg-white text-black text-[10pt] leading-snug px-[14mm] py-[12mm] flex flex-col gap-3.5"
+    class="resume mx-auto w-[210mm] min-h-[297mm] bg-white text-black text-[10pt] leading-snug px-[14mm] py-[12mm] flex flex-col gap-4"
   >
     <!-- ── Header ───────────────────────────────────────────── -->
     <header class="flex items-stretch gap-5">
@@ -36,20 +36,26 @@
     </header>
 
     {{#if cv.contacts}}
-    <div
-      class="flex gap-0 border-[3px] divide-x-[3px] border-black divide-black"
+    <nav
+      class="flex flex-wrap items-center gap-x-2 gap-y-1 border-[3px] border-black px-2 py-1.5"
+      aria-label="Contact"
     >
       {{#each cv.contacts}}
       <a
         href="{{this.url}}"
         target="_blank"
         rel="noopener noreferrer"
-        class="no-underline text-[9pt] font-bold uppercase px-3 py-1.5 hover:bg-yellow-300 grow text-center"
+        class="no-underline inline-flex items-center gap-1 hover:bg-yellow-300 whitespace-nowrap"
       >
-        {{this.label}}
+        <span
+          class="text-[7pt] font-black uppercase leading-none bg-black text-yellow-300 px-1 py-0.5"
+        >{{this.label}}</span>
+        {{#if this.value}}
+        <span class="text-[8pt] font-bold">{{this.value}}</span>
+        {{/if}}
       </a>
       {{/each}}
-    </div>
+    </nav>
     {{/if}}
 
     <!-- ── Profile ────────────────────────────────────────── -->
@@ -85,8 +91,10 @@
         >
           <div class="flex justify-between items-baseline gap-3">
             {{#if this.company}}
-            <p class="text-[11.5pt] font-bold uppercase">
+            <div class="text-[11pt] font-bold uppercase flex gap-1 items-baseline">
               {{#if this.companyUrl}}
+              <span class="font-black uppercase text-[11pt]">{{this.role}}</span>
+              <span class="text-[8pt]">{{this.at}}</span>
               <a
                 href="{{this.companyUrl}}"
                 target="_blank"
@@ -95,10 +103,8 @@
               >
                 {{this.company}}
               </a>
-              {{else}}{{this.company}}{{/if}}{{#if this.location}}
-              <span class="font-normal lowercase"> — {{this.location}} </span>
-              {{/if}}
-            </p>
+              {{else}}{{this.company}}{{/if}}
+            </div>
             {{/if}}
             <span
               class="shrink-0 text-[8.5pt] font-bold bg-yellow-300 border-2 border-black px-1.5 whitespace-nowrap"
@@ -107,13 +113,12 @@
             </span>
           </div>
 
-          <h3 class="font-black uppercase text-[10.5pt]">{{this.role}}</h3>
           {{#if this.description}}
           <p class="mt-1">{{{this.description}}}</p>
           {{/if}} {{#if this.highlights}}
           <ul class="mt-1.5 flex flex-col gap-1">
             {{#each this.highlights}}
-            <li class="flex gap-2">
+            <li class="flex gap-2 break-inside-avoid">
               <span class="shrink-0 font-black">■</span><span>{{{this}}}</span>
             </li>
             {{/each}}
@@ -133,16 +138,18 @@
       >
         {{#if cv.labels.skills}}{{cv.labels.skills}}{{else}}Skills{{/if}}
       </h2>
-      <dl class="flex flex-col">
+      <ul class="border-l-[3px] border-b-[3px] [border-style:solid_dashed] border-black">
         {{#each cv.skills}}
-        <div
-          class="grid grid-cols-[40mm_1fr] gap-2 items-baseline border-b-2 border-black py-1"
-        >
-          <dt class="font-black uppercase">{{this.category}}</dt>
-          <dd>{{this.items}}</dd>
-        </div>
+        <li class="flex flex-col gap-1 px-2.5 py-1 leading-snug">
+          <span class="shrink-0 font-black uppercase">
+            <span
+              class="text-[8pt] leading-none bg-yellow-300 border-2 border-black text-black px-1.5 py-0.5"
+            >{{this.category}}<span class="text-[8pt] text-yellow-300">:</span></span>
+          </span>
+          <span>{{this.items}}</span>
+        </li>
         {{/each}}
-      </dl>
+      </ul>
     </section>
     {{/if}}