From 4a3c329fc6bae743186b2223fae063ba3e7e0220 Mon Sep 17 00:00:00 2001 From: hoelee Date: Tue, 27 Oct 2026 00:44:44 +0800 Subject: [PATCH] feat(about): upgrade about page into dual-track work-with-me conversion hub --- src/layouts/BaseLayout.astro | 4 +- src/pages/about.astro | 269 ++++++++++++++++++++++------------- src/pages/zh/about.astro | 259 +++++++++++++++++++++------------ src/styles/global.css | 216 ++++++++++++++++++++++++++++ 4 files changed, 556 insertions(+), 192 deletions(-) diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 101cd29..47ce604 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -62,8 +62,8 @@ const switchLabel = isZh ? 'EN' : '中文'; // Locale-aware nav labels const nav = isZh - ? { posts: '文章', categories: '分类', about: '关于', rss: 'RSS' } - : { posts: 'Posts', categories: 'Categories', about: 'About', rss: 'RSS' }; + ? { posts: '文章', categories: '分类', about: '关于与合作', rss: 'RSS' } + : { posts: 'Posts', categories: 'Categories', about: 'About & Hire', rss: 'RSS' }; --- diff --git a/src/pages/about.astro b/src/pages/about.astro index 61748ac..4b67e8b 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -5,17 +5,16 @@ import { getCollection } from 'astro:content'; import { isEn } from '../lib/lang'; import { SITE } from '../config'; -// Counted from the content collection, never typed by hand — a hardcoded number -// here already drifted once (71 while the homepage rendered 72). const writeUps = (await getCollection('posts', isEn)).length; --- - +
@@ -30,112 +29,186 @@ const writeUps = (await getCollection('posts', isEn)).length;

{SITE.author} ({SITE.handle})

-

- Full-stack developer and DevOps engineer in Malaysia. I run the production - infrastructure behind my own and my clients' systems — - 162 containers across three self-managed hosts — and I build - web systems for Malaysian small businesses. +

+ Full-Stack Developer · Production DevOps · AI Systems Architect (Malaysia, GMT+8)

-

- LinkedIn - · - GitHub - · - git.hoelee.com - · +

+ LinkedIn ↗ · + GitHub ↗ · + Self-Hosted Gitea ↗ · {SITE.email} -

+

Open to remote / hybrid engineering roles.

-

By the numbers

-
-
162containers in production
-
3self-managed hosts (78 compose stacks)
-
{writeUps}write-ups, each in English and 中文
-
0managed hosting layers — I run all three hosts myself
-
-

- That footprint is client websites, a mail platform, CI/CD, workflow automation, - analytics and this blog — held together by hand. It is also why the posts here - are specific: when something breaks in production, I am the one who finds out, - and the write-up is the record of what the evidence actually said. +

+ I build, ship, and operate production web systems from the application code down to the bare metal and Linux kernel. + 162 containers across three self-managed hosts run client applications, an enterprise mail platform (SifuMail), + CI/CD pipelines, and deterministic AI workflows. Every engineering post on this site is backed by real production telemetry.

-

What I actually work with

-
-
-

Infrastructure & DevOps

-
    -
  • Docker & Compose, Traefik, nginx, Cloudflare tunnels
    • -
  • Gitea Actions (self-hosted CI/CD), act_runner
    • -
  • Prometheus, Grafana, cAdvisor, Uptime Kuma
    • -
  • Unraid, Synology DSM, Linux (Debian/Ubuntu/Alpine)
    • -
-
-
-

Backend & automation

-
    -
  • PHP / CodeIgniter, Java / Spring
    • -
  • Node.js / TypeScript, Python
    • -
  • n8n, NocoDB, PostgreSQL / MySQL
    • -
  • REST APIs, webhooks, browser automation (CDP/Playwright)
    • -
-
-
-

Frontend & web

-
    -
  • Astro, JavaScript / TypeScript, React
    • -
  • WordPress (Kadence, Elementor, custom plugins)
    • -
  • Core Web Vitals, accessibility, responsive layout
    • -
-
-
-

Self-hosted services I run

