HTML
Uploaded by
at1270004HTML
Uploaded by
at1270004<!
DOCTYPE html>
<html lang="vi" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Portfolio | Trần Trọng Thế Anh</title>
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link]
crossorigin>
<link href="[Link]
family=Inter:wght@300;400;500;600;700&family=JetBrains+M
ono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="[Link]
/css/[Link]">
<style>
/*
======================================
===================
1. CHUYỂN GIAO DIỆN & BIẾN MÀU
======================================
=================== */
:root[data-theme="dark"] {
--bg-color: #030305;
--nav-bg: rgba(3, 3, 5, 0.4);
--surface-color: rgba(20, 20, 25, 0.6);
--text-primary: #ffffff;
--text-secondary: #888888;
--accent-color: #2997ff;
--accent-glow: rgba(41, 151, 255, 0.5);
--border-color: rgba(255, 255, 255, 0.08);
--modal-bg: rgba(15, 15, 20, 0.95);
--orb-1: #2997ff;
--orb-2: #bf55ff;
--orb-3: #00ffcc;
}
:root[data-theme="light"] {
--bg-color: #f5f5f7;
--nav-bg: rgba(245, 245, 247, 0.5);
--surface-color: rgba(255, 255, 255, 0.7);
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent-color: #0066cc;
--accent-glow: rgba(0, 102, 204, 0.3);
--border-color: rgba(0, 0, 0, 0.08);
--modal-bg: rgba(255, 255, 255, 0.95);
--orb-1: #80c0ff;
--orb-2: #e0a6ff;
--orb-3: #a6ffe0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(--bg-color); color: var(--text-primary);
font-family: 'Inter', sans-serif; overflow-x: hidden; -webkit-
font-smoothing: antialiased;
transition: background-color 1s ease, color 1s ease;
overflow: hidden; /* Khoá cuộn khi đang hiển thị Màn hình
nạp */
}
/*
======================================
===================
2. MÀN HÌNH NẠP ĐIỆN ẢNH (PRELOADER)
======================================
=================== */
.preloader {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: var(--bg-color); z-index: 99999; display: flex;
flex-direction: column;
justify-content: flex-end; padding: 5vw;
}
.preloader-content { display: flex; justify-content: space-
between; align-items: flex-end; border-bottom: 1px solid var(--
border-color); padding-bottom: 20px;}
.preloader-title { font-size: 16px; font-weight: 500; color: var(--
text-secondary); text-transform: uppercase; letter-spacing:
2px;}
.preloader-counter { font-size: 8vw; font-weight: 700; line-
height: 0.8; font-family: 'JetBrains Mono', monospace; color:
var(--text-primary);}
.preloader-progress-bar { width: 100%; height: 2px;
background: rgba(255,255,255,0.1); margin-top: 2px; }
.preloader-progress { width: 0%; height: 100%; background:
var(--accent-color); box-shadow: 0 0 20px var(--accent-glow); }
/* NỀN NHIỄU & KHỐI CHẤT LỎNG 3D */
.noise-bg {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
pointer-events: none; z-index: 9999; opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg
viewBox='0 0 200 200'
xmlns='[Link]
id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise'
baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E
%3C/filter%3E%3Crect width='100%25' height='100%25'
filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.ambient-orbs { position: fixed; top: 0; left: 0; width: 100%;
height: 100%; z-index: 0; pointer-events: none; overflow:
hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(100px);
opacity: 0.4; animation: floatLiquid 20s infinite alternate ease-
in-out; }
.orb-1 { width: 45vw; height: 45vw; background: var(--orb-1);
top: -10%; left: -10%; }
.orb-2 { width: 40vw; height: 40vw; background: var(--orb-2);
bottom: -10%; right: -10%; animation-delay: -5s; animation-
duration: 25s; }
.orb-3 { width: 35vw; height: 35vw; background: var(--orb-3);
top: 40%; left: 40%; animation-delay: -10s; animation-duration:
18s; mix-blend-mode: screen; opacity: 0.2; }
@keyframes floatLiquid { 0% { transform: translate(0, 0)
scale(1) rotate(0deg); } 100% { transform: translate(15vw,
15vh) scale(1.3) rotate(45deg); } }
.scroll-progress { position: fixed; top: 0; left: 0; width: 0%;
height: 3px; background: linear-gradient(90deg, var(--accent-
color), var(--orb-3)); z-index: 10000; box-shadow: 0 0 15px
var(--accent-glow); transition: width 0.1s ease; }
#particles-js { position: fixed; top: 0; left: 0; width: 100%;
height: 100%; z-index: 1; pointer-events: none; }
.container, nav, .hero-section, footer, .marquee-section, .pdf-
modal { position: relative; z-index: 2; }
[Link], [Link] body { height: auto; }
.[Link]-smooth { scroll-behavior: auto !important; }
.container { max-width: 1200px; margin: 0 auto; padding: 0
24px; }
/*
======================================
===================
3. NAVBAR TỪ TÍNH
======================================
=================== */
nav {
position: fixed; top: 0; left: 0; width: 100%; height: 80px;
background: var(--nav-bg);
backdrop-filter: blur(24px) saturate(180%); -webkit-
backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid var(--border-color); z-index: 5000;
display: flex; align-items: center; justify-content: space-
between; padding: 0 5%;
transform: translateY(-100%); /* Ẩn đi chờ Preloader chạy
xong */
}
.logo { font-size: 24px; font-weight: 700; letter-spacing: -1px;
background: linear-gradient(90deg, #fff, var(--accent-color)); -
webkit-background-clip: text; color: transparent; }
:root[data-theme="light"] .logo { background: linear-
gradient(90deg, #000, var(--accent-color)); -webkit-
background-clip: text; }
.theme-btn {
background: rgba(255,255,255,0.05); border: 1px solid var(--
border-color); color: var(--text-primary);
width: 45px; height: 45px; border-radius: 50%; font-size:
18px; cursor: pointer; display: flex; justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
}
/*
======================================
===================
4. HERO SECTION
======================================
=================== */
.hero-section { height: 100vh; display: flex; justify-content:
center; align-items: center; overflow: hidden; perspective:
1000px; }
.hero-image {
width: 100%; height: 100%;
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)),
url('[Link]
a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')
center/cover no-repeat;
display: flex; flex-direction: column; justify-content: center;
align-items: center; text-align: center; padding: 0 20px;
}
.hero-title { font-size: 6vw; font-weight: 700; color: white;
letter-spacing: -2px; line-height: 1.1; margin-bottom: 24px; }
.hero-title span { background: linear-gradient(90deg, #fff, var(--
accent-color)); -webkit-background-clip: text; color: transparent;
}
.hero-subtitle { font-size: 1.4vw; color: rgba(255,255,255,0.8);
max-width: 800px; font-weight: 300; line-height: 1.6; }
.marquee-section { padding: 40px 0; border-top: 1px solid
var(--border-color); border-bottom: 1px solid var(--border-color);
background: var(--nav-bg); backdrop-filter: blur(10px); overflow:
hidden; display: flex; }
.marquee-content { display: flex; white-space: nowrap;
animation: scrollMarquee 25s linear infinite; }
.marquee-content span { font-size: 24px; font-weight: 500;
text-transform: uppercase; letter-spacing: 2px; margin: 0 40px;
color: var(--text-primary); display: flex; align-items: center; gap:
40px; }
.marquee-content span::after { content: '✦'; color: var(--accent-
color); font-size: 20px; }
@keyframes scrollMarquee { 0% { transform: translateX(0); }
100% { transform: translateX(-50%); } }
.text-reveal-section { padding: 180px 0; display: flex; justify-
content: center; align-items: center; }
.reveal-text {
font-size: 46px; font-weight: 600; line-height: 1.3; max-width:
1050px; text-align: center; letter-spacing: -1.5px;
background: linear-gradient(to right, var(--text-primary) 50%,
var(--text-secondary) 50%); background-size: 200% 100%;
background-position: 100% 0; -webkit-background-clip: text;
color: transparent;
}
/*
======================================
===================
5. TRANG GIỚI THIỆU
======================================
=================== */
.section-title { font-size: 46px; font-weight: 700; margin-
bottom: 60px; text-align: center; letter-spacing: -1.5px; }
.intro-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap:
60px; margin-bottom: 150px; align-items: center; }
.avatar-box { display: flex; flex-direction: column; align-items:
center; text-align: center; position: relative; }
.avatar-glow { width: 240px; height: 240px; border-radius: 50%;
object-fit: cover; border: 2px solid var(--border-color); box-
shadow: 0 20px 50px rgba(0,0,0,0.4); transition: transform 0.6s
cubic-bezier(0.34, 1.56, 0.64, 1); margin-bottom: 25px; }
.avatar-glow:hover { transform: scale(1.05) translateY(-10px);
border-color: var(--accent-color); }
.name-title { font-size: 28px; font-weight: 700; letter-spacing: -
0.5px; margin-bottom: 5px; color: var(--text-primary); }
.name-subtitle { color: var(--accent-color); font-weight: 500;
font-size: 16px; letter-spacing: 0.5px;}
.intro-card { background: var(--surface-color); border: 1px solid
var(--border-color); border-radius: 40px; padding: 50px;
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
transition: border-color 0.4s, box-shadow 0.4s; position:
relative; }
.intro-card:hover { border-color: var(--accent-color); box-
shadow: 0 20px 50px rgba(0,0,0,0.1); }
.intro-card h3 { font-size: 26px; margin-bottom: 25px; color:
var(--accent-color); font-weight: 600; }
.intro-card ul { list-style: none; margin-bottom: 25px; }
.intro-card ul li { margin-bottom: 18px; color: var(--text-
secondary); font-size: 17px; display: flex; gap: 12px; }
.intro-card ul li i { color: var(--accent-color); margin-top: 4px; }
.intro-card ul li strong { color: var(--text-primary); }
.intro-card p { color: var(--text-secondary); line-height: 1.8;
font-size: 16px; }
/*
======================================
===================
6. THANH TIMELINE
======================================
=================== */
.timeline-section { margin-bottom: 150px; }
.timeline { position: relative; max-width: 900px; margin: 0 auto;
padding: 40px 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top:
0; bottom: 0; width: 1px; background: linear-gradient(to
bottom, transparent, var(--border-color) 10%, var(--border-
color) 90%, transparent); transform: translateX(-50%); }
.timeline-item { position: relative; width: 50%; padding: 0 50px;
margin-bottom: 60px; }
.[Link] { left: 0; text-align: right; }
.[Link] { left: 50%; text-align: left; }
.timeline-dot { position: absolute; top: 25px; width: 14px;
height: 14px; border-radius: 50%; background: var(--bg-color);
border: 2px solid var(--accent-color); z-index: 5; box-shadow: 0
0 15px var(--accent-glow); transition: all 0.4s cubic-bezier(0.34,
1.56, 0.64, 1); }
.timeline-item:hover .timeline-dot { transform: scale(1.6);
background: var(--accent-color); box-shadow: 0 0 30px var(--
accent-glow); }
.[Link] .timeline-dot { right: -7px; }
.[Link] .timeline-dot { left: -7px; }
.timeline-content { background: var(--surface-color); border:
1px solid var(--border-color); padding: 35px; border-radius:
30px; backdrop-filter: blur(15px); transition: border-color 0.4s; }
.timeline-content:hover { border-color:
rgba(255,255,255,0.3); }
.timeline-content span { font-family: 'JetBrains Mono',
monospace; color: var(--accent-color); font-size: 13px; font-
weight: 600; text-transform: uppercase; }
.timeline-content h4 { font-size: 22px; margin: 12px 0 15px; }
.timeline-content p { color: var(--text-secondary); font-size:
16px; line-height: 1.6;}
/*
======================================
===================
7. BỘ LỌC & BENTO GRID VỚI PHẢN XẠ QUANG HỌC
======================================
=================== */
.filter-container { display: flex; justify-content: center; gap:
15px; margin-bottom: 40px; flex-wrap: wrap; }
.filter-btn {
background: var(--nav-bg); border: 1px solid var(--border-
color); color: var(--text-primary);
padding: 10px 24px; border-radius: 30px; font-size: 15px;
font-weight: 500; cursor: pointer;
backdrop-filter: blur(10px); transition: border-color 0.3s, color
0.3s;
}
.filter-btn:hover { border-color: var(--text-secondary); }
.[Link] { background: var(--accent-color); color: #fff;
border-color: var(--accent-color); box-shadow: 0 10px 20px
var(--accent-glow); }
.bento-grid { display: grid; grid-template-columns: repeat(4,
1fr); grid-auto-rows: 300px; gap: 24px; margin-bottom: 150px;
perspective: 1200px; }
.bento-item {
background: var(--surface-color); border: 1px solid var(--
border-color); border-radius: 32px; padding: 40px;
display: flex; flex-direction: column; justify-content: space-
between; position: relative; overflow: hidden;
backdrop-filter: blur(20px); transform-style: preserve-3d;
transition: border-color 0.4s, box-shadow 0.4s; cursor: pointer;
}
.[Link] { opacity: 0.15 !important; pointer-events:
none !important; filter: grayscale(100%) blur(2px) !important;
transition: all 0.4s ease; }
/* Spotlight Tương tác */
.bento-item::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
bottom: 0; z-index: 1; pointer-events: none; opacity: 0;
background: radial-gradient(800px circle at var(--mouse-x)
var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);
transition: opacity 0.5s;
}
/* Hiệu ứng Phản xạ Kính (Glass Glare) */
.bento-item::after {
content: ""; position: absolute; top: 0; left: 0; right: 0;
bottom: 0; z-index: 2; pointer-events: none; opacity: 0;
background: linear-gradient(105deg, transparent 20%,
rgba(255,255,255,0.1) 25%, transparent 30%);
background-size: 200% 200%; background-position: var(--
glare-pos) 0%; transition: opacity 0.3s;
}
:root[data-theme="light"] .bento-item::before { background:
radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
rgba(0,102,204,0.06), transparent 40%); }
:root[data-theme="light"] .bento-item::after { background:
linear-gradient(105deg, transparent 20%,
rgba(255,255,255,0.4) 25%, transparent 30%); }
.bento-item:hover::before, .bento-item:hover::after { opacity: 1;
}
.bento-item:hover { border-color: var(--accent-color); z-index:
10; box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.bento-item > * { transform: translateZ(50px); transition:
transform 0.4s; z-index: 3; position: relative; pointer-events:
auto; }
.item-large { grid-column: span 2; grid-row: span 2; }
.item-wide { grid-column: span 2; grid-row: span 1; }
.item-square { grid-column: span 1; grid-row: span 1; }
.badge { background: rgba(255,255,255,0.05); border: 1px
solid var(--border-color); color: var(--accent-color); padding: 8px
16px; border-radius: 30px; font-size: 12px; font-weight: 600;
font-family: 'JetBrains Mono', monospace; width: fit-content;
margin-bottom: 20px; display: inline-block; }
.bento-item h3 { font-size: 26px; margin-bottom: 12px; font-
weight: 600; letter-spacing: -0.5px; }
.project-desc { color: var(--text-primary); font-size: 15px; line-
height: 1.6; opacity: 0.85; }
.view-action { margin-top: 20px; font-size: 14px; font-weight:
600; color: var(--text-primary); display: flex; align-items: center;
gap: 8px; transition: color 0.3s; }
.bento-item:hover .view-action { color: var(--accent-color); }
.view-action i { transition: transform 0.3s; }
.bento-item:hover .view-action i { transform: translateX(5px)
translateY(-5px); }
/* BẢO VỆ HIỂN THỊ OBSERVER */
.reveal-on-scroll { opacity: 0; transform: translateY(80px)
scale(0.95); filter: blur(15px); }
.[Link]-visible { animation: physicsUp 1s cubic-
bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes physicsUp {
0% { opacity: 0; transform: translateY(80px) scale(0.95);
filter: blur(15px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter:
blur(0); }
}
/*
======================================
===================
8. GHIM TỔNG KẾT
======================================
=================== */
.sticky-wrapper { display: flex; align-items: flex-start; gap:
80px; padding: 120px 0; position: relative; }
.sticky-visual { width: 45%; height: 80vh; position: sticky; top:
10vh; border-radius: 40px; overflow: hidden; box-shadow: 0
40px 80px rgba(0,0,0,0.4); border: 1px solid var(--border-color);
}
.sticky-visual-inner { width: 100%; height: 130%; background:
url('[Link]
9bc0b252726f?q=80&w=2000&auto=format&fit=crop')
center/cover; position: absolute; top: -15%; left: 0; will-change:
transform; }
.sticky-content { width: 55%; padding: 40px 0; }
.sticky-text-block { height: 70vh; display: flex; flex-direction:
column; justify-content: center; opacity: 0.2; transition: opacity
0.5s ease, transform 0.5s ease; transform: translateX(30px); }
.[Link] { opacity: 1; transform: translateX(0); }
.sticky-text-block h3 { font-size: 34px; color: var(--text-
primary); margin-bottom: 20px; display: flex; align-items:
center; gap: 15px; letter-spacing: -1px; }
.sticky-text-block h3 i { color: var(--accent-color); }
.sticky-text-block p { font-size: 19px; color: var(--text-
secondary); line-height: 1.8; }
/*
======================================
===================
9. POPUP & BACK TO TOP
======================================
=================== */
.pdf-modal { position: fixed; top: 0; left: 0; width: 100vw;
height: 100vh; background: rgba(0, 0, 0, 0.8); backdrop-filter:
blur(25px); -webkit-backdrop-filter: blur(25px); z-index: 20000;
display: none; justify-content: center; align-items: center; }
.modal-container { width: 90%; max-width: 1100px; height:
88vh; background: var(--modal-bg); border-radius: 30px;
overflow: hidden; border: 1px solid var(--border-color); position:
relative; box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6); display:
flex; flex-direction: column; }
.modal-header { padding: 20px 30px; display: flex; justify-
content: space-between; align-items: center; border-bottom:
1px solid var(--border-color); background:
rgba(255,255,255,0.02); }
.modal-title { font-weight: 600; font-size: 18px; letter-spacing: -
0.5px; color: var(--text-primary); }
.modal-actions { display: flex; align-items: center; gap: 20px; }
.fallback-btn { background: var(--accent-color); color: #fff;
padding: 10px 24px; border-radius: 30px; font-size: 14px; font-
weight: 600; text-decoration: none; display: flex; align-items:
center; gap: 8px; transition: transform 0.3s, box-shadow 0.3s; }
.fallback-btn:hover { transform: scale(1.05); box-shadow: 0
10px 20px var(--accent-glow); }
.close-btn { background: transparent; border: none; color: var(--
text-secondary); font-size: 28px; cursor: pointer; transition:
color 0.3s, transform 0.4s; }
.close-btn:hover { color: #ff453a; transform: rotate(90deg)
scale(1.2); }
.pdf-iframe { width: 100%; flex-grow: 1; border: none;
background: #fff; }
.back-to-top { position: fixed; bottom: 40px; right: 40px; width:
55px; height: 55px; background: var(--surface-color); border:
1px solid var(--border-color); border-radius: 50%; display: flex;
justify-content: center; align-items: center; color: var(--text-
primary); font-size: 20px; cursor: pointer; z-index: 4000;
backdrop-filter: blur(10px); opacity: 0; pointer-events: none;
transition: transform 0.4s, opacity 0.4s; box-shadow: 0 10px
30px rgba(0,0,0,0.3); }
.[Link] { opacity: 1; pointer-events: auto; }
footer { text-align: center; padding: 100px 0 50px; color: var(--
text-secondary); font-size: 15px; border-top: 1px solid var(--
border-color); }
/* RESPONSIVE */
@media (max-width: 900px) {
.intro-grid, .sticky-wrapper { flex-direction: column; gap:
40px; }
.sticky-visual { width: 100%; position: relative; top: 0; height:
50vh; }
.sticky-content { width: 100%; }
.sticky-text-block { height: auto; margin-bottom: 60px;
opacity: 1; transform: none;}
.bento-grid { grid-template-columns: 1fr; grid-auto-rows:
auto; }
.item-large, .item-wide, .item-square { grid-column: span 1;
grid-row: auto; min-height: 280px; }
.hero-title { font-size: 40px; }
.hero-subtitle { font-size: 18px; }
.reveal-text { font-size: 28px; }
.timeline::before { left: 20px; }
.timeline-item { width: 100%; padding-left: 60px; padding-
right: 0; margin-bottom: 50px;}
.[Link], .[Link] { left: 0; text-align:
left; }
.[Link] .timeline-dot, .timeline-
[Link] .timeline-dot { left: 14px; right: auto; }
.back-to-top { bottom: 20px; right: 20px; width: 45px;
height: 45px; }
.fallback-btn span { display: none; }
.preloader-counter { font-size: 15vw; }
}
</style>
</head>
<body>
<div class="preloader">
<div class="preloader-content">
<div class="preloader-title">Thiết lập Không gian Kỹ thuật
số...</div>
<div class="preloader-counter">0%</div>
</div>
<div class="preloader-progress-bar">
<div class="preloader-progress"></div>
</div>
</div>
<div class="noise-bg"></div>
<div class="ambient-orbs">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="scroll-progress" id="scrollProgress"></div>
<div id="particles-js"></div>
<nav id="navbar">
<div class="logo">MyPortfolio.</div>
<button class="theme-btn magnetic" id="themeToggle"><i
class="fa-solid fa-moon"></i></button>
</nav>
<section class="hero-section">
<div class="hero-image">
<h1 class="hero-title">Nơi Lưu Trữ <span>Sáng
Tạo</span><br>& Tinh Hoa Kỹ Năng</h1>
<p class="hero-subtitle text-stagger">Trang web này ghi
lại toàn bộ hành trình trải nghiệm, những kiến thức số đã tích
lũy và các dự án thực tế tôi đã triển khai.</p>
</div>
</section>
<section class="marquee-section">
<div class="marquee-content">
<span>Sư phạm Vật lí</span> <span>Tích hợp Giáo dục
STEM</span> <span>Prompt Engineering (CLEAR)</span>
<span>Tư duy Hệ thống</span> <span>Quản trị Dự
án</span> <span>Sáng tạo Nội dung Số</span>
<span>Sư phạm Vật lí</span> <span>Tích hợp Giáo dục
STEM</span> <span>Prompt Engineering (CLEAR)</span>
<span>Tư duy Hệ thống</span> <span>Quản trị Dự
án</span> <span>Sáng tạo Nội dung Số</span>
</div>
</section>
<section class="container text-reveal-section">
<div class="reveal-text">
Hành trình số hóa kiến thức không đơn thuần là lưu trữ, đó
là lăng kính phản chiếu sự trưởng thành của bản thân. Từ
những thuật toán đơn giản đến thiết kế trải nghiệm người dùng
hoàn chỉnh.
</div>
</section>
<section class="container">
<h2 class="section-title">Trang Giới Thiệu</h2>
<div class="intro-grid">
<div class="avatar-box">
<img src="Ảnh đại diệ[Link]" alt="Trần Trọng Thế Anh"
class="avatar-glow">
<div class="name-title">Trần Trọng Thế Anh</div>
<div class="name-subtitle">Sinh viên Sư phạm Vật
Lí</div>
</div>
<div class="intro-card">
<h3>Thông Tin Cá Nhân & Mục Tiêu</h3>
<ul>
<li><i class="fa-solid fa-id-card"></i>
<span><strong>Mã sinh viên:</strong>
25010045</span></li>
<li><i class="fa-solid fa-school"></i>
<span><strong>Trường:</strong> Đại học Giáo dục -
ĐHQGHN</span></li>
<li><i class="fa-solid fa-graduation-cap"></i>
<span><strong>Lớp:</strong> Sư phạm Vật Lí</span></li>
<li><i class="fa-solid fa-lightbulb"></i>
<span><strong>Mục tiêu:</strong> Đổi mới phương pháp
luận giáo dục Vật lí bằng công nghệ số và phương pháp
STEM.</span></li>
</ul>
<p>
Tập hồ sơ năng lực này được thiết kế theo cấu trúc
phi tuyến tính, ứng dụng giao diện vật lý học để phản ánh tư
duy logic. Tại đây, mọi dự án từ nghiên cứu chuyên môn đến
truyền thông đa phương tiện đều được lưu trữ trực quan và bảo
mật cao.
</p>
</div>
</div>
</section>
<section class="container timeline-section">
<h2 class="section-title">Tiến Trình Học Tập</h2>
<div class="timeline">
<div class="timeline-item left">
<div class="timeline-dot"></div>
<div class="timeline-content">
<span>Giai đoạn 1</span>
<h4>Nhập Môn Hệ Thống & Dữ Liệu</h4>
<p>Nghiên cứu kiến trúc nền tảng, cơ chế hoạt động
của phần cứng và phương thức truy xuất, phân loại dữ liệu lớn
một cách tối ưu.</p>
</div>
</div>
<div class="timeline-item right">
<div class="timeline-content">
<div class="timeline-dot"></div>
<span>Giai đoạn 2</span>
<h4>Trí Tuệ Nhân Tạo & Làm Việc Nhóm</h4>
<p>Triển khai Prompt kỹ thuật cao với GenAI và sử
dụng các hệ thống quản trị dự án đám mây (Trello, Slack) để
điều phối chiến dịch dự án giáo dục.</p>
</div>
</div>
<div class="timeline-item left">
<div class="timeline-dot"></div>
<div class="timeline-content">
<span>Giai đoạn 3</span>
<h4>Sáng Tạo Nội Dung & Liêm Chính Số</h4>
<p>Thiết kế hệ thống học liệu đa phương tiện, đồng
thời tuân thủ bộ quy chuẩn toàn vẹn học thuật và trích dẫn
chuẩn quốc tế.</p>
</div>
</div>
</div>
</section>
<section class="container">
<h2 class="section-title">Kho Sản Phẩm (Bài Tập)</h2>
<div class="filter-container">
<button class="filter-btn magnetic active" data-
filter="all">Tất cả bài tập</button>
<button class="filter-btn magnetic" data-
filter="stem">Vật lí & Khai thác DL</button>
<button class="filter-btn magnetic" data-filter="ai">AI &
Kỹ năng số</button>
<button class="filter-btn magnetic" data-
filter="design">Sáng tạo & Đạo đức</button>
</div>
<div class="bento-grid" id="bentoGrid">
<div class="bento-item item-large" data-category="stem"
onclick="openPdfModal('Bài 1 - Phần cứng & Thiết bị', 'Bài
[Link]')" style="background: linear-gradient(145deg, rgba(41,
151, 255, 0.2), rgba(20, 20, 25, 0.9));">
<div>
<span class="badge">Bài tập 1 - Nền tảng</span>
<h3>Máy tính và các thiết bị ngoại vi</h3>
<p class="project-desc" style="margin-top:
10px;"><strong>Mục tiêu:</strong> Hiểu cấu trúc máy tính,
nhận biết rõ chức năng thiết bị phần cứng.</p>
<p class="project-desc" style="margin-top:
5px;"><strong>Quá trình:</strong> Nghiên cứu độc lập và sơ
đồ hóa hệ thống kết nối trong thời đại số.</p>
</div>
<div class="view-action magnetic">Xem bản xem trước
<i class="fa-solid fa-eye"></i></div>
</div>
<div class="bento-item item-wide" data-category="stem"
onclick="openPdfModal('Bài 2 - Khai thác dữ liệu', 'Bài [Link]')"
style="background: linear-gradient(145deg, rgba(191, 85, 255,
0.2), rgba(20, 20, 25, 0.9));">
<div>
<span class="badge">Bài tập 2 - Kỹ năng</span>
<h3>Khai thác dữ liệu thông tin</h3>
<p class="project-desc">Làm quen với cách tìm
kiếm, chọn lọc và đánh giá độ tin cậy của dữ liệu trên internet
bằng bộ lọc nâng cao.</p>
</div>
<div class="view-action magnetic">Xem bản xem trước
<i class="fa-solid fa-eye"></i></div>
</div>
<div class="bento-item item-square" data-category="ai"
onclick="openPdfModal('Bài 3 - Tổng quan AI', 'Bài [Link]')"
style="background: linear-gradient(145deg, rgba(0, 255, 170,
0.2), rgba(20, 20, 25, 0.9));">
<div>
<span class="badge">Bài tập 3 - AI</span>
<h3>Tổng quan về AI</h3>
<p class="project-desc">Nắm bắt khái niệm cốt lõi,
khám phá tiềm năng và ứng dụng thực tiễn.</p>
</div>
<div class="view-action magnetic">Xem nội dung <i
class="fa-solid fa-eye"></i></div>
</div>
<div class="bento-item item-square" data-category="ai"
onclick="openPdfModal('Bài 4 - Hợp tác số', 'Bài [Link]')"
style="background: linear-gradient(145deg, rgba(255, 180, 41,
0.2), rgba(20, 20, 25, 0.9));">
<div>
<span class="badge">Bài tập 4 - Kỹ năng</span>
<h3>Hợp tác số</h3>
<p class="project-desc">Kỹ năng làm việc nhóm từ
xa, vận hành trơn tru qua đám mây.</p>
</div>
<div class="view-action magnetic">Xem tài liệu <i
class="fa-solid fa-eye"></i></div>
</div>
<div class="bento-item item-wide" data-
category="design" onclick="openPdfModal('Bài 5 - Sáng tạo nội
dung', 'Bài [Link]')" style="background: linear-
gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('Bài [Link]')
center/cover;">
<div>
<span class="badge">Bài tập 5 - Sáng tạo</span>
<h3>Sáng tạo nội dung số</h3>
<p class="project-desc">Thực hành thiết kế và xây
dựng các ấn phẩm đồ họa đa phương tiện thu hút, tối ưu trải
nghiệm người xem.</p>
</div>
<div class="view-action magnetic">Xem thiết kế PDF
<i class="fa-solid fa-eye"></i></div>
</div>
<div class="bento-item item-wide" data-category="design
ai" onclick="openPdfModal('Bài 6 - Liêm chính học thuật', 'Bài
[Link]')" style="background: linear-gradient(rgba(0,0,0,0.4),
rgba(0,0,0,0.8)), url('Bài [Link]') center/cover;">
<div>
<span class="badge">Bài tập 6 - Đạo đức</span>
<h3>An toàn & Liêm chính học thuật</h3>
<p class="project-desc">Cam kết tôn trọng bản
quyền, chuẩn hóa trích dẫn khoa học và nâng cao nhận thức
bảo vệ quyền sở hữu trí tuệ.</p>
</div>
<div class="view-action magnetic">Xem cam kết PDF
<i class="fa-solid fa-eye"></i></div>
</div>
</div>
</section>
<section class="container">
<h2 class="section-title">Trang Tổng Kết</h2>
<div class="sticky-wrapper">
<div class="sticky-visual">
<div class="sticky-visual-inner"></div>
</div>
<div class="sticky-content">
<div class="sticky-text-block text-block-anim">
<h3><i class="fa-solid fa-satellite-dish"></i> Trải
nghiệm & Cảm nhận</h3>
<p>Quá trình xây dựng Portfolio này mang lại một
lăng kính mới để nhìn lại chặng đường học tập. Từ những ý
tưởng lý thuyết thô sơ đến các dự án có cấu trúc chặt chẽ, sự
tiến bộ này mang lại động lực to lớn.</p>
</div>
<div class="sticky-text-block text-block-anim">
<h3><i class="fa-solid fa-microchip"></i> Kiến thức
& Kỹ năng</h3>
<p>Tôi đã thuần thục việc điều phối công cụ số. Kỹ
năng thiết kế đồ họa, tổ chức dữ liệu phi cấu trúc và tư duy làm
việc nhóm trên nền tảng đám mây đã được định hình rõ
nét.</p>
</div>
<div class="sticky-text-block text-block-anim">
<h3><i class="fa-solid fa-atom"></i> Triết lý làm
việc</h3>
<p>Điều làm tôi tâm đắc nhất là sự giao thoa giữa tư
duy hệ thống của khoa học tự nhiên và tính linh hoạt của công
nghệ số. Nó tạo ra một phong cách làm việc chuyên nghiệp,
luôn hướng tới thực tiễn.</p>
</div>
</div>
</div>
</section>
<div class="pdf-modal" id="pdfModal">
<div class="modal-container">
<div class="modal-header">
<div class="modal-title" id="modalTitle">Tên dự
án</div>
<div class="modal-actions">
<a id="modalDownloadBtn" href="#"
target="_blank" class="fallback-btn magnetic">
<span>Mở / Tải Xuống</span> <i class="fa-solid
fa-arrow-up-right-from-square"></i>
</a>
<button class="close-btn"
onclick="closePdfModal()">×</button>
</div>
</div>
<iframe id="pdfFrame" class="pdf-iframe"
src=""></iframe>
</div>
</div>
<div class="back-to-top magnetic" id="backToTop"
onclick="[Link](0)"><i class="fa-solid
fa-arrow-up"></i></div>
<footer>
<p>© 2026 Portfolio of Trần Trọng Thế Anh - Sư phạm
Vật Lí. Thiết kế tối ưu cho trải nghiệm người dùng.</p>
</footer>
<script
src="[Link]
[Link]"></script>
<script
src="[Link]
[Link]"></script>
<script
src="[Link]
[Link]"></script>
<script
src="[Link]
[Link]"></script>
<script>
// 1. MÀN HÌNH NẠP ĐIỆN ẢNH (PRELOADER GIA TỐC)
let progress = { value: 0 };
[Link](progress, {
value: 100, duration: 2.5, ease: "[Link]",
onUpdate: () => {
[Link]('.preloader-counter').innerText =
[Link]([Link]) + '%';
[Link]('.preloader-progress').[Link]
= [Link] + '%';
},
onComplete: () => {
[Link](".preloader", { yPercent: -100, duration: 1.2, ease:
"[Link]", onComplete: () => {
[Link] = 'auto'; // Mở khóa cuộn
[Link](); // Trị dứt điểm lỗi lệch khung hình
khi tải xong
}});
// Gọi thanh Navbar rơi xuống
[Link]("#navbar", {y: 0, duration: 1, ease: "[Link]",
delay: 0.2});
// Gọi chữ Hero nảy lên
const heroTitle = [Link]('.hero-title');
const text = [Link];
// Bọc chữ để làm hiệu ứng
[Link](".hero-title", {y: 100, opacity: 0, duration: 1.5,
ease: "[Link]"});
[Link](".hero-subtitle", {y: 50, opacity: 0, duration:
1.5, delay: 0.2, ease: "[Link]"});
}
});
// 2. NÚT BẤM TỪ TÍNH (MAGNETIC ELEMENTS - VẬT LÝ HỌC)
[Link]('.magnetic').forEach(btn => {
[Link]('mousemove', e => {
const rect = [Link]();
const x = ([Link] - [Link] - [Link]/2) * 0.4; // Lực
hút theo trục X
const y = ([Link] - [Link] - [Link]/2) * 0.4; // Lực
hút theo trục Y
[Link](btn, { x: x, y: y, duration: 0.4, ease:
"[Link]" });
});
[Link]('mouseleave', () => {
[Link](btn, { x: 0, y: 0, duration: 0.8, ease: "[Link](1,
0.3)" }); // Lực đàn hồi trả về
});
});
// 3. HIỆU ỨNG TILT & PHẢN XẠ QUANG HỌC TRÊN THẺ BENTO
[Link]('.bento-item').forEach(item => {
[Link]('mousemove', e => {
if ([Link]('dimmed')) return;
const rect = [Link]();
const x = [Link] - [Link];
const y = [Link] - [Link];
[Link]('--mouse-x', `${x}px`);
[Link]('--mouse-y', `${y}px`);
// Tính toán độ dốc (Tilt)
const centerX = [Link] / 2; const centerY = [Link]
/ 2;
const rotateX = ((y - centerY) / centerY) * -10;
const rotateY = ((x - centerX) / centerX) * 10;
// Tính toán dải sáng phản quang (Glare)
const glarePos = (x / [Link]) * 100;
[Link]('--glare-pos', `${glarePos}%`);
[Link](item, { rotateX: rotateX, rotateY: rotateY, duration:
0.4, ease: "[Link]" });
});
[Link]('mouseleave', () => {
[Link](item, { rotateX: 0, rotateY: 0, duration: 0.8, ease:
"[Link](1, 0.5)" });
});
});
// 4. KIẾM SOÁT BỘ LỌC
const filterBtns = [Link]('.filter-btn');
const bentoItems = [Link]('.bento-item');
[Link](btn => {
[Link]('click', () => {
[Link](b => [Link]('active'));
[Link]('active');
const filterValue = [Link]('data-filter');
[Link](item => {
if (filterValue === 'all')
{ [Link]('dimmed'); }
else {
if ([Link]('data-
category').includes(filterValue))
{ [Link]('dimmed'); }
else { [Link]('dimmed'); }
}
});
});
});
// Cấu hình Cuộn mượt & Hạt
const lenis = new Lenis({ duration: 1.5, easing: (t) =>
[Link](1, 1.001 - [Link](2, -10 * t)), smooth: true });
[Link]('scroll', [Link]);
[Link]((time)=>{ [Link](time * 1000) });
[Link](0, 0);
[Link](ScrollTrigger);
particlesJS("particles-js", {
"particles": {
"number": { "value": 30, "density": { "enable": true,
"value_area": 1000 } },
"color": { "value": "#ffffff" }, "shape": { "type": "circle" },
"opacity": { "value": 0.2, "random": true }, "size":
{ "value": 2, "random": true },
"line_linked": { "enable": true, "distance": 180, "color":
"#ffffff", "opacity": 0.1, "width": 1 },
"move": { "enable": true, "speed": 1, "direction": "none",
"random": true, "out_mode": "out" }
}, "interactivity": { "events": { "onhover": { "enable": false }
} }, "retina_detect": true
});
// Nút Cuộn lên đầu trang
const backToTopBtn = [Link]('backToTop');
[Link]('scroll', () => {
const winScroll = [Link];
const height = [Link] -
[Link];
[Link]("scrollProgress").[Link] =
(winScroll / height) * 100 + "%";
if(winScroll > 500) { [Link]('show'); }
else { [Link]('show'); }
});
// Đổi Dark/Light Mode
const themeToggle =
[Link]('themeToggle');
const htmlElement = [Link];
[Link]('click', () => {
const isDark = [Link]('data-theme') ===
'dark';
[Link]('data-theme', isDark ? 'light' :
'dark');
[Link] = isDark ? '<i class="fa-solid fa-
sun"></i>' : '<i class="fa-solid fa-moon"></i>';
});
// 5. OBSERVER BẢO VỆ HIỂN THỊ
[Link](".bento-item, .timeline-item", { y: 50, opacity: 0, filter:
"blur(15px)", scale: 0.95 });
const observer = new IntersectionObserver((entries, obs) => {
[Link](entry => {
if ([Link]) {
[Link]([Link], { y: 0, opacity: 1, filter: "blur(0px)",
scale: 1, duration: 1, ease: "[Link]" });
[Link]([Link]);
}
});
}, { rootMargin: "0px 0px -50px 0px" });
[Link]('.bento-item, .timeline-
item').forEach(el => [Link](el));
// Các hiệu ứng ScrollTrigger
[Link](".hero-image", { scale: 0.8, borderRadius: "60px", filter:
"blur(12px)", opacity: 0.5, scrollTrigger: { trigger: ".hero-
section", start: "top top", end: "+=120%", scrub: 1, pin:
true } });
[Link](".reveal-text", { backgroundPosition: "0% 0", ease:
"none", scrollTrigger: { trigger: ".text-reveal-section", start: "top
80%", end: "bottom 50%", scrub: 1 } });
[Link](".sticky-visual-inner", { yPercent: 30, ease: "none",
scrollTrigger: { trigger: ".sticky-wrapper", start: "top bottom",
end: "bottom top", scrub: 1 } });
const textBlocks = [Link]('.text-block-
anim');
[Link](block => { [Link]({ trigger:
block, start: "top 60%", end: "bottom 40%", toggleClass:
"active" }); });
// ĐIỀU KHIỂN POPUP
const pdfModal = [Link]('pdfModal');
const pdfFrame = [Link]('pdfFrame');
const modalTitle = [Link]('modalTitle');
const modalDownloadBtn =
[Link]('modalDownloadBtn');
function openPdfModal(title, url) {
[Link] = title;
[Link] = url;
[Link] = url;
[Link] = 'flex';
[Link](".modal-container", { scale: 0.8, opacity: 0, y: 50
}, { scale: 1, opacity: 1, y: 0, duration: 0.6, ease: "[Link]" });
}
function closePdfModal() {
[Link](".modal-container", { scale: 0.9, opacity: 0, y: 30,
duration: 0.4, ease: "[Link]", onComplete: () => {
[Link] = 'none';
[Link] = "";
}});
}
[Link]('click', (e) => { if ([Link] ===
pdfModal) closePdfModal(); });
</script>
</body>
</html>
You might also like
- Assessing OHS Barriers On Ugandan Construction SitesNo ratings yetAssessing OHS Barriers On Ugandan Construction Sites31 pages
- Computer Engineering Portfolio ShowcaseNo ratings yetComputer Engineering Portfolio Showcase22 pages
- Volunteer Waiver and Release of LiabilityNo ratings yetVolunteer Waiver and Release of Liability3 pages
- Swing Trading: Strategies and Tax Insights92% (12)Swing Trading: Strategies and Tax Insights127 pages
- Understanding Question Stems in EducationNo ratings yetUnderstanding Question Stems in Education11 pages
- Overview of Junior Chamber InternationalNo ratings yetOverview of Junior Chamber International5 pages
- Plough Corporation Reports The Following Information Beginarraylrtext Net Cash Provided by Operating Activities 300000 Text Average CuNo ratings yetPlough Corporation Reports The Following Information Beginarraylrtext Net Cash Provided by Operating Activities 300000 Text Average Cu13 pages
- Insights on "A Wrong Man in Workers' Paradise"100% (7)Insights on "A Wrong Man in Workers' Paradise"6 pages
- 4MP Dual-lens PTZ Camera IPC94144SR-X25-F40CNo ratings yet4MP Dual-lens PTZ Camera IPC94144SR-X25-F40C6 pages
- Advanced Accounting Exam Paper OverviewNo ratings yetAdvanced Accounting Exam Paper Overview12 pages
- Certifying Document Copies and TranslationsNo ratings yetCertifying Document Copies and Translations6 pages