diff --git a/website/assets/author-can.jpeg b/website/assets/author-can.jpeg new file mode 100644 index 00000000..83c47737 Binary files /dev/null and b/website/assets/author-can.jpeg differ 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'; +--- + + 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); })(); - +
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);
+