feat(identity): real author photo across the site + About page rewrite

The photo is the identity evidence the external review flagged as the biggest gap. One source image (Pictures/Professional Portrait with Blue Gradient Background.png, 1254x1254), two sizes, WebP first with a JPEG fallback — continuous tone is the case where WebP/JPEG beat PNG: 640x640 42 KB JPG / 26 KB WebP About page (190 CSS px) 128x128 3 KB JPG / 2 KB WebP author card + home hero avatar It now appears in the About hero, the author card at the end of every post, the home hero (both languages), and JSON-LD Person.image — the node search engines read to associate the name with a face. About went from 1,024 characters to five sections: identity with photo, "By the numbers" (162 containers / 3 hosts / 71 essays / 0 hosting companies between me and the servers), the real tech stack in four columns, the Hoelee Enterprise block (website design and development is the main business, email hosting secondary), and a contact split between hiring and business. Also: the headshot's dark-blue background sits close to the page background, so the photo, hero avatar and card avatar get a faint brand ring plus shadow. Pictures/ keeps the converted JPG master next to the untouched PNG.
2026-10-16 22:07:25 +08:00
1 parent 215051ef08
commit 6b7c5a983f
@@ -6,36 +6,130 @@ import { SITE } from '../config';

 <BaseLayout
  title="About — Mr Hoelee"
-  description={`About ${SITE.author} (${SITE.handle}).`}
+  description={`${SITE.author} (${SITE.handle}) — full-stack developer and DevOps engineer in Malaysia. Runs 162 containers across three self-managed hosts and builds web systems for small businesses.`}
  switchHref="/zh/about/"
  altLocaleUrl={`${SITE.url}/zh/about/`}
 >
-  <h1>About</h1>
+  <section class="about-hero">
+    <picture>
+      <source srcset={SITE.photo.largeWebp} type="image/webp" />
+      <img
+        class="about-photo"
+        src={SITE.photo.large}
+        alt={`${SITE.author} (${SITE.handle})`}
+        width="320"
+        height="320"
+        decoding="async"
+      />
+    </picture>
+    <div>
+      <h1>{SITE.author} <span class="handle">({SITE.handle})</span></h1>
+      <p class="about-lede">
+        Full-stack developer and DevOps engineer in Malaysia. I run the production
+        infrastructure behind my own and my clients' systems —
+        <strong>162 containers across three self-managed hosts</strong> — and I build
+        web systems for Malaysian small businesses.
+      </p>
+      <p class="about-links">
+        <a href={SITE.linkedin} target="_blank" rel="noopener">LinkedIn</a>
+        <span class="sep">·</span>
+        <a href={SITE.github} target="_blank" rel="noopener">GitHub</a>
+        <span class="sep">·</span>
+        <a href={SITE.gitea} target="_blank" rel="noopener">git.hoelee.com</a>
+        <span class="sep">·</span>
+        <a href={`mailto:${SITE.email}`}>{SITE.email}</a>
+      </p>
+      <p class="about-open">Open to <strong>remote / hybrid</strong> engineering roles.</p>
+    </div>
+  </section>
+
+  <h2>By the numbers</h2>
+  <div class="proof-grid">
+    <div class="proof-card"><span class="n">162</span><span class="l">containers in production</span></div>
+    <div class="proof-card"><span class="n">3</span><span class="l">self-managed hosts (78 compose stacks)</span></div>
+    <div class="proof-card"><span class="n">71</span><span class="l">write-ups, each in English and 中文</span></div>
+    <div class="proof-card"><span class="n">0</span><span class="l">hosting companies between me and the servers</span></div>
+  </div>
  <p>
-    I'm {SITE.author} ({SITE.handle}), a full-stack developer and DevOps engineer
-    based in Malaysia. I build web applications — PHP/CodeIgniter, Java/Spring,
-    JavaScript/TypeScript/React — and self-host a ~140-container homelab
-    (Docker, Traefik, nginx, Cloudflare tunnels). I run Hoelee Enterprise, a
-    website design & development business for Malaysian SMEs (email hosting is
-    a side offering, not the focus).
-  </p>
-  <p>
-    This blog is my living portfolio: I document what I build, from self-hosted
-    CI/CD and Docker orchestration to Web3 experiments and AI automation. If
-    you're a recruiter, a client, or a fellow builder, the posts here are the
-    most honest picture of what I can do.
+    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.
  </p>