-
    -
  • Authentik SSO, Mailcow, AList, Mem0
    • -
  • Umami analytics, Tor onion services
    • -
  • Whisper/TTS inference on a local GPU
    • -
-
+ +

By the numbers

+
+
162Containers in Production
+
3 Hosts78 Compose Stacks (Unraid · Synology · VPS)
+
{writeUps}Bilingual Engineering Write-ups (EN / 中文)
+
0Managed PaaS Crutches — Full Stack Ownership
-

For Malaysian SMEs — Hoelee Enterprise

-
-

- Website design and development is my main business — fast, - maintainable sites for Malaysian small and medium businesses, from the design - through to the hosting, DNS, backups and monitoring underneath it. - Email hosting is a secondary offering, not the focus. -

-

- Because I run the infrastructure myself, you get one person who can answer for - the whole stack instead of a developer who cannot see the server and a hosting - company that cannot read the code. -

-

- www.hoelee.com - · - WhatsApp +60 12-797 2969 -

-
+ +
+

How We Can Work Together

+

Choose the path that matches what you are looking for:

-

Get in touch

-
-
-

For hiring & engineering roles

-

{SITE.email}

-

LinkedIn · GitHub

-

Remote or hybrid; available for a technical conversation any time.

+
+ +
+
+ 🏢 For Business Owners & Founders +

Custom Web Systems, AI Automation & Self-Hosted Infrastructure

+

+ Stop losing night-time leads or overpaying for fragmented per-seat SaaS tools. I build turnkey websites, + automated customer pipelines, and private infrastructure that reduce headcount overhead. +

+
+ +
+

What I Deliver:

+
    +
  • 24/7 AI Customer & Sales Bots: Telegram & WhatsApp agents connected to your live catalogue, CRM, and automated trial/order provisioning.
    • +
  • Business Process Automation: End-to-end workflows (n8n, NocoDB, custom webhooks) that eliminate manual data entry and file delivery.
    • +
  • High-Conversion Web & Mail Systems: Custom websites, WordPress deep engineering, and reliable enterprise email hosting (SifuMail).
    • +
  • SaaS-to-Self-Hosted Migration: Cut recurring cloud bills by deploying secure, private open-source alternatives on dedicated infrastructure.
    • +
+ +

How Engagements Work:

+
    +
  1. 15-Min Discovery: Send your bottleneck via WhatsApp/Email.
    2. +
  2. Architecture & Fixed Quote: Clear scope, ROI estimate, and timeline.
    3. +
  3. Build & Production Handover: Tested deployment with full ownership.
    4. +
+
+ +
+ + 💬 Message Me on WhatsApp (+60 12-797 2969) + + + 🌐 Visit Hoelee Enterprise ↗ + +
+
+ + +
+
+ 👨‍💻 For Hiring Managers & Tech Leads +

Full-Stack, DevOps & AI Systems Engineering Roles

+

+ Open to high-impact remote or hybrid roles where owning the entire lifecycle — from TypeScript/backend logic + to Docker, reverse proxies, and LLM reliability — matters. +

+
+ +
+

Why Bring Me onto Your Team:

+
    +
  • End-to-End Ownership: I don't throw code over the wall to ops. I write the application, configure the CI/CD runner, secure the ingress gate, and debug kernel OOM kills when traffic spikes.
    • +
  • Pragmatic AI Engineering: I wrap LLMs inside deterministic state machines, strict payload contracts, and unit-tested retrieval — preventing hallucinations in production.
    • +
  • Evidence-Based Debugging: Whether it's a silent CDP click failure, a double-ingress Forward-Auth bypass, or a cgroup memory ceiling, I verify root causes before shipping fixes.
    • +
  • Bilingual Documentation Habit: Native-level technical communication in English and Mandarin (中文), with a strong culture of written runbooks and post-mortems.
    • +
+ +

Selected Proof-of-Work:

+ +
+ +
+ + 📧 Email Me for Roles & Interviews ({SITE.email}) + + + 🔗 Connect on LinkedIn ↗ + +
+
-
-

For business & web projects

-

WhatsApp +60 12-797 2969

-

www.hoelee.com

-

Malaysian SMEs: website design & development, hosting and maintenance.

