Sản phẩm công nghệ Bai cuoi khoa của học sinh Trần Quốc Mạnh Phong(roblox rain)

Nhà sáng tạo Trần Quốc Mạnh Phong(roblox rain) 12 tuổi

Bai cuoi khoa

0
0
Facebook

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trần Quốc Mạnh Phong — Portfolio</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@400;600&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
<style>
:root {
--bg: #080b14;
--surface: #0d1424;
--card: #111926;
--border: #1e2d47;
--neon-blue: #00d4ff;
--neon-green: #39ff6e;
--neon-pink: #ff2d78;
--neon-yellow: #ffe600;
--text: #c8d8f0;
--text-dim: #5a7090;
--glow-blue: 0 0 20px #00d4ff80, 0 0 60px #00d4ff30;
--glow-green: 0 0 20px #39ff6e80, 0 0 60px #39ff6e30;
--glow-pink: 0 0 20px #ff2d7880, 0 0 60px #ff2d7830;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
background: var(--bg);
color: var(--text);
font-family: 'Rajdhani', sans-serif;
font-size: 17px;
overflow-x: hidden;
cursor: none;
}

/* ── Custom cursor ── */
#cursor {
width: 12px; height: 12px;
background: var(--neon-blue);
border-radius: 50%;
position: fixed; top: 0; left: 0;
pointer-events: none;
z-index: 9999;
transition: transform .12s ease, background .2s;
box-shadow: var(--glow-blue);
}
#cursor-ring {
width: 36px; height: 36px;
border: 1.5px solid var(--neon-blue);
border-radius: 50%;
position: fixed; top: 0; left: 0;
pointer-events: none;
z-index: 9998;
transition: transform .35s cubic-bezier(.25,.8,.25,1), border-color .2s;
opacity: .6;
}

/* ── Grid background ── */
body::before {
content: '';
position: fixed; inset: 0;
background-image:
linear-gradient(rgba(0,212,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,212,255,.03) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
}

/* ── Scanline ── */
body::after {
content: '';
position: fixed; inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,.08) 2px,
rgba(0,0,0,.08) 4px
);
pointer-events: none;
z-index: 0;
}

/* ── Noise texture overlay ── */
.noise {
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
opacity: .5;
}

/* ── Layout ── */
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 28px;
position: relative;
z-index: 2;
}

/* ── HERO ── */
#hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 60px 0;
}

.hero-bg-circle {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hero-bg-circle.c1 {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(0,212,255,.08) 0%, transparent 70%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: pulse 5s ease-in-out infinite;
}
.hero-bg-circle.c2 {
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(57,255,110,.06) 0%, transparent 70%);
bottom: 10%; right: 5%;
animation: pulse 7s ease-in-out infinite reverse;
}

@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .7; }
50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.hero-inner {
text-align: center;
}

.hero-badge {
display: inline-block;
border: 1px solid var(--neon-blue);
color: var(--neon-blue);
font-family: 'Space Mono', monospace;
font-size: .72rem;
letter-spacing: .18em;
padding: 6px 18px;
border-radius: 2px;
margin-bottom: 28px;
animation: fadeDown .6s ease both;
position: relative;
overflow: hidden;
}
.hero-badge::before {
content: '';
position: absolute; inset: 0;
background: var(--neon-blue);
opacity: 0.07;
}