-  <AuthorCard bio="Full-stack developer & DevOps engineer based in Malaysia. Open to remote / hybrid opportunities." />
+  <h2>What I actually work with</h2>
+  <div class="stack-grid">
+    <div>
+      <h3>Infrastructure &amp; DevOps</h3>
+      <ul>
+        <li>Docker &amp; Compose, Traefik, nginx, Cloudflare tunnels</li>
+        <li>Gitea Actions (self-hosted CI/CD), act_runner</li>
+        <li>Prometheus, Grafana, cAdvisor, Uptime Kuma</li>
+        <li>Unraid, Synology DSM, Linux (Debian/Ubuntu/Alpine)</li>
+      </ul>
+    </div>
+    <div>
+      <h3>Backend &amp; automation</h3>
+      <ul>
+        <li>PHP / CodeIgniter, Java / Spring</li>
+        <li>Node.js / TypeScript, Python</li>
+        <li>n8n, NocoDB, PostgreSQL / MySQL</li>
+        <li>REST APIs, webhooks, browser automation (CDP/Playwright)</li>
+      </ul>
+    </div>
+    <div>
+      <h3>Frontend &amp; web</h3>
+      <ul>
+        <li>Astro, JavaScript / TypeScript, React</li>
+        <li>WordPress (Kadence, Elementor, custom plugins)</li>
+        <li>Core Web Vitals, accessibility, responsive layout</li>
+      </ul>
+    </div>
+    <div>
+      <h3>Self-hosted services I run</h3>
+      <ul>
+        <li>Authentik SSO, Mailcow, AList, Mem0</li>
+        <li>Umami analytics, Tor onion services</li>
+        <li>Whisper/TTS inference on a local GPU</li>
+      </ul>
+    </div>
+  </div>

-  <h2>Contact</h2>
-  <p>
-    <a href={`mailto:${SITE.email}`}>{SITE.email}</a>
-    <span class="sep">·</span>
-    <a href={SITE.linkedin} target="_blank" rel="noopener">LinkedIn</a>
-    <span class="sep">·</span>
-    <a href={SITE.gitea} target="_blank" rel="noopener">git.hoelee.com</a>
-    <span class="sep">·</span>
-    <a href={SITE.website} target="_blank" rel="noopener">www.hoelee.com</a>
-  </p>
+  <h2>For Malaysian SMEs — Hoelee Enterprise</h2>
+  <div class="sme-block">
+    <p>
+      <strong>Website design and development is my main business</strong> — fast,
+      maintainable sites for Malaysian small and medium businesses, from the design
+      through to the hosting, DNS, backups and monitoring underneath it.
+      <strong>Email hosting</strong> is a secondary offering, not the focus.
+    </p>
+    <p>
+      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.
+    </p>
+    <p>
+      <a href={SITE.website} target="_blank" rel="noopener">www.hoelee.com</a>
+      <span class="sep">·</span>
+      <a href="https://wa.me/60127972969" target="_blank" rel="noopener">WhatsApp +60 12-797 2969</a>
+    </p>
+  </div>
+
+  <h2>Get in touch</h2>
+  <div class="contact-split">
+    <div>
+      <h3>For hiring &amp; engineering roles</h3>
+      <p><a href={`mailto:${SITE.email}`}>{SITE.email}</a></p>
+      <p><a href={SITE.linkedin} target="_blank" rel="noopener">LinkedIn</a> · <a href={SITE.github} target="_blank" rel="noopener">GitHub</a></p>
+      <p>Remote or hybrid; available for a technical conversation any time.</p>
+    </div>
+    <div>
+      <h3>For business &amp; web projects</h3>
+      <p><a href="https://wa.me/60127972969" target="_blank" rel="noopener">WhatsApp +60 12-797 2969</a></p>
+      <p><a href={SITE.website} target="_blank" rel="noopener">www.hoelee.com</a></p>
+      <p>Malaysian SMEs: website design &amp; development, hosting and maintenance.</p>
+    </div>
+  </div>
+
+  <AuthorCard />
 </BaseLayout>
@@ -25,7 +25,20 @@ const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);

 <BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
  <section class="hero">
