<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roy Zhao | Design Studio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="logo">Roy Zhao</h1>
<nav class="nav">
<a href="index.html" class="nav-link active" data-lang="en">Home</a>
<a href="about.html" class="nav-link" data-lang="en">About</a>
<a href="portfolio.html" class="nav-link" data-lang="en">Portfolio</a>
<a href="contact.html" class="nav-link" data-lang="en">Contact</a>
<button class="lang-toggle" onclick="toggleLang()">中文 / EN</button>
</nav>
</div>
</header>
<main class="main">
<section id="home" class="hero">
<div class="container">
<h2 class="hero-title" data-lang="en">Designing Spaces with Zen & Purpose</h2>
<p class="hero-desc" data-lang="en">Roy's Design Studio | Architecture & Interior Design</p>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>© 2026 Roy's Design Studio. All rights reserved.</p>
</div>
</footer>
<script>
const translations = {
en: {
home: "Home",
about: "About",
portfolio: "Portfolio",
contact: "Contact",
heroTitle: "Designing Spaces with Zen & Purpose",
heroDesc: "Roy's Design Studio | Architecture & Interior Design"
},
cn: {
home: "首页",
about: "关于",
portfolio: "作品",
contact: "联系",
heroTitle: "以禅意与初心设计空间",
heroDesc: "如意晓院设计工作室 | 建筑与室内设计"
}
};
let currentLang = "en";
function toggleLang() {
currentLang = currentLang === "en" ? "cn" : "en";
document.querySelectorAll("[data-lang]").forEach(el => {
const key = el.getAttribute("data-lang");
el.textContent = translations[currentLang][key];
});
}
</script>
</body>
</html>