@ansiversa/components 0.0.106 → 0.0.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.106",
+  "version": "0.0.117",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/resume-templates/resumeData.ts

@@ -127,6 +127,12 @@ export const resumeData: ResumeData = {
     { name: "Tamil", proficiency: "Native" },
   ],
 
+  declaration: {
+    text: "I hereby declare that the information furnished above is true to the best of my knowledge.",
+    place: "Pondicherry – India.",
+    name: "Karthikeyan Subbarayan Ramalingam",
+  },
+
   settings: {
     showSkillsAs: "chips",
     paper: "A4",

package/resume-templates/typescript-schema.ts

@@ -91,6 +91,12 @@ export type ResumeData = {
     summary?: string;
   }>;
 
+  declaration?: {
+    text?: string;
+    place?: string;
+    name?: string;
+  };
+
   // Template feature flags (optional)
   settings?: {
     showSkillsAs?: "chips" | "levels"; // chips for classic/modern, levels for minimal

package/src/resume-templates/ResumeTemplateClassic.astro

@@ -29,15 +29,22 @@ if (basics.contact.website) {
   contactItems.push({ label: formatUrlLabel(basics.contact.website), href: basics.contact.website });
 }
 for (const link of basics.links ?? []) {
-  contactItems.push({ label: link.label ?? formatUrlLabel(link.url), href: link.url });
+  const urlLabel = link.url ? formatUrlLabel(link.url) : link.label;
+  if (urlLabel) {
+    contactItems.push({ label: urlLabel, href: link.url });
+  }
 }
 
 const experienceItems = data.experience ?? [];
 const projectItems = data.projects ?? [];
 const educationItems = data.education ?? [];
 const skills = data.skills ?? [];
+const certifications = data.certifications ?? [];
 const highlights = data.highlights ?? [];
 const languages = data.languages ?? [];
+const awards = data.awards ?? [];
+const declaration = data.declaration ?? {};
+const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
 <style>
@@ -46,6 +53,19 @@ const languages = data.languages ?? [];
       text-decoration: none;
       color: inherit;
     }
+
+    .resume-template .classic-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+      gap: 2.5rem;
+    }
+
+    .resume-template .classic-divider {
+      background: none !important;
+      border-top: 1px solid #e2e8f0 !important;
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
   }
 </style>
 