+
+ + +
+

What I Actually Run in Production

+
+
+
+

Infrastructure & DevOps

+

Docker, Traefik, Cloudflare Tunnels, Authentik SSO, Gitea Actions CI/CD, Nginx, Prometheus, Grafana, Synology DSM, Unraid, Linux Kernel/Cgroup Tuning.

+
+
+ Proof: + Browse DevOps War Stories → +
+
+ +
+
+

AI Agents & Automation

+

LiteLLM Gateway, Mem0 (PostgreSQL + pgvector), n8n Workflows, Telegram/WhatsApp Bots (grammY), Chrome DevTools Protocol (CDP), Local GPU Whisper/TTS, Remotion.

+
+
+ Proof: + Browse AI Production Builds → +
+
+ +
+
+

Backend & Systems Architecture

+

TypeScript (Node.js/Hono), Python, PHP (CodeIgniter/WordPress Core), Java (Spring), PostgreSQL, NocoDB, REST Webhook Contracts & Idempotent State Machines.

+
+
+ Proof: + Browse System Case Studies → +
+
+ +
+
+

Frontend, Web & Digital Delivery

+

Astro 5, React, Vue, Technical SEO & GEO (Generative Engine Optimization), Bilingual i18n Architecture, Pagefind, Mailcow / SifuMail Enterprise Hosting.

+
+
+ Proof: + Browse Engineering Posts → +
+
-
+ + + +
+

My Engineering Guardrails

+
+
+ 1. State Machines for Business Rules, LLMs for Language +

Never trust a raw prompt with pricing, permissions, or payments. I isolate deterministic business flows in code and use AI strictly for semantic understanding.

+
+
+ 2. Verify the Metal, Not Just the Dashboard +

"I restarted it and it works" is not root-cause analysis. Every fix is verified against kernel logs, cgroup metrics, or automated regression tests.

+
+
+ 3. Pragmatic Cost-Efficiency +

By gluing battle-tested open-source components onto self-managed hardware, I help businesses avoid $500+/month SaaS sprawl without sacrificing uptime.

+
+
+
diff --git a/src/pages/zh/about.astro b/src/pages/zh/about.astro index efc0d70..6e64d7f 100644 --- a/src/pages/zh/about.astro +++ b/src/pages/zh/about.astro @@ -5,18 +5,17 @@ import { getCollection } from 'astro:content'; import { isZh } from '../../lib/lang'; import { SITE } from '../../config'; -// Counted from the content collection, never typed by hand — a hardcoded number -// here already drifted once (71 while the homepage rendered 72). const writeUps = (await getCollection('posts', isZh)).length; --- - +
@@ -31,106 +30,182 @@ const writeUps = (await getCollection('posts', isZh)).length;

{SITE.author} （{SITE.handle}）

-

- 在马来西亚的全栈开发者兼 DevOps 工程师。我亲手运维自己和客户系统背后的生产环境—— - 三台自管服务器上的 162 个容器——并为马来西亚中小企业构建 Web 系统。 +

+ 全栈开发者 · 生产级 DevOps · AI 系统架构师（马来西亚，GMT+8）

-

- LinkedIn - · - GitHub - · - git.hoelee.com - · +

+ LinkedIn ↗ · + GitHub ↗ · + 自建 Gitea ↗ · {SITE.email} -

-

接受 远程 / 混合 工程岗位机会。

+
+

接受 远程 / 混合办公 的高级工程岗位机会。

+

+ 我负责从底层服务器、Linux 内核到上层业务代码的全链路生产系统研发与运维。目前我独立管理着横跨 3 台物理与云主机的 162 个生产级容器，承载着客户业务系统、企业邮局平台（SifuMail）、自建 CI/CD 流水线以及确定性 AI 自动化工作流。本站的每一篇技术文章，皆源自真实生产环境的排障与交付实录。 +

+ +

几个数字

162个生产环境容器
-
3台自管服务器（78 个 compose 栈）
-
{writeUps}篇长文，每篇中英双版
-
0层托管服务——三台主机都我自己运维
-
-

