diff --git a/index.html b/index.html
index 39e7caa..4da3ff7 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
@@ -10,6 +10,9 @@
     <meta property="og:title" content="cioyu的个人博客">
     <meta property="og:url" content="https://blog.cioyu.top">
     <meta name="google-site-verification" content="OD-68_AKhno62TuEyh22k943KVtJfpNniOKbpHeyVj4" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 5e30c1f..cfdb7c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,37 +1,821 @@
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+
+const currentYear = ref(new Date().getFullYear())
+
+function scrollToMain() {
+  const el = document.querySelector('.main')
+  if (el) el.scrollIntoView({ behavior: 'smooth' })
+}
+
+const linuxJourney = [
+  { distro: 'Ubuntu', desc: '安装的第一个发行版', icon: '🐧' },
+  { distro: 'openEuler', desc: '学校 Linux 课装的（虚拟机）', icon: '🖥️' },
+  { distro: 'Arch Linux', desc: '看 Shorin 的 niri 感觉很炫酷，跟着搭建了', icon: '🚀' },
+  { distro: 'Fedora', desc: 'Arch 分区分小了，于是重装了', icon: '🔄' },
+  { distro: 'CachyOS', desc: '打算装 KDE 版 Fedora 结果黑屏，换到了 Cachy', icon: '⚡' },
+]
+
+const contacts = [
+  { name: 'GitHub', url: 'https://github.com/cioyu', icon: '💻' },
+  { name: 'Bilibili', url: 'https://space.bilibili.com/1928417915s', icon: '📺' },
+  { name: 'YouTube', url: 'https://www.youtube.com/channel/UC_WmZj9i7MZV899g1iunwdA', icon: '🎬' },
+  { name: 'Email', url: 'mailto:cioyu32@gmail.com', icon: '✉️', sub: 'cioyu32@gmail.com' },
+]
+</script>
 
 <template>
