first commit

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

frontend/.idea/dictionaries/project.xml

@@ -0,0 +1,3 @@
+<component name="ProjectDictionaryState">
+  <dictionary name="project" />
+</component>

frontend/.idea/encodings.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
+</project>

frontend/.idea/frontend.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

frontend/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/frontend.iml" filepath="$PROJECT_DIR$/.idea/frontend.iml" />
+    </modules>
+  </component>
+</project>

frontend/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/api/projects/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  const body = await req.json();
+
+  const res = await fetch("http://127.0.0.1:5000/api/projects/", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "x-api-key": process.env.API_KEY!,
+    },
+    body: JSON.stringify(body),
+  });
+
+  const data = await res.json();
+  return NextResponse.json(data, { status: res.status });
+}

frontend/app/components/About.tsx

@@ -0,0 +1,24 @@
+async function GetAboutDatas(){
+    const res = await fetch(`${process.env.BACKEND_URL}/cv/about`, {
+        cache: process.env.CACHE
+    });
+
+    if(!res.ok){
+        throw new Error("Erreur lors de la lecture des données de contact.")
+    }
+    return res.json();
+}
+
+export default async function About(){
+    const about_text = await GetAboutDatas();
+
+    return (
+        <section className="dev-hero">
+            <div className="container container--narrow">
+                <span className="eyebrow">Développeur web</span>
+                <h1 className="headline headline--code">Anthony Violet</h1>
+                <p className="subheadline">{about_text}</p>
+            </div>
+        </section>
+    );
+}