- 这套环境里有客户网站、邮件平台、CI/CD、流程自动化、统计和这个博客，全靠手工拴在一起。 - 这也是为什么这里的文章都很具体：生产环境出问题时，第一个知道的人是我， - 文章就是「证据到底说了什么」的记录。 -

- -

我实际在用的东西

-
-
-

基建与 DevOps

-
    -
  • Docker 与 Compose、Traefik、nginx、Cloudflare tunnel
    • -
  • Gitea Actions（自托管 CI/CD）、act_runner
    • -
  • Prometheus、Grafana、cAdvisor、Uptime Kuma
    • -
  • Unraid、Synology DSM、Linux（Debian/Ubuntu/Alpine）
    • -
-
-
-

后端与自动化

-
    -
  • PHP / CodeIgniter、Java / Spring
    • -
  • Node.js / TypeScript、Python
    • -
  • n8n、NocoDB、PostgreSQL / MySQL
    • -
  • REST API、webhook、浏览器自动化（CDP/Playwright）
    • -
-
-
-

前端与 Web

-
    -
  • Astro、JavaScript / TypeScript、React
    • -
  • WordPress（Kadence、Elementor、自写插件）
    • -
  • Core Web Vitals、可访问性、响应式布局
    • -
-
-
-

我自托管的服务

-
    -
  • Authentik SSO、Mailcow、AList、Mem0
    • -
  • Umami 统计、Tor onion service
    • -
  • 本地 GPU 上的 Whisper / TTS 推理
    • -
-
+
3 台主机78 个 Compose 栈（Unraid · Synology · VPS）
+
{writeUps}篇长文，每篇中英双版实录
+
0层托管服务依赖——全栈自主可控
-

面向马来西亚中小企业 —— Hoelee Enterprise

-
-

- 网站设计与开发是我的主业——为马来西亚中小企业做快速、好维护的网站， - 从设计一直到它底下的托管、DNS、备份与监控。邮箱托管是次要副业，并非主业。 -

-

- 因为基建是我自己运维的，你面对的是一个人而不是两方——不会出现「写代码的人看不到服务器、 - 托管商读不懂代码」的情况。 -

-

- www.hoelee.com - · - WhatsApp +60 12-797 2969 -

-
+ +
+

如何与我展开合作

+

请选择符合您当前诉求的合作方向：

-

联系

-
-
-

招聘 / 工程岗位

-

{SITE.email}

-

LinkedIn · GitHub

-

远程或混合；随时可以聊技术。

+
+ +
+
+ 🏢 致企业主与业务负责人 +

网站与业务系统定制 · 24/7 AI 获客客服 · 私有化部署降本

+

+ 别再因为夜间与周末无人回复而流失宝贵客户，也无需为按人头收费的海外 SaaS 软件支付高昂月费。我帮中小企业搭建真正能省人手、接住订单的自动化业务系统。 +

+
+ +
+

核心交付能力：

+
    +
  • 24/7 AI 智能销冠与客服机器人：打通 Telegram 与 WhatsApp，直连您的商品库与 CRM，实现秒级精准答疑与全自动发放免费试用/订单开通。
    • +
  • 业务流程端到端自动化：基于 n8n、NocoDB 与定制 Webhook，消灭人工录入表格、手动发货与权限开通的重复劳动。
    • +
  • 高转化企业建站与企业邮局：定制开发高性能网站、WordPress 深度开发，以及高送达率的企业邮箱托管服务（SifuMail）。
    • +
  • 私有化开源替代方案部署：在专属服务器上部署安全可控的开源业务组件，大幅削减每月固定的 SaaS 订阅账单。
    • +
+ +

合作三步走流程：

+
    +
  1. 15 分钟需求诊断：通过 WhatsApp 或邮件直接发我您的业务卡点。
    2. +
  2. 架构方案与一口价评估：明确实施范围、ROI 估算与工期节点。
    3. +
  3. 生产交付与完整移交：充分测试后交付上线，提供完整源码与控制权。
    4. +
+
+ +
+ + 💬 WhatsApp 洽谈 (+60 12-797 2969) + + + 🌐 访问 Hoelee Enterprise 官网 ↗ + +
+
+ + +
+
+ 👨‍💻 致技术主管与招聘方 +