.hero-name {
font-family: 'Orbitron', sans-serif;
font-size: clamp(2.2rem, 7vw, 5.2rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -.01em;
animation: fadeDown .7s .1s ease both;
}
.hero-name .line1 { color: var(--text); }
.hero-name .line2 {
background: linear-gradient(90deg, var(--neon-blue), var(--neon-green));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero-tagline {
margin-top: 20px;
font-size: 1.15rem;
font-weight: 600;
color: var(--text-dim);
letter-spacing: .08em;
font-family: 'Space Mono', monospace;
animation: fadeDown .7s .2s ease both;
}
.hero-tagline span { color: var(--neon-green); }

.hero-stats {
display: flex;
gap: 32px;
justify-content: center;
margin-top: 44px;
flex-wrap: wrap;
animation: fadeDown .7s .3s ease both;
}
.stat-box {
border: 1px solid var(--border);
background: var(--card);
padding: 16px 28px;
border-radius: 4px;
text-align: center;
position: relative;
overflow: hidden;
transition: border-color .3s, transform .3s;
}
.stat-box::before {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--neon-blue), var(--neon-green));
transform: scaleX(0);
transition: transform .3s;
}
.stat-box:hover { border-color: var(--neon-blue); transform: translateY(-4px); }
.stat-box:hover::before { transform: scaleX(1); }
.stat-num {
font-family: 'Orbitron', sans-serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--neon-blue);
text-shadow: var(--glow-blue);
}
.stat-label {
font-size: .82rem;
color: var(--text-dim);
letter-spacing: .1em;
text-transform: uppercase;
margin-top: 4px;
}

.scroll-hint {
margin-top: 60px;
animation: fadeDown .7s .5s ease both;
color: var(--text-dim);
font-family: 'Space Mono', monospace;
font-size: .72rem;
letter-spacing: .15em;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.scroll-hint .line {
width: 40px; height: 1px;
background: var(--border);
}

/* ── SECTIONS ── */
section {
padding: 80px 0;
position: relative;
z-index: 2;
}

.section-label {
font-family: 'Space Mono', monospace;
font-size: .72rem;
letter-spacing: .2em;
color: var(--neon-blue);
text-transform: uppercase;
margin-bottom: 12px;
}
.section-title {
font-family: 'Orbitron', sans-serif;
font-size: clamp(1.4rem, 4vw, 2.4rem);
font-weight: 700;
color: var(--text);
margin-bottom: 40px;
}
.section-title .accent { color: var(--neon-green); }

/* ── ABOUT CARD ── */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; } }

