From fb4b3c09593f573c6acb4e2104de8e35281c4d36 Mon Sep 17 00:00:00 2001
From: Philippe Loctaux <p@philippeloctaux.com>
Date: Sat, 20 May 2023 18:51:27 +0200
Subject: [PATCH] added talks, with card component

---
 src/components/talk-card.astro | 77 ++++++++++++++++++++++++++++++++++
 src/components/talks.astro     | 58 +++++++++++++++++++++++++
 src/pages/index.astro          |  4 +-
 3 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 src/components/talk-card.astro
 create mode 100644 src/components/talks.astro

diff --git a/src/components/talk-card.astro b/src/components/talk-card.astro
new file mode 100644
index 0000000..75b15a3
--- /dev/null
+++ b/src/components/talk-card.astro
@@ -0,0 +1,77 @@
+---
+interface Props {
+    title: string;
+    date: string;
+    location: string;
+    linkUri: string;
+    linkLabel: string;
+}
+
+const { title, date, location, linkUri, linkLabel } = Astro.props;
+---
+
+<div class="rounded-2xl w-full bg-sky-950 p-6">
+
+    <!-- Title -->
+    <h3 class="text-xl font-semibold mb-4">{title}</h3>
+
+    <!-- Date -->
+    <div class="flex">
+        <div class="inline-flex items-center">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                class="w-5 h-5"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
+                    clip-rule="evenodd"></path>
+            </svg>
+            <span class="ml-2">{date}</span>
+        </div>
+    </div>
+
+    <!-- Location -->
+    <div class="flex">
+        <div class="inline-flex items-center">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                class="w-5 h-5"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5z"
+                    clip-rule="evenodd"></path>
+            </svg>
+            <span class="ml-2">{location}</span>
+        </div>
+    </div>
+
+    <!-- Link with label -->
+    <a
+        href={linkUri}
+        target="_blank"
+        class="mt-4 inline-flex bg-transparent hover:bg-sky-700 text-white font-semibold py-1.5 px-4 rounded-xl items-center border border-white hover:border-transparent transition-all duration-200"
+    >
+        <div class="inline-flex items-center">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                class="w-5 h-5 fill-current mr-2"
+            >
+                <path
+                    d="M12.232 4.232a2.5 2.5 0 013.536 3.536l-1.225 1.224a.75.75 0 001.061 1.06l1.224-1.224a4 4 0 00-5.656-5.656l-3 3a4 4 0 00.225 5.865.75.75 0 00.977-1.138 2.5 2.5 0 01-.142-3.667l3-3z"
+                ></path>
+                <path
+                    d="M11.603 7.963a.75.75 0 00-.977 1.138 2.5 2.5 0 01.142 3.667l-3 3a2.5 2.5 0 01-3.536-3.536l1.225-1.224a.75.75 0 00-1.061-1.06l-1.224 1.224a4 4 0 105.656 5.656l3-3a4 4 0 00-.225-5.865z"
+                ></path>
+            </svg>
+            <span>{linkLabel}</span>
+        </div>
+    </a>
+</div>
diff --git a/src/components/talks.astro b/src/components/talks.astro
new file mode 100644
index 0000000..1f25b76
--- /dev/null
+++ b/src/components/talks.astro
@@ -0,0 +1,58 @@
+---
+import TalkCard from "./talk-card.astro";
+---
+
+<div>
+    <h1 class="text-4xl font-bold mb-4">Talks</h1>
+    <p class="text-lg text-justify">
+        Giving a talk is the opportunity to share what I know, and helps me
+        reduce my fear of public speaking.
+    </p>
+
+    <div
+        class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 place-content-center"
+    >
+        <TalkCard
+            title="Vim"
+            date="February 2023"
+            location="Epitech Rennes"
+            linkUri="https://x4m3.rocks/talks/vim.pdf"
+            linkLabel="Slides"
+        />
+        <TalkCard
+            title="CLion"
+            date="March 2021"
+            location="Epitech Rennes"
+            linkUri="https://x4m3.rocks/talks/clion.pdf"
+            linkLabel="Slides"
+        />
+        <TalkCard
+            title="git & devops 2"
+            date="February 2021"
+            location="Epitech Rennes"
+            linkUri="https://x4m3.rocks/talks/git-devops2.pdf"
+            linkLabel="Slides"
+        />
+        <TalkCard
+            title="pass4thewin"
+            date="February 2021"
+            location="Epitech Rennes"
+            linkUri="https://x4m3.rocks/talks/pass4thewin.pdf"
+            linkLabel="Slides"
+        />
+        <TalkCard
+            title="git & devops"
+            date="May 2020"
+            location="Epitech Rennes"
+            linkUri="https://x4m3.rocks/talks/git-devops.pdf"
+            linkLabel="Slides"
+        />
+        <TalkCard
+            title="git gud"
+            date="May 2019"
+            location="Epitech Rennes"
+            linkUri="https://x4m3.rocks/talks/git-tek.pdf"
+            linkLabel="Slides"
+        />
+    </div>
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5d600ed..791f2ee 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,14 +3,16 @@ import Page from "../layouts/page.astro";
 import Hero from "../components/hero.astro";
 import Whoami from "../components/whoami.astro";
 import Www from "../components/www.astro";
+import Talks from "../components/talks.astro";
 ---
 
 <Page>
     <Hero />
     <main class="container mx-auto px-4 py-16">
         <Whoami />
-        <div class="my-16">
+        <div class="my-16 space-y-32">
             <Www />
+            <Talks />
         </div>
     </main>
 </Page>