feat: v1.11.0 — add nativeprobe as third flagship project

- nativeprobe (react native/expo, open source, beta) joins liflow and infralens as flagship projects on the homepage and projects city, linked via github only until its public store release
- project cards can now show a logo and an "open source" badge (abbreviated "oss" below 420px), applied to liflow, infralens and nativeprobe
- homepage hero tagline now mentions react native alongside typescript and react

Author: Randy-R-code

CHANGELOG.md

@@ -9,6 +9,25 @@ InfraLens's history as a standalone product (2026-01-06 to 2026-08-10) is
 frozen in [`docs/infralens/CHANGELOG.md`](docs/infralens/CHANGELOG.md).
 InfraLens changes since its native migration are recorded here.
 
+## [1.11.0] — 2026-09-11
+
+### Added
+
+- **NativeProbe joins the portfolio** as the third flagship project
+  alongside Liflow and InfraLens — an open-source React Native/Expo
+  playground for exploring real device capabilities, currently in beta
+  ahead of Google Play testing. Linked from the homepage, Projects City
+  and its own project page, with a GitHub link only (no store link until
+  public release).
+- Project cards can show a logo and an "Open Source" badge (shortened to
+  "OSS" below 420px to avoid wrapping) — applied to InfraLens and
+  NativeProbe. Liflow's card also gained its logo.
+
+### Changed
+
+- Homepage hero tagline now reads "TypeScript, React et React Native — du
+  prototype au produit déployé." to reflect the portfolio's mobile work.
+
 ## [1.10.1] — 2026-09-10
 
 ### Added

app/globals.css

@@ -5,6 +5,8 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
+  --breakpoint-xs: 26.25rem;
+
   /* InfraLens brand tokens — kept as named aliases because InfraLens's
      components reference bg-brand-accent, text-brand-secondary-hover, etc.
      directly. brand-secondary used to alias the blue scale (a leftover from

app/page.tsx

@@ -1,9 +1,11 @@
+import { GitHubIcon } from "@/components/github-icon";
 import { HeroText } from "@/components/hero-text";
 import { WorldMap } from "@/components/map/world-map";
 import { brand } from "@/lib/brand";
 import { getFeaturedProjects, statusLabel } from "@/lib/projects";
 import { tools } from "@/lib/tools";
 import { ExternalLink, Wrench } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 
 const featuredProjects = getFeaturedProjects();
@@ -65,15 +67,35 @@ export default function Home() {
                   }}
                 >
                   <div className="mb-3 flex items-center justify-between">
-                    <span
-                      className="inline-block w-fit rounded-md px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider"
-                      style={{
-                        backgroundColor: `${cardColor}18`,
-                        color: cardColor,
-                      }}
-                    >
-                      {statusLabel(project.status)}
-                    </span>
+                    <div className="flex items-center gap-2">
+                      {project.logo && (
+                        <Image
+                          src={project.logo.src}
+                          alt={project.logo.alt}
+                          width={24}
+                          height={24}
+                          className="h-6 w-6"
+                        />
+                      )}
+                      <span
+                        className="inline-block w-fit rounded-md px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider"
+                        style={{
+                          backgroundColor: `${cardColor}18`,
+                          color: cardColor,
+                        }}
+                      >
+                        {statusLabel(project.status)}
+                      </span>
+                      {project.openSource && (
+                        <span
+                          className="inline-block w-fit rounded-md px-2.5 py-1 text-[10px] font-semibold whitespace-nowrap uppercase tracking-wider text-zinc-300"
+                          style={{ background: brand.colors.surface[3] }}
+                        >
+                          <span className="xs:hidden">OSS</span>
+                          <span className="hidden xs:inline">Open Source</span>
+                        </span>
+                      )}
+                    </div>
                     {project.type === "tool" && (
                       <Wrench
                         size={16}
@@ -122,6 +144,22 @@ export default function Home() {
                         Voir le produit
                       </a>
                     )}
+                    {project.repositoryUrl && (
+                      <a
+                        href={project.repositoryUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all duration-200 hover:brightness-125"
+                        style={{
+                          borderColor: `${cardColor}30`,
+                          backgroundColor: `${cardColor}0d`,
+                          color: cardColor,
+                        }}
+                      >
+                        <GitHubIcon size={11} />
+                        GitHub
+                      </a>
+                    )}
                   </div>
                 </div>
               );

app/projects/[slug]/page.tsx

@@ -1,8 +1,10 @@
+import { GitHubIcon } from "@/components/github-icon";
 import { brand } from "@/lib/brand";
 import { buildSoftwareApplicationSchema } from "@/lib/json-ld";
 import { getProject, projects, statusLabel } from "@/lib/projects";
 import { ArrowLeft, ExternalLink } from "lucide-react";
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
@@ -72,12 +74,32 @@ export default async function ProjectPage({ params }: Props) {
 
         {/* Hero */}
         <header className="mb-10">
