ROLE

You are a senior brand designer + full-stack web engineer. Build a polished, conversion-optimized personal portfolio website for me.

NON-NEGOTIABLES (DO NOT DO)
• Do NOT scrape, copy, or reference charlot-dedjinou.vercel.app or any external website.
• Do NOT invent roles, awards, or dates. If any info is missing, use placeholders and list them in a “Verify info” checklist.

SOURCE CONTENT
• Use ONLY the data provided in the attached resume PDF named: “Profile (5).pdf”.
• Parse name, role/tagline, education, experiences, projects/ventures, awards, skills, languages, contact info, and social links.
• Preserve original spellings and dates exactly. If formats conflict (e.g., phone number), keep my value but flag in the checklist.

AUDIENCE & GOALS
• Audience: scholarship funders, fellowship selectors, climate/energy program managers, and Africa-focused partners.
• Goals: (1) communicate credibility and impact quickly; (2) easy contact/booking; (3) showcase Africa-centric sustainable engineering + AI leadership.

VISUAL DIRECTION (inspired by modern “African tech” editorial style)
• Default DARK mode; include light/dark toggle.
• Palette (CSS variables):
--onyx: #0B0B0F; --offwhite: #F7F7F8; --teal: #2CA7A0; --deepblue: #0B3C5D; --orange: #E67E22.
• Typography: Inter for UI; Source Sans (or system equivalent) for body.
• Layout: generous spacing, rounded-2xl, soft shadows, smooth micro-animations (reduced-motion safe).
• Imagery: generate a clean SVG hero with an abstract Africa/energy motif; placeholders for headshot and project images.

INFORMATION ARCHITECTURE
1) Home
- Above the fold: Name, role (“Sustainable Engineering & AI”), 1–2 line mission pulled from resume summary.
- Primary CTA: “Contact / Book a call”; Secondary: “Download CV (PDF)”.
- Impact stats (3 compact cards) derived from resume (projects, awards, countries).
2) About
- 150-word bio + 50-word short bio. Auto-timeline from roles/dates.
3) Experience & Leadership
- For each entry: org, role, location, dates, 2–4 bullet impacts (results first).
- Filter chips: Energy, AI, Policy, Community.
4) Projects & Ventures
- Cards with Problem → Approach → Outcome/metric; link slots (repo, media).
5) Awards & Certifications
- Badge grid; year tags.
6) Skills & Tools
- Tech & soft skills as chips; language proficiency meter.
7) Writing (optional if none)
- MDX-ready blog with tags (energy, AI, climate, policy).
8) Contact
- Form (name, email, message, consent checkbox) + success/failure states; also render email/phone.
9) Resume
- HTML render of resume + “Download PDF” button.

COPYWRITING
• Derive all copy from the PDF. Tone: mission-driven, practical, Africa-focused. Bilingual output.
• Provide both EN and FR strings for UI labels and key sections; include a language toggle (EN/FR).