.about-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 28px;
position: relative;
overflow: hidden;
transition: border-color .3s, transform .3s;
}
.about-card::after {
content: '';
position: absolute;
top: -60%; right: -60%;
width: 200%; height: 200%;
background: radial-gradient(circle at center, rgba(0,212,255,.04) 0%, transparent 50%);
pointer-events: none;
}
.about-card:hover { border-color: #2a4060; transform: translateY(-3px); }

.about-card .icon {
font-size: 2.2rem;
margin-bottom: 12px;
}
.about-card .label {
font-family: 'Space Mono', monospace;
font-size: .7rem;
letter-spacing: .15em;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 6px;
}
.about-card .value {
font-size: 1.15rem;
font-weight: 600;
color: var(--text);
}
.about-card.wide {
grid-column: 1 / -1;
}

/* ── INTERACTIVE BUTTONS ── */
.btn-group {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 48px;
}

.neon-btn {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 16px 30px;
font-family: 'Orbitron', sans-serif;
font-size: .82rem;
font-weight: 700;
letter-spacing: .1em;
border: none;
border-radius: 4px;
cursor: none;
overflow: hidden;
transition: transform .25s, box-shadow .25s;
z-index: 0;
text-transform: uppercase;
}
.neon-btn::before {
content: '';
position: absolute; inset: 0;
opacity: 0;
transition: opacity .25s;
z-index: -1;
}
.neon-btn:hover { transform: translateY(-3px) scale(1.02); }
.neon-btn:active { transform: scale(.97); }

.neon-btn.blue {
background: rgba(0,212,255,.1);
color: var(--neon-blue);
box-shadow: inset 0 0 0 1.5px var(--neon-blue);
}
.neon-btn.blue::before { background: rgba(0,212,255,.12); }
.neon-btn.blue:hover { box-shadow: inset 0 0 0 1.5px var(--neon-blue), var(--glow-blue); }
.neon-btn.blue:hover::before { opacity: 1; }

.neon-btn.green {
background: rgba(57,255,110,.1);
color: var(--neon-green);
box-shadow: inset 0 0 0 1.5px var(--neon-green);
}
.neon-btn.green::before { background: rgba(57,255,110,.12); }
.neon-btn.green:hover { box-shadow: inset 0 0 0 1.5px var(--neon-green), var(--glow-green); }
.neon-btn.green:hover::before { opacity: 1; }

.neon-btn .btn-icon { font-size: 1.1rem; }

/* ── MODAL ── */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(8,11,20,.88);
backdrop-filter: blur(6px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.modal-backdrop.open {
opacity: 1;
pointer-events: all;
}

.modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
max-width: 680px;
width: 100%;
max-height: 88vh;
overflow-y: auto;
position: relative;
transform: translateY(30px) scale(.96);
transition: transform .35s cubic-bezier(.25,.8,.25,1);
}
.modal-backdrop.open .modal {
transform: translateY(0) scale(1);
}

.modal-header {
padding: 28px 32px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 16px;
}
.modal-header .modal-icon { font-size: 2rem; }
.modal-header h2 {
font-family: 'Orbitron', sans-serif;
font-size: 1.3rem;
font-weight: 700;
}
.modal-header h2 .blue { color: var(--neon-blue); }
.modal-header h2 .green { color: var(--neon-green); }

.modal-close {
position: absolute;
top: 20px; right: 24px;
background: none; border: none;
color: var(--text-dim);
font-size: 1.6rem;
cursor: none;
line-height: 1;
transition: color .2s, transform .2s;
font-family: monospace;
}
.modal-close:hover { color: var(--neon-pink); transform: rotate(90deg); }

.modal-body {
padding: 28px 32px 32px;
}

/* School cards */
.school-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 24px;
margin-bottom: 18px;
display: flex;
gap: 20px;
align-items: flex-start;
position: relative;
overflow: hidden;
transition: border-color .3s;
}
.school-card:hover { border-color: var(--neon-blue); }
.school-card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--neon-blue), var(--neon-green));
}
.school-logo {
font-size: 2.8rem;
flex-shrink: 0;
}
.school-info h3 {
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
color: var(--neon-blue);
margin-bottom: 6px;
}
.school-info p {
color: var(--text-dim);
font-size: .92rem;
line-height: 1.6;
}
.school-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.tag {
font-family: 'Space Mono', monospace;
font-size: .65rem;
letter-spacing: .1em;
padding: 4px 10px;
border-radius: 2px;
border: 1px solid;
text-transform: uppercase;
}
.tag.blue { color: var(--neon-blue); border-color: rgba(0,212,255,.3); background: rgba(0,212,255,.06); }
.tag.green { color: var(--neon-green); border-color: rgba(57,255,110,.3); background: rgba(57,255,110,.06); }
.tag.pink { color: var(--neon-pink); border-color: rgba(255,45,120,.3); background: rgba(255,45,120,.06); }
.tag.yellow { color: var(--neon-yellow); border-color: rgba(255,230,0,.3); background: rgba(255,230,0,.06); }