-          <span
-            className="mb-3 inline-block w-fit rounded-md px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider"
-            style={{ backgroundColor: `${color}18`, color }}
-          >
-            {statusLabel(project.status)}
-          </span>
+          <div className="mb-3 flex items-center gap-2">
+            {project.logo && (
+              <Image
+                src={project.logo.src}
+                alt={project.logo.alt}
+                width={24}
+                height={24}
+                className="h-6 w-6"
+              />
+            )}
+            <span
+              className="inline-block w-fit rounded-md px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider"
+              style={{ backgroundColor: `${color}18`, color }}
+            >
+              {statusLabel(project.status)}
+            </span>
+            {project.openSource && (
+              <span
+                className="inline-block w-fit rounded-md px-2.5 py-1 text-[10px] font-semibold whitespace-nowrap uppercase tracking-wider text-zinc-300"
+                style={{ background: brand.colors.surface[3] }}
+              >
+                <span className="xs:hidden">OSS</span>
+                <span className="hidden xs:inline">Open Source</span>
+              </span>
+            )}
+          </div>
           <h1 className="text-3xl font-bold tracking-tight text-white md:text-4xl">
             {project.name}
           </h1>
@@ -150,21 +172,39 @@ export default async function ProjectPage({ params }: Props) {
         </div>
 
         {/* Liens */}
-        {project.projectUrl && (
-          <div className="mt-8">
-            <a
-              href={project.projectUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium transition-opacity hover:opacity-80"
-              style={{
-                backgroundColor: `${color}18`,
-                color,
-                border: `1px solid ${color}30`,
-              }}
-            >
-              Voir le produit <ExternalLink size={12} />
-            </a>
+        {(project.projectUrl || project.repositoryUrl) && (
+          <div className="mt-8 flex flex-wrap items-center gap-3">
+            {project.projectUrl && (
+              <a
+                href={project.projectUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium transition-opacity hover:opacity-80"
+                style={{
+                  backgroundColor: `${color}18`,
+                  color,
+                  border: `1px solid ${color}30`,
+                }}
+              >
+                Voir le produit <ExternalLink size={12} />
+              </a>
+            )}
+            {project.repositoryUrl && (
+              <a
+                href={project.repositoryUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium transition-opacity hover:opacity-80"
+                style={{
+                  backgroundColor: `${color}18`,
+                  color,
+                  border: `1px solid ${color}30`,
+                }}
+              >
+                <GitHubIcon size={12} />
+                GitHub
+              </a>
+            )}
           </div>
         )}
       </div>

app/projects/page.tsx

@@ -5,6 +5,7 @@ import { openSourceProjects } from "@/lib/open-source";
 import { projects, statusLabel } from "@/lib/projects";
 import { ExternalLink, Package, Wrench } from "lucide-react";
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
 
 export const metadata: Metadata = {
@@ -39,15 +40,35 @@ export default function ProjectsPage() {
               }}
             >
               <div className="flex items-center justify-between gap-2">
-                <span
-                  className="inline-block rounded-md px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider"
-                  style={{
-                    backgroundColor: `${cardColor}18`,
-                    color: cardColor,
-                  }}
-                >
-                  {statusLabel(project.status)}
-                </span>
+                <div className="flex items-center gap-2">
+                  {project.logo && (
+                    <Image
+                      src={project.logo.src}
+                      alt={project.logo.alt}
+                      width={24}
+                      height={24}
+                      className="h-6 w-6"
+                    />
+                  )}
+                  <span
+                    className="inline-block rounded-md px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider"
+                    style={{
+                      backgroundColor: `${cardColor}18`,
+                      color: cardColor,
+                    }}
+                  >
+                    {statusLabel(project.status)}
+                  </span>
+                  {project.openSource && (
+                    <span
+                      className="inline-block rounded-md px-2.5 py-1 text-[10px] font-semibold whitespace-nowrap uppercase tracking-wider text-zinc-300"
+                      style={{ background: brand.colors.surface[3] }}
+                    >
+                      <span className="xs:hidden">OSS</span>
+                      <span className="hidden xs:inline">Open Source</span>
+                    </span>
+                  )}
+                </div>
                 {project.type === "tool" && (
                   <Wrench
                     size={16}
@@ -122,6 +143,18 @@ export default function ProjectsPage() {
                       Voir le projet <ExternalLink size={11} />
                     </a>
                   )}
+                  {project.repositoryUrl && (
+                    <a
+                      href={project.repositoryUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1 text-xs font-medium"
+                      style={{ color: cardColor }}
+                    >
+                      <GitHubIcon size={11} />
+                      GitHub
+                    </a>
+                  )}
                 </div>
                 {project.relatedArticleSlug && (
                   <Link

package.json

@@ -1,6 +1,6 @@
 {
   "name": "randy-code",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "private": true,
   "packageManager": "pnpm@10.7.0",
   "scripts": {

public/projects/logos/liflow.png

@@ -5,7 +5,8 @@ const heroContent = {
   eyebrow: "Développeur TypeScript",
   headline:
     "Développeur TypeScript, je construis des applications web, mobiles et des outils métier pensés pour des usages réels.",
-  tagline: "React, Next.js et TypeScript — du prototype au produit déployé.",
+  tagline:
+    "TypeScript, React et React Native — du prototype au produit déployé.",
 };
 
 export function HeroText() {

public/projects/logos/nativeprobe.png

@@ -14,7 +14,7 @@ export interface Project {
   slug: string;
   name: string;
   type: "product" | "tool" | "client" | "experiment";
-  status: "active" | "maintained" | "completed" | "experimental";
+  status: "active" | "maintained" | "completed" | "experimental" | "beta";
   tagline: string;
   problem: string;
   solution: string;
@@ -23,6 +23,8 @@ export interface Project {
   projectUrl?: string;
   repositoryUrl?: string;
   image?: string;
+  logo?: { src: string; alt: string };
+  openSource?: boolean;
   featured: boolean;
   caseStudy?: ProjectCaseStudy;
   relatedArticleSlug?: string;
@@ -44,6 +46,7 @@ export const projects: Project[] = [
       "Application live et disponible sur liflow.app, en phase de croissance post-lancement.",
     technologies: ["Next.js", "TypeScript", "Mistral AI", "Mux", "Upstash"],
     projectUrl: "https://liflow.app",
+    logo: { src: "/projects/logos/liflow.png", alt: "" },
     featured: true,
     relatedArticleSlug: "liflow-refonte-souvenirs-familiaux",
     caseStudy: {
@@ -80,6 +83,8 @@ export const projects: Project[] = [
     result: "Outil utilisé au quotidien, intégré nativement à Randy Code.",
     technologies: ["Next.js", "TypeScript", "Node.js", "Vercel"],
     projectUrl: "https://randy-code.dev/tools/infralens",
+    logo: { src: "/infralens/brand/logo-symbol.png", alt: "" },
+    openSource: true,
     featured: true,
     relatedArticleSlug: "securiser-analyseur-url-contre-ssrf",
     caseStudy: {
@@ -100,6 +105,24 @@ export const projects: Project[] = [
         "Garder InfraLens simple, gratuit et transparent demande de la discipline : résister à la tentation d'ajouter des fonctionnalités qui le feraient glisser vers un SaaS ou un outil de pentest commercial, alors que ce n'est ni son objectif ni son positionnement.",
     },
   },
+  {
+    slug: "nativeprobe",
+    name: "NativeProbe",
+    type: "product",
+    status: "beta",
+    tagline:
+      "Un playground mobile open source pour explorer, tester et comprendre les capacités réelles d'un appareil.",
+    problem:
+      "Les développeurs React Native n'ont pas de terrain de jeu pour tester en direct les capacités réelles d'un appareil — capteurs, permissions, réseau, biométrie — sans écrire un projet de test à chaque fois.",
+    solution:
+      "Playground mobile open source avec des probes interactifs qui déclenchent chaque capacité en direct (capteurs, réseau, localisation, biométrie, haptique...) et montrent l'API Expo derrière chaque test.",
+    result: "Application en beta, en approche de la phase de test Google Play.",
+    technologies: ["React Native", "Expo", "TypeScript", "iOS", "Android"],
+    repositoryUrl: "https://github.com/Randy-R-code/nativeprobe",
+    logo: { src: "/projects/logos/nativeprobe.png", alt: "" },
+    openSource: true,
+    featured: true,
+  },
   {
     slug: "specialiste-automobile",
     name: "Site vitrine — Spécialiste automobile",
@@ -137,6 +160,7 @@ const statusLabels: Record<Project["status"], string> = {
   maintained: "Maintenu",
   completed: "Projet client livré",
   experimental: "Expérimentation",
+  beta: "Beta",
 };
 
 export function statusLabel(status: Project["status"]): string {