TECHNICAL SPEC (production-ready)
• Stack: Next.js 14 (App Router) + TailwindCSS + TypeScript. (Optionally set up shadcn/ui, but keep dependencies light.)
• Components: <Header/>, <Hero/>, <StatCard/>, <Timeline/>, <ProjectCard/>, <BadgeGrid/>, <LangToggle/>, <ContactForm/>.
• Theming: Tailwind + CSS variables for the palette above; dark mode default.
• Content: store structured data in /data/*.json (profile, experience, projects, awards, skills); no hard-coded text in components.
• SEO: next-seo config, sitemap.xml, robots.txt, OG/Twitter images, canonical URL.
• Schema.org JSON-LD: Person + optional Organization.
• Accessibility: semantic landmarks, keyboard focus, ARIA where needed, prefers-reduced-motion.
• Performance: Lighthouse ≥90 across Perf/SEO/A11y/Best Practices; next/image; lazy-load noncritical media.
• Analytics: lightweight (e.g., Vercel Analytics stub only).

FORMS & INTEGRATIONS
• Contact form: client-side validation; stub server action with TODO note for EmailJS/Resend integration.
• Newsletter field: placeholder only (no external calls).

DELIVERABLES
1) Zipped codebase (Next.js + Tailwind) ready for Vercel; include a concise README (setup, customize, deploy).
2) /data/*.json files populated from the PDF (placeholders only if missing).
3) Brand tokens (colors, radius, typography scale) documented in the README.
4) One SVG hero image matching the visual direction.
5) Copy deck (EN/FR) as Markdown.
6) A “Verify info” checklist: phone, email, any ambiguous dates/roles detected.

ACCEPTANCE CRITERIA
• No external scraping or copying; do not reference charlot-dedjinou.vercel.app.
• All text sourced from “Profile (5).pdf” or clearly marked placeholders.
• Clean, bilingual UI with dark mode default, color palette exactly as specified.
• Filterable Projects/Experience; mobile-first responsive.
• Provide (A) desktop & mobile visual previews, (B) site map, (C) EN/FR draft copy, (D) downloadable zip.

BEGIN
1) Extract/normalize data from “Profile (5).pdf”.
2) Present a one-page visual preview (desktop + mobile frames) and the site map.
3) Provide the EN/FR copy deck.
4) Provide the zipped codebase for download.
- Follow Up Deployment

prompts.txt

@@ -761,4 +761,90 @@ Awards
 Certifications
 Education
 Volunteering
-Contact
+Contact
+ROLE
+You are a senior brand designer + full-stack web engineer. Build a polished, conversion-optimized personal portfolio website for me.
+
+NON-NEGOTIABLES (DO NOT DO)
+• Do NOT scrape, copy, or reference charlot-dedjinou.vercel.app or any external website.
+• Do NOT invent roles, awards, or dates. If any info is missing, use placeholders and list them in a “Verify info” checklist.
+
+SOURCE CONTENT
+• Use ONLY the data provided in the attached resume PDF named: “Profile (5).pdf”.
+• Parse name, role/tagline, education, experiences, projects/ventures, awards, skills, languages, contact info, and social links.
+• Preserve original spellings and dates exactly. If formats conflict (e.g., phone number), keep my value but flag in the checklist.
+
+AUDIENCE & GOALS
+• Audience: scholarship funders, fellowship selectors, climate/energy program managers, and Africa-focused partners.
+• Goals: (1) communicate credibility and impact quickly; (2) easy contact/booking; (3) showcase Africa-centric sustainable engineering + AI leadership.
+
+VISUAL DIRECTION (inspired by modern “African tech” editorial style)
+• Default DARK mode; include light/dark toggle.
+• Palette (CSS variables):
+  --onyx: #0B0B0F; --offwhite: #F7F7F8; --teal: #2CA7A0; --deepblue: #0B3C5D; --orange: #E67E22.
+• Typography: Inter for UI; Source Sans (or system equivalent) for body.
+• Layout: generous spacing, rounded-2xl, soft shadows, smooth micro-animations (reduced-motion safe).
+• Imagery: generate a clean SVG hero with an abstract Africa/energy motif; placeholders for headshot and project images.
+
+INFORMATION ARCHITECTURE
+1) Home
+   - Above the fold: Name, role (“Sustainable Engineering & AI”), 1–2 line mission pulled from resume summary.
+   - Primary CTA: “Contact / Book a call”; Secondary: “Download CV (PDF)”.
+   - Impact stats (3 compact cards) derived from resume (projects, awards, countries).
+2) About
+   - 150-word bio + 50-word short bio. Auto-timeline from roles/dates.
+3) Experience & Leadership
+   - For each entry: org, role, location, dates, 2–4 bullet impacts (results first).
+   - Filter chips: Energy, AI, Policy, Community.
+4) Projects & Ventures
+   - Cards with Problem → Approach → Outcome/metric; link slots (repo, media).
+5) Awards & Certifications
+   - Badge grid; year tags.
+6) Skills & Tools
+   - Tech & soft skills as chips; language proficiency meter.
+7) Writing (optional if none)
+   - MDX-ready blog with tags (energy, AI, climate, policy).
+8) Contact
+   - Form (name, email, message, consent checkbox) + success/failure states; also render email/phone.
+9) Resume
+   - HTML render of resume + “Download PDF” button.
+
+COPYWRITING
+• Derive all copy from the PDF. Tone: mission-driven, practical, Africa-focused. Bilingual output.
+• Provide both EN and FR strings for UI labels and key sections; include a language toggle (EN/FR).
+
+TECHNICAL SPEC (production-ready)
+• Stack: Next.js 14 (App Router) + TailwindCSS + TypeScript. (Optionally set up shadcn/ui, but keep dependencies light.)
+• Components: <Header/>, <Hero/>, <StatCard/>, <Timeline/>, <ProjectCard/>, <BadgeGrid/>, <LangToggle/>, <ContactForm/>.
+• Theming: Tailwind + CSS variables for the palette above; dark mode default.
+• Content: store structured data in /data/*.json (profile, experience, projects, awards, skills); no hard-coded text in components.
+• SEO: next-seo config, sitemap.xml, robots.txt, OG/Twitter images, canonical URL.
+• Schema.org JSON-LD: Person + optional Organization.
+• Accessibility: semantic landmarks, keyboard focus, ARIA where needed, prefers-reduced-motion.
+• Performance: Lighthouse ≥90 across Perf/SEO/A11y/Best Practices; next/image; lazy-load noncritical media.
+• Analytics: lightweight (e.g., Vercel Analytics stub only).
+
+FORMS & INTEGRATIONS
+• Contact form: client-side validation; stub server action with TODO note for EmailJS/Resend integration.
+• Newsletter field: placeholder only (no external calls).
+
+DELIVERABLES
+1) Zipped codebase (Next.js + Tailwind) ready for Vercel; include a concise README (setup, customize, deploy).
+2) /data/*.json files populated from the PDF (placeholders only if missing).
+3) Brand tokens (colors, radius, typography scale) documented in the README.
+4) One SVG hero image matching the visual direction.
+5) Copy deck (EN/FR) as Markdown.
+6) A “Verify info” checklist: phone, email, any ambiguous dates/roles detected.
+
+ACCEPTANCE CRITERIA
+• No external scraping or copying; do not reference charlot-dedjinou.vercel.app.
+• All text sourced from “Profile (5).pdf” or clearly marked placeholders.
+• Clean, bilingual UI with dark mode default, color palette exactly as specified.
+• Filterable Projects/Experience; mobile-first responsive.
+• Provide (A) desktop & mobile visual previews, (B) site map, (C) EN/FR draft copy, (D) downloadable zip.
+
+BEGIN
+1) Extract/normalize data from “Profile (5).pdf”.
+2) Present a one-page visual preview (desktop + mobile frames) and the site map.
+3) Provide the EN/FR copy deck.
+4) Provide the zipped codebase for download.

verification.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <!-- Standard head content -->
+    <title>Verify Information | Dossiya DAKOU</title>
+</head>
+<body class="bg-onyx text-offwhite font-source min-h-screen">
+    <!-- Navbar -->
+
+    <section class="px-6 md:px-12 lg:px-24 py-16 min-h-[80vh]">
+        <div class="max-w-4xl mx-auto">
+            <h2 class="text-3xl font-inter font-bold text-deepblue mb-8">Verify Information</h2>
+            
+            <div class="bg-gray-900 bg-opacity-50 p-6 rounded-lg border border-orange">
+                <h3 class="text-xl font-inter text-orange mb-4">Items to Verify</h3>
+                
+                <div class="space-y-4">
+                    <div class="flex items-start">
+                        <input type="checkbox" id="phone-check" class="mt-1 mr-3">
+                        <label for="phone-check">
+                            <span class="font-medium">Phone Number Format:</span> 
+                            <span class="text-teal">+250 796 892 820</span>
+                            <p class="text-sm text-gray-400">(Currently showing international format)</p>
+                        </label>
+                    </div>
+
+                    <div class="flex items-start">
+                        <input type="checkbox" id="role-dates" class="mt-1 mr-3">
+                        <label for="role-dates">
+                            <span class="font-medium">IOM Role Duration:</span> 
+                            <span class="text-teal">May 2025 - July 2025</span>
+                            <p class="text-sm text-gray-400">(Future dates need confirmation)</p>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+</body>
+</html>