feat(content): implement consultant review recommendations (executive summary, dynamic cta, homelab cleanup)
Deploy / build (push) Successful in 25s
Deploy / build (push) Successful in 25s
This commit is contained in:
hoelee committed
1 parent
5ecf25d37c
commit
355fecd348
28 files changed
+1634
-49
No files matched your search
@@ -0,0 +1,189 @@
|
||||
---
|
||||
import { SITE } from '../config';
|
||||
|
||||
interface Props {
|
||||
category: string;
|
||||
tags?: string[];
|
||||
lang?: 'en' | 'zh';
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const { category, tags = [], lang = 'en', title = '' } = Astro.props;
|
||||
|
||||
const isAiOrBiz = category === 'case-studies' || category === 'ai' || tags.some(t => ['telegram', 'whatsapp', 'n8n', 'automation', 'ecommerce', 'ai-agent'].includes(t.toLowerCase()));
|
||||
const isDevOpsOrEng = category === 'devops' || category === 'engineering' || tags.some(t => ['docker', 'traefik', 'oom', 'kernel', 'synology', 'linux', 'cgroups', 'monitoring', 'prometheus'].includes(t.toLowerCase()));
|
||||
|
||||
// Pre-filled WhatsApp message
|
||||
const waBizUrl = `https://wa.me/60127972969?text=${encodeURIComponent(`Hi Hoelee, I read your post "${title}" and would like to discuss automation/development for my business.`)}`;
|
||||
const waDevOpsUrl = `https://wa.me/60127972969?text=${encodeURIComponent(`Hi Hoelee, I read your post "${title}" and would like to discuss infrastructure/DevOps consulting.`)}`;
|
||||
const waZhUrl = `https://wa.me/60127972969?text=${encodeURIComponent(`你好 Hoelee，我读了你的文章《${title}》，想咨询适合我业务的系统开发与自动化方案。`)}`;
|
||||
|
||||
const aboutUrl = lang === 'zh' ? '/zh/about/' : '/about/';
|
||||
---
|
||||
|
||||
<section class="dynamic-cta" aria-label={lang === 'zh' ? '合作与雇佣咨询' : 'Work & Hiring Inquiries'}>
|
||||
{isAiOrBiz ? (
|
||||
<div class="cta-card">
|
||||
<div class="cta-header">
|
||||
<span class="cta-badge">🚀 {lang === 'zh' ? '企业智能化与业务自动化' : 'Automation & Custom AI Systems'}</span>
|
||||
<h3>{lang === 'zh' ? '想要一个 24/7 自动接单、发试用、不漏单的业务自动化系统？' : 'Want a 24/7 bot or automation pipeline that never drops a lead?'}</h3>
|
||||
</div>
|
||||
<p class="cta-desc">
|
||||
{lang === 'zh'
|
||||
? '别让夜间和周末的客户询盘因为“没人回”而流失给竞争对手。我帮中小企业定制 Telegram / WhatsApp 智能客服与全自动履约系统（打通商品库、CRM 与自动发货，无高昂 SaaS 人头费）。'
|
||||
: "Don't let customer inquiries slip away at midnight or on weekends. I build custom Telegram/WhatsApp AI assistants and deterministic workflows that connect directly to your catalogue, CRM, and order fulfillment."}
|
||||
</p>
|
||||
<div class="cta-actions">
|
||||
<a class="cta-btn primary" href={lang === 'zh' ? waZhUrl : waBizUrl} target="_blank" rel="noopener">
|
||||
💬 {lang === 'zh' ? 'WhatsApp 免费预约 15 分钟方案与 ROI 评估' : 'WhatsApp Me: 15-Min Feasibility & ROI Chat'}
|
||||
</a>
|
||||
<a class="cta-btn secondary" href={aboutUrl}>
|
||||
👔 {lang === 'zh' ? '招聘方：查看我的工程履历与全景技术栈 →' : 'Hiring? View Engineering Profile & Stack →'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : isDevOpsOrEng ? (
|
||||
<div class="cta-card">
|
||||
<div class="cta-header">
|
||||
<span class="cta-badge">🛡️ {lang === 'zh' ? '生产级基础设施与系统架构' : 'Production Infrastructure & SRE'}</span>
|
||||
<h3>{lang === 'zh' ? '服务器频繁异常重启、云账单过高，或缺一位能穿透内核日志的架构师？' : 'Dealing with flaky containers, cloud cost bloat, or unexplained outages?'}</h3>
|
||||
</div>
|
||||
<p class="cta-desc">
|
||||
{lang === 'zh'
|
||||
? '真正的生产环境稳定性，靠的是穿透表象抓出根因。我独立管理着跨 3 台物理/云主机、162 个容器的高可用自托管生产网络。'
|
||||
: 'Real production reliability comes from understanding the kernel and the protocol layers, not just restarting containers. I manage 162 containers across 3 hosts running 24/7 client workloads.'}
|
||||
</p>
|
||||
<div class="cta-actions">
|
||||
<a class="cta-btn primary" href={aboutUrl}>
|
||||
👨💻 {lang === 'zh' ? '致招聘官：查看我的生产基础设施全景与在线简历 →' : 'For Tech Leads: View Infrastructure Blueprint & CV →'}
|
||||
</a>
|
||||
<a class="cta-btn secondary" href={lang === 'zh' ? waZhUrl : waDevOpsUrl} target="_blank" rel="noopener">
|
||||
🔧 {lang === 'zh' ? '企业客户：咨询基础设施容灾或 SifuMail 托管 ↗' : 'Business: Ask About Infrastructure Audits ↗'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div class="cta-card">
|
||||
<div class="cta-header">
|
||||
<span class="cta-badge">💼 {lang === 'zh' ? '合作与雇佣' : 'Work With Me'}</span>
|
||||
<h3>{lang === 'zh' ? '有高价值项目开发需求，或正在寻找硬核全栈工程师？' : 'Looking for high-impact engineering work or custom systems?'}</h3>
|
||||
</div>
|
||||
<p class="cta-desc">
|
||||
{lang === 'zh'
|
||||
? '从前端交互到边缘网关，从业务系统到自托管基础设施。欢迎与我探讨商业系统外包或全职/远程工程岗位。'
|
||||
: 'From front-end web apps down to edge proxies and container automation. Open to serious freelance client projects and senior engineering roles.'}
|
||||
</p>
|
||||
<div class="cta-actions">
|
||||
<a class="cta-btn primary" href={lang === 'zh' ? waZhUrl : waBizUrl} target="_blank" rel="noopener">
|
||||
💬 {lang === 'zh' ? '通过 WhatsApp 直接交谈 (+60 12-797 2969)' : 'Chat on WhatsApp (+60 12-797 2969)'}
|
||||
</a>
|
||||
<a class="cta-btn secondary" href={aboutUrl}>
|
||||
📄 {lang === 'zh' ? '查看个人履历与完整代表作 →' : 'View Full Profile & Experience →'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.dynamic-cta {
|
||||
margin: 3.5rem 0 2rem;
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.cta-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cta-badge {
|
||||
align-self: flex-start;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--brand);
|
||||
background: color-mix(in srgb, var(--brand) 12%, transparent);
|
||||
padding: 0.25rem 0.65rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cta-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.cta-desc {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.85rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
padding: 0.65rem 1.15rem;
|
||||
border-radius: var(--radius);
|
||||
text-decoration: none;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.cta-btn.primary {
|
||||
background: var(--brand);
|
||||
color: #ffffff;
|
||||
border: 1px solid var(--brand);
|
||||
}
|
||||
|
||||
.cta-btn.primary:hover {
|
||||
background: var(--brand-soft);
|
||||
border-color: var(--brand-soft);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cta-btn.secondary {
|
||||
background: var(--surface-2);
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.cta-btn.secondary:hover {
|
||||
background: var(--border);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cta-card {
|
||||
padding: 1.35rem;
|
||||
}
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
.cta-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,233 @@
|
||||
---
|
||||
interface Props {
|
||||
summary?: {
|
||||
audience: string;
|
||||
painPoint: string;
|
||||
impact: { metric: string; detail: string }[];
|
||||
stack: string[];
|
||||
jumpLinks?: { business?: string; architecture?: string; result?: string };
|
||||
};
|
||||
lang?: 'en' | 'zh';
|
||||
}
|
||||
|
||||
const { summary, lang = 'en' } = Astro.props;
|
||||
if (!summary) return null;
|
||||
|
||||
const labels = lang === 'zh' ? {
|
||||
badge: '⚡ 核心速览 · Executive Summary',
|
||||
for: '适用读者：',
|
||||
problem: '核心痛点',
|
||||
impact: '交付成果与指标',
|
||||
stack: '涉及技术栈',
|
||||
nav: '快速跳读',
|
||||
btnBiz: '看商业/交付结果 ↓',
|
||||
btnArch: '看系统架构与排障 ↓',
|
||||
btnLesson: '看复盘与避坑指南 ↓'
|
||||
} : {
|
||||
badge: '⚡ Executive Summary',
|
||||
for: 'Target Audience:',
|
||||
problem: 'The Problem',
|
||||
impact: 'Key Outcomes & Metrics',
|
||||
stack: 'Architecture Stack',
|
||||
nav: 'Quick Jump',
|
||||
btnBiz: 'Business Outcome ↓',
|
||||
btnArch: 'Architecture & Root Cause ↓',
|
||||
btnLesson: 'Lessons Learned ↓'
|
||||
};
|
||||
---
|
||||
|
||||
<aside class="exec-summary" aria-label={labels.badge}>
|
||||
<div class="exec-header">
|
||||
<span class="exec-badge">{labels.badge}</span>
|
||||
<span class="exec-audience">{labels.for} <strong>{summary.audience}</strong></span>
|
||||
</div>
|
||||
|
||||
<div class="exec-problem">
|
||||
<span class="exec-problem-label">{labels.problem}:</span>
|
||||
<p class="exec-problem-text">{summary.painPoint}</p>
|
||||
</div>
|
||||
|
||||
<div class="exec-grid">
|
||||
{summary.impact.map((item) => (
|
||||
<div class="exec-metric-card">
|
||||
<div class="exec-metric-val">{item.metric}</div>
|
||||
<div class="exec-metric-desc">{item.detail}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="exec-footer">
|
||||
<div class="exec-stack">
|
||||
<span class="exec-footer-label">{labels.stack}:</span>
|
||||
<div class="exec-pills">
|
||||
{summary.stack.map((t) => <span class="exec-pill">{t}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
{summary.jumpLinks && (
|
||||
<div class="exec-jumps">
|
||||
<span class="exec-footer-label">{labels.nav}:</span>
|
||||
<div class="exec-jump-btns">
|
||||
{summary.jumpLinks.business && <a class="exec-jump-link" href={summary.jumpLinks.business}>{labels.btnBiz}</a>}
|
||||
{summary.jumpLinks.architecture && <a class="exec-jump-link" href={summary.jumpLinks.architecture}>{labels.btnArch}</a>}
|
||||
{summary.jumpLinks.result && <a class="exec-jump-link" href={summary.jumpLinks.result}>{labels.btnLesson}</a>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.exec-summary {
|
||||
margin: 2rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.exec-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding-bottom: 0.85rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.exec-badge {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--brand);
|
||||
background: color-mix(in srgb, var(--brand) 12%, transparent);
|
||||
padding: 0.25rem 0.65rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.exec-audience {
|
||||
font-size: 0.88rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.exec-audience strong {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.exec-problem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.exec-problem-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.exec-problem-text {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.exec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.exec-metric-card {
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.exec-metric-val {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--brand);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.exec-metric-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.exec-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding-top: 0.85rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.exec-footer-label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.4rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.exec-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.exec-pill {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
background: var(--surface-2);
|
||||
color: var(--ink);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.exec-jump-btns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.exec-jump-link {
|
||||
font-size: 0.85rem;
|
||||
color: var(--brand-soft);
|
||||
text-decoration: none;
|
||||
background: var(--surface-2);
|
||||
padding: 0.3rem 0.65rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.exec-jump-link:hover {
|
||||
color: #ffffff;
|
||||
background: var(--brand);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.exec-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user