Spaces:

ddakou
/

dossiyadakou

Running

App Files Files Community

ddakou commited on Sep 4, 2025

Commit

5a769a3

verified ·

1 Parent(s): ce0fb0f

ROLE

Browse files

You are a senior brand designer + full-stack web engineer. Build a polished, conversion-optimized personal portfolio website for Dossiya DAKOU (Mastercard Foundation Scholar; MSE in Sustainable Engineering at ASU).

SOURCE CONTENT
Parse all copy, roles, dates, awards, skills, languages, education, and links from the attached PDF resume. Use the exact spellings and dates you find there. (If any field looks inconsistent—e.g., phone formats—keep my original value but surface a “Verify info” checklist on the editor page.)
[Resume PDF is attached to this chat.]

AUDIENCE & GOAL
• Audience: scholarship funders (e.g., Mastercard Foundation), fellowship selectors, climate/energy program managers, and partners in Africa.
• Goals: (1) communicate credibility and impact quickly; (2) make it easy to contact/ book me; (3) highlight Africa-focused energy + AI leadership.

VISUAL DIRECTION
• Theme: modern, editorial, “African tech” vibe; confident and minimal.
• Modes: light/dark switch. Dark is default.
• Palette: Onyx #0B0B0F (bg), Off-white #F7F7F8 (text on dark), Teal #2CA7A0 (accents/links), Deep blue #0B3C5D (headings), Orange #E67E22 (CTAs).
• Typography: Inter (UI), Source Sans (body). Generous white space; subtle micro-animations.
• Imagery: hero with abstract Africa energy map motif + subtle gradient; placeholders where needed.

INFORMATION ARCHITECTURE (pages/sections)
1) Home
- Above the fold: Name, role (“Sustainable Engineering & Climate Innovation”), 1–2 line mission statement derived from my Summary.
- Primary CTA: “Contact / Book a call”; Secondary: “Download CV (PDF)”.
- Social icons from resume (LinkedIn, personal site).
- Impact highlights (3 stats/cards drawn from awards & leadership).
2) About
- 150-word bio + 50-word short bio variants; timeline component auto-built from roles/dates.
3) Experience & Leadership
- Group by org; display role, location, dates, 2–4 bullet impacts each.
4) Projects & Ventures
- Cards for initiatives mentioned in the resume (e.g., GEFE2, E-Cold/solar cold-chain, Student Energy, GAUC items). Each card: problem → solution → outcome/metric.
5) Awards & Certifications
- Badge grid from “Honors-Awards” and “Certifications”.
6) Skills & Tools
- Chips for technical & soft skills (Python, problem solving, sustainable engineering, etc.); language proficiency meter.
7) Speaking & Media (optional if none)
- Slots to add talks/media later.
8) Writing (optional)
- Blog/notes section (MDX) with tags: energy, AI, climate, policy.
9) Contact
- Form with name/email/message, consent checkbox, spam protection, success/failure states. Also render email/phone from resume.
10) Resume
- Rendered HTML view + “Download PDF” button.

COPYWRITING
• Derive headlines and section copy from the resume. Keep tone: mission-driven, practical, Africa-focused.
• Produce both EN and FR versions; include a language toggle (EN/FR).
• Microcopy examples:
- CTA: “Collaborate on impact”
- Empty states: “More case studies coming soon.”

