tiennm99/dating
1
0
Fork 0
mirror of https://github.com/tiennm99/dating.git synced 2026-09-03 10:23:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: drop the job-description conceit for a plainly romantic register

Browse Source 
The page was a mock job posting: applicants, positions, benefits,
responsibilities, a spec table and selection notes. That framing carried real
wit, but it kept the warmest scenes at arm's length behind HR vocabulary.

Every sentence carrying a personal fact is untouched — the dev job, Genshin and
T1 Keria, the light novels, the three-year relationship, 162cm, the playlist,
the whole appendix. Only the framing around them changed:

- Retitled throughout: page title, OG and Twitter tags, wordmark. The site is
  now an open letter rather than a description and a CV.
- "Ứng viên là ai?" becomes "Mình là ai?"; the cold open is a seat that has been
  empty a while rather than a vacancy; the CTA meets a person, not a candidate.
- Scene 4 offers what he can give instead of listing entitlements, and loses the
  job-spec table whose three jokes only worked as a job spec.
- Scene 5 drops "Trách nhiệm" for a smaller, warmer promise.
- Scene 6 keeps its no-tests sentiment without the stress-test phrasing, and the
  climax speaks about the person he hopes to meet rather than a strong applicant.
- The appendix is a few concrete things, not a dossier; the freshness stamp says
  he is still looking rather than that a position remains open.