/* Hobby cards */
.hobby-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 24px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
transition: border-color .3s;
}
.hobby-card:hover { border-color: var(--neon-green); }
.hobby-card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--neon-green);
}
.hobby-card h3 {
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
color: var(--neon-green);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.hobby-card p {
color: var(--text-dim);
font-size: .92rem;
line-height: 1.65;
}

/* ── SKILLS BAR ── */
.skills-grid {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 20px;
}
.skill-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.skill-meta {
display: flex;
justify-content: space-between;
font-family: 'Space Mono', monospace;
font-size: .75rem;
}
.skill-name { color: var(--text); }
.skill-pct { color: var(--neon-green); }
.skill-bar {
height: 5px;
background: var(--border);
border-radius: 10px;
overflow: hidden;
}
.skill-fill {
height: 100%;
border-radius: 10px;
background: linear-gradient(90deg, var(--neon-blue), var(--neon-green));
transform-origin: left;
animation: fillBar .9s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes fillBar {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}

/* ── FOOTER ── */
footer {
border-top: 1px solid var(--border);
padding: 32px 0;
text-align: center;
color: var(--text-dim);
font-family: 'Space Mono', monospace;
font-size: .72rem;
letter-spacing: .12em;
position: relative;
z-index: 2;
}
footer .heart { color: var(--neon-pink); }

/* ── Animations ── */
@keyframes fadeDown {
from { opacity: 0; transform: translateY(-18px); }
to { opacity: 1; transform: translateY(0); }
}

.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}

/* scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* divider */
.divider {
border: none;
border-top: 1px solid var(--border);
margin: 60px 0;
position: relative;
z-index: 2;
}
</style>
</head>
<body>

<div class="noise"></div>
<div id="cursor"></div>
<div id="cursor-ring"></div>


<section id="hero">
<div class="container hero-inner">
<div class="hero-bg-circle c1"></div>
<div class="hero-bg-circle c2"></div>

<p class="hero-badge">✦ PLAYER_01 — ĐANG TRỰC TUYẾN ✦</p>

<h1 class="hero-name">
<div class="line1">TRẦN QUỐC</div>
<div class="line2">MẠNH PHONG</div>
</h1>

<p class="hero-tagline">
Sinh năm <span>2013</span>  ·  Coder & Gamer  ·  The Next Gen Dev
</p>

<div class="hero-stats">
<div class="stat-box">
<div class="stat-num">12</div>
<div class="stat-label">Tuổi</div>
</div>
<div class="stat-box">
<div class="stat-num">2</div>
<div class="stat-label">Trường học</div>
</div>
<div class="stat-box">
<div class="stat-num">∞</div>
<div class="stat-label">Đam mê</div>
</div>
<div class="stat-box">
<div class="stat-num">100%</div>
<div class="stat-label">Nhiệt huyết</div>
</div>
</div>

<p class="scroll-hint"><span class="line"></span>SCROLL XUỐNG<span class="line"></span></p>
</div>
</section>

<hr class="divider" />


<section id="about">
<div class="container">
<p class="section-label reveal">// về tôi</p>
<h2 class="section-title reveal">Xin chào, tôi là <span class="accent">Mạnh Phong</span></h2>

<div class="about-grid reveal">
<div class="about-card">
<div class="icon">👤</div>
<div class="label">Họ & Tên</div>
<div class="value">Trần Quốc Mạnh Phong</div>
</div>
<div class="about-card">
<div class="icon">🎂</div>
<div class="label">Năm sinh</div>
<div class="value">2013</div>
</div>
<div class="about-card wide">
<div class="icon">💡</div>
<div class="label">Về tôi</div>
<div class="value" style="font-weight:400; font-size:1rem; line-height:1.7; color:var(--text-dim);">
Tôi là một học sinh yêu thích công nghệ, lập trình và thế giới game.
Với tinh thần học hỏi không ngừng và niềm đam mê với code,
tôi đang từng bước xây dựng nền tảng để trở thành một lập trình viên trong tương lai.
Mỗi dòng code là một bước tiến — và tôi chưa bao giờ ngừng bước!
</div>
</div>
</div>


<div class="btn-group reveal">
<button class="neon-btn blue" onclick="openModal('school')">
<span class="btn-icon">🏫</span> Trường học của tôi
</button>
<button class="neon-btn green" onclick="openModal('hobby')">
<span class="btn-icon">🎮</span> Sở thích của tôi
</button>
</div>
</div>
</section>

<hr class="divider" />


<section id="skills">
<div class="container">
<p class="section-label reveal">// kỹ năng</p>
<h2 class="section-title reveal">Năng lực <span class="accent">hiện tại</span></h2>

<div class="skills-grid reveal">
<div class="skill-row">
<div class="skill-meta"><span class="skill-name">🧩 Tư duy logic</span><span class="skill-pct">90%</span></div>
<div class="skill-bar"><div class="skill-fill" style="width:90%"></div></div>
</div>
<div class="skill-row">
<div class="skill-meta"><span class="skill-name">💻 Lập trình cơ bản</span><span class="skill-pct">75%</span></div>
<div class="skill-bar"><div class="skill-fill" style="width:75%"></div></div>
</div>
<div class="skill-row">
<div class="skill-meta"><span class="skill-name">🎮 Kỹ năng gaming</span><span class="skill-pct">95%</span></div>
<div class="skill-bar"><div class="skill-fill" style="width:95%"></div></div>
</div>
<div class="skill-row">
<div class="skill-meta"><span class="skill-name">🚀 Ham học hỏi</span><span class="skill-pct">100%</span></div>
<div class="skill-bar"><div class="skill-fill" style="width:100%"></div></div>
</div>
<div class="skill-row">
<div class="skill-meta"><span class="skill-name">🌐 Tiếng Anh</span><span class="skill-pct">70%</span></div>
<div class="skill-bar"><div class="skill-fill" style="width:70%"></div></div>
</div>
</div>
</div>
</section>

<footer>
<div class="container">
<p>Made with <span class="heart">♥</span> by Trần Quốc Mạnh Phong · 2013 — present</p>
<p style="margin-top:8px; font-size:.65rem; opacity:.4;">// Keep coding. Keep gaming. Keep growing.</p>
</div>
</footer>


<div class="modal-backdrop" id="modal-school" onclick="closeOnBackdrop(event, 'school')">
<div class="modal">
<div class="modal-header">
<span class="modal-icon">🏫</span>
<h2><span class="blue">Trường học</span> của tôi</h2>
</div>
<button class="modal-close" onclick="closeModal('school')">✕</button>
<div class="modal-body">

<div class="school-card">
<div class="school-logo">🇦🇺</div>
<div class="school-info">
<h3>Trường Quốc tế Việt Úc (VAS)</h3>
<p>
Trường Việt Úc là một trong những hệ thống trường quốc tế hàng đầu tại Việt Nam,
kết hợp chương trình học tiên tiến theo chuẩn quốc tế với nền văn hóa Việt.
Tại đây, tôi được học tiếng Anh chuyên sâu, rèn luyện tư duy phản biện
và phát triển toàn diện cả về thể chất lẫn trí tuệ.
</p>
<div class="school-tags">
<span class="tag blue">Tiếng Anh</span>
<span class="tag green">Quốc tế</span>
<span class="tag yellow">STEM</span>
<span class="tag pink">Năng động</span>
</div>
</div>
</div>

<div class="school-card">
<div class="school-logo">🤖</div>
<div class="school-info">
<h3>Teky Academy</h3>
<p>
Teky là học viện công nghệ hàng đầu Đông Nam Á dành cho trẻ em và thanh thiếu niên.
Tại đây tôi được học lập trình thực tế — từ Scratch, Python cho đến game design.
Đây là nơi tôi biến đam mê gaming thành kỹ năng tạo ra game,
và học cách tư duy như một kỹ sư phần mềm thực thụ!
</p>
<div class="school-tags">
<span class="tag green">Coding</span>
<span class="tag blue">Scratch</span>
<span class="tag yellow">Python</span>
<span class="tag pink">Game Dev</span>
</div>
</div>
</div>

<p style="color:var(--text-dim); font-size:.88rem; font-family:'Space Mono',monospace; text-align:center; margin-top:8px;">
// Học không chỉ để biết — học để làm được!
</p>
</div>
</div>
</div>


<div class="modal-backdrop" id="modal-hobby" onclick="closeOnBackdrop(event, 'hobby')">
<div class="modal">
<div class="modal-header">
<span class="modal-icon">🎮</span>
<h2><span class="green">Sở thích</span> của tôi</h2>
</div>
<button class="modal-close" onclick="closeModal('hobby')">✕</button>
<div class="modal-body">

<div class="hobby-card">
<h3>🎮 Chơi Game</h3>
<p>
Game không chỉ là giải trí — đó là thế giới nơi tôi rèn luyện phản xạ,
tư duy chiến thuật và tinh thần không bỏ cuộc. Mỗi màn chơi là một bài toán cần giải,
mỗi trận đấu là cơ hội để cải thiện bản thân. Tôi yêu thích các tựa game
đòi hỏi sự phối hợp nhóm và chiến lược — nơi teamwork thực sự tạo ra dreamwork!
</p>
<div style="margin-top:14px; display:flex; gap:8px; flex-wrap:wrap;">
<span class="tag green">Chiến thuật</span>
<span class="tag blue">Team work</span>
<span class="tag yellow">Phản xạ</span>
<span class="tag pink">Fun</span>
</div>
</div>

<div class="hobby-card">
<h3>💻 Coding</h3>
<p>
Lập trình với tôi như một ngôn ngữ siêu năng lực — tôi có thể tạo ra bất cứ thứ gì
chỉ bằng những dòng code. Từ khi học Teky Academy, tôi đã bắt đầu hiểu rằng
các game tôi yêu thích đều được tạo ra bởi những người biết code như tôi.
Mục tiêu của tôi? Một ngày nào đó sẽ tự tay tạo ra tựa game của riêng mình!
</p>
<div style="margin-top:14px; display:flex; gap:8px; flex-wrap:wrap;">
<span class="tag green">Sáng tạo</span>
<span class="tag blue">Problem Solving</span>
<span class="tag yellow">Build Things</span>
<span class="tag pink">Future Dev</span>
</div>
</div>

<div class="hobby-card" style="border-color: rgba(255,230,0,.25);">
<h3 style="color:var(--neon-yellow);">🌟 Mục tiêu tương lai</h3>
<p>
Tôi mơ về việc kết hợp cả hai đam mê — xây dựng một studio game của riêng mình,
nơi những ý tưởng sáng tạo được hiện thực hóa bằng code.
Mỗi ngày tôi học thêm một thứ mới, và tôi biết rằng hành trình ngàn dặm
bắt đầu từ một dòng code đầu tiên.
</p>
</div>

<p style="color:var(--text-dim); font-size:.88rem; font-family:'Space Mono',monospace; text-align:center; margin-top:8px;">
// Game. Code. Repeat. 🚀
</p>
</div>
</div>
</div>

<script>
// ── Custom cursor
const cursor = document.getElementById('cursor');
const ring = document.getElementById('cursor-ring');
document.addEventListener('mousemove', e => {
cursor.style.transform = `translate(${e.clientX - 6}px, ${e.clientY - 6}px)`;
ring.style.transform = `translate(${e.clientX - 18}px, ${e.clientY - 18}px)`;
});

// ── Modal
function openModal(id) {
document.getElementById('modal-' + id).classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeModal(id) {
document.getElementById('modal-' + id).classList.remove('open');
document.body.style.overflow = '';
}
function closeOnBackdrop(e, id) {
if (e.target === document.getElementById('modal-' + id)) closeModal(id);
}
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
['school','hobby'].forEach(closeModal);
}
});

// ── Scroll reveal
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver(entries => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
setTimeout(() => entry.target.classList.add('visible'), i * 80);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.12 });
reveals.forEach(el => observer.observe(el));
</script>

</body>
</html>

Xem toàn bộ

Hãy bình luận để nhặt 100 thóc nhé

Bai cuoi khoa

Giới thiệu sản phẩm

Thông tin tác giả

Sản phẩm cùng tác giả

Sản phẩm liên quan

Bạn muốn thử làm game không?