-    <h1>{SITE.author} — full-stack developer &amp; DevOps engineer</h1>
+    <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 &amp; DevOps engineer</h1>
+    </div>
    <p class="hero-sub">
      I run <strong>162 containers across three self-managed hosts</strong> — client sites, a
      mail platform, CI/CD, workflow automation and this blog — and I build web systems for
@@ -6,35 +6,125 @@ import { SITE } from '../../config';

 <BaseLayout
  title="关于 — Mr Hoelee"
-  description={`关于 ${SITE.author}（${SITE.handle}）。`}
+  description={`${SITE.author}（${SITE.handle}）——在马来西亚的全栈开发者兼 DevOps 工程师。独自运维三台服务器上的 162 个容器，为中小企业构建 Web 系统。`}
  lang="zh"
  switchHref="/about/"
  altLocaleUrl={`${SITE.url}/about/`}
 >
-  <h1>关于</h1>
+  <section class="about-hero">
+    <picture>
+      <source srcset={SITE.photo.largeWebp} type="image/webp" />
+      <img
+        class="about-photo"
+        src={SITE.photo.large}
+        alt={`${SITE.author}（${SITE.handle}）`}
+        width="320"
+        height="320"
+        decoding="async"
+      />
+    </picture>
+    <div>
+      <h1>{SITE.author} <span class="handle">（{SITE.handle}）</span></h1>
+      <p class="about-lede">
+        在马来西亚的全栈开发者兼 DevOps 工程师。我亲手运维自己和客户系统背后的生产环境——
+        <strong>三台自管服务器上的 162 个容器</strong>——并为马来西亚中小企业构建 Web 系统。
+      </p>
+      <p class="about-links">
+        <a href={SITE.linkedin} target="_blank" rel="noopener">LinkedIn</a>
+        <span class="sep">·</span>
+        <a href={SITE.github} target="_blank" rel="noopener">GitHub</a>
+        <span class="sep">·</span>
+        <a href={SITE.gitea} target="_blank" rel="noopener">git.hoelee.com</a>
+        <span class="sep">·</span>
+        <a href={`mailto:${SITE.email}`}>{SITE.email}</a>
+      </p>
+      <p class="about-open">接受 <strong>远程 / 混合</strong> 工程岗位机会。</p>
+    </div>
+  </section>
+
+  <h2>几个数字</h2>
+  <div class="proof-grid">
+    <div class="proof-card"><span class="n">162</span><span class="l">个生产环境容器</span></div>
+    <div class="proof-card"><span class="n">3</span><span class="l">台自管服务器（78 个 compose 栈）</span></div>
+    <div class="proof-card"><span class="n">71</span><span class="l">篇长文，每篇中英双版</span></div>
+    <div class="proof-card"><span class="n">0</span><span class="l">夹在我和服务器之间的托管商</span></div>
+  </div>
  <p>
-    我是 {SITE.author}（{SITE.handle}），一名base在马来西亚的全栈开发者兼 DevOps
-    工程师。我做 Web 应用——PHP/CodeIgniter、Java/Spring、JavaScript/TypeScript/React——
-    并自托管一个约 140 个容器的 homelab（Docker、Traefik、nginx、Cloudflare tunnel）。
-    我运营 Hoelee Enterprise，一家面向马来西亚中小企业的网站设计开发公司
-    （邮箱托管只是副业，并非主业）。
-  </p>
-  <p>
-    这个博客就是我的动态作品集：我把自己构建的东西记录下来，从自托管 CI/CD、
-    Docker 编排，到 Web3 实验与 AI 自动化。无论你是招聘方、客户，还是同路的
-    开发者，这里的文章都是我能做什么最诚实的呈现。
+    这套环境里有客户网站、邮件平台、CI/CD、流程自动化、统计和这个博客，全靠手工拴在一起。
+    这也是为什么这里的文章都很具体：生产环境出问题时，第一个知道的人是我，
+    文章就是「证据到底说了什么」的记录。
  </p>

