add gropyus microsite

app/(routes)/hello-gropyus/components/FourFeatures.tsx

@@ -0,0 +1,69 @@
+import { Boxes, Code, Infinity, Rocket } from "lucide-react";
+
+const features = [
+  {
+    name: "Full Stack Development",
+    description:
+      "I'm fluent in TypeScript, NextJS, PostgreSQL and other modern web technologies required to innovate and launch MVPs.",
+    icon: Code,
+  },
+  {
+    name: "Design Thinking",
+    description:
+      "I am a IBM-certified Enterprise Design Thinking co-creator, innovating in constant 'Observe, Reflect, Make' cycles, and collaborating with Product and Design teams.",
+    icon: Infinity,
+  },
+  {
+    name: "Engineering Management",
+    description:
+      "I have hired, built and managed 4 remote and hybrid teams for engineering, data, product and design of 20 staff.",
+    icon: Boxes,
+  },
+  {
+    name: "Entrepreneurship",
+    description:
+      "I have launched 2 pre-PMF ventures (one within an accelerator and one bootstrapped) and co-founded a joint-venture within a scale-up.",
+    icon: Rocket,
+  },
+];
+
+export default function FourFeatures() {
+  return (
+    <div className="bg-white py-24 sm:py-24">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:text-center">
+          <h2 className="text-base font-semibold leading-7 text-primary">
+            More than NLP
+          </h2>
+          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            Other skills I bring to the table
+          </p>
+          <p className="mt-6 text-lg leading-8 text-gray-600">
+            My past experiences and skills offer a unique combination that can
+            help GROPYUS thrive.
+          </p>
+        </div>
+        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative pl-16">
+                <dt className="text-base font-semibold leading-7 text-gray-900">
+                  <div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
+                    <feature.icon
+                      className="h-6 w-6 text-white"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  {feature.name}
+                </dt>
+                <dd className="mt-2 text-base leading-7 text-gray-600">
+                  {feature.description}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(routes)/hello-gropyus/components/ThreeProjects.tsx

@@ -0,0 +1,68 @@
+import { StylizedImage } from "app/(routes)/process/components/StylizedImage";
+import { Newspaper, Sun, Wifi } from "lucide-react";
+import imageLaptop from "public/images/freelance/launch.jpg";
+
+const features = [
+  {
+    name: "Precision Livestock Farming platform with IoT.",
+    description:
+      "For the french ventilation manufacturer Sodistra, I have developed the product strategy of a precision livestock farming platform leveraging IoT and Computer Vision.",
+    icon: Wifi,
+  },
+  {
+    name: "Digital Twin of Solar Carport.",
+    description:
+      "For the french solar installer IDEX and the french EV-charger manufacturer Sparklin, I have developed a reference architecture for a digital twin of a solar carport allowing to monitor performance in real-time and trigger EV charging dynamically.",
+    icon: Sun,
+  },
+  {
+    name: "News tagging with Knowledge Graphs.",
+    description:
+      "For OneFootball, I have designed, built and maintained a news tagging platform using Knowledge Graphs, unlocking growth through multi-lingual and automated news tagging and enabling news features like recommendations.",
+    icon: Newspaper,
+  },
+];
+
+export default function ThreeProjects() {
+  return (
+    <div className="overflow-hidden bg-white py-24 sm:py-24">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div className="lg:ml-auto lg:pl-4 lg:pt-4">
+            <div className="lg:max-w-lg">
+              <h2 className="text-base font-semibold leading-7 text-primary">
+                Relevant Experiences
+              </h2>
+              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                My recent projects are relevant to GROPYUS.
+              </p>
+              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
+                {features.map((feature) => (
+                  <div key={feature.name} className="relative pl-9">
+                    <dt className="inline font-semibold text-gray-900">
+                      <feature.icon
+                        className="absolute left-1 top-1 h-5 w-5 text-primary"
+                        aria-hidden="true"
+                      />
+                      {feature.name}
+                    </dt>{" "}
+                    <dd className="inline">{feature.description}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+          <div className="flex items-start justify-end lg:order-first">
+            <div className="w-full flex-none lg:w-[45rem]">
+              <StylizedImage
+                {...imageLaptop}
+                sizes="(min-width: 1024px) 41rem, 31rem"
+                className="justify-center lg:justify-end lg:group-even/section:justify-start"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(routes)/hello-gropyus/page.tsx

@@ -0,0 +1,71 @@
+import { PageIntro } from "@/components/layout/PageIntro";
+import { Button } from "@/components/ui/button";
+import { Post, allPosts } from "contentlayer/generated";
+import { Linkedin } from "lucide-react";
+import { Metadata } from "next";
+import Link from "next/link";
+import FeaturedPosts from "../(home)/components/FeaturedPosts";
+import LogoCloud from "../process/components/LogoCloud";
+import FourFeatures from "./components/FourFeatures";
+import ThreeProjects from "./components/ThreeProjects";
+
+export const metadata: Metadata = {
+  title: "Hi I'm Louis Guitton",
+  description:
+    "I'm a technology, data and product leader who has created, scaled, and maintained award-winning products.",
+};
+
+export default function Process() {
+  const featuredPosts = ["/posts/graphs-and-language/", "/posts/wikidata/"];
+  const posts: Post[] = [];
+  featuredPosts.forEach((featuredPost) => {
+    const p = allPosts.find((post) => `/posts/${post.slug}/` == featuredPost);
+    if (p) posts.push(p);
+  });
+
+  return (
+    <>
+      <PageIntro eyebrow="Hi GROPYUS," title="I'm Louis Guitton">
+        <div className="prose text-xl">
+          <p>
+            I am an <b>engineering and data leader</b> who has created, scaled
+            and maintained deep-tech products and teams.
+          </p>
+          <p>
+            I am currently self-employed, supporting clients working on{" "}
+            <b>Environmental Impact products</b> as a freelance Solutions
+            Architect. Previously, I spent five years helping{" "}
+            <a href="https://company.onefootball.com/">OneFootball</a> grow,
+            guiding their adoption of <i>Machine Learning</i>,{" "}
+            <i>Natural Language Processing</i> and <i>Knowledge Graphs</i>.
+          </p>
+          <p>
+            After starting my career at Bosch and EDF in the energy sector, I
+            honed my Machine Learning skills at startups like Dojo Madness
+            (Bayes Esports) and OneFootball. Today, I have focused my career on
+            leveraging my tech skills to generate an{" "}
+            <b>outsized environmental impact</b> and helping well-positioned
+            teams <b>adopt cutting-edge technologies</b> to thrive.
+          </p>
+          <div className="grid grid-cols-2 text-center items-center">
+            <Link href={"https://www.linkedin.com/in/louisguitton/"}>
+              <Button className="text-lg">
+                <Linkedin className="w-5 h-5 mr-3 -ml-1" aria-hidden="true" />
+                Connect on LinkedIn
+              </Button>
+            </Link>
+            <Link href={"/Louis_Guitton_Resume.pdf"} className="text-base">
+              View Résumé
+            </Link>
+          </div>
+        </div>
+      </PageIntro>
+      <LogoCloud />
+      <div className="[counter-reset:section] space-y-12">
+        <ThreeProjects />
+        <FourFeatures />
+      </div>
+      <FeaturedPosts posts={posts} />
+    </>
+  );
+}