feat(about): upgrade about page into dual-track work-with-me conversion hub
This commit is contained in:
hoelee committed
1 parent
a1f3eb585a
commit
4a3c329fc6
4 files changed
+556
-192
No files matched your search
@@ -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