全栈开发、DevOps 运维与 AI 系统架构工程角色

+

+ 开放高价值的远程（Remote）或混合办公工程角色。看重具备从 TypeScript/后端业务逻辑到 Docker、反向代理与大模型可靠性全链路把控力的团队。 +

+
+ +
+

为什么选择我加入您的工程团队：

+
    +
  • 全链路端到端闭环能力：绝不把代码甩给运维了事。从编写应用业务逻辑、配置 CI/CD Runner，到加固入口鉴权网关与高并发下排查 Linux 内核 OOM 杀进程，具备完整的单兵作战闭环能力。
    • +
  • 务实的生产级 AI 工程化：拒绝脆弱的“纯 Prompt 玩具”。擅长用确定性状态机（State Machines）、严格的载荷契约（Payload Contracts）与自动化单测包裹大模型，确保生产环境 0 价格幻觉与稳定降级。
    • +
  • 重证据链的底层排障习惯：无论是 CDP 静默点击失效、双层反代导致的鉴权穿透，还是 Docker 谎报 Exit 0，坚持用内核日志、内存水位线与真实基准数据说话。
    • +
  • 良好的中英双语工程文档习惯：具备母语级中英文技术沟通能力，坚持编写详尽的高可用运维手册（Runbooks）与事故复盘总结。
    • +
+ +

精选代表作与证据链：

+ +
+ +
+ + 📧 邮件沟通岗位与技术交流 ({SITE.email}) + + + 🔗 在 LinkedIn 建立连接 ↗ + +
+
-
-

商业项目 / 网站

-

WhatsApp +60 12-797 2969

-

www.hoelee.com

-

马来西亚中小企业：网站设计开发、托管与维护。

+
+ + +
+

我在生产环境中实际运行的架构

+
+
+
+

基础设施与 DevOps

+

Docker 与 Compose、Traefik、Cloudflare Tunnels、Authentik SSO、Gitea Actions CI/CD、Nginx、Prometheus、Grafana、Synology DSM、Unraid、Linux 内核/Cgroup 调优。

+
+
+ 证据： + 浏览 DevOps 战壕实录 → +
+
+ +
+
+

AI 智能体与自动化

+

LiteLLM 网关、Mem0（PostgreSQL + pgvector）、n8n 自动化工作流、Telegram/WhatsApp 机器人（grammY）、Chrome DevTools Protocol（CDP）、本地 GPU Whisper/TTS 推理、Remotion。

+
+
+ 证据： + 浏览 AI 生产构建实录 → +
+
+ +
+
+

后端与系统架构

+

TypeScript（Node.js/Hono）、Python、PHP（CodeIgniter/WordPress Core）、Java（Spring）、PostgreSQL、NocoDB、REST Webhook 契约与幂等状态机设计。

+
+
+ 证据： + 浏览系统案例研究 → +
+
+ +
+
+

前端、Web 与交付体系

+

Astro 5、React、Vue、技术 SEO 与 GEO（生成式引擎优化）、双语 i18n 同构体系、Pagefind 静态检索、Mailcow / SifuMail 企业邮局托管。

+
+
+ 证据： + 浏览工程实践文章 → +
+
- +
+ + +
+

我的工程准则与铁律

+
+
+ 1. 状态机管确定性业务，大模型管开放语义 +

绝不把定价、权限验证或支付逻辑交给黑盒 Prompt。关键业务流用状态机代码锁死，AI 仅专注于自然语言语义理解。

+
+
+ 2. 信内核与指标，不信表象 +

“重启一下就好了”从来不是排障根因。每一次生产修复，都必须通过内核 dmesg 日志、cgroup 内存水位线或回归单测严格闭环。

+
+
+ 3. 极致的实用主义成本控制 +

通过在自管硬件上组装高可用开源生态组件，我帮助企业摆脱每月 $500+ 的 SaaS 软件账单膨胀，同时保障 24/7 高可用。

