From d5a0fc089d3f21ffb087ef27ec578961336436f1 Mon Sep 17 00:00:00 2001 From: hoelee Date: Mon, 26 Oct 2026 10:16:14 +0800 Subject: [PATCH] feat(hero): refactor home hero to 2-column desktop grid and mobile visual flow --- src/pages/index.astro | 58 ++++++++++++++++---------------- src/pages/zh/index.astro | 52 +++++++++++++++-------------- src/styles/global.css | 72 ++++++++++++++++++++++++++++++++++------ 3 files changed, 118 insertions(+), 64 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 9783524..1cae67b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -32,37 +32,39 @@ const featuredMetrics: Record = {
-
- - - {`${SITE.author} - -

{SITE.author} — full-stack developer & DevOps engineer

+
+
+ + + {`${SITE.author} + +

{SITE.author} — full-stack developer & DevOps engineer

+
+

+ I build and operate production web systems — from the code down to the servers. + 162 containers across three self-managed hosts run client sites, a mail + platform, CI/CD, workflow automation and this blog. I write up what broke, what the + evidence said, and how I fixed it. +

+

+ Read the engineering case studies ↓ + Hiring? Profile & stack → + Malaysian SME? How I work ↗ +

+

+ {posts.length} posts in English and 中文 · RSS +

-

- I build and operate production web systems — from the code down to the servers. - 162 containers across three self-managed hosts run client sites, a mail - platform, CI/CD, workflow automation and this blog. I write up what broke, what the - evidence said, and how I fixed it. -

-

- Read the engineering case studies ↓ - Hiring? Profile & stack → - Malaysian SME? How I work ↗ -

-

- {posts.length} posts in English and 中文 · RSS -

- + = { altLocaleUrl={`${SITE.url}/`} >
-
- - - {`${SITE.author}（${SITE.handle}）`} - -

{SITE.author} —— 全栈开发者兼 DevOps 工程师

+
+
+ + + {`${SITE.author}（${SITE.handle}）`} + +

{SITE.author} —— 全栈开发者兼 DevOps 工程师

+
+

+ 从代码到服务器，生产环境的 Web 系统我自己从头做到尾。三台自管服务器上跑着 162 个容器：客户站点、邮件平台、CI/CD、流程自动化，还有这个博客。这里写的是「坏了什么、证据在哪、怎么修好」。 +

+

+ 先看工程案例 ↓ + 招聘方：技术栈与履历 → + 中小企业：合作方式 ↗ +

+

+ 共 {posts.length} 篇中文文章 · English · RSS +

-

- 从代码到服务器，生产环境的 Web 系统我自己从头做到尾。三台自管服务器上跑着 162 个容器：客户站点、邮件平台、CI/CD、流程自动化，还有这个博客。这里写的是「坏了什么、证据在哪、怎么修好」。 -

-

- 先看工程案例 ↓ - 招聘方：技术栈与履历 → - 中小企业：合作方式 ↗ -

-

- 共 {posts.length} 篇中文文章 · English · RSS -

- + = 900px) */ +@media (min-width: 900px) { + .hero { + display: grid; + grid-template-columns: 1.15fr 0.85fr; + gap: 2.5rem; + align-items: center; + } + .hero-content { + display: flex; + flex-direction: column; + min-width: 0; + } + .hero-banner-card { + border-radius: 12px; + margin: 0; + } +} + +/* Mobile & Tablet: single-column visual flow (< 900px) */ +@media (max-width: 899px) { + .hero { + display: flex; + flex-direction: column; + gap: 0; + } + .hero-content { + display: contents; + } + .hero-id { + order: 1; + margin-bottom: 0.75rem; + } + .hero-sub { + order: 2; + margin-bottom: 0; + } + .hero-banner-card { + order: 3; + margin: 1rem 0; + border-radius: 8px; + } + .hero-cta { + order: 4; + margin: 0 0 0.75rem; + } + .hero-note { + order: 5; + margin: 0; + } +} + /* ---------- Featured 2x2 Cyber-Bento Grid ---------- */ .featured-bento-grid { display: grid;