feat(home): upgrade hero with lightbox banner, infra stats grid, tech pills, and category shortcuts
Deploy / build (push) Successful in 17s
Deploy / build (push) Successful in 17s
This commit is contained in:
hoelee committed
1 parent
d5a0fc089d
commit
f0b98843e9
3 files changed
+443
-79
No files matched your search
+86
-19
@@ -32,7 +32,7 @@ const featuredMetrics: Record<string, string> = {
|
||||
|
||||
<BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-intro">
|
||||
<div class="hero-id">
|
||||
<picture>
|
||||
<source srcset={SITE.photo.smallWebp} type="image/webp" />
|
||||
@@ -53,32 +53,90 @@ const featuredMetrics: Record<string, string> = {
|
||||
platform, CI/CD, workflow automation and this blog. I write up what broke, what the
|
||||
evidence said, and how I fixed it.
|
||||
</p>
|
||||
<p class="hero-cta">
|
||||
<div class="hero-pills" aria-label="Core tech stack">
|
||||
<span class="hero-pills-label">Stack:</span>
|
||||
<a class="tech-pill" href="/tags/docker/">Docker</a>
|
||||
<a class="tech-pill" href="/tags/self-hosting/">Self-Hosting</a>
|
||||
<a class="tech-pill" href="/tags/n8n/">n8n</a>
|
||||
<a class="tech-pill" href="/tags/ai/">Local GPU AI</a>
|
||||
<a class="tech-pill" href="/tags/python/">Python</a>
|
||||
<a class="tech-pill" href="/tags/php/">PHP</a>
|
||||
<a class="tech-pill" href="/tags/security/">Security</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<button
|
||||
type="button"
|
||||
class="hero-banner-card"
|
||||
onclick="document.getElementById('arch-lightbox')?.showModal()"
|
||||
aria-label="View full architecture diagram"
|
||||
>
|
||||
<picture>
|
||||
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
|
||||
<img
|
||||
class="hero-banner-img"
|
||||
src="/images/hero-banner.jpg"
|
||||
alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
|
||||
width="1024"
|
||||
height="572"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
<span class="hero-banner-zoom-badge">🔍 View full architecture</span>
|
||||
</button>
|
||||
|
||||
<div class="hero-infra-grid" aria-label="Infrastructure stats">
|
||||
<div class="infra-stat-card">
|
||||
<div class="infra-stat-val">162</div>
|
||||
<div class="infra-stat-label">Containers in Prod</div>
|
||||
</div>
|
||||
<div class="infra-stat-card">
|
||||
<div class="infra-stat-val">3 Hosts</div>
|
||||
<div class="infra-stat-label">Unraid · Synology · VPS</div>
|
||||
</div>
|
||||
<div class="infra-stat-card">
|
||||
<div class="infra-stat-val">78</div>
|
||||
<div class="infra-stat-label">Compose Stacks</div>
|
||||
</div>
|
||||
<div class="infra-stat-card">
|
||||
<div class="infra-stat-val">91</div>
|
||||
<div class="infra-stat-label">Bilingual Write-ups</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-actions">
|
||||
<div class="hero-cta">
|
||||
<a class="btn btn-primary" href="#featured">Read the engineering case studies ↓</a>
|
||||
<a class="btn" href="/about/">Hiring? Profile & stack →</a>
|
||||
<a class="btn" href={SITE.website} target="_blank" rel="noopener">Malaysian SME? How I work ↗</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="hero-note">
|
||||
{posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hero-banner-card">
|
||||
<picture>
|
||||
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 900px) 100vw, 480px" type="image/webp" />
|
||||
<img
|
||||
class="hero-banner-img"
|
||||
src="/images/hero-banner.jpg"
|
||||
alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
|
||||
width="1024"
|
||||
height="572"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<dialog id="arch-lightbox" class="arch-lightbox" onclick="if (event.target === this) this.close()">
|
||||
<div class="arch-lightbox-inner">
|
||||
<button type="button" class="arch-lightbox-close" aria-label="Close" onclick="this.closest('dialog').close()">×</button>
|
||||
<img
|
||||
src="/images/hero-banner-2x.webp"
|
||||
alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
|
||||
width="2048"
|
||||
height="1144"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="arch-lightbox-caption">
|
||||
<span>From Code to Production — Systems Architecture & DevOps Infrastructure</span>
|
||||
<span class="arch-lightbox-hint">ESC / Click outside to close</span>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<section id="featured">
|
||||
<h2>Featured</h2>
|
||||
<div class="featured-bento-grid">
|
||||
@@ -120,7 +178,16 @@ const featuredMetrics: Record<string, string> = {
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Latest posts</h2>
|
||||
<div class="section-head-with-nav">
|
||||
<h2>Latest posts</h2>
|
||||
<div class="section-nav-pills" aria-label="Category shortcuts">
|
||||
<a class="section-nav-pill" href="/categories/case-studies/">case-studies</a>
|
||||
<a class="section-nav-pill" href="/categories/devops/">devops</a>
|
||||
<a class="section-nav-pill" href="/categories/tutorials/">tutorials</a>
|
||||
<a class="section-nav-pill" href="/categories/notes/">notes</a>
|
||||
<a class="section-nav-pill section-nav-all" href="/posts/">All {posts.length} →</a>
|
||||
</div>
|
||||
</div>
|
||||
{posts.length === 0 ? (
|
||||
<p><em>No posts yet — check back soon.</em></p>
|
||||
) : (
|
||||
|
||||
+86
-19
@@ -36,7 +36,7 @@ const featuredMetrics: Record<string, string> = {
|
||||
altLocaleUrl={`${SITE.url}/`}
|
||||
>
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-intro">
|
||||
<div class="hero-id">
|
||||
<picture>
|
||||
<source srcset={SITE.photo.smallWebp} type="image/webp" />
|
||||
@@ -54,32 +54,90 @@ const featuredMetrics: Record<string, string> = {
|
||||
<p class="hero-sub">
|
||||
从代码到服务器，生产环境的 Web 系统我自己从头做到尾。<strong>三台自管服务器上跑着 162 个容器</strong>：客户站点、邮件平台、CI/CD、流程自动化，还有这个博客。这里写的是「坏了什么、证据在哪、怎么修好」。
|
||||
</p>
|
||||
<p class="hero-cta">
|
||||
<div class="hero-pills" aria-label="核心技术栈">
|
||||
<span class="hero-pills-label">技术栈：</span>
|
||||
<a class="tech-pill" href="/zh/tags/docker/">Docker</a>
|
||||
<a class="tech-pill" href="/zh/tags/self-hosting/">自托管</a>
|
||||
<a class="tech-pill" href="/zh/tags/n8n/">n8n</a>
|
||||
<a class="tech-pill" href="/zh/tags/ai/">本地 GPU AI</a>
|
||||
<a class="tech-pill" href="/zh/tags/python/">Python</a>
|
||||
<a class="tech-pill" href="/zh/tags/php/">PHP</a>
|
||||
<a class="tech-pill" href="/zh/tags/security/">安全防护</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<button
|
||||
type="button"
|
||||
class="hero-banner-card"
|
||||
onclick="document.getElementById('arch-lightbox')?.showModal()"
|
||||
aria-label="点击放大架构图"
|
||||
>
|
||||
<picture>
|
||||
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
|
||||
<img
|
||||
class="hero-banner-img"
|
||||
src="/images/hero-banner.jpg"
|
||||
alt="从代码到生产环境 —— 系统架构与 DevOps 运维生态图"
|
||||
width="1024"
|
||||
height="572"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
<span class="hero-banner-zoom-badge">🔍 点击放大架构图</span>
|
||||
</button>
|
||||
|
||||
<div class="hero-infra-grid" aria-label="基础设施数据">
|
||||
<div class="infra-stat-card">
|
||||
<div class="infra-stat-val">162</div>
|
||||
<div class="infra-stat-label">生产环境容器</div>
|
||||
</div>
|
||||
<div class="infra-stat-card">
|
||||
<div class="infra-stat-val">3 台宿主</div>
|
||||
<div class="infra-stat-label">Unraid · 群晖 · VPS</div>
|
||||
</div>
|
||||
<div class="infra-stat-card">
|
||||
<div class="infra-stat-val">78</div>
|
||||
<div class="infra-stat-label">Compose 编排栈</div>
|
||||
</div>
|
||||
<div class="infra-stat-card">
|
||||
<div class="infra-stat-val">91 篇</div>
|
||||
<div class="infra-stat-label">中英双语实战复盘</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-actions">
|
||||
<div class="hero-cta">
|
||||
<a class="btn btn-primary" href="#featured">先看工程案例 ↓</a>
|
||||
<a class="btn" href="/zh/about/">招聘方：技术栈与履历 →</a>
|
||||
<a class="btn" href={SITE.website} target="_blank" rel="noopener">中小企业：合作方式 ↗</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="hero-note">
|
||||
共 {posts.length} 篇中文文章 · <a href="/">English</a> · <a href="/rss.xml">RSS</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="hero-banner-card">
|
||||
<picture>
|
||||
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 900px) 100vw, 480px" type="image/webp" />
|
||||
<img
|
||||
class="hero-banner-img"
|
||||
src="/images/hero-banner.jpg"
|
||||
alt="从代码到生产环境 —— 系统架构与 DevOps 运维生态图"
|
||||
width="1024"
|
||||
height="572"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<dialog id="arch-lightbox" class="arch-lightbox" onclick="if (event.target === this) this.close()">
|
||||
<div class="arch-lightbox-inner">
|
||||
<button type="button" class="arch-lightbox-close" aria-label="关闭" onclick="this.closest('dialog').close()">×</button>
|
||||
<img
|
||||
src="/images/hero-banner-2x.webp"
|
||||
alt="从代码到生产环境 —— 系统架构与 DevOps 运维生态图"
|
||||
width="2048"
|
||||
height="1144"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="arch-lightbox-caption">
|
||||
<span>从代码到生产环境 —— 系统架构与 DevOps 运维生态图</span>
|
||||
<span class="arch-lightbox-hint">ESC / 点击外部关闭</span>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<section id="featured">
|
||||
<h2>精选</h2>
|
||||
<div class="featured-bento-grid">
|
||||
@@ -121,7 +179,16 @@ const featuredMetrics: Record<string, string> = {
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>最新文章</h2>
|
||||
<div class="section-head-with-nav">
|
||||
<h2>最新文章</h2>
|
||||
<div class="section-nav-pills" aria-label="分类快捷入口">
|
||||
<a class="section-nav-pill" href="/zh/categories/case-studies/">工程案例</a>
|
||||
<a class="section-nav-pill" href="/zh/categories/devops/">运维</a>
|
||||
<a class="section-nav-pill" href="/zh/categories/tutorials/">教程</a>
|
||||
<a class="section-nav-pill" href="/zh/categories/notes/">笔记</a>
|
||||
<a class="section-nav-pill section-nav-all" href="/zh/posts/">全部 {posts.length} 篇 →</a>
|
||||
</div>
|
||||
</div>
|
||||
{posts.length === 0 ? (
|
||||
<p><em>中文文章即将发布，敬请期待。</em></p>
|
||||
) : (
|
||||
|
||||
Reference in new issue
Block a user