-  <div id="cheader">
-    <h1>Cioyu的个人博客</h1>
+  <div class="page-wrapper">
+    <!-- ===== Hero ===== -->
+    <header class="hero">
+      <div class="hero-bg"></div>
+
+      <!-- Floating sparkles -->
+      <div class="sparkle-container">
+        <span v-for="n in 12" :key="n" class="sparkle" :style="{ '--s': n }">✦</span>
+      </div>
+
+      <div class="hero-foreground">
+        <!-- Decorative circles -->
+        <div class="deco-circle c1"></div>
+        <div class="deco-circle c2"></div>
+        <div class="deco-circle c3"></div>
+
+        <div class="hero-content">
+          <div class="avatar-ring">
+            <div class="avatar">C</div>
+          </div>
+          <h1 class="hero-title">Cioyu 的<br>个人博客</h1>
+          <p class="hero-subtitle">✦ 网络专业学生 ✦</p>
+          <div class="hero-cta">
+            <span class="scroll-hint" @click="scrollToMain">↓ 往下看看</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Wave divider -->
+      <div class="wave-divider">
+        <svg viewBox="0 0 1440 80" preserveAspectRatio="none">
+          <path d="M0,40 C360,80 720,0 1080,40 C1260,60 1350,50 1440,40 L1440,80 L0,80 Z" fill="var(--bg)"/>
+        </svg>
+      </div>
+    </header>
+
+    <!-- ===== Main ===== -->
+    <main class="main">
+      <div class="container">
+        <!-- About -->
+        <section class="card about-card">
+          <div class="card-accent"></div>
+          <h2 class="section-title">
+            <span class="title-icon">🌸</span> 关于我
+          </h2>
+          <p class="about-text">
+            网络专业的学生，喜欢看小说，偶尔看下番，玩玩游戏。
+            目前正在 Web 前端领域探索，同时也在折腾 Linux 的道路上越走越远。
+          </p>
+          <div class="about-tags">
+            <span class="about-tag">🎮 游戏</span>
+            <span class="about-tag">📖 小说</span>
+            <span class="about-tag">🐧 Linux</span>
+            <span class="about-tag">💻 前端</span>
+          </div>
+        </section>
+
+        <!-- Linux Journey -->
+        <section class="card journey-card">
+          <div class="card-accent accent-pink"></div>
+          <h2 class="section-title">
+            <span class="title-icon">🐧</span> 折腾 GNU/Linux 的历程
+          </h2>
+          <div class="timeline">
+            <div
+              v-for="(item, index) in linuxJourney"
+              :key="item.distro"
+              class="timeline-item"
+              :style="{ '--i': index }"
+            >
+              <div class="timeline-dot">{{ item.icon }}</div>
+              <div class="timeline-body">
+                <h3 class="timeline-title">{{ item.distro }}</h3>
+                <p class="timeline-desc">{{ item.desc }}</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Learning -->
+        <section class="card learning-card">
+          <div class="card-accent accent-purple"></div>
+          <h2 class="section-title">
+            <span class="title-icon">📚</span> 学习方向
+          </h2>
+          <div class="learning-grid">
+            <div class="learning-item current">
+              <span class="learning-label">NOW</span>
+              <div class="learning-tags">
+                <span class="tag">HTML</span>
+                <span class="tag">CSS</span>
+                <span class="tag">JavaScript</span>
+                <span class="tag">Vue</span>
+              </div>
+              <p class="learning-desc">Web 前端开发</p>
+            </div>
+            <div class="learning-item future">
+              <span class="learning-label label-orange">NEXT</span>
+              <div class="learning-tags">
+                <span class="tag">C</span>
+                <span class="tag">Rust</span>
+                <span class="tag">PHP</span>
+              </div>
+              <p class="learning-desc">深入系统编程与后端</p>
+            </div>
+          </div>
+        </section>
+
+        <!-- Contact -->
+        <section class="card contact-card">
+          <div class="card-accent accent-blue"></div>
+          <h2 class="section-title">
+            <span class="title-icon">💫</span> 联系方式
+          </h2>
+          <div class="contact-grid">
+            <a
+              v-for="c in contacts"
+              :key="c.name"
+              :href="c.url"
+              class="contact-item"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span class="contact-icon">{{ c.icon }}</span>
+              <span class="contact-name">{{ c.name }}</span>
+              <span v-if="c.sub" class="contact-sub">{{ c.sub }}</span>
+            </a>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <!-- ===== Footer ===== -->
+    <footer class="footer">
+      <div class="container">
+        <div class="footer-stars">✦ ✦ ✦</div>
+        <p>&copy; {{ currentYear }} Cioyu </p>
+      </div>
+    </footer>
   </div>
-  <p>简介: 网络专业的学生, 喜欢看小说, 偶尔看下番, 玩玩游戏</p>
-  <p>折腾GNU/linux的历程:</p>
-  <div class="text0">
-    <p>Ubuntu : 安装的第一个发行版</p>
-    <p>openEuler : 学校上linux课安装的(虚拟机)</p>
-    <p>archlinux : 看up主Shorin的niri感觉很炫酷, 跟着搭建了</p>
-    <p>fedora : 当时archlinux分区分小了, 于是重装了</p>
-    <p>cachy : gnome桌面我不喜欢, 打算搞安装kde版本的fedora,结果系统启动黑屏,于是换到了cachy</p>
-  </div>
-  <br>
-  <p>目前正在学习web前端(html,css,javascript,vue)</p>
-  <p>未来计划深入学习c,rust,php</p>
-  <br>
-  <p>联系方式:</p>
-  <ul>
-    <li><a href="https://github.com/cioyu">github</a></li>
-    <li><a href="https://space.bilibili.com/1928417915s">bilibili</a></li>
-    <li><a href="https://www.youtube.com/channel/UC_WmZj9i7MZV899g1iunwdA">youtube</a></li>
-    <li><a href="mailto:cioyu32@gmail.com">email(cioyu32@gmail.com)</a></li>
-  </ul>
 </template>
 