-  <AuthorCard bio="base在马来西亚的全栈开发者兼 DevOps 工程师。接受远程／混合办公机会。" />
+  <h2>我实际在用的东西</h2>
+  <div class="stack-grid">
+    <div>
+      <h3>基建与 DevOps</h3>
+      <ul>
+        <li>Docker 与 Compose、Traefik、nginx、Cloudflare tunnel</li>
+        <li>Gitea Actions（自托管 CI/CD）、act_runner</li>
+        <li>Prometheus、Grafana、cAdvisor、Uptime Kuma</li>
+        <li>Unraid、Synology DSM、Linux（Debian/Ubuntu/Alpine）</li>
+      </ul>
+    </div>
+    <div>
+      <h3>后端与自动化</h3>
+      <ul>
+        <li>PHP / CodeIgniter、Java / Spring</li>
+        <li>Node.js / TypeScript、Python</li>
+        <li>n8n、NocoDB、PostgreSQL / MySQL</li>
+        <li>REST API、webhook、浏览器自动化（CDP/Playwright）</li>
+      </ul>
+    </div>
+    <div>
+      <h3>前端与 Web</h3>
+      <ul>
+        <li>Astro、JavaScript / TypeScript、React</li>
+        <li>WordPress（Kadence、Elementor、自写插件）</li>
+        <li>Core Web Vitals、可访问性、响应式布局</li>
+      </ul>
+    </div>
+    <div>
+      <h3>我自托管的服务</h3>
+      <ul>
+        <li>Authentik SSO、Mailcow、AList、Mem0</li>
+        <li>Umami 统计、Tor onion service</li>
+        <li>本地 GPU 上的 Whisper / TTS 推理</li>
+      </ul>
+    </div>
+  </div>

-  <h2>联系方式</h2>
-  <p>
-    <a href={`mailto:${SITE.email}`}>{SITE.email}</a>
-    <span class="sep">·</span>
-    <a href={SITE.linkedin} target="_blank" rel="noopener">LinkedIn</a>
-    <span class="sep">·</span>
-    <a href={SITE.gitea} target="_blank" rel="noopener">git.hoelee.com</a>
-    <span class="sep">·</span>
-    <a href={SITE.website} target="_blank" rel="noopener">www.hoelee.com</a>
-  </p>
+  <h2>面向马来西亚中小企业 —— Hoelee Enterprise</h2>
+  <div class="sme-block">
+    <p>
+      <strong>网站设计与开发是我的主业</strong>——为马来西亚中小企业做快速、好维护的网站，
+      从设计一直到它底下的托管、DNS、备份与监控。<strong>邮箱托管是次要副业</strong>，并非主业。
+    </p>
+    <p>
+      因为基建是我自己运维的，你面对的是一个人而不是两方——不会出现「写代码的人看不到服务器、
+      托管商读不懂代码」的情况。
+    </p>
+    <p>
+      <a href={SITE.website} target="_blank" rel="noopener">www.hoelee.com</a>
+      <span class="sep">·</span>
+      <a href="https://wa.me/60127972969" target="_blank" rel="noopener">WhatsApp +60 12-797 2969</a>
+    </p>
+  </div>
+
+  <h2>联系</h2>
+  <div class="contact-split">
+    <div>
+      <h3>招聘 / 工程岗位</h3>
+      <p><a href={`mailto:${SITE.email}`}>{SITE.email}</a></p>
+      <p><a href={SITE.linkedin} target="_blank" rel="noopener">LinkedIn</a> · <a href={SITE.github} target="_blank" rel="noopener">GitHub</a></p>
+      <p>远程或混合；随时可以聊技术。</p>
+    </div>
+    <div>
+      <h3>商业项目 / 网站</h3>
+      <p><a href="https://wa.me/60127972969" target="_blank" rel="noopener">WhatsApp +60 12-797 2969</a></p>
+      <p><a href={SITE.website} target="_blank" rel="noopener">www.hoelee.com</a></p>
+      <p>马来西亚中小企业：网站设计开发、托管与维护。</p>
+    </div>
+  </div>
+
+  <AuthorCard lang="zh" bio="base 在马来西亚的全栈开发者兼 DevOps 工程师。接受远程／混合办公机会。" />
 </BaseLayout>
@@ -29,7 +29,20 @@ const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
  altLocaleUrl={`${SITE.url}/`}
 >
  <section class="hero">
-    <h1>{SITE.author} —— 全栈开发者兼 DevOps 工程师</h1>
+    <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">
      我独自运维 <strong>三台自管服务器上的 162 个容器</strong>（客户站点、邮件平台、
      CI/CD、流程自动化与这个博客），并为马来西亚中小企业构建 Web 系统。这里写的是