+
+
+
diff --git a/src/styles/global.css b/src/styles/global.css index 87fbbaa..15bfaa2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -499,6 +499,219 @@ pre code { .contact-split h3 { font-size: 0.95rem; margin: 0 0 0.35rem; } .contact-split p { margin: 0.2rem 0; font-size: 0.9rem; color: var(--muted); } +/* ---------- Dual-Track Work With Me Grid ---------- */ +.work-with-me-section { + margin: 2.5rem 0 3rem; +} + +.section-sub { + font-size: 1rem; + color: var(--muted); + margin: -0.25rem 0 1.5rem; +} + +.dual-track-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 1.5rem; + margin: 1.5rem 0 2rem; +} + +.track-card { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 1.75rem; + border-radius: var(--radius); + border: 1px solid var(--border); + background: var(--surface); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); +} + +.track-business { + border-top: 4px solid #10b981; /* 翡翠绿：商业增长与 ROI */ +} + +.track-hiring { + border-top: 4px solid #3b82f6; /* 科技蓝：架构与工程稳健 */ +} + +.track-badge { + display: inline-block; + font-size: 0.82rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + margin-bottom: 0.6rem; +} + +.track-business .track-badge { + color: #10b981; +} + +.track-hiring .track-badge { + color: #3b82f6; +} + +.track-header h3 { + margin: 0 0 0.6rem; + font-size: 1.25rem; + line-height: 1.35; + color: var(--ink); +} + +.track-header p { + font-size: 0.95rem; + color: var(--muted); + line-height: 1.55; + margin: 0; +} + +.track-body { + margin: 1.25rem 0; + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.track-body h4 { + font-size: 0.95rem; + margin: 0.6rem 0 0.2rem; + color: var(--ink); + font-weight: 600; +} + +.track-body ul, .track-body ol { + margin: 0; + padding-left: 1.25rem; +} + +.track-body li { + font-size: 0.9rem; + line-height: 1.55; + color: var(--muted); + margin: 0.35rem 0; +} + +.track-body li strong { + color: var(--ink); +} + +.proof-links { + list-style: none !important; + padding-left: 0 !important; +} + +.proof-links li { + margin: 0.45rem 0; +} + +.proof-links a { + color: var(--brand-soft); + text-decoration: none; + font-weight: 500; +} + +.proof-links a:hover { + color: var(--brand); + text-decoration: underline; +} + +.track-cta { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1.25rem; + padding-top: 1.25rem; + border-top: 1px solid var(--border); +} + +/* ---------- What I Actually Run in Production ---------- */ +.stack-section { + margin: 3rem 0; +} + +.stack-card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.25rem 1.4rem; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.stack-card h3 { + font-size: 1.05rem; + margin: 0 0 0.5rem; + color: var(--ink); +} + +.stack-card p { + font-size: 0.9rem; + line-height: 1.55; + color: var(--muted); + margin: 0 0 0.85rem; +} + +.stack-proof { + font-size: 0.85rem; + padding-top: 0.65rem; + border-top: 1px dashed var(--border); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.stack-proof span { + color: var(--muted); + font-weight: 600; +} + +.stack-proof a { + color: var(--brand); + text-decoration: none; + font-weight: 600; +} + +.stack-proof a:hover { + text-decoration: underline; +} + +/* ---------- Engineering Philosophy / Guardrails ---------- */ +.principles-section { + margin: 3rem 0 2rem; +} + +.principles-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1.25rem; + margin-top: 1rem; +} + +.principle-item { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.25rem 1.35rem; +} + +.principle-item strong { + display: block; + font-size: 0.98rem; + color: var(--ink); + margin-bottom: 0.45rem; + line-height: 1.4; +} + +.principle-item p { + margin: 0; + font-size: 0.88rem; + color: var(--muted); + line-height: 1.55; +} + /* ---------- Related posts ---------- */ .related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .related-grid { @@ -1320,6 +1533,9 @@ a.category-card:hover .art img { .stack-grid, .contact-split { grid-template-columns: 1fr; } .about-hero { flex-direction: column; gap: 1rem; } .about-photo { width: 140px; height: 140px; } + .dual-track-grid { grid-template-columns: 1fr; } + .track-cta { flex-direction: column; } + .track-cta .btn { width: 100%; justify-content: center; } .search-hint, .search-key { display: none; } .author-card { flex-direction: column; align-items: flex-start; } }