+<style>
+/* ===== Global Reset ===== */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --pink: #f472b6;
+  --pink-light: #f9a8d4;
+  --pink-lighter: #fce7f3;
+  --purple: #a78bfa;
+  --purple-light: #c4b5fd;
+  --blue: #60a5fa;
+  --blue-light: #93c5fd;
+  --orange: #fb923c;
+  --bg: #faf5ff;
+  --card-bg: #ffffffcc;
+  --text: #1e1b4b;
+  --text-secondary: #6b21a8;
+  --text-muted: #a78bfa;
+  --radius: 20px;
+  --shadow: 0 4px 16px rgba(168,85,247,.12);
+  --shadow-lg: 0 8px 30px rgba(168,85,247,.18);
+  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', sans-serif;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.8;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+::selection {
+  background: var(--pink-light);
+  color: #fff;
+}
+</style>
+
 <style scoped>
-#cheader {
+/* ============================
+   Layout
+   ============================ */
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* ============================
+   Hero
+   ============================ */
+.hero {
+  position: relative;
+  min-height: 70vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg,
+    #2e1065 0%,
+    #6b21a8 20%,
+    #a21caf 40%,
+    #db2777 60%,
+    #e11d48 80%,
+    #be123c 100%
+  );
+  z-index: 0;
+}
+
+.hero-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 70% 50% at 30% 30%, rgba(216,180,254,.25) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 40% at 70% 70%, rgba(249,168,212,.2) 0%, transparent 50%),
+    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(147,197,253,.15) 0%, transparent 50%);
+}
+
+.hero-foreground {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ===== Decorative Circles ===== */
+.deco-circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: .15;
+  animation: floatCircle 8s ease-in-out infinite;
+}
+
+.c1 {
+  width: 300px;
+  height: 300px;
+  background: var(--pink-light);
+  top: -10%;
+  left: -5%;
+  animation-delay: 0s;
+}
+
+.c2 {
+  width: 200px;
+  height: 200px;
+  background: var(--blue-light);
+  bottom: 10%;
+  right: -3%;
+  animation-delay: -3s;
+}
+
+.c3 {
+  width: 150px;
+  height: 150px;
+  background: var(--purple-light);
+  top: 40%;
+  right: 15%;
+  animation-delay: -5s;
+}
+
+@keyframes floatCircle {
+  0%, 100% { transform: translate(0,0) scale(1); }
+  33%      { transform: translate(20px,-20px) scale(1.05); }
+  66%      { transform: translate(-10px,15px) scale(.95); }
+}
+
+/* ===== Sparkles ===== */
+.sparkle-container {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.sparkle {
+  position: absolute;
+  color: rgba(255,255,255,.6);
+  font-size: calc(10px + var(--s) * 2px);
+  animation: sparkleFloat 6s ease-in-out infinite;
+  animation-delay: calc(var(--s) * -.5s);
+  opacity: 0;
+}
+
+.sparkle:nth-child(1)  { top: 8%;  left: 10%; }
+.sparkle:nth-child(2)  { top: 15%; left: 30%; font-size: 14px; }
+.sparkle:nth-child(3)  { top: 5%;  left: 55%; }
+.sparkle:nth-child(4)  { top: 20%; left: 80%; font-size: 12px; }
+.sparkle:nth-child(5)  { top: 35%; left: 5%; }
+.sparkle:nth-child(6)  { top: 45%; left: 90%; font-size: 16px; }
+.sparkle:nth-child(7)  { top: 55%; left: 20%; font-size: 11px; }
+.sparkle:nth-child(8)  { top: 65%; left: 70%; }
+.sparkle:nth-child(9)  { top: 75%; left: 40%; font-size: 13px; }
+.sparkle:nth-child(10) { top: 30%; left: 50%; font-size: 9px; }
+.sparkle:nth-child(11) { top: 50%; left: 45%; }
+.sparkle:nth-child(12) { top: 70%; left: 85%; font-size: 15px; }
+
+@keyframes sparkleFloat {
+  0%, 100% {
+    opacity: 0;
+    transform: translateY(0) scale(.5);
+  }
+  25% {
+    opacity: .8;
+    transform: translateY(-20px) scale(1);
+  }
+  50% {
+    opacity: .3;
+    transform: translateY(-40px) scale(.7);
+  }
+  75% {
+    opacity: .6;
+    transform: translateY(-10px) scale(1.1);
+  }
+}
+
+/* ===== Hero Content ===== */
+.hero-content {
   text-align: center;
-  background-color: antiquewhite;
+  color: #fff;
+  padding: 60px 20px;
+  animation: heroFadeIn 1s ease-out;
 }
-.text0 {
-  margin-left: 5%;
+
+@keyframes heroFadeIn {
+  from { opacity: 0; transform: translateY(30px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
-</style>
\ No newline at end of file
+
+/* Avatar */
+.avatar-ring {
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 24px;
+  border-radius: 50%;
+  padding: 4px;
+  background: conic-gradient(var(--pink-light), var(--purple-light), var(--blue-light), var(--pink-light));
+  animation: spinRing 6s linear infinite;
+}
+
+@keyframes spinRing {
+  to { transform: rotate(360deg); }
+}
+
+.avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6b21a8, #db2777);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  font-weight: 800;
+  color: #fff;
+  transition: transform .3s;
+}
+
+.avatar:hover {
+  transform: scale(1.06);
+}
+
+/* Title */
+.hero-title {
+  font-size: clamp(2rem, 6vw, 3.5rem);
+  font-weight: 800;
+  letter-spacing: -.03em;
+  line-height: 1.2;
+  margin-bottom: 12px;
+  text-shadow: 0 2px 20px rgba(0,0,0,.2);
+}
+
+/* Subtitle */
+.hero-subtitle {
+  font-size: 1.05rem;
+  opacity: .85;
+  font-weight: 400;
+  letter-spacing: .02em;
+}
+
+/* CTA */
+.hero-cta {
+  margin-top: 48px;
+}
+
+.scroll-hint {
+  display: inline-block;
+  padding: 8px 24px;
+  border-radius: 40px;
+  background: rgba(255,255,255,.12);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,.2);
+  font-size: .88rem;
+  color: rgba(255,255,255,.8);
+  animation: hintBounce 2.5s infinite;
+  cursor: pointer;
+  transition: background .3s;
+}
+
+.scroll-hint:hover {
+  background: rgba(255,255,255,.2);
+}
+
+@keyframes hintBounce {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(6px); }
+}
+
+/* ===== Wave Divider ===== */
+.wave-divider {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  line-height: 0;
+  z-index: 2;
+}
+
+.wave-divider svg {
+  display: block;
+  width: 100%;
+  height: 60px;
+}
+
+/* ============================
+   Main
+   ============================ */
+.main {
+  flex: 1;
+  padding: 20px 0 60px;
+  position: relative;
+  z-index: 1;
+}
+
+/* ============================
+   Card
+   ============================ */
+.card {
+  position: relative;
+  background: var(--card-bg);
+  backdrop-filter: blur(12px);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 32px;
+  margin-bottom: 28px;
+  border: 1px solid rgba(168,85,247,.08);
+  overflow: hidden;
+  transition: box-shadow .3s, transform .3s;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-3px);
+}
+
+.card-accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(90deg, var(--pink), var(--purple));
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+
+.accent-pink {
+  background: linear-gradient(90deg, var(--pink), var(--pink-light));
+}
+
+.accent-purple {
+  background: linear-gradient(90deg, var(--purple), var(--purple-light));
+}
+
+.accent-blue {
+  background: linear-gradient(90deg, var(--blue), var(--blue-light));
+}
+
+.section-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title-icon {
+  font-size: 1.3rem;
+}
+
+/* ============================
+   About
+   ============================ */
+.about-text {
+  color: var(--text-secondary);
+  font-size: 1rem;
+  line-height: 1.9;
+  opacity: .9;
+}
+
+.about-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.about-tag {
+  display: inline-block;
+  font-size: .82rem;
+  padding: 4px 14px;
+  border-radius: 20px;
+  background: linear-gradient(135deg, var(--pink-lighter), #f3e8ff);
+  color: var(--text-secondary);
+  font-weight: 500;
+  border: 1px solid rgba(168,85,247,.1);
+}
+
+/* ============================
+   Timeline
+   ============================ */
+.timeline {
+  position: relative;
+  padding-left: 40px;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 15px;
+  top: 8px;
+  bottom: 8px;
+  width: 2px;
+  background: linear-gradient(to bottom, var(--pink), var(--purple), var(--blue));
+  border-radius: 2px;
+}
+
+.timeline-item {
+  position: relative;
+  padding-bottom: 24px;
+  animation: slideUp .5s ease-out both;
+  animation-delay: calc(var(--i) * .1s);
+}
+
+.timeline-item:last-child { padding-bottom: 0; }
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.timeline-dot {
+  position: absolute;
+  left: -40px;
+  top: 2px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid var(--purple-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  z-index: 1;
+  box-shadow: 0 0 0 4px rgba(168,85,247,.08);
+}
+
+.timeline-body {
+  background: linear-gradient(135deg, #faf5ff, #fdf2f8);
+  border-radius: 14px;
+  padding: 14px 20px;
+  border: 1px solid rgba(168,85,247,.06);
+}
+
+.timeline-title {
+  font-size: 1rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--pink), var(--purple));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 4px;
+}
+
+.timeline-desc {
+  font-size: .9rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  opacity: .85;
+}
+
+/* ============================
+   Learning
+   ============================ */
+.learning-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.learning-item {
+  border-radius: 14px;
+  padding: 22px;
+  border: 1px solid rgba(168,85,247,.08);
+}
+
+.learning-item.current {
+  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
+}
+
+.learning-item.future {
+  background: linear-gradient(135deg, #fff7ed, #ffedd5);
+}
+
+.learning-label {
+  display: inline-block;
+  font-size: .7rem;
+  font-weight: 700;
+  letter-spacing: .06em;
+  padding: 3px 12px;
+  border-radius: 20px;
+  background: linear-gradient(135deg, var(--pink), var(--purple));
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.label-orange {
+  background: linear-gradient(135deg, var(--orange), #fbbf24);
+}
+
+.learning-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.tag {
+  display: inline-block;
+  font-size: .82rem;
+  font-weight: 500;
+  padding: 3px 10px;
+  border-radius: 8px;
+  background: rgba(255,255,255,.75);
+  color: var(--text);
+  backdrop-filter: blur(4px);
+}
+
+.learning-desc {
+  font-size: .85rem;
+  color: var(--text-secondary);
+  opacity: .8;
+}
+
+/* ============================
+   Contact
+   ============================ */
+.contact-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+}
+
+.contact-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 22px 12px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #faf5ff, #fdf2f8);
+  border: 1px solid rgba(168,85,247,.06);
+  transition: background .3s, transform .3s, box-shadow .3s;
+}
+
+.contact-item:hover {
+  background: linear-gradient(135deg, #f3e8ff, #fce7f3);
+  transform: translateY(-5px);
+  box-shadow: var(--shadow-lg);
+}
+
+.contact-icon {
+  font-size: 1.8rem;
+}
+
+.contact-name {
+  font-weight: 600;
+  font-size: .95rem;
+  color: var(--text);
+}
+
+.contact-sub {
+  font-size: .75rem;
+  color: var(--text-muted);
+  word-break: break-all;
+  text-align: center;
+}
+
+/* ============================
+   Footer
+   ============================ */
+.footer {
+  text-align: center;
+  padding: 32px 0;
+  color: var(--text-muted);
+  font-size: .85rem;
+}
+
+.footer-stars {
+  font-size: .9rem;
+  letter-spacing: 6px;
+  margin-bottom: 8px;
+  opacity: .5;
+}
+
+/* ============================
+   Responsive
+   ============================ */
+@media (max-width: 640px) {
+  .card {
+    padding: 24px 18px;
+  }
+
+  .learning-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .contact-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .timeline {
+    padding-left: 36px;
+  }
+
+  .timeline-dot {
+    left: -36px;
+    width: 28px;
+    height: 28px;
+    font-size: 13px;
+  }
+
+  .hero {
+    min-height: 60vh;
+  }
+
+  .wave-divider svg {
+    height: 30px;
+  }
+
+  .avatar-ring {
+    width: 80px;
+    height: 80px;
+  }
+
+  .avatar {
+    font-size: 28px;
+  }
+}
+</style>