frontend/app/components/Contact.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+
+type ContactData = {
+  email?: string;
+  linkedin?: string;
+  github?: string;
+};
+
+export default function ContactComponent() {
+  const pathname = usePathname();
+  const onContactPage = pathname === "/contact";
+
+  const [data, setData] = useState<ContactData | null>(null);
+
+  useEffect(() => {
+    if (!onContactPage) return;
+
+    // Essaye avec BACKEND_URL, sinon fallback vers une route locale hypothétique
+    const backend = (process.env.BACKEND_URL as string) || "http://127.0.0.1:5000/api";
+    const url = backend ? `${backend}/contact` : "http://127.0.0.1:5000/api/contact";
+
+    fetch(url, { cache: "no-store" })
+      .then((res) => (res.ok ? res.json() : Promise.reject(new Error("fetch contact failed"))))
+      .then((json) => setData(json))
+      .catch(() => setData(null));
+  }, [onContactPage]);
+
+  // Si on n'est pas sur la page /contact => juste un lien
+  if (!onContactPage) {
+    return (
+      <div className="block">
+        <div className="btn-group">
+          <Link href="/contact" className="btn btn--primary btn--pill">
+            Me contacter
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Page /contact => liens + formulaire
+  return (
+    <div className="block">
+      <div className="stack">
+        <div className="btn-group">
+          {data?.linkedin ? (
+            <a href={data.linkedin} target="_blank" rel="noopener noreferrer" className="link-button">
+              LinkedIn
+            </a>
+          ) : null}
+          {data?.github ? (
+            <a href={data.github} target="_blank" rel="noopener noreferrer" className="link-button">
+              GitHub
+            </a>
+          ) : null}
+          {data?.email ? (
+            <a href={`mailto:${data.email}`} className="link-button">
+              Email direct
+            </a>
+          ) : null}
+        </div>
+
+        {data?.email ? (
+          <form action={`mailto:${data.email}`} method="post" encType="text/plain" className="stack">
+            <div>
+              <label htmlFor="name">Votre nom</label>
+              <input id="name" name="Nom" type="text" required />
+            </div>
+
+            <div>
+              <label htmlFor="email">Votre email</label>
+              <input id="email" name="Email" type="email" required />
+            </div>
+
+            <div>
+              <label htmlFor="subject">Sujet</label>
+              <input id="subject" name="Sujet" type="text" placeholder="Prise de contact" />
+            </div>
+
+            <div>
+              <label htmlFor="message">Message</label>
+              <textarea id="message" name="Message" required />
+            </div>
+
+            <div className="btn-group">
+              <button type="submit" className="btn btn--primary btn--pill">
+                Envoyer
+              </button>
+              <button type="reset" className="btn btn--ghost">
+                Réinitialiser
+              </button>
+            </div>
+          </form>
+        ) : (
+          <p className="u-muted">Une erreur est survenue. Vous pouvez tout de même me contacter directement par email : <a href="mailto:violet.anthony90@gmail.com">Me joindre par email</a></p>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/app/components/Header.tsx

@@ -0,0 +1,148 @@
+"use client";
+// app/components/Header.tsx
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+export default function Header() {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+  const [isTop, setIsTop] = useState(true);
+
+  // Initialise le thème en fonction du localStorage ou de la préférence système
+  useEffect(() => {
+    const saved = typeof window !== "undefined" ? localStorage.getItem("theme") : null;
+    const prefersDark = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const initial = (saved === "light" || saved === "dark") ? (saved as "light" | "dark") : (prefersDark ? "dark" : "light");
+    setTheme(initial);
+    document.documentElement.setAttribute("data-theme", initial);
+  }, []);
+
+  // Détecte si l'on est tout en haut de la page
+  useEffect(() => {
+    const onScroll = () => setIsTop(window.scrollY <= 0);
+    onScroll(); // état initial au chargement
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  const toggleTheme = () => {
+    const next = theme === "dark" ? "light" : "dark";
+    setTheme(next);
+    document.documentElement.setAttribute("data-theme", next);
+    try {
+      localStorage.setItem("theme", next);
+    } catch {}
+  };
+
+  return (
+      <header className={isTop ? "minimalist-pro is-top" : "minimalist-pro"}>
+          <div className="logo">
+              <Link href="/">
+                  <span className="name">Anthony Violet</span>
+                  <span className="tagline">Développeur Freelance & Digital Nomad</span>
+              </Link>
+          </div>
+          <nav>
+              <ul>
+                  <li><Link href="/projects" >Projets</Link></li>
+                  <li><Link href="/competences">Compétences</Link></li>
+                  <li><Link href="#blog">Blog Voyage</Link></li>
+                  <li><Link href="/contact">Contact</Link></li>
+                  <li><Link href="https://fr.malt.be/profile/anthonyviolet1" target="_blank">Malt</Link></li>
+                  <li><Link href="https://www.linkedin.com/in/anthony-violet/" target="_blank">LinkedIn</Link></li>
+              </ul>
+          </nav>
+          <div className="cta">
+              <button
+                  type="button"
+                  className="theme-toggle__btn"
+                  aria-label={theme === "dark" ? "Activer le thème clair" : "Activer le thème sombre"}
+                  onClick={toggleTheme}
+                  title={theme === "dark" ? "Mode clair" : "Mode sombre"}
+              >
+                  {theme === "dark" ? "☀️" : "🌙"}
+              </button>
+              <Link href="mailto:tonemail@domaine.com" className="button">Travaillons ensemble</Link>
+          </div>
+      </header>
+
+      /*<header className="cyberpunk">
+          <div className="glitch-logo">
+              <Link href="/">
+                  <span data-text="Anthony Violet">Anthony Violet</span>
+                  <span className="subtitle">// Développeur Full Stack & Créateur de Jeux</span>
+              </Link>
+          </div>
+          <nav className="neon-nav">
+              <ul>
+                  <li><Link href="#projets" className="neon-link">/projets</Link></li>
+                  <li><Link href="#tech" className="neon-link">/tech-stack</Link></li>
+                  <li><Link href="#blog" className="neon-link">/toine-traveller</Link></li>
+                  <li><Link href="#contact" className="neon-link">/contact@terminal</Link></li>
+              </ul>
+          </nav>
+          <div className="status-bar">
+              <span>En ligne █</span>
+              <span>Disponible pour missions</span>
+          </div>
+      </header>
+
+      <header className="sidebar-header">
+          <div className="profile-pic">
+              <img src="ton-avatar.jpg" alt="Anthony Violet" />
+          </div>
+          <div className="profile-info">
+              <h1>Anthony Violet</h1>
+              <p>Freelance Dev | Digital Nomad | Builder de jeux & apps</p>
+          </div>
+          <nav>
+              <ul>
+                  <li><Link href="#projets"><i className="icon-code"></i> Projets</Link></li>
+                  <li><Link href="#about"><i className="icon-user"></i> À propos</Link></li>
+                  <li><Link href="#blog"><i className="icon-globe"></i> Blog</Link></li>
+                  <li><Link href="#contact"><i className="icon-mail"></i> contact</Link></li>
+              </ul>
+          </nav>
+          <div className="social-links">
+              <Link href="https://github.com/tonuser" target="_blank"><i className="icon-github"></i></Link>
+              <Link href="https://linkedin.com/in/anthony-violet" target="_blank"><i className="icon-linkedin"></i></Link>
+          </div>
+      </header>
+
+      <header className="interactive-header">
+          <div className="typewriter">
+              <h1>Bonjour, je suis <span className="typed-text">Anthony Violet</span></h1>
+              <p>Je code en <span className="tech-tag">JavaScript</span>, <span className="tech-tag">Python</span>, et j'explore le monde.</p>
+          </div>
+          <nav>
+              <ul>
+                  <li><Link href="#projets">Mes réalisations</Link></li>
+                  <li><Link href="#cv">Mon CV</Link></li>
+                  <li><Link href="#blog">Mes aventures</Link></li>
+              </ul>
+          </nav>
+          <div className="language-switcher">
+              <button>FR</button>
+              <button>EN</button>
+          </div>
+      </header>
+
+      <header className="dark-header">
+          <div className="container">
+              <Link href="/" className="logo">
+                  <img src="logo.svg" alt="Logo Anthony Violet" />
+              </Link>
+              <nav>
+                  <ul>
+                      <li><Link href="#projets">Projets</Link></li>
+                      <li><Link href="#services">Services</Link></li>
+                      <li><Link href="#blog">Blog</Link></li>
+                      <li><Link href="#contact">Me contacter</Link></li>
+                  </ul>
+              </nav>
+          </div>
+          <div className="theme-toggle">
+              <button id="theme-button"><i className="icon-moon"></i></button>
+          </div>
+      </header>*/
+    );
+}

frontend/app/components/Services.tsx

@@ -0,0 +1,35 @@
+async function GetServices() {
+    const res = await fetch(`${process.env.BACKEND_URL}/services`, {
+        cache: process.env.CACHE
+    });
+
+    if (!res.ok) {
+        throw new Error("Erreur lors de la lecture des services du CV.")
+    }
+    return res.json();
+}
+
+export default async function Services() {
+    const services = await GetServices();
+
+    return (
+        <section id="services" className="section">
+            <div className="container">
+                <h2 className="section-title">Services proposés</h2>
+                <ul className="grid-3">
+                    {services.map((service: any) => (
+                        <li key={service.id} className="service-card card feature">
+                            <span className="feature__icon" aria-hidden="true" />
+                            <div>
+                                <h3 className="feature__title">{service.name}</h3>
+                                {"description" in service && service.description ? (
+                                    <p className="u-muted">{service.description}</p>
+                                ) : null}
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </section>
+    )
+}

frontend/app/components/Skills.tsx

@@ -0,0 +1,73 @@
+async function GetSkills() {
+    const res = await fetch(`${process.env.BACKEND_URL}/cv/skills`, {
+        cache: process.env.CACHE
+    });
+
+    if (!res.ok) {
+        throw new Error("Erreur lors du chargement des skills du CV");
+    }
+    return res.json();
+}
+export default async function Skills(){
+    const skills = await GetSkills();
+
+    const obj: Record<string, string[]> = Array.isArray(skills) ? (skills[0] ?? {}) : {};
+    const entries = Object.entries(obj) as [string, string[]][];
+
+    if (entries.length === 0) {
+        return (
+            <section id="skills" className="section">
+                <div className="container">
+                    <h2 className="section-title">Mes compétences</h2>
+                    <p className="u-muted">Aucune compétence à afficher.</p>
+                </div>
+            </section>
+        );
+    }
+
+    return (
+        /*
+        *
+            {mySkillsEntries.length > 0 && (
+                <section id="competences" className="section">
+                    <div className="container">
+                        <h2 className="section-title">Compétences clés</h2>
+                        <ul className="skill-grid">
+                            {mySkillsEntries.map(([category, items]) => (
+                                <li key={category} className="skill-card">
+                                    <h3 className="skill-card__title">{category}</h3>
+                                    <div className="skill-card__tags">
+                                        {items.map((it) => (
+                                            <span key={it} className="badge">{it}</span>
+                                        ))}
+                                    </div>
+
+                                    <div className="skill-meter" aria-hidden="true">
+                                        <div className="skill-meter__bar" style={{["--level" as any]: "75%"}}/>
+                                    </div>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </section>
+            )}
+        * */
+        <section id="competences" className="section">
+            <div className="container">
+                <h2 className="section-title">Mes compétences</h2>
+                <ul className="skill-grid">
+                    {entries.map(([category, skills]) => (
+                        <li key={category} className="skill-card">
+                            <h3 className="skill-card__title">{category}</h3>
+                            <div className="skill-card__tags">
+                                {skills.map((skill: string) => (
+                                    <span key={skill} className="badge">{skill}</span>
+                                ))}
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </section>
+    );
+}

frontend/app/contact/page.tsx

@@ -0,0 +1,8 @@
+import ContactComponent from "@/app/components/Contact";
+export default function Contact() {
+    return (
+        <div>
+            <ContactComponent />
+        </div>
+    )
+}

frontend/app/css/colors.css

@@ -0,0 +1,69 @@
+/* Design tokens — CV/Portfolio blanc & orange */
+:root {
+    /* Couleurs de base (clair) */
+    --color-bg: #ffffff;
+    --color-surface: #ffffff;
+    --color-text: #1f2937;
+    --color-muted: #6b7280;
+    --color-border: #efefef;
+    --color-accent: #ff6b35;
+
+    /* Variantes d’accent */
+    --color-accent-50: #fff4ec;
+    --color-accent-100: #ffe4d6;
+    --color-accent-200: #ffcfba;
+    --color-accent-600: #e55a2b;
+    --color-accent-700: #c74d25;
+
+    /* Rayons et ombres */
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08);
+
+    /* Layout */
+    --header-height: 80px;
+    --container-max: 1100px;
+
+    /* Espacements */
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+}
+
+/* Thème sombre (préférence système par défaut) */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-bg: #1f2937;
+        --color-surface: #0e141b;
+        --color-text: #e5e7eb;
+        --color-muted: #9ca3af;
+        --color-border: #0b0f14;
+        /* accent inchangé pour la cohérence de marque */
+    }
+}
+
+/* Thème forcé via data-attribute */
+html[data-theme="light"] {
+    --color-bg: #ffffff;
+    --color-surface: #FFF7F7;
+    --color-text: #1f2937;
+    --color-muted: #6b7280;
+    --color-border: #efefef;
+}
+
+html[data-theme="dark"] {
+    --color-bg: #1f2937;
+    --color-surface: #0e141b;
+    --color-text: #e5e7eb;
+    --color-muted: #9ca3af;
+    --color-border: #0b0f14;
+    --color-accent-50: #041D36;
+}

frontend/app/css/components.css

@@ -0,0 +1,576 @@
+/* Composants réutilisables — minimal & pro */
+
+/* Titres de section avec liseré orange */
+.section-title {
+  display: inline-block;
+  position: relative;
+  padding-bottom: 0.4rem;
+  margin-bottom: var(--space-6, 1.5rem);
+}
+
+.section-title::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 56px;
+  height: 3px;
+  background: var(--color-accent, #ff6b35);
+  border-radius: 999px;
+}
+
+/* Grille responsive */
+.grid {
+  display: grid;
+  gap: var(--space-6, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+}
+
+/* Carte */
+.card {
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  padding: var(--space-6, 1.5rem);
+  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  border-color: var(--color-accent-100, #ffe4d6);
+  box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
+}
+
+/* Blocs génériques (layout de sections) */
+.block {
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-6, 1.5rem);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+}
+
+.block--split {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6, 1.5rem);
+  flex-wrap: wrap;
+}
+
+.block__media {
+  flex: 0 0 96px;
+  height: 96px;
+  border-radius: var(--radius-md, 10px);
+  background: var(--color-accent-50, #fff4ec);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+}
+
+.block__content {
+  flex: 1 1 360px;
+}
+
+/* Feature (icône + texte) */
+.feature {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4, 1rem);
+}
+
+.feature__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  background: var(--color-accent-50, #fff4ec);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+  box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.08);
+}
+
+.feature__title {
+  margin: 0;
+}
+
+/* Barre d'appel à action */
+.cta-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4, 1rem);
+  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
+  border-radius: var(--radius-md, 10px);
+  background: var(--color-accent-50, #fff4ec);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+}
+
+/* Blocs génériques (layout de sections) */
+.block {
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-6, 1.5rem);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+}
+
+.block--split {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6, 1.5rem);
+  flex-wrap: wrap;
+}
+
+.block__media {
+  flex: 0 0 96px;
+  height: 96px;
+  border-radius: var(--radius-md, 10px);
+  background: var(--color-accent-50, #fff4ec);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+}
+
+.block__content {
+  flex: 1 1 360px;
+}
+
+/* Feature (icône + texte) */
+.feature {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4, 1rem);
+}
+
+.feature__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  background: var(--color-accent-50, #fff4ec);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+  box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.08);
+}
+
+.feature__title {
+  margin: 0;
+}
+
+/* Barre d'appel à action */
+.cta-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4, 1rem);
+  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
+  border-radius: var(--radius-md, 10px);
+  background: var(--color-accent-50, #fff4ec);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+}
+
+/* =========================
+   DEV HERO + badges techno
+   ========================= */
+.dev-hero {
+  position: relative;
+  background: linear-gradient(180deg, var(--color-surface), var(--color-accent-50, #fff4ec));
+  border-bottom: 1px solid var(--color-border, #efefef);
+  padding-block: var(--space-16, 4rem);
+  overflow: hidden;
+}
+
+.dev-hero::before {
+  content: "";
+  position: absolute;
+  inset: -10% -20% auto -20%;
+  height: 220px;
+  background: radial-gradient(closest-side, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 70%);
+  opacity: .35;
+  filter: blur(20px);
+}
+
+.dev-hero .headline {
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.dev-hero .subheadline {
+  color: var(--color-muted, #6b7280);
+  max-width: 70ch;
+}
+
+.tech-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: var(--space-4, 1rem);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+  background: var(--color-accent-50, #fff4ec);
+  color: var(--color-accent-700, #c74d25);
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.badge--mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  letter-spacing: .02em;
+}
+
+/* =========================
+   Projets — liste en cartes
+   ========================= */
+.projects-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-6, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+}
+
+.projects-list > li {
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-6, 1.5rem);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.projects-list > li:hover {
+  transform: translateY(-2px);
+  border-color: var(--color-accent-100, #ffe4d6);
+  box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
+}
+
+.projects-list h3 {
+  margin: 0 0 var(--space-2, 0.5rem);
+  font-size: 1.125rem;
+}
+
+.projects-list p {
+  margin: 0;
+  color: var(--color-muted, #6b7280);
+}
+
+/* =========================
+   Services — cartes (features)
+   ========================= */
+#services ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-6, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+}
+
+.service-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+}
+
+/* =====================================
+   Compétences — skill cards & meters
+   ===================================== */
+.skill-grid {
+  display: grid;
+  gap: var(--space-6, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+}
+
+/* Carte de compétence — plus expressive et accessible */
+.skill-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-6, 1.5rem);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+/* Accent latéral qui apparaît au survol (met en valeur la carte) */
+.skill-card::after {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: transparent;
+  border-top-left-radius: var(--radius-md, 10px);
+  border-bottom-left-radius: var(--radius-md, 10px);
+  transition: background-color 0.2s ease;
+}
+
+.skill-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--color-accent-100, #ffe4d6);
+  box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
+}
+
+.skill-card:hover::after {
+  background: var(--color-accent, #ff6b35);
+}
+
+/* Focus clavier visible (accessibilité) */
+.skill-card:focus-within {
+  border-color: var(--color-accent, #ff6b35);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent, #ff6b35) 22%, transparent);
+}
+
+/* Sous-blocs optionnels */
+.skill-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+}
+
+.skill-card__icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: var(--color-accent-50, #fff4ec);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+  flex: 0 0 auto;
+}
+
+.skill-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+}
+
+.skill-card__footer {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  padding-top: var(--space-4, 1rem);
+  border-top: 1px solid var(--color-border, #efefef);
+}
+
+.skill-card__title {
+  margin: 0 0 var(--space-3, 0.75rem);
+}
+
+.skill-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.skill-meter {
+  height: 8px;
+  background: #ffffff;
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.skill-meter__bar {
+  height: 100%;
+  width: var(--level, 70%);
+  background: linear-gradient(90deg, var(--color-accent, #ff6b35), var(--color-accent-700, #c74d25));
+}
+
+/* =====================================
+   Code block et stats
+   ===================================== */
+.code-block {
+  background: #0b0f14;
+  color: #e5e7eb;
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-6, 1.5rem);
+  border: 1px solid #1f2937;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.code-block .code-accent {
+  color: #ffb38f;
+}
+
+.stats {
+  display: grid;
+  gap: var(--space-6, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  margin-top: var(--space-6, 1.5rem);
+}
+
+.stat {
+  background: #ffffff;
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-5, 1.25rem);
+  text-align: center;
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+}
+
+.stat .stat__value {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--color-accent-700, #c74d25);
+}
+
+.stat .stat__label {
+  color: var(--color-muted, #6b7280);
+  font-size: 0.9rem;
+}
+
+/* =====================================
+   Catégories + puces (chips)
+   ===================================== */
+section > ul > li {
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
+}
+
+section > ul > li + li {
+  margin-top: var(--space-4, 1rem);
+}
+
+section > ul > li > h3 {
+  margin: 0 0 var(--space-3, 0.75rem);
+}
+
+section > ul > li > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+section > ul > li > ul > li {
+  padding: 0.25rem 0.5rem;
+  border-radius: 999px;
+  background: var(--color-accent-50, #fff4ec);
+  color: var(--color-accent-700, #c74d25);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+/* =========================
+   Projets — liste en cartes
+   ========================= */
+.projects-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-6, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+}
+
+.projects-list > li {
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-6, 1.5rem);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.projects-list > li:hover {
+  transform: translateY(-2px);
+  border-color: var(--color-accent-100, #ffe4d6);
+  box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
+}
+
+.projects-list h3 {
+  margin: 0 0 var(--space-2, 0.5rem);
+  font-size: 1.125rem;
+}
+
+.projects-list p {
+  margin: 0;
+  color: var(--color-muted, #6b7280);
+}
+
+/* =========================
+   Services — cartes simples
+   ========================= */
+#services ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-6, 1.5rem);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+}
+
+#services li {
+  position: relative;
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+#services li::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: var(--color-accent, #ff6b35);
+  border-top-left-radius: var(--radius-md, 10px);
+  border-bottom-left-radius: var(--radius-md, 10px);
+}
+
+#services li:hover {
+  transform: translateY(-2px);
+  border-color: var(--color-accent-100, #ffe4d6);
+  box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
+}
+
+/* =====================================
+   Compétences — catégories + puces (chips)
+   ===================================== */
+section > ul > li {
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-md, 10px);
+  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
+}
+
+section > ul > li + li {
+  margin-top: var(--space-4, 1rem);
+}
+
+section > ul > li > h3 {
+  margin: 0 0 var(--space-3, 0.75rem);
+}
+
+section > ul > li > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+section > ul > li > ul > li {
+  padding: 0.25rem 0.5rem;
+  border-radius: 999px;
+  background: var(--color-accent-50, #fff4ec);
+  color: var(--color-accent-700, #c74d25);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+  font-size: 0.85rem;
+  font-weight: 600;
+}

frontend/app/css/forms.css

@@ -0,0 +1,112 @@
+/* Formulaires minimalistes — blanc & orange */
+label {
+  display: block;
+  margin-bottom: var(--space-2, 0.5rem);
+  font-weight: 600;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="password"],
+input[type="number"],
+select,
+textarea {
+  width: 100%;
+  max-width: 640px;
+  background: #ffffff;
+  color: var(--color-text, #1f2937);
+  border: 1px solid var(--color-border, #efefef);
+  border-radius: var(--radius-sm, 6px);
+  padding: 0.625rem 0.75rem;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--color-accent-100, #ffe4d6);
+}
+
+textarea {
+  min-height: 140px;
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-muted, #6b7280);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--color-accent, #ff6b35);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent, #ff6b35) 22%, transparent);
+  background: #fff;
+}
+
+/* Boutons */
+button,
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm, 6px);
+  background: var(--color-accent, #ff6b35);
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.05s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+  text-decoration: none;
+}
+
+button:hover,
+.button:hover {
+  background: var(--color-accent-600, #e55a2b);
+  box-shadow: 0 6px 14px rgba(255, 107, 53, 0.2);
+}
+
+button:active,
+.button:active {
+  transform: translateY(0.5px);
+  background: var(--color-accent-700, #c74d25);
+}
+
+button:focus-visible,
+.button:focus-visible {
+  outline: 2px solid var(--color-accent, #ff6b35);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent, #ff6b35) 25%, transparent);
+}
+
+button:disabled,
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Variantes */
+.button--elevated {
+  box-shadow: 0 8px 18px rgba(255, 107, 53, 0.25);
+}
+
+.button--soft {
+  background: var(--color-accent-50, #fff4ec);
+  color: var(--color-accent-700, #c74d25);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+}
+
+.button--soft:hover {
+  background: var(--color-accent-100, #ffe4d6);
+  color: var(--color-accent-700, #c74d25);
+}
+
+.button--pill {
+  border-radius: 999px;
+}

frontend/app/css/globals.css

@@ -0,0 +1,131 @@
+/* Reset léger et bases */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg, #ffffff);
+  color: var(--color-text, #1f2937);
+  min-height: 100svh;
+  padding-top: var(--header-height, 80px); /* espace pour le header fixe */
+    transition: background-color 0.25s ease, color 0.25s ease;
+  transition: background-color 0.25s ease, color 0.25s ease;
+}
+
+/* Images fluides */
+img, svg, video {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Mise en page commune */
+main {
+  display: block;
+}
+
+.container {
+  max-width: var(--container-max, 1100px);
+  margin-inline: auto;
+  padding-inline: min(5vw, var(--space-6, 1.5rem));
+}
+
+.section {
+  padding-block: var(--space-16, 4rem) var(--space-12, 3rem);
+}
+
+.hero {
+  background: var(--color-surface, #ffffff);
+  border-bottom: 1px solid var(--color-border, #efefef);
+  box-shadow: inset 0 -6px 0 var(--color-accent-50, #fff4ec);
+  padding-block: var(--space-16, 4rem);
+}
+
+.hero h2 {
+  margin: 0 0 var(--space-2, 0.5rem);
+}
+
+.hero p {
+  margin: 0;
+  max-width: 60ch;
+  color: var(--color-muted, #6b7280);
+}
+
+/* Footer minimal */
+footer {
+  background: var(--color-bg, #ffffff);
+  border-top: 1px solid var(--color-border, #efefef);
+  margin-top: var(--space-16, 4rem);
+  padding: var(--space-6, 1.5rem) min(5vw, var(--space-6, 1.5rem));
+  color: var(--color-muted, #6b7280);
+  text-align: center;
+}
+
+/* Accessibilité et confort */
+:focus-visible {
+  outline: 2px solid var(--color-accent, #ff6b35);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm, 6px);
+}
+
+/* Sélection de texte en orange doux */
+::selection {
+  background: var(--color-accent-100, #ffe4d6);
+  color: var(--color-text, #1f2937);
+}
+
+/* Scroll fluide + offset pour header fixe */
+html {
+  scroll-behavior: smooth;
+  color-scheme: light;
+}
+
+html[data-theme="dark"] {
+  color-scheme: dark;
+  color-scheme: light;
+}
+
+html[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+/* Tout élément ciblé par un id laissera la place au header */
+[id] {
+  scroll-margin-top: calc(var(--header-height, 80px) + 12px);
+}
+
+/* Séparateur horizontal discret */
+hr {
+  border: 0;
+  height: 1px;
+  background: var(--color-border, #efefef);
+  margin: var(--space-8, 2rem) 0;
+}
+
+/* Variantes de section */
+.section--alt {
+  background: var(--color-accent-50, #fff4ec);
+  border-top: 1px solid var(--color-border, #efefef);
+  border-bottom: 1px solid var(--color-border, #efefef);
+}
+
+.lead {
+  font-size: 1.125rem;
+  color: var(--color-muted, #6b7280);
+}
+
+/* Fin: préférences de mouvement */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}

frontend/app/css/header_CBPNK.css

@@ -0,0 +1,66 @@
+.cyberpunk {
+    background: #0a0a1a;
+    padding: 1rem 5%;
+    font-family: 'Courier New', monospace;
+    color: #00ff88;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
+
+.cyberpunk .glitch-logo {
+    font-size: 1.8rem;
+    position: relative;
+}
+
+.cyberpunk .glitch-logo span {
+    animation: glitch 1.5s infinite;
+}
+
+@keyframes glitch {
+    0% { transform: skew(0deg); }
+    20% { transform: skew(2deg); }
+    40% { transform: skew(-1deg); }
+    60% { transform: skew(1deg); }
+    80% { transform: skew(-2deg); }
+    100% { transform: skew(0deg); }
+}
+
+.cyberpunk .subtitle {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.cyberpunk .neon-nav ul {
+    display: flex;
+    list-style: none;
+    gap: 1.5rem;
+}
+
+.cyberpunk .neon-nav a {
+    color: #00ff88;
+    text-decoration: none;
+    position: relative;
+}
+
+.cyberpunk .neon-nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: #00ff88;
+    transition: width 0.3s;
+}
+
+.cyberpunk .neon-nav a:hover::after {
+    width: 100%;
+}
+
+.cyberpunk .status-bar {
+    font-size: 0.8rem;
+    margin-top: 0.5rem;
+    color: #ff6b35;
+}

frontend/app/css/header_DARK.css

@@ -0,0 +1,43 @@
+.dark-header {
+    background: #1a1a2e;
+    padding: 1rem 5%;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
+
+.dark-header .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.dark-header .logo img {
+    height: 50px;
+}
+
+.dark-header nav ul {
+    display: flex;
+    list-style: none;
+    gap: 2rem;
+}
+
+.dark-header nav a {
+    color: #e6e6e6;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s;
+}
+
+.dark-header nav a:hover {
+    color: #ff6b35;
+}
+
+.dark-header .theme-toggle button {
+    background: none;
+    border: none;
+    color: #e6e6e6;
+    font-size: 1.2rem;
+    cursor: pointer;
+}

frontend/app/css/header_IT.css

@@ -0,0 +1,87 @@
+.interactive-header {
+    text-align: center;
+    padding: 3rem 5%;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+.interactive-header .typewriter h1 {
+    font-size: 2.5rem;
+    margin: 0;
+    color: #333;
+}
+
+.interactive-header .typed-text {
+    color: #ff6b35;
+    border-right: 2px solid #ff6b35;
+    animation: blink 0.7s infinite;
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.interactive-header p {
+    font-size: 1.2rem;
+    margin: 0.5rem 0 2rem;
+    color: #666;
+}
+
+.interactive-header .tech-tag {
+    background: #ff6b35;
+    color: white;
+    padding: 0.2rem 0.5rem;
+    border-radius: 3px;
+    font-weight: 600;
+}
+
+.interactive-header nav ul {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    gap: 2rem;
+}
+
+.interactive-header nav a {
+    color: #333;
+    text-decoration: none;
+    font-weight: 500;
+    padding-bottom: 0.5rem;
+    position: relative;
+}
+
+.interactive-header nav a::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: #ff6b35;
+    transition: width 0.3s;
+}
+
+.interactive-header nav a:hover::after {
+    width: 100%;
+}
+
+.interactive-header .language-switcher {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+}
+
+.interactive-header .language-switcher button {
+    background: none;
+    border: 1px solid #ccc;
+    padding: 0.3rem 0.6rem;
+    cursor: pointer;
+}
+
+.interactive-header .language-switcher button:first-child {
+    background: #ff6b35;
+    color: white;
+    border-color: #ff6b35;
+}

frontend/app/css/header_LB.css

@@ -0,0 +1,75 @@
+.sidebar-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #f8f8f8;
+    padding: 2rem 1rem;
+    position: fixed;
+    height: 100vh;
+    width: 250px;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-header .profile-pic img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid #ff6b35;
+}
+
+.sidebar-header .profile-info {
+    text-align: center;
+    margin: 1rem 0;
+}
+
+.sidebar-header h1 {
+    font-size: 1.3rem;
+    margin: 0.5rem 0;
+    color: #333;
+}
+
+.sidebar-header p {
+    font-size: 0.9rem;
+    color: #666;
+}
+
+.sidebar-header nav ul {
+    list-style: none;
+    width: 100%;
+    padding: 0;
+}
+
+.sidebar-header nav li {
+    margin: 1rem 0;
+}
+
+.sidebar-header nav a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #333;
+    text-decoration: none;
+    padding: 0.5rem;
+    border-radius: 5px;
+    transition: background 0.3s;
+}
+
+.sidebar-header nav a:hover {
+    background: #ff6b35;
+    color: white;
+}
+
+.sidebar-header .social-links {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.sidebar-header .social-links a {
+    color: #333;
+    font-size: 1.2rem;
+}

frontend/app/css/header_MP.css

@@ -0,0 +1,115 @@
+.minimalist-pro {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 5%;
+    background: var(--color-surface);
+    color: var(--color-text);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid var(--color-border);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+    box-sizing: border-box; /* important pour éviter l’élargissement avec le padding */
+    overflow-x: auto;       /* autorise un scroll horizontal si vraiment nécessaire */
+    height: var(--header-height, 80px);
+    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+}
+
+/* Quand la page est tout en haut: enlever la bordure (et l’ombre pour un rendu plat) */
+.minimalist-pro.is-top {
+    border-bottom-color: transparent;
+    box-shadow: none;
+}
+
+.minimalist-pro .logo {
+    font-weight: 700;
+    font-size: 1.25rem;
+    min-width: 0; /* permet de rétrécir correctement en flex */
+}
+
+.minimalist-pro .name {
+    color: inherit;
+}
+
+.minimalist-pro .tagline {
+    display: block;
+    font-size: 0.85rem;
+    color: var(--color-muted);
+    font-weight: 400;
+}
+
+.minimalist-pro nav ul {
+    display: flex;
+    list-style: none;
+    gap: 2rem;
+    flex-wrap: wrap; /* évite le débordement: passe à la ligne si pas assez de place */
+    margin: 0;
+    padding: 0;
+}
+
+.minimalist-pro nav a {
+    text-decoration: none;
+    color: inherit;
+    font-weight: 600;
+    transition: color 0.2s ease;
+    white-space: nowrap; /* garde chaque lien sur une ligne, mais la UL peut retourner à la ligne */
+}
+
+.minimalist-pro nav a:hover {
+    color: var(--color-accent);
+}
+
+.minimalist-pro .cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.minimalist-pro .button {
+    background: var(--color-accent);
+    color: #fff;
+    padding: 0.55rem 1rem;
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    font-weight: 700;
+    flex-shrink: 0; /* ne rétrécit pas, mais ne force pas l’élargissement grâce au wrap de la UL */
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.minimalist-pro .button:hover {
+    background: var(--color-accent-600);
+    box-shadow: 0 6px 14px rgba(255, 107, 53, 0.2);
+}
+
+/* Bouton de bascule du thème */
+.theme-toggle__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 999px;
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text);
+    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
+    cursor: pointer;
+}
+
+.theme-toggle__btn:hover {
+    background: var(--color-accent-50);
+    border-color: var(--color-accent-100);
+}
+
+.theme-toggle__btn:active {
+    transform: translateY(0.5px);
+}
+
+/* Réduit l’espace entre liens sur écrans moyens pour limiter les risques de débordement */
+@media (max-width: 1024px) {
+    .minimalist-pro nav ul {
+        gap: 1rem;
+    }
+}

frontend/app/css/links.css

@@ -0,0 +1,31 @@
+/* Liens minimaux et professionnels (underline animé) */
+a {
+  color: inherit;
+  text-decoration: none;
+  background-image: linear-gradient(var(--color-accent, #ff6b35), var(--color-accent, #ff6b35));
+  background-position: 0 100%;
+  background-size: 0% 2px;
+  background-repeat: no-repeat;
+  transition: background-size 0.25s ease, color 0.2s ease, opacity 0.2s ease;
+}
+
+a:hover {
+  color: var(--color-accent-700, #c74d25);
+  background-size: 100% 2px;
+}
+
+a:active {
+  opacity: 0.9;
+}
+
+a:focus-visible {
+  outline: 2px solid var(--color-accent, #ff6b35);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm, 6px);
+}
+
+/* Variante de lien "bouton texte" */
+.link-button {
+  color: var(--color-accent, #ff6b35);
+  font-weight: 600;
+}

frontend/app/css/typography.css

@@ -0,0 +1,66 @@
+/* Typographie */
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.7;
+  letter-spacing: 0.1px;
+  color: var(--color-text, #1f2937);
+}
+
+h1, h2, h3, h4 {
+  line-height: 1.25;
+  margin: 0 0 var(--space-3, 0.75rem);
+  font-weight: 700;
+  color: var(--color-text, #1f2937);
+}
+
+h1 { font-size: clamp(2rem, 1.2rem + 1.8vw, 2.5rem); }
+h2 { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); }
+h3 { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5rem); }
+h4 { font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.25rem); }
+
+p {
+  margin: 0 0 var(--space-4, 1rem);
+  color: var(--color-text, #1f2937);
+}
+
+small { color: var(--color-muted, #6b7280); }
+strong { font-weight: 700; }
+
+/* Utilitaires de texte */
+.text-accent { color: var(--color-accent, #ff6b35); }
+.eyebrow {
+  display: inline-block;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  font-size: 0.75rem;
+  color: var(--color-muted, #6b7280);
+}
+
+/* Accent “dev” */
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  letter-spacing: .02em;
+}
+
+.headline--code::before { content: "<"; color: var(--color-accent, #ff6b35); margin-right: 0.25rem; }
+.headline--code::after { content: " />"; color: var(--color-accent, #ff6b35); margin-left: 0.25rem; }
+
+/* Code inline et bloc */
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  background: var(--color-accent-50, #fff4ec);
+  border: 1px solid var(--color-accent-100, #ffe4d6);
+  color: var(--color-text, #1f2937);
+  border-radius: 6px;
+  padding: 0.1rem 0.35rem;
+}
+
+pre {
+  margin: 0;
+}

frontend/app/css/utilities.css

@@ -0,0 +1,130 @@
+/* Utilitaires légers */
+
+/* Centrer un bloc dans son conteneur et limiter la largeur */
+.container--narrow {
+  max-width: 820px;
+  margin-inline: auto;
+}
+
+/* Centrage */
+.u-center {
+  display: grid;
+  place-items: center;
+}
+
+.u-text-center { text-align: center; }
+.u-muted { color: var(--color-muted, #6b7280); }
+
+/* Rythme vertical: ajoute un espace entre les éléments frères */
+.flow > * + * {
+  margin-top: var(--space-4, 1rem);
+}
+
+/* Ombre au survol */
+.shadow-hover {
+  transition: box-shadow 0.2s ease, transform 0.15s ease;
+}
+.shadow-hover:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
+}
+
+/* Visually hidden pour l’accessibilité */
+.visually-hidden,
+.sr-only {
+  position: absolute !important;
+  height: 1px; width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+  border: 0; padding: 0; margin: -1px;
+}
+
+/* Flexbox utilitaires */
+.flex { display: flex; }
+.flex-col { display: flex; flex-direction: column; }
+.flex-row { display: flex; flex-direction: row; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.gap-2 { gap: var(--space-2, 0.5rem); }
+.gap-4 { gap: var(--space-4, 1rem); }
+.gap-6 { gap: var(--space-6, 1.5rem); }
+
+/* Grilles rapides */
+.grid-2 { display: grid; gap: var(--space-6, 1.5rem); grid-template-columns: repeat(2, 1fr); }
+.grid-3 { display: grid; gap: var(--space-6, 1.5rem); grid-template-columns: repeat(3, 1fr); }
+.grid-4 { display: grid; gap: var(--space-6, 1.5rem); grid-template-columns: repeat(4, 1fr); }
+
+@media (max-width: 900px) {
+  .grid-3 { grid-template-columns: repeat(2, 1fr); }
+  .grid-4 { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 640px) {
+  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+}
+
+/* Piles verticales */
+.stack > * + * { margin-top: var(--space-4, 1rem); }
+.stack-sm > * + * { margin-top: var(--space-3, 0.75rem); }
+.stack-lg > * + * { margin-top: var(--space-6, 1.5rem); }
+
+/* Espacements rapides */
+.mt-0 { margin-top: 0 !important; }
+.mt-4 { margin-top: var(--space-4, 1rem) !important; }
+.mt-8 { margin-top: var(--space-8, 2rem) !important; }
+.mb-0 { margin-bottom: 0 !important; }
+.mb-4 { margin-bottom: var(--space-4, 1rem) !important; }
+.mb-8 { margin-bottom: var(--space-8, 2rem) !important; }
+
+/* Largeurs utiles */
+.max-w-prose { max-width: 65ch; }
+.max-w-wide { max-width: var(--container-max, 1100px); }
+.w-full { width: 100%; }
+
+/* Groupes de boutons */
+.btn-group {
+  display: inline-flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+/* Grilles rapides */
+.grid-2 { display: grid; gap: var(--space-6, 1.5rem); grid-template-columns: repeat(2, 1fr); }
+.grid-3 { display: grid; gap: var(--space-6, 1.5rem); grid-template-columns: repeat(3, 1fr); }
+.grid-4 { display: grid; gap: var(--space-6, 1.5rem); grid-template-columns: repeat(4, 1fr); }
+
+@media (max-width: 900px) {
+  .grid-3 { grid-template-columns: repeat(2, 1fr); }
+  .grid-4 { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 640px) {
+  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+}
+
+/* Piles verticales */
+.stack > * + * { margin-top: var(--space-4, 1rem); }
+.stack-sm > * + * { margin-top: var(--space-3, 0.75rem); }
+.stack-lg > * + * { margin-top: var(--space-6, 1.5rem); }
+
+/* Espacements rapides */
+.mt-0 { margin-top: 0 !important; }
+.mt-4 { margin-top: var(--space-4, 1rem) !important; }
+.mt-8 { margin-top: var(--space-8, 2rem) !important; }
+.mb-0 { margin-bottom: 0 !important; }
+.mb-4 { margin-bottom: var(--space-4, 1rem) !important; }
+.mb-8 { margin-bottom: var(--space-8, 2rem) !important; }
+
+/* Largeurs utiles */
+.max-w-prose { max-width: 65ch; }
+.max-w-wide { max-width: var(--container-max, 1100px); }
+.w-full { width: 100%; }
+
+/* Groupes de boutons */
+.btn-group {
+  display: inline-flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}

frontend/app/layout.tsx

@@ -0,0 +1,26 @@
+import "./css/colors.css";
+import "./css/typography.css";
+import "./css/globals.css";
+import "./css/components.css";
+import "./css/utilities.css";
+import "./css/forms.css";
+import "./css/header_MP.css";
+import "./css/links.css";
+
+import type { ReactNode } from "react";
+import Header from "./components/Header";
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="fr">
+      <body>
+        <Header />
+        <main>{children}</main>
+
+        <footer>
+          <p>© 2025 - Toine</p>
+        </footer>
+      </body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,18 @@
+import Skills from "@/app/components/Skills";
+import Services from "@/app/components/Services";
+import Contact from "@/app/components/Contact";
+import About from "@/app/components/About";
+
+export default function Home() {
+    return (
+        <div>
+            <About />
+
+            <Skills />
+
+            <Services />
+
+            <Contact />
+        </div>
+    )
+}

frontend/app/projects/new/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function NewProjectPage() {
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    technologies: "",
+    image: "",
+    url: "",
+    source: "",
+    status: "En cours",
+  });
+
+  const router = useRouter();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const res = await fetch("/api/projects", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+    });
+
+    if (res.ok) {
+      router.push("/projects");
+    } else {
+      const error = await res.json();
+      alert(`Erreur lors de la tentative d'ajout d'un projet : ${error.error}`);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto p-6">
+      <h1 className="text-2xl font-bold mb-4">Créer un projet</h1>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {Object.keys(formData).map((key) => (
+          <div key={key}>
+            <label className="block font-medium capitalize">{key.replace("_", " ")}</label>
+            {key === "description" ? (
+              <textarea
+                name={key}
+                value={formData[key as keyof typeof formData]}
+                onChange={handleChange}
+                className="w-full p-2 border rounded"
+              />
+            ) : key === "status" ? (
+              <select
+                name={key}
+                value={formData[key as keyof typeof formData]}
+                onChange={handleChange}
+                className="w-full p-2 border rounded"
+              >
+                <option value="En cours">En cours</option>
+                <option value="En cours">Terminé</option>
+                <option value="En cours">Futur Projet</option>
+              </select>
+            ) : (
+              <input
+                name={key}
+                value={formData[key as keyof typeof formData]}
+                onChange={handleChange}
+                className="w-full p-2 border rounded"
+              />
+            )}
+          </div>
+        ))}
+        <button
+          type="submit"
+          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        >
+          Sauvegarder
+        </button>
+      </form>
+    </div>
+  );
+}

frontend/app/projects/page.tsx

@@ -0,0 +1,31 @@
+async function getProjects() {
+    const res = await fetch("http://127.0.0.1:5000/api/projects/", {
+        cache: "no-store",
+    });
+
+    if(!res.ok){
+        throw new Error("Erreur lors de la récupération des projets depuis l'API");
+    }
+
+    return res.json();
+}
+
+export default async function ProjectsPage() {
+    const projects = await getProjects();
+
+    return(
+        <section id="projets" className="section">
+            <div className="container">
+                <h2 className="section-title">Mes projets</h2>
+                <ul className="projects-list">
+                    {projects.map((p: any) => (
+                        <li key={p.id}>
+                            <h3>{p.name}</h3>
+                            <p>{p.description}</p>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </section>
+    );
+}

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start"
+  },
+  "dependencies": {
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "next": "15.5.3"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@tailwindcss/postcss": "^4",
+    "tailwindcss": "^4"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

frontend/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

frontend/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

frontend/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

frontend/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}