feat(about): upgrade about page into dual-track work-with-me conversion hub
This commit is contained in:
1 parent
a1f3eb585a
commit
4a3c329fc6
4 files changed
+556
-192
No files matched your search
@@ -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' };
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
||||
+171
-98
@@ -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;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="About — Mr Hoelee"
|
||||
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.`}
|
||||
<BaseLayout
|
||||
title="About & Work With Me — Lee Teong Hoe (Mr Hoelee)"
|
||||
description="Full-stack developer & DevOps engineer in Malaysia. Managing 162 production containers across 3 hosts. Available for SME system automation and senior engineering roles."
|
||||
switchHref="/zh/about/"
|
||||
altLocaleUrl={`${SITE.url}/zh/about/`}
|
||||
>
|
||||
<!-- 1. Hero & Core Identity -->
|
||||
<section class="about-hero">
|
||||
<picture>
|
||||
<source srcset={SITE.photo.largeWebp} type="image/webp" />
|
||||
@@ -30,112 +29,186 @@ const writeUps = (await getCollection('posts', isEn)).length;
|
||||
</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 class="about-tagline">
|
||||
Full-Stack Developer · Production DevOps · AI Systems Architect (Malaysia, GMT+8)
|
||||
</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>
|
||||
<div class="about-links">
|
||||
<a href={SITE.linkedin} target="_blank" rel="noopener">LinkedIn ↗</a> ·
|
||||
<a href={SITE.github} target="_blank" rel="noopener">GitHub ↗</a> ·
|
||||
<a href="https://git.hoelee.com" target="_blank" rel="noopener">Self-Hosted Gitea ↗</a> ·
|
||||
<a href={`mailto:${SITE.email}`}>{SITE.email}</a>
|
||||
</p>
|
||||
</div>
|
||||
<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">{writeUps}</span><span class="l">write-ups, each in English and 中文</span></div>
|
||||
<div class="proof-card"><span class="n">0</span><span class="l">managed hosting layers — I run all three hosts myself</span></div>
|
||||
</div>
|
||||
<p>
|
||||
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 class="about-lede">
|
||||
I build, ship, and operate production web systems from the application code down to the bare metal and Linux kernel.
|
||||
<strong>162 containers across three self-managed hosts</strong> 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.
|
||||
</p>
|
||||
|
||||
<h2>What I actually work with</h2>
|
||||
<div class="stack-grid">
|
||||
<div>
|
||||
<h3>Infrastructure & DevOps</h3>
|
||||
<ul>
|
||||
<li>Docker & 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 & 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 & 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>
|
||||
<!-- By the Numbers -->
|
||||
<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 Hosts</span><span class="l">78 Compose Stacks (Unraid · Synology · VPS)</span></div>
|
||||
<div class="proof-card"><span class="n">{writeUps}</span><span class="l">Bilingual Engineering Write-ups (EN / 中文)</span></div>
|
||||
<div class="proof-card"><span class="n">0</span><span class="l">Managed PaaS Crutches — Full Stack Ownership</span></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- 2. Dual-Track Conversion Hub (Work With Me) -->
|
||||
<section class="work-with-me-section" id="work-with-me">
|
||||
<h2>How We Can Work Together</h2>
|
||||
<p class="section-sub">Choose the path that matches what you are looking for:</p>
|
||||
|
||||
<h2>Get in touch</h2>
|
||||
<div class="contact-split">
|
||||
<div>
|
||||
<h3>For hiring & 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 class="dual-track-grid">
|
||||
<!-- Track A: For Business Owners & SMEs -->
|
||||
<div class="track-card track-business">
|
||||
<div class="track-header">
|
||||
<span class="track-badge">🏢 For Business Owners & Founders</span>
|
||||
<h3>Custom Web Systems, AI Automation & Self-Hosted Infrastructure</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="track-body">
|
||||
<h4>What I Deliver:</h4>
|
||||
<ul>
|
||||
<li><strong>24/7 AI Customer & Sales Bots:</strong> Telegram & WhatsApp agents connected to your live catalogue, CRM, and automated trial/order provisioning.</li>
|
||||
<li><strong>Business Process Automation:</strong> End-to-end workflows (n8n, NocoDB, custom webhooks) that eliminate manual data entry and file delivery.</li>
|
||||
<li><strong>High-Conversion Web & Mail Systems:</strong> Custom websites, WordPress deep engineering, and reliable enterprise email hosting (SifuMail).</li>
|
||||
<li><strong>SaaS-to-Self-Hosted Migration:</strong> Cut recurring cloud bills by deploying secure, private open-source alternatives on dedicated infrastructure.</li>
|
||||
</ul>
|
||||
|
||||
<h4>How Engagements Work:</h4>
|
||||
<ol class="track-steps">
|
||||
<li><strong>15-Min Discovery:</strong> Send your bottleneck via WhatsApp/Email.</li>
|
||||
<li><strong>Architecture & Fixed Quote:</strong> Clear scope, ROI estimate, and timeline.</li>
|
||||
<li><strong>Build & Production Handover:</strong> Tested deployment with full ownership.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="track-cta">
|
||||
<a class="btn btn-primary" href="https://wa.me/60127972969?text=Hi%20Hoelee,%20I%20visited%20your%20blog%20and%20want%20to%20discuss%20a%20business%20project." target="_blank" rel="noopener">
|
||||
💬 Message Me on WhatsApp (+60 12-797 2969)
|
||||
</a>
|
||||
<a class="btn" href={SITE.website} target="_blank" rel="noopener">
|
||||
🌐 Visit Hoelee Enterprise ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Track B: For Tech Leads & Recruiters -->
|
||||
<div class="track-card track-hiring">
|
||||
<div class="track-header">
|
||||
<span class="track-badge">👨💻 For Hiring Managers & Tech Leads</span>
|
||||
<h3>Full-Stack, DevOps & AI Systems Engineering Roles</h3>
|
||||
<p>
|
||||
Open to high-impact <strong>remote or hybrid roles</strong> where owning the entire lifecycle — from TypeScript/backend logic
|
||||
to Docker, reverse proxies, and LLM reliability — matters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="track-body">
|
||||
<h4>Why Bring Me onto Your Team:</h4>
|
||||
<ul>
|
||||
<li><strong>End-to-End Ownership:</strong> 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.</li>
|
||||
<li><strong>Pragmatic AI Engineering:</strong> I wrap LLMs inside deterministic state machines, strict payload contracts, and unit-tested retrieval — preventing hallucinations in production.</li>
|
||||
<li><strong>Evidence-Based Debugging:</strong> 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.</li>
|
||||
<li><strong>Bilingual Documentation Habit:</strong> Native-level technical communication in English and Mandarin (中文), with a strong culture of written runbooks and post-mortems.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Selected Proof-of-Work:</h4>
|
||||
<ul class="proof-links">
|
||||
<li>→ <a href="/posts/how-i-built-the-digikedai-telegram-bot/">AI Agent: Telegram/WhatsApp Bot with LiteLLM & State Machines</a></li>
|
||||
<li>→ <a href="/posts/docker-reported-exit-0-the-oom-killer-disagreed/">DevOps: Diagnosing Silent Kernel Cgroup OOM Kills vs. Docker Daemon</a></li>
|
||||
<li>→ <a href="/posts/self-healing-digital-goods-entitlements/">Systems Glue: 5-Workflow Self-Healing Entitlement Engine</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="track-cta">
|
||||
<a class="btn btn-primary" href={`mailto:${SITE.email}?subject=Engineering%20Role%20/%20Technical%20Collaboration%20—%20Lee%20Teong%20Hoe`}>
|
||||
📧 Email Me for Roles & Interviews ({SITE.email})
|
||||
</a>
|
||||
<a class="btn" href={SITE.linkedin} target="_blank" rel="noopener">
|
||||
🔗 Connect on LinkedIn ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>For business & 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 & development, hosting and maintenance.</p>
|
||||
</section>
|
||||
|
||||
<!-- 3. What I Actually Work With (With Proof Links) -->
|
||||
<section class="stack-section">
|
||||
<h2>What I Actually Run in Production</h2>
|
||||
<div class="stack-grid">
|
||||
<div class="stack-card">
|
||||
<div>
|
||||
<h3>Infrastructure & DevOps</h3>
|
||||
<p>Docker, Traefik, Cloudflare Tunnels, Authentik SSO, Gitea Actions CI/CD, Nginx, Prometheus, Grafana, Synology DSM, Unraid, Linux Kernel/Cgroup Tuning.</p>
|
||||
</div>
|
||||
<div class="stack-proof">
|
||||
<span>Proof:</span>
|
||||
<a href="/categories/devops/">Browse DevOps War Stories →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-card">
|
||||
<div>
|
||||
<h3>AI Agents & Automation</h3>
|
||||
<p>LiteLLM Gateway, Mem0 (PostgreSQL + pgvector), n8n Workflows, Telegram/WhatsApp Bots (grammY), Chrome DevTools Protocol (CDP), Local GPU Whisper/TTS, Remotion.</p>
|
||||
</div>
|
||||
<div class="stack-proof">
|
||||
<span>Proof:</span>
|
||||
<a href="/categories/ai/">Browse AI Production Builds →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-card">
|
||||
<div>
|
||||
<h3>Backend & Systems Architecture</h3>
|
||||
<p>TypeScript (Node.js/Hono), Python, PHP (CodeIgniter/WordPress Core), Java (Spring), PostgreSQL, NocoDB, REST Webhook Contracts & Idempotent State Machines.</p>
|
||||
</div>
|
||||
<div class="stack-proof">
|
||||
<span>Proof:</span>
|
||||
<a href="/categories/case-studies/">Browse System Case Studies →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-card">
|
||||
<div>
|
||||
<h3>Frontend, Web & Digital Delivery</h3>
|
||||
<p>Astro 5, React, Vue, Technical SEO & GEO (Generative Engine Optimization), Bilingual i18n Architecture, Pagefind, Mailcow / SifuMail Enterprise Hosting.</p>
|
||||
</div>
|
||||
<div class="stack-proof">
|
||||
<span>Proof:</span>
|
||||
<a href="/categories/engineering/">Browse Engineering Posts →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. Engineering Philosophy (Builds Trust with Both Audiences) -->
|
||||
<section class="principles-section">
|
||||
<h2>My Engineering Guardrails</h2>
|
||||
<div class="principles-grid">
|
||||
<div class="principle-item">
|
||||
<strong>1. State Machines for Business Rules, LLMs for Language</strong>
|
||||
<p>Never trust a raw prompt with pricing, permissions, or payments. I isolate deterministic business flows in code and use AI strictly for semantic understanding.</p>
|
||||
</div>
|
||||
<div class="principle-item">
|
||||
<strong>2. Verify the Metal, Not Just the Dashboard</strong>
|
||||
<p>"I restarted it and it works" is not root-cause analysis. Every fix is verified against kernel logs, cgroup metrics, or automated regression tests.</p>
|
||||
</div>
|
||||
<div class="principle-item">
|
||||
<strong>3. Pragmatic Cost-Efficiency</strong>
|
||||
<p>By gluing battle-tested open-source components onto self-managed hardware, I help businesses avoid $500+/month SaaS sprawl without sacrificing uptime.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<AuthorCard />
|
||||
</BaseLayout>
|
||||
+167
-92
@@ -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;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="关于 — Mr Hoelee"
|
||||
description={`${SITE.author}(${SITE.handle})——在马来西亚的全栈开发者兼 DevOps 工程师。独自运维三台服务器上的 162 个容器,为中小企业构建 Web 系统。`}
|
||||
<BaseLayout
|
||||
title="关于我与合作指南 — Lee Teong Hoe (Mr Hoelee)"
|
||||
description="在马来西亚的全栈开发者兼 DevOps 工程师。管理跨 3 台自管主机的 162 个生产容器。承接中小企业系统定制与 AI 自动化,同时开放高级工程师/架构师岗位机会。"
|
||||
lang="zh"
|
||||
switchHref="/about/"
|
||||
altLocaleUrl={`${SITE.url}/about/`}
|
||||
>
|
||||
<!-- 1. Hero & 核心身份 -->
|
||||
<section class="about-hero">
|
||||
<picture>
|
||||
<source srcset={SITE.photo.largeWebp} type="image/webp" />
|
||||
@@ -31,106 +30,182 @@ const writeUps = (await getCollection('posts', isZh)).length;
|
||||
</picture>
|
||||
<div>
|
||||
<h1>{SITE.author} <span class="handle">({SITE.handle})</span></h1>
|
||||
<p class="about-lede">
|
||||
在马来西亚的全栈开发者兼 DevOps 工程师。我亲手运维自己和客户系统背后的生产环境——
|
||||
<strong>三台自管服务器上的 162 个容器</strong>——并为马来西亚中小企业构建 Web 系统。
|
||||
<p class="about-tagline">
|
||||
全栈开发者 · 生产级 DevOps · AI 系统架构师(马来西亚,GMT+8)
|
||||
</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>
|
||||
<div class="about-links">
|
||||
<a href={SITE.linkedin} target="_blank" rel="noopener">LinkedIn ↗</a> ·
|
||||
<a href={SITE.github} target="_blank" rel="noopener">GitHub ↗</a> ·
|
||||
<a href="https://git.hoelee.com" target="_blank" rel="noopener">自建 Gitea ↗</a> ·
|
||||
<a href={`mailto:${SITE.email}`}>{SITE.email}</a>
|
||||
</p>
|
||||
<p class="about-open">接受 <strong>远程 / 混合</strong> 工程岗位机会。</p>
|
||||
</div>
|
||||
<p class="about-open">接受 <strong>远程 / 混合办公</strong> 的高级工程岗位机会。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="about-lede">
|
||||
我负责从底层服务器、Linux 内核到上层业务代码的全链路生产系统研发与运维。目前我独立管理着<strong>横跨 3 台物理与云主机的 162 个生产级容器</strong>,承载着客户业务系统、企业邮局平台(SifuMail)、自建 CI/CD 流水线以及确定性 AI 自动化工作流。本站的每一篇技术文章,皆源自真实生产环境的排障与交付实录。
|
||||
</p>
|
||||
|
||||
<!-- 几个核心数字 -->
|
||||
<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">{writeUps}</span><span class="l">篇长文,每篇中英双版</span></div>
|
||||
<div class="proof-card"><span class="n">0</span><span class="l">层托管服务——三台主机都我自己运维</span></div>
|
||||
</div>
|
||||
<p>
|
||||
这套环境里有客户网站、邮件平台、CI/CD、流程自动化、统计和这个博客,全靠手工拴在一起。
|
||||
这也是为什么这里的文章都很具体:生产环境出问题时,第一个知道的人是我,
|
||||
文章就是「证据到底说了什么」的记录。
|
||||
</p>
|
||||
|
||||
<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 class="proof-card"><span class="n">3 台主机</span><span class="l">78 个 Compose 栈(Unraid · Synology · VPS)</span></div>
|
||||
<div class="proof-card"><span class="n">{writeUps}</span><span class="l">篇长文,每篇中英双版实录</span></div>
|
||||
<div class="proof-card"><span class="n">0</span><span class="l">层托管服务依赖——全栈自主可控</span></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- 2. 双轨合作分流中心 (Work With Me) -->
|
||||
<section class="work-with-me-section" id="work-with-me">
|
||||
<h2>如何与我展开合作</h2>
|
||||
<p class="section-sub">请选择符合您当前诉求的合作方向:</p>
|
||||
|
||||
<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 class="dual-track-grid">
|
||||
<!-- 轨道 A: 面向企业主与创业者 -->
|
||||
<div class="track-card track-business">
|
||||
<div class="track-header">
|
||||
<span class="track-badge">🏢 致企业主与业务负责人</span>
|
||||
<h3>网站与业务系统定制 · 24/7 AI 获客客服 · 私有化部署降本</h3>
|
||||
<p>
|
||||
别再因为夜间与周末无人回复而流失宝贵客户,也无需为按人头收费的海外 SaaS 软件支付高昂月费。我帮中小企业搭建真正能省人手、接住订单的自动化业务系统。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="track-body">
|
||||
<h4>核心交付能力:</h4>
|
||||
<ul>
|
||||
<li><strong>24/7 AI 智能销冠与客服机器人:</strong>打通 Telegram 与 WhatsApp,直连您的商品库与 CRM,实现秒级精准答疑与全自动发放免费试用/订单开通。</li>
|
||||
<li><strong>业务流程端到端自动化:</strong>基于 n8n、NocoDB 与定制 Webhook,消灭人工录入表格、手动发货与权限开通的重复劳动。</li>
|
||||
<li><strong>高转化企业建站与企业邮局:</strong>定制开发高性能网站、WordPress 深度开发,以及高送达率的企业邮箱托管服务(SifuMail)。</li>
|
||||
<li><strong>私有化开源替代方案部署:</strong>在专属服务器上部署安全可控的开源业务组件,大幅削减每月固定的 SaaS 订阅账单。</li>
|
||||
</ul>
|
||||
|
||||
<h4>合作三步走流程:</h4>
|
||||
<ol class="track-steps">
|
||||
<li><strong>15 分钟需求诊断:</strong>通过 WhatsApp 或邮件直接发我您的业务卡点。</li>
|
||||
<li><strong>架构方案与一口价评估:</strong>明确实施范围、ROI 估算与工期节点。</li>
|
||||
<li><strong>生产交付与完整移交:</strong>充分测试后交付上线,提供完整源码与控制权。</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="track-cta">
|
||||
<a class="btn btn-primary" href="https://wa.me/60127972969?text=%E4%BD%A0%E5%A5%BD%20Hoelee%EF%BC%8C%E6%88%91%E7%9C%8B%E4%BA%86%E4%BD%A0%E7%9A%84%E5%8D%9A%E5%AE%A2%EF%BC%8C%E6%83%B3%E8%AF%A6%E8%AF%A2%E9%80%82%E5%90%88%E6%88%91%E4%BB%AC%E4%B8%9A%E5%8A%A1%E7%9A%84%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91%E4%B8%8E%E8%87%AA%E5%8A%A8%E5%8C%96%E6%96%B9%E6%A1%88%E3%80%82" target="_blank" rel="noopener">
|
||||
💬 WhatsApp 洽谈 (+60 12-797 2969)
|
||||
</a>
|
||||
<a class="btn" href={SITE.website} target="_blank" rel="noopener">
|
||||
🌐 访问 Hoelee Enterprise 官网 ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 轨道 B: 面向技术主管与招聘方 -->
|
||||
<div class="track-card track-hiring">
|
||||
<div class="track-header">
|
||||
<span class="track-badge">👨💻 致技术主管与招聘方</span>
|
||||
<h3>全栈开发、DevOps 运维与 AI 系统架构工程角色</h3>
|
||||
<p>
|
||||
开放高价值的<strong>远程(Remote)或混合办公工程角色</strong>。看重具备从 TypeScript/后端业务逻辑到 Docker、反向代理与大模型可靠性全链路把控力的团队。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="track-body">
|
||||
<h4>为什么选择我加入您的工程团队:</h4>
|
||||
<ul>
|
||||
<li><strong>全链路端到端闭环能力:</strong>绝不把代码甩给运维了事。从编写应用业务逻辑、配置 CI/CD Runner,到加固入口鉴权网关与高并发下排查 Linux 内核 OOM 杀进程,具备完整的单兵作战闭环能力。</li>
|
||||
<li><strong>务实的生产级 AI 工程化:</strong>拒绝脆弱的“纯 Prompt 玩具”。擅长用确定性状态机(State Machines)、严格的载荷契约(Payload Contracts)与自动化单测包裹大模型,确保生产环境 0 价格幻觉与稳定降级。</li>
|
||||
<li><strong>重证据链的底层排障习惯:</strong>无论是 CDP 静默点击失效、双层反代导致的鉴权穿透,还是 Docker 谎报 Exit 0,坚持用内核日志、内存水位线与真实基准数据说话。</li>
|
||||
<li><strong>良好的中英双语工程文档习惯:</strong>具备母语级中英文技术沟通能力,坚持编写详尽的高可用运维手册(Runbooks)与事故复盘总结。</li>
|
||||
</ul>
|
||||
|
||||
<h4>精选代表作与证据链:</h4>
|
||||
<ul class="proof-links">
|
||||
<li>→ <a href="/posts/zh/how-i-built-the-digikedai-telegram-bot/">AI 智能体:基于 LiteLLM 与状态机的 Telegram/WhatsApp 商业客服机器人</a></li>
|
||||
<li>→ <a href="/posts/zh/docker-reported-exit-0-the-oom-killer-disagreed/">DevOps 排障:穿透 Docker 状态假象排查内核 Cgroup OOM 杀进程实录</a></li>
|
||||
<li>→ <a href="/posts/zh/self-healing-digital-goods-entitlements/">系统粘合:五条工作流自愈的数字商品权限引擎架构</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="track-cta">
|
||||
<a class="btn btn-primary" href={`mailto:${SITE.email}?subject=%E5%B7%A5%E7%A8%8B%E5%B2%97%E4%BD%8D%E6%B2%9F%E9%80%9A%E4%B8%8E%E6%8A%80%E6%9C%AF%E5%92%A8%E8%AF%A2%20%E2%80%94%20Lee%20Teong%20Hoe`}>
|
||||
📧 邮件沟通岗位与技术交流 ({SITE.email})
|
||||
</a>
|
||||
<a class="btn" href={SITE.linkedin} target="_blank" rel="noopener">
|
||||
🔗 在 LinkedIn 建立连接 ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- 3. 我在生产中实际运行的技术栈 -->
|
||||
<section class="stack-section">
|
||||
<h2>我在生产环境中实际运行的架构</h2>
|
||||
<div class="stack-grid">
|
||||
<div class="stack-card">
|
||||
<div>
|
||||
<h3>基础设施与 DevOps</h3>
|
||||
<p>Docker 与 Compose、Traefik、Cloudflare Tunnels、Authentik SSO、Gitea Actions CI/CD、Nginx、Prometheus、Grafana、Synology DSM、Unraid、Linux 内核/Cgroup 调优。</p>
|
||||
</div>
|
||||
<div class="stack-proof">
|
||||
<span>证据:</span>
|
||||
<a href="/zh/categories/devops/">浏览 DevOps 战壕实录 →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-card">
|
||||
<div>
|
||||
<h3>AI 智能体与自动化</h3>
|
||||
<p>LiteLLM 网关、Mem0(PostgreSQL + pgvector)、n8n 自动化工作流、Telegram/WhatsApp 机器人(grammY)、Chrome DevTools Protocol(CDP)、本地 GPU Whisper/TTS 推理、Remotion。</p>
|
||||
</div>
|
||||
<div class="stack-proof">
|
||||
<span>证据:</span>
|
||||
<a href="/zh/categories/ai/">浏览 AI 生产构建实录 →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-card">
|
||||
<div>
|
||||
<h3>后端与系统架构</h3>
|
||||
<p>TypeScript(Node.js/Hono)、Python、PHP(CodeIgniter/WordPress Core)、Java(Spring)、PostgreSQL、NocoDB、REST Webhook 契约与幂等状态机设计。</p>
|
||||
</div>
|
||||
<div class="stack-proof">
|
||||
<span>证据:</span>
|
||||
<a href="/zh/categories/case-studies/">浏览系统案例研究 →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-card">
|
||||
<div>
|
||||
<h3>前端、Web 与交付体系</h3>
|
||||
<p>Astro 5、React、Vue、技术 SEO 与 GEO(生成式引擎优化)、双语 i18n 同构体系、Pagefind 静态检索、Mailcow / SifuMail 企业邮局托管。</p>
|
||||
</div>
|
||||
<div class="stack-proof">
|
||||
<span>证据:</span>
|
||||
<a href="/zh/categories/engineering/">浏览工程实践文章 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. 我的工程准则与铁律 -->
|
||||
<section class="principles-section">
|
||||
<h2>我的工程准则与铁律</h2>
|
||||
<div class="principles-grid">
|
||||
<div class="principle-item">
|
||||
<strong>1. 状态机管确定性业务,大模型管开放语义</strong>
|
||||
<p>绝不把定价、权限验证或支付逻辑交给黑盒 Prompt。关键业务流用状态机代码锁死,AI 仅专注于自然语言语义理解。</p>
|
||||
</div>
|
||||
<div class="principle-item">
|
||||
<strong>2. 信内核与指标,不信表象</strong>
|
||||
<p>“重启一下就好了”从来不是排障根因。每一次生产修复,都必须通过内核 dmesg 日志、cgroup 内存水位线或回归单测严格闭环。</p>
|
||||
</div>
|
||||
<div class="principle-item">
|
||||
<strong>3. 极致的实用主义成本控制</strong>
|
||||
<p>通过在自管硬件上组装高可用开源生态组件,我帮助企业摆脱每月 $500+ 的 SaaS 软件账单膨胀,同时保障 24/7 高可用。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<AuthorCard lang="zh" bio="base 在马来西亚的全栈开发者兼 DevOps 工程师。接受远程/混合办公机会。" />
|
||||
</BaseLayout>
|
||||
@@ -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; }
|
||||
}
|
||||
Reference in new issue
Block a user