TECHNICAL SPEC (deliver production-ready code)
• Stack: Next.js 14 (App Router) + TailwindCSS + shadcn/ui + Framer Motion; TypeScript.
• Components: <Hero/>, <StatCard/>, <Timeline/>, <ProjectCard/>, <BadgeGrid/>, <LangToggle/>, <ContactForm/> with server actions.
• Theming: Tailwind + CSS variables for palette above; dark mode default.
• Data: content in /data/*.json or MDX; easy to extend without code changes.
• SEO: next-seo config, sitemap.xml, robots.txt, OpenGraph/Twitter images, canonical URLs.
• Structured data: JSON-LD for Person and Organization.
• Performance: Lighthouse ≥ 90 on Perf/SEO/A11y/Best Practices; lazy-load images; use next/image; prefetch critical routes.
• Accessibility: semantic landmarks, focus states, prefers-reduced-motion, aria labels.
• Analytics: lightweight (e.g., Vercel Analytics).
• Deployment: ready for Vercel; include README with one-click deploy steps.

INTERACTIVE ELEMENTS
• “Impact across Africa” mini-map (static asset now; data-driven later).
• Filterable experience/projects (by theme: Energy, AI, Policy, Community).
• Timeline animation on scroll; reduced-motion fallback.

FORMS & INTEGRATIONS
• Contact form → email (e.g., Resend or EmailJS) + simple validation.
• Newsletter field (placeholder integration).

FINAL OUTPUTS
1) Full site code (zipped repo tree) with README.
2) Copy deck (EN/FR) as Markdown.
3) Brand tokens (colors, type scale) as a Tailwind config snippet.
4) One hero image (SVG) that matches the visual direction.
5) “Verify info” checklist listing phone, email, and any ambiguous dates found in the PDF.

QUALITY BAR
• No lorem ipsum. All content must be sourced from the PDF.
• Respect original spellings and organizations; do not invent roles.
• If a section has no content, hide it and leave a TODO in README.

BEGIN by extracting and normalizing my data from the PDF, then present:
(A) a one-page visual preview (mobile & desktop frames),
(B) the site map,
(C) draft copy in EN/FR,
(D) a downloadable zip of the codebase.
- Follow Up Deployment

Files changed (2) hide show

index.html +81 -18
prompts.txt +89 -0

index.html CHANGED Viewed

@@ -1,20 +1,83 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
     <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
-    <div class="w-full">
-      <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
-      <h1 class="text-4xl lg:text-6xl font-bold font-sans">
-        <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
-        Ask me anything.
-      </h1>
-    </div>
-      <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
-    <script></script>
-  </body>
-</html>

 <!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dossiya DAKOU | Sustainable Engineering & Climate Innovation</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        onyx: '#0B0B0F',
+                        offwhite: '#F7F7F8',
+                        teal: '#2CA7A0',
+                        deepblue: '#0B3C5D',
+                        orange: '#E67E22',
+                    },
+                    fontFamily: {
+                        inter: ['Inter', 'sans-serif'],
+                        source: ['Source Sans Pro', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap">
+</head>
+<body class="bg-onyx text-offwhite font-source min-h-screen">
+    <!-- Navbar -->
+    <nav class="border-b border-gray-800 py-4 px-6 md:px-12 lg:px-24 flex justify-between items-center">
+        <a href="#" class="text-teal font-inter font-bold text-xl">Dossiya DAKOU</a>
+        <div class="flex items-center space-x-6">
+            <button id="theme-toggle" class="text-teal hover:text-orange transition">
+                <i data-feather="moon"></i>
+            </button>
+            <div class="flex space-x-4">
+                <a href="#" class="text-teal hover:text-orange transition">EN</a>
+                <a href="#" class="text-gray-500 hover:text-orange transition">FR</a>
+            </div>
+            <button class="hidden md:block bg-orange text-onyx px-4 py-2 rounded-md hover:bg-opacity-90 transition">
+                Contact / Book a call
+            </button>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="px-6 md:px-12 lg:px-24 py-16 md:py-24 relative">
+        <div class="absolute inset-0 opacity-20 z-0 bg-[url('http://static.photos/abstract/1200x630/42')] bg-cover bg-center"></div>
+        <div class="relative z-10 max-w-3xl">
+            <h1 class="text-4xl md:text-6xl font-inter font-bold text-deepblue mb-4">Dossiya DAKOU</h1>
+            <h2 class="text-2xl md:text-3xl font-inter font-medium text-teal mb-6">Sustainable Engineering & Climate Innovation</h2>
+            <p class="text-lg md:text-xl mb-8">Mastercard Foundation Scholar pioneering sustainable energy solutions with AI for African communities.</p>
+            <div class="flex flex-wrap gap-4">
+                <a href="#contact" class="bg-orange text-onyx px-6 py-3 rounded-md hover:bg-opacity-90 transition font-medium">Contact / Book a call</a>
+                <a href="#" class="border border-teal text-teal px-6 py-3 rounded-md hover:bg-teal hover:bg-opacity-10 transition font-medium">Download CV (PDF)</a>
+            </div>
+        </div>
+    </section>
+    <!-- Impact Stats -->
+    <section class="px-6 md:px-12 lg:px-24 py-12 grid md:grid-cols-3 gap-6">
+        <div class="bg-gray-900 bg-opacity-50 p-6 rounded-lg border border-gray-800">
+            <h3 class="text-xl font-inter text-deepblue mb-2">X+ Projects</h3>
+            <p class="text-teal">Delivering clean energy solutions across Africa</p>
+        </div>
+        <div class="bg-gray-900 bg-opacity-50 p-6 rounded-lg border border-gray-800">
+            <h3 class="text-xl font-inter text-deepblue mb-2">Y+ People Impacted</h3>
+            <p class="text-teal">Through sustainable engineering initiatives</p>
+        </div>
+        <div class="bg-gray-900 bg-opacity-50 p-6 rounded-lg border border-gray-800">
+            <h3 class="text-xl font-inter text-deepblue mb-2">Z+ Awards</h3>
+            <p class="text-teal">Recognized for climate innovation leadership</p>
+        </div>
+    </section>
+    <!-- Social Links -->
+    <div class="px-6 md:px-12 lg:px-24 py-6 flex gap-4">
+</body>
+</html>

prompts.txt CHANGED Viewed

@@ -195,3 +195,92 @@ Produce the entire project as a sequence of file blocks. For each file, print:
 ---FILE: <relative_path_from_repo_root>
 ```<language or plain>
 <file contents>

 ---FILE: <relative_path_from_repo_root>
 ```<language or plain>
 <file contents>
+ROLE
+You are a senior brand designer + full-stack web engineer. Build a polished, conversion-optimized personal portfolio website for Dossiya DAKOU (Mastercard Foundation Scholar; MSE in Sustainable Engineering at ASU).
+SOURCE CONTENT
+Parse all copy, roles, dates, awards, skills, languages, education, and links from the attached PDF resume. Use the exact spellings and dates you find there. (If any field looks inconsistent—e.g., phone formats—keep my original value but surface a “Verify info” checklist on the editor page.)
+[Resume PDF is attached to this chat.]
+AUDIENCE & GOAL
+• Audience: scholarship funders (e.g., Mastercard Foundation), fellowship selectors, climate/energy program managers, and partners in Africa.
+• Goals: (1) communicate credibility and impact quickly; (2) make it easy to contact/ book me; (3) highlight Africa-focused energy + AI leadership.
+VISUAL DIRECTION
+• Theme: modern, editorial, “African tech” vibe; confident and minimal.
+• Modes: light/dark switch. Dark is default.
+• Palette: Onyx #0B0B0F (bg), Off-white #F7F7F8 (text on dark), Teal #2CA7A0 (accents/links), Deep blue #0B3C5D (headings), Orange #E67E22 (CTAs).
+• Typography: Inter (UI), Source Sans (body). Generous white space; subtle micro-animations.
+• Imagery: hero with abstract Africa energy map motif + subtle gradient; placeholders where needed.
+INFORMATION ARCHITECTURE (pages/sections)
+1) Home
+   - Above the fold: Name, role (“Sustainable Engineering & Climate Innovation”), 1–2 line mission statement derived from my Summary.
+   - Primary CTA: “Contact / Book a call”; Secondary: “Download CV (PDF)”.
+   - Social icons from resume (LinkedIn, personal site).
+   - Impact highlights (3 stats/cards drawn from awards & leadership).
+2) About
+   - 150-word bio + 50-word short bio variants; timeline component auto-built from roles/dates.
+3) Experience & Leadership
+   - Group by org; display role, location, dates, 2–4 bullet impacts each.
+4) Projects & Ventures
+   - Cards for initiatives mentioned in the resume (e.g., GEFE2, E-Cold/solar cold-chain, Student Energy, GAUC items). Each card: problem → solution → outcome/metric.
+5) Awards & Certifications
+   - Badge grid from “Honors-Awards” and “Certifications”.
+6) Skills & Tools
+   - Chips for technical & soft skills (Python, problem solving, sustainable engineering, etc.); language proficiency meter.
+7) Speaking & Media (optional if none)
+   - Slots to add talks/media later.
+8) Writing (optional)
+   - Blog/notes section (MDX) with tags: energy, AI, climate, policy.
+9) Contact
+   - Form with name/email/message, consent checkbox, spam protection, success/failure states. Also render email/phone from resume.
+10) Resume
+   - Rendered HTML view + “Download PDF” button.
+COPYWRITING
+• Derive headlines and section copy from the resume. Keep tone: mission-driven, practical, Africa-focused.
+• Produce both EN and FR versions; include a language toggle (EN/FR).
+• Microcopy examples:
+  - CTA: “Collaborate on impact”
+  - Empty states: “More case studies coming soon.”
+TECHNICAL SPEC (deliver production-ready code)
+• Stack: Next.js 14 (App Router) + TailwindCSS + shadcn/ui + Framer Motion; TypeScript.
+• Components: <Hero/>, <StatCard/>, <Timeline/>, <ProjectCard/>, <BadgeGrid/>, <LangToggle/>, <ContactForm/> with server actions.
+• Theming: Tailwind + CSS variables for palette above; dark mode default.
+• Data: content in /data/*.json or MDX; easy to extend without code changes.
+• SEO: next-seo config, sitemap.xml, robots.txt, OpenGraph/Twitter images, canonical URLs.
+• Structured data: JSON-LD for Person and Organization.
+• Performance: Lighthouse ≥ 90 on Perf/SEO/A11y/Best Practices; lazy-load images; use next/image; prefetch critical routes.
+• Accessibility: semantic landmarks, focus states, prefers-reduced-motion, aria labels.
+• Analytics: lightweight (e.g., Vercel Analytics).
+• Deployment: ready for Vercel; include README with one-click deploy steps.
+INTERACTIVE ELEMENTS
+• “Impact across Africa” mini-map (static asset now; data-driven later).
+• Filterable experience/projects (by theme: Energy, AI, Policy, Community).
+• Timeline animation on scroll; reduced-motion fallback.
+FORMS & INTEGRATIONS
+• Contact form → email (e.g., Resend or EmailJS) + simple validation.
+• Newsletter field (placeholder integration).
+FINAL OUTPUTS
+1) Full site code (zipped repo tree) with README.
+2) Copy deck (EN/FR) as Markdown.
+3) Brand tokens (colors, type scale) as a Tailwind config snippet.
+4) One hero image (SVG) that matches the visual direction.
+5) “Verify info” checklist listing phone, email, and any ambiguous dates found in the PDF.
+QUALITY BAR
+• No lorem ipsum. All content must be sourced from the PDF.
+• Respect original spellings and organizations; do not invent roles.
+• If a section has no content, hide it and leave a TODO in README.
+BEGIN by extracting and normalizing my data from the PDF, then present:
+(A) a one-page visual preview (mobile & desktop frames),
+(B) the site map,
+(C) draft copy in EN/FR,
+(D) a downloadable zip of the codebase.