diff --git a/src/components/IconLinkCard.astro b/src/components/IconLinkCard.astro new file mode 100644 index 0000000..10c23e1 --- /dev/null +++ b/src/components/IconLinkCard.astro @@ -0,0 +1,125 @@ +--- +// Icon + label + action link card. Shared by About and Contact. +// Surface + hover-lift come from the global .card / .card--interactive classes. +interface Props { + href?: string | null; + /** SVG path `d` for a 24×24 viewBox icon */ + icon: string; + label: string; + action: string; +} +const { href, icon, label, action } = Astro.props; +const external = !!href && href.startsWith('http'); +--- + + + + {label} + {action} + + + + diff --git a/src/components/Stat.astro b/src/components/Stat.astro new file mode 100644 index 0000000..10a4dbf --- /dev/null +++ b/src/components/Stat.astro @@ -0,0 +1,28 @@ +--- +// A single number + label stat (hero counters, etc.). +interface Props { + value: number | string; + label: string; +} +const { value, label } = Astro.props; +--- + +
+
{value}
+
{label}
+
+ + diff --git a/src/components/Step.astro b/src/components/Step.astro new file mode 100644 index 0000000..ec7917b --- /dev/null +++ b/src/components/Step.astro @@ -0,0 +1,44 @@ +--- +// A numbered process step (see the Contribute page). +interface Props { + n: string; + title: string; + body: string; +} +const { n, title, body } = Astro.props; +--- + +
+
{n}
+
+

{title}

+

{body}

+
+
+ + diff --git a/src/pages/about.astro b/src/pages/about.astro index ef3017a..e44f131 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -1,5 +1,6 @@ --- import BaseLayout from '@/layouts/BaseLayout.astro'; +import IconLinkCard from '@/components/IconLinkCard.astro'; import { SITE } from '@/lib/site'; const GITHUB_URL = 'https://github.com/HumbleBee14'; @@ -77,31 +78,14 @@ const links = [

- This site is open source, MIT-licensed for the code, and Creative Commons / All Rights - Reserved per author for the writing. No paywalls, no popups, no "10x your ML career" - funnels. Just notes from the workbench. + Everything here is © its respective author, all rights reserved. No paywalls, no popups, no + "10x your ML career" funnels. Just notes from the workbench.

{ links.map((c) => ( - - - {c.label} - {c.action} - - + )) }
@@ -205,122 +189,11 @@ const links = [ grid-template-columns: repeat(2, 1fr); gap: 14px; } - .about-card { - position: relative; - display: grid; - grid-template-columns: 56px 1fr 28px; - grid-template-areas: - 'icon label arrow' - 'icon action arrow'; - column-gap: 16px; - row-gap: 2px; - align-items: center; - padding: 22px; - border: 1px solid var(--line); - border-radius: var(--radius-lg); - background: var(--paper-2); - color: inherit !important; - text-decoration: none; - overflow: hidden; - transition: - transform 0.18s ease, - border-color 0.18s ease, - box-shadow 0.18s ease, - background 0.18s ease; - } - .about-card { - border-bottom: 1px solid var(--line); - } - .about-card::before { - content: ''; - position: absolute; - inset: 0 auto 0 0; - width: 3px; - background: var(--accent); - transform: scaleY(0); - transform-origin: top; - transition: transform 0.22s ease; - } - .about-card:hover { - transform: translateY(-2px); - border-color: var(--accent); - background: var(--paper); - box-shadow: 0 8px 24px -14px color-mix(in srgb, var(--accent) 40%, transparent); - } - .about-card:hover::before { - transform: scaleY(1); - } - .about-card:hover .about-action, - .about-card:hover .about-arrow, - .about-card:hover .about-icon { - color: var(--accent); - } - .about-card:hover .about-icon { - border-color: var(--accent); - } - .about-card:hover .about-arrow { - transform: translateX(4px); - } - - .about-icon { - grid-area: icon; - display: inline-flex; - align-items: center; - justify-content: center; - width: 48px; - height: 48px; - border-radius: 10px; - background: var(--paper); - border: 1px solid var(--line); - color: var(--ink-2); - transition: - color 0.15s ease, - border-color 0.15s ease; - } - .about-icon svg { - display: block; - fill: currentColor; - } - .about-label { - grid-area: label; - font-family: var(--font-mono); - font-size: 11px; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--ink-3); - align-self: end; - } - .about-action { - grid-area: action; - font-family: var(--font-display); - font-size: 20px; - color: var(--ink); - line-height: 1.15; - word-break: break-word; - align-self: start; - transition: color 0.15s ease; - } - .about-arrow { - grid-area: arrow; - display: inline-flex; - align-items: center; - justify-content: center; - font-family: var(--font-mono); - font-size: 18px; - color: var(--ink-3); - transition: - transform 0.18s ease, - color 0.15s ease; - } - @media (max-width: 620px) { .about-links { grid-template-columns: 1fr; gap: 10px; } - .about-card { - padding: 18px; - } .about-body { font-size: 16px; } diff --git a/src/pages/authors/index.astro b/src/pages/authors/index.astro index 10eab9d..e4c5027 100644 --- a/src/pages/authors/index.astro +++ b/src/pages/authors/index.astro @@ -50,7 +50,7 @@ const contributors = authors
{ contributors.map((c) => ( - +