1 files changed, 153 insertions, 0 deletions
diff --git a/src/app/(public)/about/page.tsx b/src/app/(public)/about/page.tsx
new file mode 100644
index 0000000..7e76cbe
--- /dev/null
+++ b/src/app/(public)/about/page.tsx
@@ -0,0 +1,153 @@
+import { Code, Server, Shield, Award } from "lucide-react";
+
+const timeline = [
+  {
+    icon: Code,
+    period: "Début de carrière",
+    title: "Développeur",
+    description:
+      "Développement logiciel, compréhension profonde du code et des architectures applicatives. Base solide pour comprendre les enjeux de sécurité au niveau applicatif.",
+  },
+  {
+    icon: Server,
+    period: "Évolution",
+    title: "Administrateur Systèmes",
+    description:
+      "Administration Linux et Windows Server. Gestion d'infrastructures, scripting, automatisation. Vision complète de la chaîne technique.",
+  },
+  {
+    icon: Shield,
+    period: "Spécialisation",
+    title: "Expert IAM & Sécurité",
+    description:
+      "Spécialisation en Identity & Access Management. Administration AD et Entra ID, implémentation OIDC/OAuth, stratégies Zero Trust.",
+  },
+];
+
+const skills = {
+  "Identity & Access Management": [
+    "OIDC / OAuth 2.0 / SAML",
+    "Keycloak",
+    "Active Directory",
+    "Microsoft Entra ID (Azure AD)",
+    "PIM / PAM",
+    "RBAC / ABAC",
+    "Conditional Access",
+    "SSO / Federation",
+  ],
+  "Sécurité": [
+    "Zero Trust Architecture",
+    "Durcissement AD (Tiering Model)",
+    "Sécurité des endpoints",
+    "PKI & Certificats",
+    "Audit de sécurité",
+    "Conformité & Gouvernance",
+  ],
+  "Systèmes & Infra": [
+    "Windows Server / AD DS",
+    "Linux (Debian, RHEL, Ubuntu)",
+    "Docker & Conteneurisation",
+    "PowerShell / Bash",
+    "Automatisation & CI/CD",
+    "Monitoring & Logging",
+  ],
+};
+
+export default function AboutPage() {
+  return (
+    <>
+      <section className="bg-cosmos-900 py-16 sm:py-20">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <h1 className="text-3xl font-bold tracking-tight text-nieve sm:text-5xl">
+              À propos
+            </h1>
+            <p className="mt-6 text-lg text-cosmos-300">
+              Un parcours du développement à la sécurité, pour une vision
+              complète et pragmatique de l&apos;IAM.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Timeline */}
+      <section className="py-20">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <h2 className="text-2xl font-bold text-cosmos-900 text-center mb-16">
+            Parcours professionnel
+          </h2>
+          <div className="relative">
+            <div className="absolute left-1/2 -translate-x-px h-full w-0.5 bg-border hidden lg:block" />
+            <div className="space-y-12 lg:space-y-16">
+              {timeline.map((item, index) => {
+                const Icon = item.icon;
+                const isLeft = index % 2 === 0;
+                return (
+                  <div
+                    key={item.title}
+                    className={`relative flex flex-col lg:flex-row items-center gap-8 ${
+                      isLeft ? "lg:flex-row" : "lg:flex-row-reverse"
+                    }`}
+                  >
+                    <div
+                      className={`flex-1 ${isLeft ? "lg:text-right" : "lg:text-left"}`}
+                    >
+                      <p className="text-sm font-semibold text-araucaria-600 uppercase tracking-wider">
+                        {item.period}
+                      </p>
+                      <h3 className="mt-2 text-xl font-bold text-cosmos-900">
+                        {item.title}
+                      </h3>
+                      <p className="mt-3 text-muted leading-relaxed">
+                        {item.description}
+                      </p>
+                    </div>
+                    <div className="relative z-10 w-14 h-14 rounded-full bg-cosmos-900 flex items-center justify-center border-4 border-nieve shadow-lg shrink-0">
+                      <Icon className="w-6 h-6 text-araucaria-400" />
+                    </div>
+                    <div className="flex-1 hidden lg:block" />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Compétences */}
+      <section className="py-20 bg-pewma border-t border-border">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <h2 className="text-2xl font-bold text-cosmos-900 text-center mb-16">
+            Compétences techniques
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {Object.entries(skills).map(([category, items]) => (
+              <div
+                key={category}
+                className="rounded-xl border border-border bg-nieve p-8"
+              >
+                <div className="flex items-center gap-3 mb-6">
+                  <Award className="w-5 h-5 text-kultrun-700" />
+                  <h3 className="text-lg font-semibold text-cosmos-900">
+                    {category}
+                  </h3>
+                </div>
+                <ul className="space-y-2">
+                  {items.map((skill) => (
+                    <li
+                      key={skill}
+                      className="text-sm text-muted flex items-center gap-2"
+                    >
+                      <span className="w-1.5 h-1.5 rounded-full bg-araucaria-500 shrink-0" />
+                      {skill}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}