@@ -57,13 +77,13 @@ const languages = data.languages ?? [];
           <h1 class="text-3xl font-bold tracking-tight">{basics.fullName}</h1>
           <p class="mt-1 text-base font-medium text-slate-700">{basics.headline}</p>
           {basics.summary && (
-            <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600">{basics.summary}</p>
+            <p class="mt-3 text-sm leading-6 text-slate-600">{basics.summary}</p>
           )}
         </div>
 
         {contactItems.length > 0 && (
           <div class="text-sm text-slate-700 sm:text-right">
-            <div class="flex flex-col gap-1">
+            <div class="flex flex-col gap-1 sm:items-end">
               {contactItems.map((item) =>
                 item.href ? (
                   <a
@@ -81,9 +101,9 @@ const languages = data.languages ?? [];
         )}
       </header>
 
-      <div class="my-8 h-px bg-slate-200"></div>
+      <div class="classic-divider my-8 h-0 border-t border-slate-200"></div>
 
-      <div class="grid gap-10 lg:grid-cols-3">
+      <div class="classic-grid grid gap-10 lg:grid-cols-3">
         <div class="space-y-10 lg:col-span-2">
           {experienceItems.length > 0 && (
             <section>
@@ -203,6 +223,29 @@ const languages = data.languages ?? [];
             </section>
           )}
 
+          {certifications.length > 0 && (
+            <section>
+              <h2 class="text-sm font-bold tracking-widest text-slate-900">CERTIFICATIONS</h2>
+              <ul class="mt-4 space-y-3 text-sm text-slate-700">
+                {certifications.map((cert) => {
+                  const meta = [cert.issuer, cert.year].filter(Boolean).join(" · ");
+                  return (
+                    <li class="space-y-1">
+                      {cert.link ? (
+                        <a class="font-semibold text-slate-900 underline underline-offset-2" href={cert.link}>
+                          {cert.name}
+                        </a>
+                      ) : (
+                        <div class="font-semibold text-slate-900">{cert.name}</div>
+                      )}
+                      {meta && <div class="text-xs text-slate-600">{meta}</div>}
+                    </li>
+                  );
+                })}
+              </ul>
+            </section>
+          )}
+
           {highlights.length > 0 && (
             <section>
               <h2 class="text-sm font-bold tracking-widest text-slate-900">HIGHLIGHTS</h2>
@@ -227,8 +270,51 @@ const languages = data.languages ?? [];
               </ul>
             </section>
           )}
+
+          {awards.length > 0 && (
+            <section>
+              <h2 class="text-sm font-bold tracking-widest text-slate-900">ACHIEVEMENTS</h2>
+              <ul class="mt-4 space-y-3 text-sm text-slate-700">
+                {awards.map((award) => {
+                  const meta = [award.by, award.year].filter(Boolean).join(" · ");
+                  return (
+                    <li class="space-y-1">
+                      <div class="font-semibold text-slate-900">{award.title}</div>
+                      {meta && <div class="text-xs text-slate-600">{meta}</div>}
+                      {award.summary && <div class="text-sm text-slate-700">{award.summary}</div>}
+                    </li>
+                  );
+                })}
+              </ul>
+            </section>
+          )}
         </aside>
       </div>
+
+      {hasDeclaration && (
+        <>
+          <div class="classic-divider my-8 h-0 border-t border-slate-200"></div>
+          <section class="space-y-4">
+            <h2 class="text-sm font-bold tracking-widest text-slate-900">DECLARATION</h2>
+            {declaration.text && (
+              <p class="text-sm leading-6 text-slate-700">{declaration.text}</p>
+            )}
+            {(declaration.place || declaration.name) && (
+              <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
+                {declaration.place && (
+                  <div>
+                    <span class="font-semibold text-slate-900">Place:</span>{" "}
+                    {declaration.place}
+                  </div>
+                )}
+                {declaration.name && (
+                  <div class="font-semibold text-slate-900">{declaration.name}</div>
+                )}
+              </div>
+            )}
+          </section>
+        </>
+      )}
     </section>
   </main>
 </div>

package/src/resume-templates/ResumeTemplateExecutiveTimeline.astro

@@ -30,6 +30,8 @@ const projects = data.projects ?? [];
 const skills = data.skills ?? [];
 const education = data.education ?? [];
 const highlights = data.highlights ?? [];
+const declaration = data.declaration ?? {};
+const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
 <style>
@@ -183,6 +185,31 @@ const highlights = data.highlights ?? [];
           )}
         </aside>
       </div>
+
+      {hasDeclaration && (
+        <>
+          <div class="my-8 h-px bg-slate-200"></div>
+          <section class="space-y-4">
+            <h2 class="text-sm font-bold tracking-widest text-slate-900">DECLARATION</h2>
+            {declaration.text && (
+              <p class="text-sm leading-6 text-slate-700">{declaration.text}</p>
+            )}
+            {(declaration.place || declaration.name) && (
+              <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
+                {declaration.place && (
+                  <div>
+                    <span class="font-semibold text-slate-900">Place:</span>{" "}
+                    {declaration.place}
+                  </div>
+                )}
+                {declaration.name && (
+                  <div class="font-semibold text-slate-900">{declaration.name}</div>
+                )}
+              </div>
+            )}
+          </section>
+        </>
+      )}
     </section>
   </main>
 </div>

package/src/resume-templates/ResumeTemplateMinimal.astro

@@ -38,6 +38,8 @@ const skills = data.skills ?? [];
 const education = data.education ?? [];
 const certifications = data.certifications ?? [];
 const showSkillsAs = data.settings?.showSkillsAs ?? "levels";
+const declaration = data.declaration ?? {};
+const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
 <style>
@@ -214,6 +216,31 @@ const showSkillsAs = data.settings?.showSkillsAs ?? "levels";
           )}
         </aside>
       </div>
+
+      {hasDeclaration && (
+        <>
+          <div class="my-10 h-px bg-slate-200"></div>
+          <section class="space-y-4">
+            <h2 class="text-xs font-semibold tracking-[0.25em] text-slate-500">DECLARATION</h2>
+            {declaration.text && (
+              <p class="text-sm leading-7 text-slate-700">{declaration.text}</p>
+            )}
+            {(declaration.place || declaration.name) && (
+              <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
+                {declaration.place && (
+                  <div>
+                    <span class="font-semibold text-slate-900">Place:</span>{" "}
+                    {declaration.place}
+                  </div>
+                )}
+                {declaration.name && (
+                  <div class="font-semibold text-slate-900">{declaration.name}</div>
+                )}
+              </div>
+            )}
+          </section>
+        </>
+      )}
     </section>
   </main>
 </div>

package/src/resume-templates/ResumeTemplateModernTwoTone.astro

@@ -40,6 +40,8 @@ const experienceItems = data.experience ?? [];
 const projects = data.projects ?? [];
 const education = data.education ?? [];
 const highlights = data.highlights ?? [];
+const declaration = data.declaration ?? {};
+const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
 <style>
@@ -238,6 +240,29 @@ const highlights = data.highlights ?? [];
               )}
             </div>
           </section>
+
+          {hasDeclaration && (
+            <section>
+              <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 && (
+                <p class="mt-3 text-sm leading-6 text-slate-700">{declaration.text}</p>
+              )}
+              {(declaration.place || declaration.name) && (
+                <div class="mt-3 flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
+                  {declaration.place && (
+                    <div>
+                      <span class="font-semibold text-slate-900">Place:</span>{" "}
+                      {declaration.place}
+                    </div>
+                  )}
+                  {declaration.name && (
+                    <div class="font-semibold text-slate-900">{declaration.name}</div>
+                  )}
+                </div>
+              )}
+            </section>
+          )}
         </div>
       </div>
     </section>

package/src/styles/global.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@source "../**/*.{astro,js,jsx,ts,tsx}";
 
 /* =========================================
    Ansiversa Design Tokens