mirror of
https://github.com/tiennm99/dating.git
synced 2026-09-01 06:19:09 +00:00
tiennm99
e2d09fd3de
feat: turn dating packet into scroll-driven short film Rearrange the JD/CV content into a 7-scene narrative arc that opens on the person, builds through the offer, and closes on sincerity, with the full facts kept as a dossier appendix. Layer a GSAP + ScrollTrigger + Lenis film engine that scrubs each scene into view and pins the opening and closing title cards. Keep the progressive-enhancement contract: the film only activates on wide viewports with motion allowed and the CDN present; otherwise the existing static reveal runs. Scope the reveal styles so the two engines never animate the same content, and fail open so content is never trapped hidden. @
446 lines
17 KiB
HTML
446 lines
17 KiB
HTML
<!doctype html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Tiến Nguyễn Minh | Mô tả & hồ sơ hẹn hò</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."
|
|
/>
|
|
<link rel="icon" href="assets/favicon.svg" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,650;9..144,750&display=swap"
|
|
/>
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="Dating JD & CV" />
|
|
<meta property="og:locale" content="vi_VN" />
|
|
<meta property="og:title" content="Tiến Nguyễn Minh | Mô tả & hồ sơ hẹn hò" />
|
|
<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."
|
|
/>
|
|
<meta
|
|
property="og:image"
|
|
content="https://tiennm99.github.io/dating/assets/social/dating-jd-cv-social-preview.png"
|
|
/>
|
|
<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 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" />
|
|
<script>
|
|
// Pre-paint theme bootstrap. Keep the storage key, accepted values, and default
|
|
// in sync with assets/theme-switch.js.
|
|
(() => {
|
|
try {
|
|
const root = document.documentElement;
|
|
const storedTheme = localStorage.getItem('dating-theme');
|
|
const theme = storedTheme === 'dark' ? 'dark' : 'light';
|
|
|
|
root.dataset.theme = theme;
|
|
root.style.colorScheme = theme;
|
|
|
|
// Gate scroll-reveal motion behind JS + IntersectionObserver support,
|
|
// set pre-paint so revealable content never flashes visible then hides.
|
|
// Consumed by assets/story.css and assets/story-chrome.css.
|
|
if ('IntersectionObserver' in window) {
|
|
root.classList.add('js-ready');
|
|
}
|
|
} catch {
|
|
document.documentElement.dataset.theme = 'light';
|
|
document.documentElement.style.colorScheme = 'light';
|
|
}
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="assets/styles.css" />
|
|
<link rel="stylesheet" href="assets/story.css" />
|
|
<link rel="stylesheet" href="assets/story-chrome.css" />
|
|
<link rel="stylesheet" href="assets/story-film.css" />
|
|
<script src="assets/theme-switch.js" defer></script>
|
|
<!-- Film engine libraries (CDN, versioned). Load before story-film.js.
|
|
If any fails, story-film.js bails and the static reveal (story.js) runs. -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js" defer></script>
|
|
<!-- story-film.js decides whether the film activates; must run before story.js
|
|
so story.js can defer to it. story.js is the reduced-motion / mobile / no-CDN fallback. -->
|
|
<script src="assets/story-film.js" defer></script>
|
|
<script src="assets/story.js" defer></script>
|
|
<script src="assets/story-chrome.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<div class="scroll-progress" aria-hidden="true"><span class="scroll-progress__fill"></span></div>
|
|
|
|
<a class="skip-link" href="#content">Bỏ qua đến nội dung</a>
|
|
|
|
<header class="site-shell site-header">
|
|
<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"
|
|
>
|
|
<span class="brand-seal">TN</span>
|
|
<span>Mô tả & hồ sơ hẹn hò</span>
|
|
</a>
|
|
|
|
<div class="header-actions">
|
|
<nav aria-label="Điều hướng chính">
|
|
<a href="#home">Mở đầu</a>
|
|
<a href="#applicant">Con người</a>
|
|
<a href="#offer">Lời mời</a>
|
|
<a href="#dossier">Chi tiết</a>
|
|
</nav>
|
|
|
|
<div class="preference-controls">
|
|
<div class="segmented-control icon-segmented" role="group" aria-label="Giao diện">
|
|
<button
|
|
type="button"
|
|
data-theme-option="light"
|
|
aria-label="Chuyển sang giao diện sáng"
|
|
aria-pressed="false"
|
|
title="Chuyển sang giao diện sáng"
|
|
>
|
|
<span class="emoji-icon" aria-hidden="true">☀️</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-theme-option="dark"
|
|
aria-label="Chuyển sang giao diện tối"
|
|
aria-pressed="false"
|
|
title="Chuyển sang giao diện tối"
|
|
>
|
|
<span class="emoji-icon" aria-hidden="true">🌙</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="content">
|
|
<!-- ============ Cảnh 1 · Cold open: vị trí bỏ trống ============ -->
|
|
<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>
|
|
<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
|
|
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 secondary" href="#offer">Đọc lời mời</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ Cảnh 2 · Nhân vật chính ============ -->
|
|
<section
|
|
class="site-shell page-section section-grid film-scene"
|
|
id="applicant"
|
|
aria-labelledby="applicant-title"
|
|
data-scene
|
|
data-reveal-group
|
|
>
|
|
<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>
|
|
</div>
|
|
<div class="panel-list">
|
|
<article class="panel" data-reveal>
|
|
<h3>Hướng nội có nghề</h3>
|
|
<p>
|
|
Tốt nghiệp Đại học Bờ Kênh TPHCM, hiện là công nhân đánh máy thuê tại Xí nghiệp gêm
|
|
Vê Nờ Gờ. Nói cách khác: một anh dev khá nghiện máy tính và thường chọn ở nhà.
|
|
</p>
|
|
</article>
|
|
<article class="panel" data-reveal>
|
|
<h3>Wibu nửa mùa</h3>
|
|
<p>
|
|
Thích light novel hơn manga và anime; isekai là thể loại chân ái. Thời gian rảnh
|
|
dành cho đọc truyện, xem phim, chơi Genshin, TFT, code vài thứ thú vị, và cổ vũ T1 —
|
|
nhất là Keria.
|
|
</p>
|
|
</article>
|
|
<article class="panel" data-reveal>
|
|
<h3>Playlist đủ mọi loại mood</h3>
|
|
<p>
|
|
Rap mainstream, nhạc tâm trạng, nhạc suy, nhạc wibu, nhạc Trung… Tâm trạng nào cũng
|
|
có bài lót sẵn, kể cả những tâm trạng chưa đặt tên.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ Cảnh 3 · Thành thật từ đầu ============ -->
|
|
<section
|
|
class="site-shell page-section section-grid film-scene"
|
|
id="honest"
|
|
aria-labelledby="honest-title"
|
|
data-scene
|
|
data-reveal-group
|
|
>
|
|
<div data-reveal>
|
|
<p class="chapter-tag">Cảnh 3 · Thành thật từ đầu</p>
|
|
<p class="eyebrow">Nói thẳng</p>
|
|
<h2 id="honest-title">Nói thẳng, để đỡ mất công đoán.</h2>
|
|
</div>
|
|
<div class="panel-list">
|
|
<article class="panel" data-reveal>
|
|
<h3>Sống đơn giản</h3>
|
|
<p>
|
|
Gia cảnh bình thường, lối sống tiết kiệm, không chạy theo hào nhoáng. Không thuốc
|
|
lá, thi thoảng rượu bia cho đúng thủ tục xã giao. Và xin nói trước: không thích thú
|
|
cưng.
|
|
</p>
|
|
</article>
|
|
<article class="panel" data-reveal>
|
|
<h3>Nghiêm túc với chuyện lâu dài</h3>
|
|
<p>
|
|
Từng trải qua một mối tình hơn 3 năm, chia tay cũng đã hơn 3 năm — đủ lâu để lành và
|
|
sẵn sàng cho một mối quan hệ mới. Chưa lập gia đình, chưa có con.
|
|
</p>
|
|
</article>
|
|
<article class="panel" data-reveal>
|
|
<h3>Thành thật đến cùng</h3>
|
|
<p>
|
|
Rất thích quan điểm của Phật giáo nhưng chưa/không quy y. Sống hơi tâm linh, và
|
|
cũng hơi… tà răm — fetish là chân 🌚. 162cm là số đo thật, không cộng dép.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ Cảnh 4 · Lời mời làm việc (quyền lợi) ============ -->
|
|
<section
|
|
class="site-shell page-section film-scene"
|
|
id="offer"
|
|
aria-labelledby="offer-title"
|
|
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="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.
|
|
</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>
|
|
<div class="panel-list">
|
|
<article class="panel" data-reveal>
|
|
<p>Ư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.</p>
|
|
</article>
|
|
<article class="panel" data-reveal>
|
|
<p>Sự thành thật đều đặn, giao tiếp rõ ràng, và báo lỗi không đổ lỗi.</p>
|
|
</article>
|
|
<article class="panel" data-reveal>
|
|
<p>
|
|
Một người có thể gỡ lỗi hệ thống đang vận hành và cũng nghĩ hơi nhiều chuyện ăn gì
|
|
tối nay.
|
|
</p>
|
|
</article>
|
|
<article class="panel" data-reveal>
|
|
<p>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.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ Cảnh 5 · Điều cả hai cùng giữ (trách nhiệm) ============ -->
|
|
<section
|
|
class="site-shell page-section section-grid film-scene"
|
|
id="shared"
|
|
aria-labelledby="shared-title"
|
|
data-scene
|
|
data-reveal-group
|
|
>
|
|
<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>
|
|
<h2 id="shared-title">Điều cả hai cùng bảo vệ.</h2>
|
|
</div>
|
|
<div class="panel-list">
|
|
<article class="panel strong" data-reveal>
|
|
<ul>
|
|
<li>Xây niềm tin bằng lời nói thẳng thắn và những hành động nhỏ lặp lại.</li>
|
|
<li>
|
|
Tôn trọng thời gian riêng, tham vọng nghề nghiệp, gia đình, bạn bè, và các nghi
|
|
thức cá nhân.
|
|
</li>
|
|
<li>Mang theo sự tò mò, lòng tử tế, và thiện chí sửa chữa sau mâu thuẫn.</li>
|
|
<li>
|
|
Cùng duy trì một đời sống nơi cả hai được nghiêm túc và ngớ ngẩn đúng lúc.
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ Cảnh 6 · Không có bài kiểm tra áp lực (điểm cộng + cao trào) ============ -->
|
|
<section
|
|
class="site-shell page-section section-grid film-scene"
|
|
id="no-test"
|
|
aria-labelledby="no-test-title"
|
|
data-scene
|
|
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="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>
|
|
<div class="panel-list">
|
|
<article class="panel" data-reveal>
|
|
<ul>
|
|
<li>
|
|
Thích đồ ăn, đi bộ, trò chơi, phim, hoặc học những thứ lạ không vì hạn chót nào
|
|
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ý.
|
|
</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>
|
|
<li>Về tử vi: tuổi 🐈 này hợp các tuổi 🐒 🐅 🐍 🐎 🐖 hoặc 🐉 🐕 — nhưng hợp sóng vẫn hơn hợp tuổi.</li>
|
|
</ul>
|
|
</article>
|
|
<article class="panel strong" data-reveal>
|
|
<h3>Ghi chú tuyển chọn</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.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ Cảnh 7 · Lời kết ============ -->
|
|
<section
|
|
class="site-shell page-section section-grid film-scene"
|
|
id="closing"
|
|
aria-labelledby="closing-title"
|
|
data-scene
|
|
data-scene-pin
|
|
data-reveal-group
|
|
>
|
|
<div data-reveal="soft">
|
|
<p class="chapter-tag">Cảnh 7 · Lời kết</p>
|
|
<p class="eyebrow">Lời kết</p>
|
|
<h2 id="closing-title">Kết nối để tìm hiểu thêm nhé.</h2>
|
|
</div>
|
|
<article class="panel strong" data-reveal="soft">
|
|
<p>
|
|
Cảm ơn vì đã đến. Thước phim chỉ kể được một phần thôi — nếu thấy có chút hợp sóng, cứ
|
|
kết nối để mình tìm hiểu nhau thêm nhé.
|
|
</p>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- ============ Phụ lục · Hồ sơ chi tiết (credits roll) ============ -->
|
|
<section
|
|
class="site-shell page-section section-grid film-scene"
|
|
id="dossier"
|
|
aria-labelledby="dossier-title"
|
|
data-scene
|
|
data-reveal-group
|
|
>
|
|
<div data-reveal>
|
|
<p class="chapter-tag">Phụ lục · Hồ sơ chi tiết</p>
|
|
<p class="eyebrow">Thông tin nhanh</p>
|
|
<h2 id="dossier-title">Để đỡ mất công đoán.</h2>
|
|
</div>
|
|
<dl class="facts-list" data-reveal>
|
|
<div>
|
|
<dt>Tuổi</dt>
|
|
<dd>26 — sinh năm 1999, tuổi con 🐈</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Tìm kiếm</dt>
|
|
<dd>Mối quan hệ lâu dài</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Khu vực hẹn hò</dt>
|
|
<dd>TPHCM hoặc Long An cũ</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Giới tính</dt>
|
|
<dd>Nam</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Chiều cao</dt>
|
|
<dd>162cm — số đo thật, không cộng dép</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Cân nặng</dt>
|
|
<dd>65kg, hơi béo — đang "thử" giảm cân</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Quê quán</dt>
|
|
<dd>Long An cũ, nay là Tây Ninh</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Đang ở</dt>
|
|
<dd>Đi làm và thuê trọ tại Quận 7</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Ngôn ngữ</dt>
|
|
<dd>Tiếng Việt (tất nhiên) và một chút tiếng Anh</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Học vấn</dt>
|
|
<dd>Bằng đại học — Đại học Bờ Kênh TPHCM</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Công việc</dt>
|
|
<dd>Công nhân đánh máy thuê tại Xí nghiệp gêm Vê Nờ Gờ</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Tình sử</dt>
|
|
<dd>Một mối tình hơn 3 năm; chia tay cũng đã hơn 3 năm, sẵn sàng cho mối quan hệ mới</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Gia đình</dt>
|
|
<dd>Chưa lập gia đình, chưa có con</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Thói quen</dt>
|
|
<dd>Không thuốc lá, thi thoảng rượu bia</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Đức tin</dt>
|
|
<dd>Rất thích quan điểm của Phật giáo nhưng chưa/không quy y</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Thú cưng</dt>
|
|
<dd>Không thích — xin thành thật từ đầu</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Tâm linh</dt>
|
|
<dd>Tuổi 🐈; tìm các tuổi 🐒 🐅 🐍 🐎 🐖 hoặc 🐉 🐕</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Góc riêng tư</dt>
|
|
<dd>Hơi… tà răm. Fetish là chân 🌚</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|