@ansiversa/components 0.0.119 → 0.0.121

package/src/resume-templates/ResumeTemplateModernTwoTone.astro

@@ -1,6 +1,6 @@
 ---
-import type { ResumeData } from "../../resume-templates/typescript-schema";
-import { formatDateRange } from "../../resume-templates/typescript-schema";
+import type { ResumeData } from "./typescript-schema";
+import { formatDateRange } from "./typescript-schema";
 
 interface Props {
   data: ResumeData;
@@ -33,6 +33,8 @@ if (basics.contact.website) {
   contactItems.push({ label: formatUrlLabel(basics.contact.website), href: basics.contact.website });
 }
 
+const directContactLine = [basics.contact.email, basics.contact.phone].filter(Boolean).join(" • ");
+
 const skills = data.skills ?? [];
 const links = basics.links ?? [];
 const languages = data.languages ?? [];
@@ -44,39 +46,30 @@ const declaration = data.declaration ?? {};
 const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
-<style>
-  @media print {
-    .resume-template a {
-      text-decoration: none;
-      color: inherit;
-    }
-    .resume-template {
-      background: white;
-    }
-  }
-</style>
-
 <div class="resume-template bg-slate-100 text-slate-900 print:bg-white">
   <main class="mx-auto max-w-4xl p-4 sm:p-6">
     <section class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 print:shadow-none print:ring-0">
-      <div class="grid lg:grid-cols-12">
-        <aside class="bg-slate-900 p-7 text-white sm:p-10 lg:col-span-4">
+      <div class="grid lg:grid-cols-12 print:grid-cols-1">
+        <aside class="bg-slate-900 p-7 text-slate-100 sm:p-10 lg:col-span-4 print:order-2 print:bg-white print:text-slate-900">
           <div class="space-y-6">
             <div>
               <h1 class="text-3xl font-bold tracking-tight">{firstName}</h1>
               {lastName && <h1 class="-mt-1 text-3xl font-bold tracking-tight">{lastName}</h1>}
-              <p class="mt-2 text-sm text-white/80">{basics.headline}</p>
+              <p class="mt-2 text-sm text-slate-200 print:text-slate-700">{basics.headline}</p>
             </div>
 
-            <div class="h-px bg-white/10"></div>
+            <div class="h-px bg-slate-700 print:bg-slate-200"></div>
 
             {contactItems.length > 0 && (
-              <div class="space-y-2 text-sm">
-                <div class="text-white/70">CONTACT</div>
-                <div class="space-y-1 text-white/90">
-                  {contactItems.map((item) =>
+              <div class="av-print-avoid-break space-y-2 text-sm">
+                <div class="font-semibold text-slate-100 print:text-slate-900">CONTACT</div>
+                <div class="space-y-1 text-slate-200 print:text-slate-700">
+                  {directContactLine && <div class="font-medium">{directContactLine}</div>}
+                  {contactItems
+                    .filter((item) => item.label !== basics.contact.email && item.label !== basics.contact.phone)
+                    .map((item) =>
                     item.href ? (
-                      <a class="underline underline-offset-2" href={item.href}>
+                      <a class="underline underline-offset-2 print:no-underline" href={item.href}>
                         {item.label}
                       </a>
                     ) : (
@@ -88,22 +81,22 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
             )}
 
             {skills.length > 0 && (
-              <div class="space-y-3">
-                <div class="text-sm text-white/70">SKILLS</div>
+              <div class="av-print-avoid-break space-y-3">
+                <div class="text-sm font-semibold text-slate-100 print:text-slate-900">SKILLS</div>
                 <div class="flex flex-wrap gap-2">
                   {skills.map((skill) => (
-                    <span class="rounded-full bg-white/10 px-3 py-1 text-xs">{skill.name}</span>
+                    <span class="rounded-full bg-white/10 px-3 py-1 text-xs text-slate-100 print:border print:border-slate-200 print:bg-slate-50 print:text-slate-800">{skill.name}</span>
                   ))}
                 </div>
               </div>
             )}
 
             {links.length > 0 && (
-              <div class="space-y-2">
-                <div class="text-sm text-white/70">LINKS</div>
-                <div class="space-y-1 text-sm text-white/90">
+              <div class="av-print-avoid-break space-y-2">
+                <div class="text-sm font-semibold text-slate-100 print:text-slate-900">LINKS</div>
+                <div class="space-y-1 text-sm text-slate-200 print:text-slate-700">
                   {links.map((link) => (
-                    <a class="underline underline-offset-2" href={link.url}>
+                    <a class="underline underline-offset-2 print:no-underline" href={link.url}>
                       {link.label ?? formatUrlLabel(link.url)}
                     </a>
                   ))}
@@ -112,23 +105,24 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
             )}
 
             {languages.length > 0 && (
-              <div class="space-y-2">
-                <div class="text-sm text-white/70">LANGUAGES</div>
-                <div class="text-sm text-white/90">
-                  {languages
-                    .map((language) =>
-                      language.proficiency ? `${language.name} (${language.proficiency})` : language.name
-                    )
-                    .join(" · ")}
-                </div>
+              <div class="av-print-avoid-break space-y-2">
+                <div class="text-sm font-semibold text-slate-100 print:text-slate-900">LANGUAGES</div>
+                <ul class="list-disc space-y-1 pl-5 text-sm text-slate-200 print:text-slate-700">
+                  {languages.map((language) => (
+                    <li>
+                      {language.name}
+                      {language.proficiency ? ` (${language.proficiency})` : ""}
+                    </li>
+                  ))}
+                </ul>
               </div>
             )}
           </div>
         </aside>
 
-        <div class="p-7 sm:p-10 lg:col-span-8">
+        <div class="p-7 sm:p-10 lg:col-span-8 print:order-1">
           {basics.summary && (
-            <section>
+            <section class="av-print-avoid-break">
               <h2 class="text-xs font-bold tracking-widest text-slate-500">PROFILE</h2>
               <p class="mt-3 text-sm leading-6 text-slate-700">{basics.summary}</p>
             </section>
@@ -141,7 +135,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
               <h2 class="text-xs font-bold tracking-widest text-slate-500">EXPERIENCE</h2>
               <div class="mt-5 space-y-6">
                 {experienceItems.map((item) => (
-                  <article>
+                  <article class="av-print-avoid-break">
                     <div class="flex items-start justify-between gap-4">
                       <div>
                         <h3 class="text-base font-semibold">{item.role}</h3>
@@ -176,7 +170,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                   <h2 class="text-xs font-bold tracking-widest text-slate-500">PROJECTS</h2>
                   <div class="mt-4 space-y-4">
                     {projects.map((project) => (
-                      <div class="rounded-xl border border-slate-200 p-4">
+                      <div class="av-print-avoid-break rounded-xl border border-slate-200 p-4">
                         <div class="flex items-baseline justify-between">
                           {project.link ? (
                             <a class="font-semibold underline underline-offset-4" href={project.link}>
@@ -211,7 +205,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                   <h2 class="text-xs font-bold tracking-widest text-slate-500">EDUCATION</h2>
                   <div class="mt-4 space-y-4">
                     {education.map((edu) => (
-                      <div class="rounded-xl border border-slate-200 p-4">
+                      <div class="av-print-avoid-break rounded-xl border border-slate-200 p-4">
                         <h3 class="font-semibold">{edu.degree}</h3>
                         <p class="text-sm text-slate-600">{edu.school}</p>
                         {edu.location && (
@@ -242,7 +236,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
           </section>
 
           {hasDeclaration && (
-            <section>
+            <section class="av-print-avoid-break">
               <div class="my-8 h-px bg-slate-200"></div>
               <h2 class="text-xs font-bold tracking-widest text-slate-500">DECLARATION</h2>
               {declaration.text && (

package/{resume-templates → src/resume-templates}/typescript-schema.ts

@@ -5,13 +5,13 @@ export type ResumeData = {
 
   basics: {
     fullName: string;
-    headline: string; // e.g., "Senior Software Developer"
+    headline: string;
     summary?: string;
 
     location?: {
       city?: string;
       country?: string;
-      label?: string; // e.g., "Abu Dhabi, UAE" (preferred display)
+      label?: string;
     };
 
     contact: {
@@ -21,30 +21,30 @@ export type ResumeData = {
     };
 
     links?: Array<{
-      label: string; // e.g., "LinkedIn", "GitHub"
+      label: string;
       url: string;
     }>;
   };
 
   skills?: Array<{
-    name: string; // e.g., "TypeScript"
+    name: string;
     level?: "Beginner" | "Intermediate" | "Advanced" | "Expert";
-    keywords?: string[]; // optional extra tags
+    keywords?: string[];
   }>;
 
-  highlights?: string[]; // short bullets for sidebar or summary
+  highlights?: string[];
 
   experience?: Array<{
-    id: string; // stable ID for reorder/edit
-    role: string; // "Senior Software Developer"
-    company: string; // "Global Aerospace Logistics Company"
-    location?: string; // "UAE" or "Abu Dhabi, UAE"
+    id: string;
+    role: string;
+    company: string;
+    location?: string;
     start: { year: number; month?: number };
-    end?: { year: number; month?: number }; // omit when present=true
+    end?: { year: number; month?: number };
     present?: boolean;
-    summary?: string; // optional 1-line intro
+    summary?: string;
     bullets?: string[];
-    tags?: string[]; // chips like "Architecture", "UI Systems"
+    tags?: string[];
   }>;
 
   projects?: Array<{
@@ -61,12 +61,12 @@ export type ResumeData = {
 
   education?: Array<{
     id: string;
-    degree: string; // "B.E. / B.Tech — Computer Science"
+    degree: string;
     school: string;
     location?: string;
     start?: { year: number; month?: number };
     end?: { year: number; month?: number };
-    grade?: string; // optional
+    grade?: string;
     bullets?: string[];
   }>;
 
@@ -79,7 +79,7 @@ export type ResumeData = {
   }>;
 
   languages?: Array<{
-    name: string; // "English"
+    name: string;
     proficiency?: "Native" | "Fluent" | "Professional" | "Intermediate" | "Basic";
   }>;
 
@@ -97,14 +97,12 @@ export type ResumeData = {
     name?: string;
   };
 
-  // Template feature flags (optional)
   settings?: {
-    showSkillsAs?: "chips" | "levels"; // chips for classic/modern, levels for minimal
+    showSkillsAs?: "chips" | "levels";
     paper?: "A4" | "Letter";
   };
 };
 
-/** Helpers (optional for Codex) */
 export function formatDateRange(item: {
   start: { year: number; month?: number };
   end?: { year: number; month?: number };

package/src/styles/global.css

@@ -1975,6 +1975,11 @@
     color: var(--av-text);
   }
 
+  .av-print-avoid-break {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
   /* Loading bar utility */
   .av-loading-bar {
     height: 4px;

package/src/utils/appUrls.ts

@@ -1,6 +1,11 @@
 const ROOT_DOMAIN = "ansiversa.com";
 
-const MINI_APP_SLUGS = new Set(["quiz"]);
+const MINI_APP_SLUGS = new Set([
+  "quiz",
+  "flashnote",
+  "resume-builder",
+  "portfolio-creator",
+]);
 
 export const getAppBaseUrl = (appSlug: string) => {
   if (!appSlug) {

package/resume-templates/template-1.html

@@ -1,154 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Resume Template 1 - Classic ATS</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-      @media print {
-        .no-print { display: none !important; }
-        a { text-decoration: none; color: inherit; }
-      }
-    </style>
-  </head>
-  <body class="bg-slate-100 text-slate-900">
-    <div class="no-print sticky top-0 z-10 border-b border-slate-200 bg-white/90 backdrop-blur">
-      <div class="mx-auto flex max-w-4xl items-center justify-between px-4 py-3">
-        <div class="text-sm text-slate-600">Template 1 — Classic ATS</div>
-        <button class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50" onclick="window.print()">
-          Print / Save PDF
-        </button>
-      </div>
-    </div>
-
-    <main class="mx-auto max-w-4xl p-4 sm:p-6">
-      <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-10 print:shadow-none print:ring-0">
-        <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-          <div>
-            <h1 class="text-3xl font-bold tracking-tight">Karthikeyan Ramalingam</h1>
-            <p class="mt-1 text-base font-medium text-slate-700">Senior Software Developer</p>
-            <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
-              Senior software developer focused on scalable systems, clean UX, and production-grade architecture.
-            </p>
-          </div>
-
-          <div class="text-sm text-slate-700 sm:text-right">
-            <div class="flex flex-col gap-1">
-              <span>Abu Dhabi, UAE</span>
-              <a class="text-slate-900 underline underline-offset-2 hover:text-slate-700" href="mailto:you@email.com">you@email.com</a>
-              <a class="text-slate-900 underline underline-offset-2 hover:text-slate-700" href="tel:+971500000000">+971 50 000 0000</a>
-              <a class="text-slate-900 underline underline-offset-2 hover:text-slate-700" href="#">ansiversa.com</a>
-              <a class="text-slate-900 underline underline-offset-2 hover:text-slate-700" href="#">linkedin.com/in/yourname</a>
-            </div>
-          </div>
-        </header>
-
-        <div class="my-8 h-px bg-slate-200"></div>
-
-        <div class="grid gap-10 lg:grid-cols-3">
-          <div class="lg:col-span-2 space-y-10">
-            <section>
-              <h2 class="text-sm font-bold tracking-widest text-slate-900">EXPERIENCE</h2>
-              <div class="mt-4 space-y-6">
-                <article>
-                  <div class="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
-                    <div>
-                      <h3 class="text-base font-semibold">Senior Software Developer</h3>
-                      <p class="text-sm text-slate-700">Global Aerospace Logistics Company</p>
-                    </div>
-                    <p class="text-sm text-slate-600">2023 — Present · UAE</p>
-                  </div>
-                  <ul class="mt-3 list-disc space-y-2 pl-5 text-sm leading-6 text-slate-700">
-                    <li>Designed and shipped internal platforms improving operational visibility and data accuracy.</li>
-                    <li>Built reusable UI patterns and performance-focused server workflows.</li>
-                    <li>Collaborated cross-functionally to deliver stable production releases.</li>
-                  </ul>
-                </article>
-
-                <article>
-                  <div class="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
-                    <div>
-                      <h3 class="text-base font-semibold">Software Developer</h3>
-                      <p class="text-sm text-slate-700">HCL Technologies</p>
-                    </div>
-                    <p class="text-sm text-slate-600">2019 — 2023 · India</p>
-                  </div>
-                  <ul class="mt-3 list-disc space-y-2 pl-5 text-sm leading-6 text-slate-700">
-                    <li>Delivered enterprise features with strong focus on quality and maintainability.</li>
-                    <li>Improved reporting workflows and data handling for business-critical modules.</li>
-                    <li>Worked closely with QA and product owners to reduce defects.</li>
-                  </ul>
-                </article>
-              </div>
-            </section>
-
-            <section>
-              <h2 class="text-sm font-bold tracking-widest text-slate-900">PROJECTS</h2>
-              <div class="mt-4 space-y-5">
-                <article>
-                  <div class="flex items-baseline justify-between gap-3">
-                    <h3 class="text-base font-semibold">Ansiversa</h3>
-                    <p class="text-sm text-slate-600">2024 — Present</p>
-                  </div>
-                  <p class="mt-2 text-sm leading-6 text-slate-700">
-                    Built a multi-app ecosystem with shared auth, strict UI standards, and a reusable component library.
-                  </p>
-                  <div class="mt-2 flex flex-wrap gap-2">
-                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700">Astro</span>
-                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700">Alpine</span>
-                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700">Tailwind</span>
-                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700">libSQL</span>
-                  </div>
-                </article>
-              </div>
-            </section>
-
-            <section>
-              <h2 class="text-sm font-bold tracking-widest text-slate-900">EDUCATION</h2>
-              <div class="mt-4">
-                <div class="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
-                  <div>
-                    <h3 class="text-base font-semibold">B.E. / B.Tech — Computer Science</h3>
-                    <p class="text-sm text-slate-700">Your University Name</p>
-                  </div>
-                  <p class="text-sm text-slate-600">2015 — 2019</p>
-                </div>
-              </div>
-            </section>
-          </div>
-
-          <aside class="space-y-10">
-            <section>
-              <h2 class="text-sm font-bold tracking-widest text-slate-900">SKILLS</h2>
-              <div class="mt-4 flex flex-wrap gap-2">
-                <span class="rounded-lg bg-slate-100 px-3 py-1.5 text-sm text-slate-800">TypeScript</span>
-                <span class="rounded-lg bg-slate-100 px-3 py-1.5 text-sm text-slate-800">Node.js</span>
-                <span class="rounded-lg bg-slate-100 px-3 py-1.5 text-sm text-slate-800">Astro</span>
-                <span class="rounded-lg bg-slate-100 px-3 py-1.5 text-sm text-slate-800">PostgreSQL</span>
-                <span class="rounded-lg bg-slate-100 px-3 py-1.5 text-sm text-slate-800">System Design</span>
-              </div>
-            </section>
-
-            <section>
-              <h2 class="text-sm font-bold tracking-widest text-slate-900">HIGHLIGHTS</h2>
-              <ul class="mt-4 space-y-2 text-sm leading-6 text-slate-700">
-                <li>• Strong focus on clean UX and predictable components.</li>
-                <li>• Production mindset: verification, freeze, stability.</li>
-                <li>• Built reusable standards for a 100-app ecosystem.</li>
-              </ul>
-            </section>
-
-            <section>
-              <h2 class="text-sm font-bold tracking-widest text-slate-900">LANGUAGES</h2>
-              <ul class="mt-4 space-y-2 text-sm text-slate-700">
-                <li>English</li>
-                <li>Tamil</li>
-              </ul>
-            </section>
-          </aside>
-        </div>
-      </section>
-    </main>
-  </body>
-</html>

package/resume-templates/template-2.html

@@ -1,172 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Resume Template 2 - Modern Two-Tone</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-      @media print {
-        .no-print { display: none !important; }
-        a { text-decoration: none; color: inherit; }
-        body { background: white !important; }
-      }
-    </style>
-  </head>
-  <body class="bg-slate-100 text-slate-900">
-    <div class="no-print sticky top-0 z-10 border-b border-slate-200 bg-white/90 backdrop-blur">
-      <div class="mx-auto flex max-w-4xl items-center justify-between px-4 py-3">
-        <div class="text-sm text-slate-600">Template 2 — Modern Two-Tone</div>
-        <button class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50" onclick="window.print()">
-          Print / Save PDF
-        </button>
-      </div>
-    </div>
-
-    <main class="mx-auto max-w-4xl p-4 sm:p-6">
-      <section class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 print:shadow-none print:ring-0">
-        <div class="grid lg:grid-cols-12">
-          <!-- Sidebar -->
-          <aside class="lg:col-span-4 bg-slate-900 text-white p-7 sm:p-10">
-            <div class="space-y-6">
-              <div>
-                <h1 class="text-3xl font-bold tracking-tight">Karthikeyan</h1>
-                <h1 class="text-3xl font-bold tracking-tight -mt-1">Ramalingam</h1>
-                <p class="mt-2 text-sm text-white/80">Senior Software Developer</p>
-              </div>
-
-              <div class="h-px bg-white/10"></div>
-
-              <div class="space-y-2 text-sm">
-                <div class="text-white/70">CONTACT</div>
-                <div class="space-y-1 text-white/90">
-                  <div>Abu Dhabi, UAE</div>
-                  <a class="underline underline-offset-2" href="mailto:you@email.com">you@email.com</a>
-                  <a class="underline underline-offset-2" href="tel:+971500000000">+971 50 000 0000</a>
-                  <a class="underline underline-offset-2" href="#">ansiversa.com</a>
-                </div>
-              </div>
-
-              <div class="space-y-3">
-                <div class="text-sm text-white/70">SKILLS</div>
-                <div class="flex flex-wrap gap-2">
-                  <span class="rounded-full bg-white/10 px-3 py-1 text-xs">TypeScript</span>
-                  <span class="rounded-full bg-white/10 px-3 py-1 text-xs">Astro</span>
-                  <span class="rounded-full bg-white/10 px-3 py-1 text-xs">Alpine</span>
-                  <span class="rounded-full bg-white/10 px-3 py-1 text-xs">SQL</span>
-                  <span class="rounded-full bg-white/10 px-3 py-1 text-xs">Architecture</span>
-                  <span class="rounded-full bg-white/10 px-3 py-1 text-xs">UI Systems</span>
-                </div>
-              </div>
-
-              <div class="space-y-2">
-                <div class="text-sm text-white/70">LINKS</div>
-                <div class="space-y-1 text-sm text-white/90">
-                  <a class="underline underline-offset-2" href="#">linkedin.com/in/yourname</a>
-                  <a class="underline underline-offset-2" href="#">github.com/yourname</a>
-                </div>
-              </div>
-
-              <div class="space-y-2">
-                <div class="text-sm text-white/70">LANGUAGES</div>
-                <div class="text-sm text-white/90">English · Tamil</div>
-              </div>
-            </div>
-          </aside>
-
-          <!-- Main -->
-          <div class="lg:col-span-8 p-7 sm:p-10">
-            <section>
-              <h2 class="text-xs font-bold tracking-widest text-slate-500">PROFILE</h2>
-              <p class="mt-3 text-sm leading-6 text-slate-700">
-                Senior software developer with a strong track record in enterprise systems, scalable architecture,
-                and premium UI design. Known for predictable standards, verification-first delivery, and long-term maintainability.
-              </p>
-            </section>
-
-            <div class="my-8 h-px bg-slate-200"></div>
-
-            <section>
-              <h2 class="text-xs font-bold tracking-widest text-slate-500">EXPERIENCE</h2>
-              <div class="mt-5 space-y-6">
-                <article>
-                  <div class="flex items-start justify-between gap-4">
-                    <div>
-                      <h3 class="text-base font-semibold">Senior Software Developer</h3>
-                      <p class="text-sm text-slate-600">Global Aerospace Logistics Company</p>
-                    </div>
-                    <span class="shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs text-slate-700">2023—Present</span>
-                  </div>
-                  <ul class="mt-3 list-disc space-y-2 pl-5 text-sm leading-6 text-slate-700">
-                    <li>Shipped systems improving operational visibility and data accuracy.</li>
-                    <li>Built reusable UI patterns and server-side workflows.</li>
-                    <li>Improved performance and reliability in production releases.</li>
-                  </ul>
-                </article>
-
-                <article>
-                  <div class="flex items-start justify-between gap-4">
-                    <div>
-                      <h3 class="text-base font-semibold">Software Developer</h3>
-                      <p class="text-sm text-slate-600">HCL Technologies</p>
-                    </div>
-                    <span class="shrink-0 rounded-full bg-slate-100 px-3 py-1 text-xs text-slate-700">2019—2023</span>
-                  </div>
-                  <ul class="mt-3 list-disc space-y-2 pl-5 text-sm leading-6 text-slate-700">
-                    <li>Delivered enterprise features with high maintainability standards.</li>
-                    <li>Improved reporting and data pipelines for business-critical modules.</li>
-                  </ul>
-                </article>
-              </div>
-            </section>
-
-            <div class="my-8 h-px bg-slate-200"></div>
-
-            <section class="grid gap-8 sm:grid-cols-2">
-              <div>
-                <h2 class="text-xs font-bold tracking-widest text-slate-500">PROJECTS</h2>
-                <div class="mt-4 space-y-4">
-                  <div class="rounded-xl border border-slate-200 p-4">
-                    <div class="flex items-baseline justify-between">
-                      <h3 class="font-semibold">Ansiversa</h3>
-                      <span class="text-xs text-slate-500">2024—Present</span>
-                    </div>
-                    <p class="mt-2 text-sm leading-6 text-slate-700">
-                      Multi-app ecosystem with shared components and strict standards.
-                    </p>
-                  </div>
-
-                  <div class="rounded-xl border border-slate-200 p-4">
-                    <div class="flex items-baseline justify-between">
-                      <h3 class="font-semibold">Quiz Institute</h3>
-                      <span class="text-xs text-slate-500">2024—Present</span>
-                    </div>
-                    <p class="mt-2 text-sm leading-6 text-slate-700">
-                      Step-based quiz playthrough with metadata loading and results saving.
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              <div>
-                <h2 class="text-xs font-bold tracking-widest text-slate-500">EDUCATION</h2>
-                <div class="mt-4 rounded-xl border border-slate-200 p-4">
-                  <h3 class="font-semibold">B.E. / B.Tech — Computer Science</h3>
-                  <p class="text-sm text-slate-600">Your University Name</p>
-                  <p class="mt-1 text-xs text-slate-500">2015—2019</p>
-                </div>
-
-                <h2 class="mt-8 text-xs font-bold tracking-widest text-slate-500">HIGHLIGHTS</h2>
-                <ul class="mt-4 space-y-2 text-sm leading-6 text-slate-700">
-                  <li>• Verification-first delivery mindset</li>
-                  <li>• Component-driven architecture</li>
-                  <li>• Premium, consistent UI across apps</li>
-                </ul>
-              </div>
-            </section>
-          </div>
-        </div>
-      </section>
-    </main>
-  </body>
-</html>