!doctype html
html lang=vi
head
meta charset=utf-8
meta name=viewport content=width=device-width, initial-scale=1
titleMy Portfoliotitle
style
body{margin0;font-familysystem-ui,Segoe UI,Roboto,Arial;background#0b1220;color#e5e7eb}
header{positionsticky;top0;backgroundrgba(11,18,32,.72);backdrop-filterblur(10px);border-bottom1px solid rgba(229,231,235,.12)}
.wrap{max-width1100px;margin0 auto;padding12px 16px;displayflex;justify-contentspace-between;gap12px;align-itemscenter}
nav{displayflex;gap8px;flex-wrapwrap}
a{color#e5e7eb;text-decorationnone;padding8px 10px;border-radius10px}
a.active{backgroundrgba(255,255,255,.08)}
iframe{width100%;heightcalc(100vh - 58px);border0;displayblock}
style
head
body
header
div class=wrap
div style=font-weight800My Portfoliodiv
nav id=nav
a href=home data-page=homeHomea
a href=about data-page=aboutAbouta
a href=resume data-page=resumeResumea
a href=projects data-page=projectsProjectsa
a href=contact data-page=contactContacta
nav
div
header
iframe id=appiframe
script
const EXEC_URL = PASTE_YOUR_APPS_SCRIPT_EXEC_URL; - dán ...exec vào đây
const iframe = document.getElementById(app);
const nav = document.getElementById(nav);
function currentPage() {
const p = (location.pathname home).replace(^+, );
return p home;
}
function setActive(page) {
nav.querySelectorAll(a[data-page]).forEach(a =
a.classList.toggle(active, a.getAttribute(data-page) === page)
);
}
function load(page) {
setActive(page);
iframe.src = `${EXEC_URL}page=${encodeURIComponent(page)}&embed=1`;
}
nav.querySelectorAll(a[data-page]).forEach(a = {
a.addEventListener(click, (e) = {
e.preventDefault();
const page = a.getAttribute(data-page);
history.pushState({}, , `${page}`);
load(page);
});
});
window.addEventListener(popstate, () = load(currentPage()));
load(currentPage());
script
body
html