Also drops the office-parody joke, which pointed at a conceit that no longer
exists, and restyles the numbered package as four unhurried lines so scene 4
keeps a shape of its own without reading as a compensation schedule.
This commit is contained in:
tiennm99
2026-07-25 12:02:10 +07:00
parent b0cd86e07c
commit 6d0a21eaf7
4 changed files with 78 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+7 -1
View File
@@ -1,6 +1,12 @@
# Dating
Warm-witty dating JD and CV site for Tiến Nguyễn Minh.
A warm open letter from Tiến Nguyễn Minh to whoever comes along, told as a
scroll-driven short film. Vietnamese only.
The page was originally framed as a mock job description and CV; that conceit
was dropped in favour of a plainly romantic register, so avoid reintroducing
recruiting language (ứng viên, vị trí, quyền lợi, trách nhiệm, tuyển chọn) when
editing copy.
## Structure
assets/freshness-stamp.js
+3 -3
View File
@@ -1,5 +1,5 @@
// freshness-stamp.js — fills the "vị trí vẫn đang mở · cập nhật [ngày]" stamp in
// the closing scene from the repo's latest commit date, via the public GitHub REST
// freshness-stamp.js — fills the "vẫn đang tìm · cập nhật [ngày]" stamp on the end
// card from the repo's latest commit date, via the public GitHub REST
// API (no build step, no backend, no token in client code — unauthenticated call,
// 60 req/hr/IP is plenty for a personal page).
//
@@ -35,7 +35,7 @@
year: 'numeric',
}).format(date);
el.textContent = 'Vị trí vẫn đang mở · cập nhật ' + formatted + '.';
el.textContent = 'Vẫn đang tìm · cập nhật ' + formatted + '.';
el.hidden = false;
// The stamp lands after ScrollTrigger has already measured, so every
assets/styles.css
+27 -56
View File
@@ -668,44 +668,39 @@ section[id] {
line-height: 1.6;
}
/* ---------- Cảnh 4 · "Gói đãi ngộ" benefit list ----------
A numbered package rather than four title-less floating boxes, so scene 4 has
a shape of its own and the JD conceit reads as structure instead of filler. */
.benefit-list {
/* ---------- Cảnh 4 · What he can offer ----------
Four unhurried lines. This was a numbered, hairline-ruled table, which read as
a compensation schedule; scene 4 still needs a shape distinct from the vow
(scene 5) and the quiet climax (scene 6), so it keeps body-size type and a
small rose mark instead of borrowing either of theirs. */
.gift-list {
display: grid;
margin: 2rem 0 0;
margin: 2.25rem 0 0;
padding: 0;
gap: 1px;
overflow: hidden;
border-radius: 14px;
gap: 1.35rem;
list-style: none;
background: var(--line);
box-shadow: 0 18px 40px -30px var(--glow-primary);
counter-reset: benefit;
transition: background-color var(--motion-theme);
max-width: 44rem;
}
.benefit-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
.gift-list li {
position: relative;
margin: 0;
background: var(--panel-bg);
padding: 1.15rem 1.25rem;
padding-left: 1.75rem;
line-height: 1.72;
transition: background-color var(--motion-theme);
}
.benefit-list li::before {
counter-increment: benefit;
content: counter(benefit, decimal-leading-zero);
color: var(--primary-strong);
font-family: 'Fraunces', Georgia, serif;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.06em;
/* Align the numeral with the first line of body text beside it. */
line-height: 1.9;
/* A small open circle rather than a bullet or a numeral: present enough to mark
the line, quiet enough not to tally it. */
.gift-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.62em;
width: 0.5rem;
height: 0.5rem;
border: 1.5px solid var(--primary);
border-radius: 50%;
transition: border-color var(--motion-theme);
}
/* ---------- Cảnh 5 · The vow ----------
@@ -736,35 +731,11 @@ section[id] {
transition: border-color var(--motion-theme);
}
.meta-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-top: 2rem;
overflow: hidden;
border-radius: 14px;
background: var(--line);
box-shadow: 0 18px 40px -30px var(--glow-primary);
transition: background-color var(--motion-theme);
}
.meta-grid > div {
background: var(--panel-bg);
padding: 1rem;
transition: background-color var(--motion-theme);
}
.meta-grid span {
display: block;
color: var(--muted);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
}
/* .meta-grid removed with the job-spec table it styled (Loại hình / Địa điểm /
Ngày bắt đầu) — that block only made sense while the page was a job posting. */
@media (max-width: 720px) {
.section-grid,
.meta-grid {
.section-grid {
grid-template-columns: 1fr;
}
}
index.html
+41 -47
View File
@@ -3,10 +3,10 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tiến Nguyễn Minh | Mô tả &amp; hồ sơ hẹn hò</title>
<title>Tiến Nguyễn Minh | Thư ngỏ tìm người đi đường dài</title>
<meta
name="description"
content="Mô tả công việc cho vị trí người yêu tương lai và hồ sơ hẹn hò dí dỏm của Tiến Nguyễn Minh — kể như một thước phim ngắn."
content="Một lá thư ngỏ của Tiến Nguyễn Minh, gửi người sẽ cùng đi đường dài — kể như một thước phim ngắn."
/>
<link rel="icon" href="assets/favicon.svg" />
<!-- The hero photo is the film's opening frame but is only discoverable after
@@ -29,12 +29,12 @@
href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&amp;family=Fraunces:opsz,wght@9..144,400..750&amp;display=swap"
/>
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Dating JD &amp; CV" />
<meta property="og:site_name" content="Thư ngỏ hẹn hò" />
<meta property="og:locale" content="vi_VN" />
<meta property="og:title" content="Tiến Nguyễn Minh | Mô tả &amp; hồ sơ hẹn hò" />
<meta property="og:title" content="Tiến Nguyễn Minh | Thư ngỏ tìm người đi đường dài" />
<meta
property="og:description"
content="Mô tả công việc cho vị trí người yêu tương lai và hồ sơ hẹn hò dí dỏm của Tiến Nguyễn Minh — kể như một thước phim ngắn."
content="Một lá thư ngỏ của Tiến Nguyễn Minh, gửi người sẽ cùng đi đường dài — kể như một thước phim ngắn."
/>
<meta
property="og:image"
@@ -42,13 +42,13 @@
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Minh họa bộ hồ sơ ứng tuyển hẹn hò ấm áp" />
<meta property="og:image:alt" content="Minh họa một lá thư ngỏ ấm áp" />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:image"
content="https://tiennm99.github.io/dating/assets/social/dating-jd-cv-social-preview.png"
/>
<meta name="twitter:image:alt" content="Minh họa bộ hồ sơ ứng tuyển hẹn hò ấm áp" />
<meta name="twitter:image:alt" content="Minh họa một lá thư ngỏ ấm áp" />
<script>
// Pre-paint theme bootstrap. Keep the storage key, accepted values, and default
// in sync with assets/theme-switch.js.
@@ -133,10 +133,10 @@
<a
class="brand-mark"
href="#home"
aria-label="Về đầu trang mô tả và hồ sơ hẹn hò của Tiến Nguyễn Minh"
aria-label="Về đầu trang thư ngỏ của Tiến Nguyễn Minh"
>
<span class="brand-seal">TN</span>
<span class="brand-name">Mô tả &amp; hồ sơ hẹn hò</span>
<span class="brand-name">Thư ngỏ</span>
</a>
<div class="header-actions">
@@ -177,19 +177,19 @@
</header>
<main id="content">
<!-- ============ Cảnh 1 · Cold open: vị trí bỏ trống ============ -->
<!-- ============ Cảnh 1 · Cold open: chỗ trống bên cạnh ============ -->
<section class="home-hero film-scene" id="home" data-scene data-scene-pin>
<div class="site-shell hero-copy" data-reveal-group>
<p class="chapter-tag" data-reveal>Cảnh 1 · Vị trí bỏ trống</p>
<p class="eyebrow" data-reveal>Vị trí mở / bạn đồng hành dài hạn</p>
<p class="chapter-tag" data-reveal>Cảnh 1 · Chỗ trống bên cạnh</p>
<p class="eyebrow" data-reveal>Đang tìm một người đi đường dài</p>
<h1 data-reveal>Tiến Nguyễn Minh</h1>
<p class="lead" data-reveal>
Một vị trí đã bỏ trống hơi lâu. Một anh dev hay ở nhà, cũng muốn đi chơi đấy — nhưng
Chỗ bên cạnh đã trống hơi lâu. Một anh dev hay ở nhà, cũng muốn đi chơi đấy — nhưng
lười đi một mình. Đang tìm một người cùng đi đường dài, nghiêm túc hơn cả cách mình
cày event Genshin.
</p>
<div class="button-row" data-reveal>
<a class="button" href="#applicant">Gặp ứng viên</a>
<a class="button" href="#applicant">Gặp mình</a>
<a class="button secondary" href="#offer">Đọc lời mời</a>
</div>
</div>
@@ -206,7 +206,7 @@
<div data-reveal>
<p class="chapter-tag">Cảnh 2 · Nhân vật chính</p>
<p class="eyebrow">Chân dung nhanh</p>
<h2 id="applicant-title">Ứng viên là ai?</h2>
<h2 id="applicant-title">Mình là ai?</h2>
<!-- OWNER: thêm ảnh chân dung thật vào assets/ (khuyến nghị ~800×1000, .webp/.jpg đã nén),
rồi BỎ COMMENT thẻ <img> bên dưới và XOÁ khối .portrait__placeholder.
Giữ nguyên width/height để tránh giật layout (CLS). -->
@@ -316,7 +316,7 @@
</article>
<!-- OWNER — beat "thành thật đến tận cùng": mấy dòng trên đều là khuyết điểm dễ
thương. Một điều thật lòng, KHÔNG dễ thương (một nỗi sợ, một điều còn đang cố
sửa) sẽ khiến hồ sơ này khác hẳn kiểu diễn. Viết bằng giọng của anh rồi bỏ
sửa) sẽ khiến trang này khác hẳn kiểu diễn. Viết bằng giọng của anh rồi bỏ
comment. Giữ data-reveal để hiện đúng theo cả ba tầng chuyển động.
<article class="panel" data-reveal>
<h3>[Một điều thật lòng, không tô vẽ]</h3>
@@ -326,7 +326,7 @@
</div>
</section>
<!-- ============ Cảnh 4 · Lời mời làm việc (quyền lợi) ============ -->
<!-- ============ Cảnh 4 · Lời mời ============ -->
<section
class="site-shell page-section film-scene"
id="offer"
@@ -334,23 +334,17 @@
data-scene
data-reveal-group
>
<p class="chapter-tag" data-reveal>Cảnh 4 · Lời mời làm việc</p>
<p class="eyebrow" data-reveal>Người yêu tương lai · Quyền lợi</p>
<h2 class="page-title" id="offer-title" data-reveal>Bạn sẽ nhận được.</h2>
<p class="chapter-tag" data-reveal>Cảnh 4 · Lời mời</p>
<p class="eyebrow" data-reveal>Gửi người sẽ đến</p>
<h2 class="page-title" id="offer-title" data-reveal>Điều mình có thể trao đi.</h2>
<p class="lead" data-reveal>
Đây là một vị trí dài hạn, làm việc trực tiếp với con người. Gói đãi ngộ chủ yếu gồm sự
chú ý, lòng chung thủy, những bữa ăn chung, chuyện cười riêng, và một người biết thử lại
sau sai lầm.
Mình không có gì to tát để hứa. Chủ yếu là sự chú ý, lòng chung thủy, những bữa ăn
chung, chuyện cười riêng, và một người biết thử lại sau sai lầm.
</p>
<div class="meta-grid" role="group" aria-label="Tóm tắt vị trí" data-reveal>
<div><span>Loại hình</span>Toàn thời gian bằng trái tim, lịch linh hoạt</div>
<div><span>Địa điểm</span>Chủ yếu ở Trái Đất, đôi khi tại Sài Gòn</div>
<div><span>Ngày bắt đầu</span>Khi niềm tin qua vòng xem xét</div>
</div>
<!-- Numbered "gói đãi ngộ" rather than four title-less floating boxes:
the JD conceit lands harder as a structured package, and it gives
scene 4 a shape distinct from scenes 5 and 6. Copy unchanged. -->
<ol class="benefit-list">
<!-- An unhurried list rather than a numbered package: scene 4 still needs a
shape of its own next to scenes 5 and 6, but the numbering and the table
rules read as a compensation schedule. Copy unchanged. -->
<ul class="gift-list">
<li data-reveal>
Ưu tiên hỗ trợ trong những ngày khó, ý tưởng lạ, và các buổi tối yên tĩnh.
</li>
@@ -360,12 +354,12 @@
nay.
</li>
<li data-reveal>
Lộ trình phát triển dài hạn: khỏe hơn, đi nhiều hơn, và có nhiều câu chuyện hơn.
Đường dài phía trước: khỏe hơn, đi nhiều hơn, và có nhiều câu chuyện hơn.
</li>
</ol>
</ul>
</section>
<!-- ============ Cảnh 5 · Điều cả hai cùng giữ (trách nhiệm) ============ -->
<!-- ============ Cảnh 5 · Điều cả hai cùng giữ ============ -->
<section
class="site-shell page-section section-grid film-scene"
id="shared"
@@ -375,7 +369,7 @@
>
<div data-reveal>
<p class="chapter-tag">Cảnh 5 · Điều cả hai cùng giữ</p>
<p class="eyebrow">Trách nhiệm</p>
<p class="eyebrow">Lời hứa nhỏ</p>
<h2 id="shared-title">Điều cả hai cùng bảo vệ.</h2>
</div>
<!-- Unboxed on purpose. As four large serif lines, each arriving as its
@@ -393,7 +387,7 @@
</ul>
</section>
<!-- ============ Cảnh 6 · Không có bài kiểm tra áp lực (điểm cộng + cao trào) ============ -->
<!-- ============ Cảnh 6 · Không có bài kiểm tra nào cả (điểm cộng + cao trào) ============ -->
<section
class="site-shell page-section section-grid film-scene"
id="no-test"
@@ -402,7 +396,7 @@
data-reveal-group
>
<div data-reveal>
<p class="chapter-tag">Cảnh 6 · Không có bài kiểm tra áp lực</p>
<p class="chapter-tag">Cảnh 6 · Không có bài kiểm tra nào cả</p>
<p class="eyebrow">Điểm cộng</p>
<h2 id="no-test-title">Điểm cộng thì vui, không có cũng chẳng sao.</h2>
</div>
@@ -414,8 +408,8 @@
cả.
</li>
<li>
Có thể cười với một bản nhại công sở mà không biến tình yêu thành OKR xét theo
quý.
Có thể cười với những trò đùa nhảm, mà không biến tình cảm thành một bản
kế hoạch có hạn chót.
</li>
<li>Tin rằng tình cảm chạy tốt hơn nhờ kiên nhẫn, không phải trò đoán ý.</li>
<!-- Zodiac emoji carry meaning here, so they are labelled in Vietnamese;
@@ -437,11 +431,11 @@
the layout — no accent border, no halo, centred and given room —
so the calmest thing on screen is also the most important. -->
<article class="panel quiet" data-reveal>
<h3>Ghi chú tuyển chọn</h3>
<h3>Thật lòng mà nói</h3>
<p>
Không có bài kiểm tra áp lực. Không có vòng giải đố ẩn. Ứng viên mạnh là người vẫn
tử tế khi mệt, nói thẳng khi rối, và sẵn sàng chọn nhau trong những khoảnh khắc nhỏ
rất đời thường.
Không có bài kiểm tra nào cả. Không có vòng loại nào hết. Người mình mong gặp là
người vẫn tử tế khi mệt, nói thẳng khi rối, và sẵn sàng chọn nhau trong những
khoảnh khắc nhỏ rất đời thường.
</p>
</article>
</div>
@@ -469,7 +463,7 @@
kết nối để mình tìm hiểu nhau thêm nhé.
</p>
<!-- OWNER: thay YOUR_HANDLE bằng tên tài khoản Facebook / Instagram thật của anh
(ví dụ facebook.com/tien.nguyen). Đây là cánh cửa "ứng tuyển" của cả trang. -->
(ví dụ facebook.com/tien.nguyen). Đây là cánh cửa để nhắn cho anh của cả trang. -->
<div class="button-row">
<a
class="button"
@@ -489,7 +483,7 @@
</article>
</section>
<!-- ============ Phụ lục · Hồ sơ chi tiết (credits roll) ============ -->
<!-- ============ Phụ lục · Vài điều cụ thể (credits roll) ============ -->
<section
class="site-shell page-section section-grid film-scene"
id="dossier"
@@ -498,7 +492,7 @@
data-reveal-group
>
<div data-reveal>
<p class="chapter-tag">Phụ lục · Hồ sơ chi tiết</p>
<p class="chapter-tag">Phụ lục · Vài điều cụ thể</p>
<p class="eyebrow">Thông tin nhanh</p>
<h2 id="dossier-title">Để đỡ mất công đoán.</h2>
</div>