elzinko
diff --git a/‎.gitignore‎
Lines changed: 4 additions & 1 deletion b/‎.gitignore‎
Lines changed: 4 additions & 1 deletion
diff --git a/‎app/[lang]/contact.tsx‎
Lines changed: 15 additions & 21 deletions b/‎app/[lang]/contact.tsx‎
Lines changed: 15 additions & 21 deletions
diff --git a/‎app/[lang]/frameworks.tsx.backup‎
Lines changed: 0 additions & 34 deletions b/‎app/[lang]/frameworks.tsx.backup‎
Lines changed: 0 additions & 34 deletions
diff --git a/‎app/[lang]/header.tsx‎
Lines changed: 4 additions & 12 deletions b/‎app/[lang]/header.tsx‎
Lines changed: 4 additions & 12 deletions
diff --git a/‎app/[lang]/jobs.tsx‎
Lines changed: 2 additions & 2 deletions b/‎app/[lang]/jobs.tsx‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎app/[lang]/layout.tsx‎
Lines changed: 1 addition & 1 deletion b/‎app/[lang]/layout.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎app/[lang]/page.tsx‎
Lines changed: 42 additions & 10 deletions b/‎app/[lang]/page.tsx‎
Lines changed: 42 additions & 10 deletions
@@ -40,4 +40,7 @@ next-env.d.ts
 .vscode
 
 #others
-backups
+backups
+
+# playwright
+.playwright-mcp/
@@ -2,6 +2,7 @@ import { getDataWithLocal } from '@/lib/graphql-client';
 import { gql } from 'graphql-request';
 import { Locale } from 'i18n-config';
 import React from 'react';
+import ContactDisplay from '@/components/ContactDisplay';
 
 const query = gql`
   query getContact($lang: SiteLocale) {
@@ -17,31 +18,24 @@ const query = gql`
   }
 `;
 
-export default async function contact(locale: Locale) {
+export default async function Contact(locale: Locale) {
   const data: any = await getDataWithLocal(locale, query);
+  const contactData = {
+    title: data?.contact?.title,
+    phoneTitle: data?.contact?.phoneTitle || '',
+    phone: data?.contact?.phone || '',
+    emailTitle: data?.contact?.emailTitle || '',
+    email: data?.contact?.email || '',
+    locationTitle: data?.contact?.locationTitle || '',
+    location: data?.contact?.location || '',
+  };
+
   return (
-    <section id="contact" className="mt-10 ">
+    <section id="contact" className="mt-10">
       <h2 className="border-b pb-1 text-2xl font-semibold text-pink-300">
-        Contact
+        {contactData.title || 'Contact'}
       </h2>
-      <ul className="mb-10 mr-1 mt-4">
-        <li className="mt-1 text-pink-200">
-          <strong>{data?.contact?.phoneTitle}</strong>
-          <a href={`tel:${data?.contact?.phone}`} className="block">
-            {data?.contact?.phone}
-          </a>
-        </li>
-        <li className="mt-1 text-pink-200">
-          <strong>{data?.contact?.emailTitle}</strong>
-          <a href={`mailto:${data?.contact?.email}`} className="block">
-            {data?.contact?.email}
-          </a>
-        </li>
-        <li className="mt-1 text-pink-200">
-          <strong>{data?.contact?.locationTitle}</strong>
-          <span className="block">{data?.contact?.location}</span>
-        </li>
-      </ul>
+      <ContactDisplay contact={contactData} />
     </section>
   );
 }
@@ -1,5 +1,6 @@
 import LocaleSwitcher from '@/components/locale-switcher';
 import Logos from '@/components/logos';
+import HeaderContent from '@/components/HeaderContent';
 import { getDataWithLocal } from '@/lib/graphql-client';
 import { gql } from 'graphql-request';
 import { i18n, Locale } from 'i18n-config';
@@ -18,22 +19,13 @@ const query = gql`
 export default async function Header(locale: Locale) {
   const data: any = await getDataWithLocal(locale, query);
   return (
-    <header>
-      <div className="flex flex-row justify-between">
+    <header className="print:mb-2">
+      <div className="flex flex-row justify-between print:hidden">
         <LocaleSwitcher lang={locale} />
         <Logos />
       </div>
 
-      <div className="flex justify-between py-14 md:py-20">
-        <div className="grid justify-items-end">
-          <h1 className="text-4xl font-extrabold text-blue-600 md:text-5xl lg:text-7xl">
-            {data?.header?.name}
-          </h1>
-          <p className="mt-5 text-2xl text-teal-300 md:text-3xl">
-            {data?.header?.role}
-          </p>
-        </div>
-      </div>
+      <HeaderContent name={data?.header?.name} role={data?.header?.role} />
     </header>
   );
 }
