feat(hero): refactor home hero to 2-column desktop grid and mobile visual flow
Deploy / build (push) Successful in 24s
Deploy / build (push) Successful in 24s
This commit is contained in:
hoelee committed
1 parent
9fd02b8320
commit
d5a0fc089d
3 files changed
+118
-64
No files matched your search
+30
-28
@@ -32,37 +32,39 @@ const featuredMetrics: Record<string, string> = {
|
||||
|
||||
<BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
|
||||
<section class="hero">
|
||||
<div class="hero-id">
|
||||
<picture>
|
||||
<source srcset={SITE.photo.smallWebp} type="image/webp" />
|
||||
<img
|
||||
class="hero-photo"
|
||||
src={SITE.photo.small}
|
||||
alt={`${SITE.author} (${SITE.handle})`}
|
||||
width="72"
|
||||
height="72"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
<h1>{SITE.author} — full-stack developer & DevOps engineer</h1>
|
||||
<div class="hero-content">
|
||||
<div class="hero-id">
|
||||
<picture>
|
||||
<source srcset={SITE.photo.smallWebp} type="image/webp" />
|
||||
<img
|
||||
class="hero-photo"
|
||||
src={SITE.photo.small}
|
||||
alt={`${SITE.author} (${SITE.handle})`}
|
||||
width="72"
|
||||
height="72"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
<h1>{SITE.author} — full-stack developer & DevOps engineer</h1>
|
||||
</div>
|
||||
<p class="hero-sub">
|
||||
I build and operate production web systems — from the code down to the servers.
|
||||
<strong>162 containers across three self-managed hosts</strong> 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.
|
||||
</p>
|
||||
<p 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>
|
||||
<p class="hero-note">
|
||||
{posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="hero-sub">
|
||||
I build and operate production web systems — from the code down to the servers.
|
||||
<strong>162 containers across three self-managed hosts</strong> 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.
|
||||
</p>
|
||||
<p 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>
|
||||
<p class="hero-note">
|
||||
{posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
|
||||
</p>
|
||||
<div class="hero-banner-card">
|
||||
<picture>
|
||||
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 1120px) 100vw, 1120px" type="image/webp" />
|
||||
<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"
|
||||
|
||||
+27
-25
@@ -36,34 +36,36 @@ const featuredMetrics: Record<string, string> = {
|
||||
altLocaleUrl={`${SITE.url}/`}
|
||||
>
|
||||
<section class="hero">
|
||||
<div class="hero-id">
|
||||
<picture>
|
||||
<source srcset={SITE.photo.smallWebp} type="image/webp" />
|
||||
<img
|
||||
class="hero-photo"
|
||||
src={SITE.photo.small}
|
||||
alt={`${SITE.author}（${SITE.handle}）`}
|
||||
width="72"
|
||||
height="72"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
<h1>{SITE.author} —— 全栈开发者兼 DevOps 工程师</h1>
|
||||
<div class="hero-content">
|
||||
<div class="hero-id">
|
||||
<picture>
|
||||
<source srcset={SITE.photo.smallWebp} type="image/webp" />
|
||||
<img
|
||||
class="hero-photo"
|
||||
src={SITE.photo.small}
|
||||
alt={`${SITE.author}（${SITE.handle}）`}
|
||||
width="72"
|
||||
height="72"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
<h1>{SITE.author} —— 全栈开发者兼 DevOps 工程师</h1>
|
||||
</div>
|
||||
<p class="hero-sub">
|
||||
从代码到服务器，生产环境的 Web 系统我自己从头做到尾。<strong>三台自管服务器上跑着 162 个容器</strong>：客户站点、邮件平台、CI/CD、流程自动化，还有这个博客。这里写的是「坏了什么、证据在哪、怎么修好」。
|
||||
</p>
|
||||
<p 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>
|
||||
<p class="hero-note">
|
||||
共 {posts.length} 篇中文文章 · <a href="/">English</a> · <a href="/rss.xml">RSS</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="hero-sub">
|
||||
从代码到服务器，生产环境的 Web 系统我自己从头做到尾。<strong>三台自管服务器上跑着 162 个容器</strong>：客户站点、邮件平台、CI/CD、流程自动化，还有这个博客。这里写的是「坏了什么、证据在哪、怎么修好」。
|
||||
</p>
|
||||
<p 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>
|
||||
<p class="hero-note">
|
||||
共 {posts.length} 篇中文文章 · <a href="/">English</a> · <a href="/rss.xml">RSS</a>
|
||||
</p>
|
||||
<div class="hero-banner-card">
|
||||
<picture>
|
||||
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 1120px) 100vw, 1120px" type="image/webp" />
|
||||
<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"
|
||||
|
||||
Reference in new issue
Block a user