Initial portfolio site: Astro + Tailwind MVP
Outcome-led hero, about, grouped skills, experience summary, featured projects + /projects index, static contact, SEO/OG, dark/light theme. Dockerfile + nginx config + build script for homelab deploy.
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
---
|
||||
import { site } from "../data/site";
|
||||
import { experience } from "../data/experience";
|
||||
import { cvAvailable } from "../lib/assets";
|
||||
---
|
||||
|
||||
<div class="about">
|
||||
<div class="about__bio" data-reveal>
|
||||
<p class="lead">{site.bio}</p>
|
||||
{cvAvailable && (
|
||||
<p class="about__cv">
|
||||
<a class="btn" href="/cv.pdf" download>Download full CV (PDF)</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ol class="about__timeline">
|
||||
{
|
||||
experience.map((role) => (
|
||||
<li class="about__role" data-reveal>
|
||||
<div class="about__role-head">
|
||||
<h3 class="about__role-title">{role.title}</h3>
|
||||
<span class="mono about__role-period">{role.period}</span>
|
||||
</div>
|
||||
<p class="mono about__role-org">{role.org}</p>
|
||||
<p class="about__role-summary">{role.summary}</p>
|
||||
{role.highlights.length > 0 && (
|
||||
<ul class="about__highlights">
|
||||
{role.highlights.map((h) => (
|
||||
<li>{h}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.about {
|
||||
display: grid;
|
||||
gap: var(--space-7);
|
||||
}
|
||||
@media (min-width: 880px) {
|
||||
.about {
|
||||
grid-template-columns: 1fr 1.1fr;
|
||||
gap: var(--space-8);
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
.about__cv {
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.about__timeline {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
.about__role {
|
||||
position: relative;
|
||||
padding-left: var(--space-5);
|
||||
border-left: 1px solid var(--border-strong);
|
||||
}
|
||||
.about__role::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
top: 0.4rem;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 4px var(--accent-dim);
|
||||
}
|
||||
.about__role-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.about__role-title {
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
.about__role-period {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
.about__role-org {
|
||||
color: var(--accent);
|
||||
font-size: var(--step--1);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
.about__role-summary {
|
||||
color: var(--text-dim);
|
||||
margin-top: var(--space-2);
|
||||
font-size: var(--step-0);
|
||||
}
|
||||
.about__highlights {
|
||||
margin: var(--space-3) 0 0;
|
||||
padding-left: 1.1rem;
|
||||
color: var(--text-dim);
|
||||
font-size: var(--step--1);
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.about__highlights li::marker {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
// Cheap, CSS-only topology motif: a faint grid + slow-drifting accent glows.
|
||||
// No canvas, no WebGL, no JS. Fully disabled under prefers-reduced-motion.
|
||||
---
|
||||
|
||||
<div class="bg" aria-hidden="true">
|
||||
<div class="bg__grid"></div>
|
||||
<div class="bg__glow bg__glow--a"></div>
|
||||
<div class="bg__glow bg__glow--b"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.bg__grid {
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
background-image:
|
||||
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
|
||||
background-size: 46px 46px;
|
||||
/* Fade the grid out toward the edges so it reads as a motif, not a table. */
|
||||
mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
|
||||
-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
|
||||
}
|
||||
.bg__glow {
|
||||
position: absolute;
|
||||
width: 46rem;
|
||||
height: 46rem;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.bg__glow--a {
|
||||
top: -22rem;
|
||||
left: -10rem;
|
||||
background: radial-gradient(circle, var(--accent-glow), transparent 62%);
|
||||
animation: drift-a 26s var(--ease) infinite alternate;
|
||||
}
|
||||
.bg__glow--b {
|
||||
top: -16rem;
|
||||
right: -14rem;
|
||||
background: radial-gradient(circle, var(--accent-glow), transparent 65%);
|
||||
opacity: 0.35;
|
||||
animation: drift-b 32s var(--ease) infinite alternate;
|
||||
}
|
||||
@keyframes drift-a {
|
||||
to {
|
||||
transform: translate(6rem, 4rem) scale(1.12);
|
||||
}
|
||||
}
|
||||
@keyframes drift-b {
|
||||
to {
|
||||
transform: translate(-5rem, 3rem) scale(1.08);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bg__glow {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
import { site } from "../data/site";
|
||||
import { socials } from "../data/socials";
|
||||
---
|
||||
|
||||
<div class="contact card" data-reveal>
|
||||
<div class="contact__body">
|
||||
<p class="contact__lead">
|
||||
Open to conversations about platform engineering, edge infrastructure, and
|
||||
GPU/AI systems. The fastest way to reach me is email.
|
||||
</p>
|
||||
<a class="btn btn--primary contact__mail mono" href={`mailto:${site.email}`}>
|
||||
{site.email}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul class="contact__links">
|
||||
{
|
||||
socials.map((s) => (
|
||||
<li>
|
||||
<a
|
||||
class="contact__link"
|
||||
href={s.href}
|
||||
rel={s.external ? "noopener noreferrer" : undefined}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
|
||||
<path d={s.icon} fill="currentColor" />
|
||||
</svg>
|
||||
<span>{s.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.contact {
|
||||
padding: var(--space-6);
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.contact {
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.contact__lead {
|
||||
color: var(--text-dim);
|
||||
font-size: var(--step-1);
|
||||
line-height: 1.55;
|
||||
max-width: 38ch;
|
||||
}
|
||||
.contact__mail {
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.contact__links {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.contact__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
.contact__link:hover {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
import { site } from "../data/site";
|
||||
import { socials } from "../data/socials";
|
||||
const year = 2026; // build-stamped; bump via the build, not a runtime Date()
|
||||
---
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer__inner">
|
||||
<div>
|
||||
<p class="mono footer__name">{site.name}</p>
|
||||
<p class="footer__meta">
|
||||
{site.role} · Served from a homelab Kubernetes cluster over an encrypted tunnel.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer__links">
|
||||
{
|
||||
socials.map((s) => (
|
||||
<a
|
||||
href={s.href}
|
||||
rel={s.external ? "noopener noreferrer" : undefined}
|
||||
aria-label={s.label}
|
||||
title={s.label}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
|
||||
<path d={s.icon} fill="currentColor" />
|
||||
</svg>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer__base">
|
||||
<span class="mono">© {year} {site.name}</span>
|
||||
<span class="mono footer__dot">·</span>
|
||||
<span class="mono">built with Astro, shipped via GitOps</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding-block: var(--space-7) var(--space-6);
|
||||
margin-top: var(--space-8);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.footer__inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-5);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.footer__name {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
.footer__meta {
|
||||
font-size: var(--step--1);
|
||||
color: var(--text-faint);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.footer__links {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.footer__links a {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.footer__links a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
.footer__base {
|
||||
margin-top: var(--space-5);
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-faint);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
import BackgroundGrid from "./BackgroundGrid.astro";
|
||||
import { site } from "../data/site";
|
||||
import { cvAvailable } from "../lib/assets";
|
||||
---
|
||||
|
||||
<section class="hero">
|
||||
<BackgroundGrid />
|
||||
<div class="container hero__inner">
|
||||
<p class="eyebrow hero__eyebrow">{site.role}</p>
|
||||
|
||||
<h1 class="hero__title">
|
||||
{site.name}
|
||||
</h1>
|
||||
|
||||
<p class="hero__positioning">{site.positioning}</p>
|
||||
|
||||
<ul class="hero__tags" aria-label="Core technologies">
|
||||
{site.tagline.map((t) => <li class="mono">{t}</li>)}
|
||||
</ul>
|
||||
|
||||
<div class="hero__cta">
|
||||
<a class="btn btn--primary" href="/#projects">View Projects</a>
|
||||
{cvAvailable && (
|
||||
<a class="btn" href="/cv.pdf" download>
|
||||
Download CV
|
||||
</a>
|
||||
)}
|
||||
<a class="btn" href="/#contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: min(88vh, 760px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.hero__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-block: var(--space-9);
|
||||
}
|
||||
.hero__eyebrow {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.hero__title {
|
||||
font-size: var(--step-5);
|
||||
letter-spacing: -0.03em;
|
||||
background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 62%, var(--accent)));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.hero__positioning {
|
||||
margin-top: var(--space-5);
|
||||
max-width: 42rem;
|
||||
font-size: var(--step-2);
|
||||
line-height: 1.35;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.hero__tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: var(--space-5) 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
font-size: var(--step--1);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.hero__tags li {
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.hero__tags li::before {
|
||||
content: "▹";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent);
|
||||
}
|
||||
.hero__cta {
|
||||
margin-top: var(--space-6);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
import ThemeToggle from "./ThemeToggle.astro";
|
||||
import { site } from "../data/site";
|
||||
|
||||
const links = [
|
||||
{ label: "About", href: "/#about" },
|
||||
{ label: "Skills", href: "/#skills" },
|
||||
{ label: "Projects", href: "/#projects" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
];
|
||||
---
|
||||
|
||||
<header class="nav">
|
||||
<div class="container nav__inner">
|
||||
<a class="nav__brand mono" href="/" aria-label={`${site.name} — home`}>
|
||||
<span class="nav__prompt">~/</span><span>{site.handle}</span><span class="nav__caret" aria-hidden="true">▮</span>
|
||||
</a>
|
||||
|
||||
<nav class="nav__links" aria-label="Primary">
|
||||
{links.map((l) => <a href={l.href}>{l.label}</a>)}
|
||||
</nav>
|
||||
|
||||
<div class="nav__actions">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: color-mix(in srgb, var(--bg) 82%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.nav__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
height: 4rem;
|
||||
}
|
||||
.nav__brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
font-size: var(--step-0);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.nav__brand:hover {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
}
|
||||
.nav__prompt {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
.nav__caret {
|
||||
color: var(--accent);
|
||||
animation: blink 1.1s steps(1) infinite;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nav__caret {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
.nav__links {
|
||||
display: none;
|
||||
gap: var(--space-5);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
.nav__links a {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.nav__links a:hover {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.nav__links {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
import type { Project } from "../data/projects";
|
||||
interface Props {
|
||||
project: Project;
|
||||
}
|
||||
const { project } = Astro.props;
|
||||
const href = project.hasCaseStudy ? `/projects/${project.slug}` : undefined;
|
||||
const Tag = href ? "a" : "article";
|
||||
---
|
||||
|
||||
<Tag class="project card" href={href} data-reveal>
|
||||
<div class="project__top">
|
||||
<h3 class="project__title">{project.title}</h3>
|
||||
{href && <span class="project__arrow" aria-hidden="true">→</span>}
|
||||
</div>
|
||||
|
||||
<p class="project__outcome">{project.outcome}</p>
|
||||
<p class="project__summary">{project.summary}</p>
|
||||
|
||||
<ul class="project__stack">
|
||||
{project.stack.map((s) => <li class="tag">{s}</li>)}
|
||||
</ul>
|
||||
|
||||
<p class="project__meta mono">
|
||||
<span>{project.role}</span><span class="project__sep">·</span><span>{project.period}</span>
|
||||
</p>
|
||||
</Tag>
|
||||
|
||||
<style>
|
||||
.project {
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
color: inherit;
|
||||
height: 100%;
|
||||
}
|
||||
a.project:hover {
|
||||
text-decoration: none;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.project__top {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.project__title {
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
.project__arrow {
|
||||
color: var(--accent);
|
||||
transition: transform 0.2s var(--ease);
|
||||
}
|
||||
a.project:hover .project__arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.project__outcome {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
border-left: 2px solid var(--accent);
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
.project__summary {
|
||||
color: var(--text-dim);
|
||||
font-size: var(--step--1);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.project__stack {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: var(--space-2) 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.project__meta {
|
||||
margin-top: auto;
|
||||
padding-top: var(--space-3);
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-faint);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.project__sep {
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
interface Props {
|
||||
id: string;
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
/** Monospace index like "01" shown beside the eyebrow. */
|
||||
index?: string;
|
||||
}
|
||||
const { id, eyebrow, title, index } = Astro.props;
|
||||
---
|
||||
|
||||
<section id={id} class="section">
|
||||
<div class="container">
|
||||
<header class="section__head" data-reveal>
|
||||
<p class="eyebrow">
|
||||
{index && <span class="section__index">{index}</span>}{eyebrow}
|
||||
</p>
|
||||
<h2 class="section__title">{title}</h2>
|
||||
</header>
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.section__head {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.section__index {
|
||||
color: var(--text-faint);
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
.section__title {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step-3);
|
||||
max-width: 22ch;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
import type { SkillGroup } from "../data/skills";
|
||||
interface Props {
|
||||
group: SkillGroup;
|
||||
}
|
||||
const { group } = Astro.props;
|
||||
---
|
||||
|
||||
<article class="skill card" data-reveal>
|
||||
<h3 class="skill__title">{group.title}</h3>
|
||||
<p class="skill__blurb">{group.blurb}</p>
|
||||
<ul class="skill__items">
|
||||
{group.items.map((item) => <li class="tag">{item}</li>)}
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.skill {
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.skill__title {
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
.skill__title::before {
|
||||
content: "# ";
|
||||
color: var(--accent);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.skill__blurb {
|
||||
color: var(--text-dim);
|
||||
font-size: var(--step--1);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.skill__items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: var(--space-2) 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
// Light/dark toggle. The pre-paint script in Layout sets the initial theme;
|
||||
// this just flips + persists it.
|
||||
---
|
||||
|
||||
<button
|
||||
id="theme-toggle"
|
||||
class="theme-toggle"
|
||||
type="button"
|
||||
aria-label="Toggle colour theme"
|
||||
title="Toggle colour theme"
|
||||
>
|
||||
<svg class="icon icon-sun" viewBox="0 0 24 24" aria-hidden="true" width="18" height="18">
|
||||
<circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="1.6" />
|
||||
<g stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
|
||||
<path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M19.1 4.9l-1.8 1.8M6.7 17.3l-1.8 1.8" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="icon icon-moon" viewBox="0 0 24 24" aria-hidden="true" width="18" height="18">
|
||||
<path
|
||||
d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.6 6.6 0 0 0 9.8 9.8Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.theme-toggle {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
|
||||
}
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--accent-line);
|
||||
color: var(--text);
|
||||
}
|
||||
.icon {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
/* Show the icon for the theme you'd switch TO. */
|
||||
:global([data-theme="dark"]) .icon-sun {
|
||||
display: block;
|
||||
}
|
||||
:global([data-theme="dark"]) .icon-moon {
|
||||
display: none;
|
||||
}
|
||||
:global([data-theme="light"]) .icon-sun {
|
||||
display: none;
|
||||
}
|
||||
:global([data-theme="light"]) .icon-moon {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const btn = document.getElementById("theme-toggle");
|
||||
btn?.addEventListener("click", () => {
|
||||
const root = document.documentElement;
|
||||
const next = root.dataset.theme === "light" ? "dark" : "light";
|
||||
root.dataset.theme = next;
|
||||
try {
|
||||
localStorage.setItem("theme", next);
|
||||
} catch (e) {
|
||||
/* ignore */
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user