feat: add author card to bottom of blog posts

5 files changed, 102 insertions, 1 deletions

diff --git a/website/assets/author-can.jpeg b/website/assets/author-can.jpeg
new file mode 100644
index 00000000..83c47737
--- /dev/null
+++ b/website/assets/author-can.jpeg
diff --git a/website/css/style.css b/website/css/style.css
index 8a1cc3cb..47f06594 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -3061,6 +3061,75 @@ td:last-child {
     overflow-wrap: anywhere;
 }
 
+.author-card {
+    display: flex;
+    align-items: center;
+    gap: 1.1rem;
+    margin-top: 3.5rem;
+    padding: 1.4rem 1.5rem;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
+}
+
+.author-photo {
+    flex: none;
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid var(--line);
+}
+
+.author-body {
+    min-width: 0;
+}
+
+.author-name {
+    margin: 0;
+    color: var(--ink);
+    font-size: 1.05rem;
+    font-weight: 800;
+    letter-spacing: -0.01em;
+}
+
+.author-role {
+    margin: 0.1rem 0 0;
+    color: color-mix(in srgb, var(--ink) 56%, var(--muted));
+    font-family: var(--mono);
+    font-size: 0.8rem;
+}
+
+.author-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.55rem;
+    margin-top: 0.8rem;
+}
+
+.author-links a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.7rem;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    color: color-mix(in srgb, var(--ink) 78%, var(--muted));
+    font-size: 0.82rem;
+    font-weight: 700;
+    text-decoration: none;
+    transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.author-links a:hover {
+    color: var(--accent);
+    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
+}
+
+.author-links svg {
+    flex: none;
+}
+
 @media (max-width: 1040px) {
     .article-layout {
         display: block;
diff --git a/website/src/components/AuthorCard.astro b/website/src/components/AuthorCard.astro
new file mode 100644
index 00000000..75eb9f7e
--- /dev/null
+++ b/website/src/components/AuthorCard.astro
@@ -0,0 +1,30 @@
+---
+const name = 'Can Celik';
+const role = 'Building Herdr';
+const photo = '/assets/author-can.jpeg';
+const x = 'https://x.com/lumendriada';
+const email = 'ogulcancelik@gmail.com';
+---
+
+<aside class="author-card" aria-label="About the author">
+  <img class="author-photo" src={photo} width="72" height="72" alt={name} loading="lazy" decoding="async" />
+  <div class="author-body">
+    <p class="author-name">{name}</p>
+    <p class="author-role">{role}</p>
+    <div class="author-links">
+      <a href={x} target="_blank" rel="me noopener" aria-label={`${name} on X`}>
+        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="currentColor">
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+        </svg>
+        <span>X</span>
+      </a>
+      <a href={`mailto:${email}`} aria-label={`Email ${name}`}>
+        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="2.5" y="4.5" width="19" height="15" rx="2" />
+          <path d="m3 6 9 7 9-7" />
+        </svg>
+        <span>Email</span>
+      </a>
+    </div>
+  </div>
+</aside>
diff --git a/website/src/components/MarketingLayout.astro b/website/src/components/MarketingLayout.astro
index 381daf03..dfb68ca5 100644
--- a/website/src/components/MarketingLayout.astro
+++ b/website/src/components/MarketingLayout.astro
@@ -58,7 +58,7 @@ const ogImageUrl = new URL(ogImage, 'https://herdr.dev').toString();
         document.documentElement.setAttribute("data-palette", saved || system);
       })();
     </script>
-    <link rel="stylesheet" href="/css/style.css?v=39" />
+    <link rel="stylesheet" href="/css/style.css?v=40" />
   </head>
   <body>
     <header class="site-header">
diff --git a/website/src/pages/blog/[slug].astro b/website/src/pages/blog/[slug].astro
index 1de8df6a..48cba857 100644
--- a/website/src/pages/blog/[slug].astro
+++ b/website/src/pages/blog/[slug].astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection, render } from 'astro:content';
 import MarketingLayout from '../../components/MarketingLayout.astro';
+import AuthorCard from '../../components/AuthorCard.astro';
 
 export async function getStaticPaths() {
   const posts = await getCollection('blog');
@@ -55,6 +56,7 @@ const sectionHeadings = headings.filter((heading) => heading.depth === 2);
         <div class="article-prose">
           <Content />
         </div>
+        <AuthorCard />
       </article>
     </div>
   </main>