@@ -41,8 +41,8 @@ export default async function jobs(locale: Locale) {
           {data?.jobsTitle?.title}
         </h2>
         <ul className="mt-4">
-          {data?.allJobsModels?.map((job: any) => (
-            <li key={job.id} className="py-4">
+          {data?.allJobsModels?.map((job: any, index: number) => (
+            <li key={job.client + index} className="py-4">
               <Job job={job} />
             </li>
           ))}
 
@@ -20,7 +20,7 @@ export default async function RootLayout({
   return (
     <html lang="fr">
       <body>
-        <div className="container mx-auto min-h-screen p-8">
+        <div className="container mx-auto min-h-screen p-8 print:p-4">
           <main>{children}</main>
         </div>
         {enableAnalitycs ? <Analytics /> : ''}
 
@@ -1,6 +1,5 @@
 import '../../styles/globals.css';
 
-import { setTimeout } from 'timers/promises';
 import About from '@/app/[lang]/about';
 import Headers from '@/app/[lang]/header';
 import { Locale } from '../../i18n-config';
@@ -12,38 +11,71 @@ import Learnings from './learnings';
 import Hobbies from './hobbies';
 import Jobs from './jobs';
 import Projects from './projects';
+import { getDataWithLocal } from '@/lib/graphql-client';
+import { gql } from 'graphql-request';
+import type { Metadata } from 'next';
 
-const waitFunction = async () => {
-  await setTimeout(2000);
-};
+// Query to fetch header for metadata
+const headerQuery = gql`
+  query getHeader($lang: SiteLocale) {
+    header(locale: $lang) {
+      name
+    }
+  }
+`;
 
-export default function Page({
+// Helper to generate document title (developer style: lowercase with underscores)
+function generateDocumentTitle(name: string, lang: string, mode: 'full' | 'short'): string {
+  const prefix = lang === 'fr' ? 'cv' : 'resume';
+  const modeLabel = lang === 'fr' 
+    ? (mode === 'full' ? 'complet' : 'court') 
+    : mode;
+  const date = new Date().toISOString().slice(0, 10).replace(/-/g, '');
+  const safeName = name.toLowerCase().replace(/\s+/g, '_');
+  return `${prefix}_${safeName}_${modeLabel}_${date}`;
+}
+
+// Generate dynamic metadata for PDF title
+export async function generateMetadata({
+  params: { lang },
+}: {
+  params: { lang: Locale };
+}): Promise<Metadata> {
+  const data: any = await getDataWithLocal({ locale: lang } as any, headerQuery);
+  const name = data?.header?.name || 'CV';
+  
+  return {
+    title: generateDocumentTitle(name, lang, 'full'),
+  };
+}
+
+export default async function Page({
   params: { lang },
 }: {
   params: { lang: Locale };
 }) {
-  console.debug('new lang clicked : ' + lang);
   return (
     <>
       {/* @ts-expect-error Server Component */}
       <Headers locale={lang} />
+      
       {/* @ts-expect-error Server Component */}
       <About locale={lang} />
       {/* @ts-expect-error Server Component */}
       <Domains locale={lang} />
 
-      <div className="mt-10 flex columns-1 flex-col md:columns-2 md:flex-row">
-        <div id="left" className="order-last md:order-first md:w-1/3 md:pr-10">
+      <div className="mt-10 flex columns-1 flex-col md:columns-2 md:flex-row print:mt-4 print:flex-row">
+        <div id="left" className="order-last md:order-first md:w-1/3 md:pr-10 print:order-first print:w-1/3 print:pr-4">
           {/* @ts-expect-error Server Component */}
           <Contact locale={lang} />
           {/* @ts-expect-error Server Component */}
           <Skills locale={lang} />
           {/* @ts-expect-error Server Component */}
           <Learnings locale={lang} />
-          {/* @ts-expect-error Server Compone nt */}
+          {/* @ts-expect-error Server Component */}
           <Hobbies locale={lang} />
         </div>
-        <div id="main" className="md:w-2/3 md:pr-10">
+        <div id="main" className="md:w-2/3 md:pr-10 print:w-2/3 print:pr-4">
           {/* @ts-expect-error Server Component */}
           <Jobs locale={lang} />
           {/* @ts-expect-error Server Component */}