diff --git a/css/style.css b/css/style.css
index 0522fa5..b31f91e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,240 +1,1224 @@
 @font-face {
-      font-family: 'Pacifico';
-      src: url('../pacifico/Pacifico.ttf') format('truetype');
-    }
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-    body {
-      display: block;
-      width: 210mm;
-      margin: 0 auto;
-      background-color: #ffffff;
-      color: #333;
-    }
-    li {
-      line-height: 1.5;
-      margin-bottom: 3px;
-      text-align: justify;
-    }
-    p {
-      line-height: 1.5;
-      text-align: justify;
-    }
-    .page {
-      width: 210mm;
-      height: 297mm;
-      padding: 45px 40px;
-    }
-    .page-left {
-      background-color: #ffffff;
-      border-bottom: 1px solid #eee;
-    }
-    .page-right {
-      background-color: #ffffff;
-    }
-    .left-section {
-      width: 65%;
-      float: left;
-      padding-right: 20px;
-    }
-    .left-section h2 {
-      margin-top: 14px;
-      margin-bottom: 8px;
-    }
-    .left-section h3 {
-      margin-top: 10px;
-      margin-bottom: 6px;
-    }
-    .left-section .section {
-      margin-bottom: 14px;
-    }
-    .left-section .basic-info {
-      margin-bottom: 14px;
-    }
-    .left-section .project-item {
-      margin-bottom: 10px;
-    }
-    .left-section .experience-item {
-      margin-bottom: 10px;
-    }
-    .left-section .education-item {
-      margin-bottom: 10px;
-    }
-    .right-section {
-      width: 35%;
-      float: right;
-      background-color: #f1f3f5;
-      padding: 35px 25px;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 15px;
-    }
-    h1 {
-      font-size: 32px;
-      margin-bottom: 10px;
-    }
-    h2 {
-      font-size: 18px;
-      margin-top: 18px;
-      margin-bottom: 10px;
-      color: #1f3a93;
-      padding-bottom: 6px;
-      border-bottom: 2px solid #1f3a93;
-    }
-    h3 {
-      font-size: 15px;
-      margin-top: 12px;
-      margin-bottom: 8px;
-      color: #333;
-    }
-    h4 {
-      font-size: 14px;
-      margin-top: 10px;
-      margin-bottom: 5px;
-      color: #444;
-    }
-    ul {
-      margin-left: 20px;
-      list-style-type: disc;
-    }
-    .section {
-      margin-bottom: 18px;
-    }
-    .contact-info {
-      margin-top: 18px;
-      text-align: center;
-    }
-    .contact-info h2 {
-      color: #000000;
-      border-bottom: none;
-      margin-top: 10px;
-      margin-bottom: 12px;
-    }
-    .contact-info p {
-      margin-bottom: 8px;
-      font-size: 14px;
-    }
-    .skills {
-      margin-top: 18px;
-      width: 100%;
-      text-align: center;
-    }
-    .right-section h3 {
-      font-size: 18px;
-      margin-bottom: 12px;
-      margin-top: 5px;
-      color: #000000;
-    }
-    .skill-tags {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 8px;
-    }
-    .skill-tags span {
-      background-color: #d0d8e0;
-      color: #1f3a93;
-      padding: 4px 10px;
-      border-radius: 12px;
-      font-size: 13px;
-    }
-    .skill-tags + h3 {
-      margin-top: 45px;
-    }
-    .qr {
-      text-align: center;
-      margin-top: 45px;
-    }
-    .qr img {
-      width: 110px;
-      height: 110px;
-      object-fit: contain;
-    }
-    .qr h5 {
-      font-size: 11px;
-      margin-top: 10px;
-      color: #666;
-      line-height: 1.5;
-    }
-    .avatar {
-      width: 145px;
-      height: 145px;
-      margin-bottom: 15px;
-      object-fit: cover;
-      border-radius: 10px;
-    }
-    .logo {
-      margin-top: 25px;
-      text-align: center;
-      font-family: 'Pacifico', cursive;
-      font-size: 26px;
-      color: #010101;
-    }
-    .basic-info {
-      margin-bottom: 18px;
-    }
-    .basic-info p {
-      font-size: 14px;
-      color: #666;
-      margin-bottom: 5px;
-    }
-    .tagline {
-      color: #1f3a93;
-      font-weight: 500;
-    }
-    .date {
-      color: #888;
-      font-size: 13px;
-      margin-bottom: 5px !important;
-    }
-    .project-item {
-      margin-bottom: 14px;
-    }
-    .project-item h4 {
-      color: #1f3a93;
-    }
-    .project-item p {
-      font-size: 13px;
-      color: #555;
-    }
-    .experience-item {
-      margin-bottom: 14px;
-    }
-    .experience-item h4 {
-      color: #333;
-    }
-    .education-item {
-      margin-bottom: 12px;
-    }
-    .education-item .school {
-      font-weight: bold;
-      color: #333;
-    }
-    .education-item .major {
-      color: #666;
-      font-size: 13px;
-    }
-    .education-item .time {
-      color: #888;
-      font-size: 12px;
-    }
-    .award-item {
-      margin-bottom: 9px;
-      font-size: 13px;
-    }
-    .language-item {
-      margin-bottom: 8px;
-      font-size: 13px;
-    }
-    .icon {
-      vertical-align: middle;
-    }
-    .page-right .right-section {
-      padding-top: 60px;
-    }
\ No newline at end of file
+  font-family: 'Pacifico';
+  src: url('../font/Pacifico.ttf') format('truetype');
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background-color: #ffffff;
+  color: #1d1d1f;
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.navbar.scrolled {
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.nav-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 70px;
+}
+
+.nav-logo {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1d1d1f;
+  letter-spacing: -1px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.nav-logo > span:first-child {
+  background: linear-gradient(135deg, #0071e3 0%, #5ac8fa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.nav-logo-separator {
+  color: #86868b;
+  font-size: 18px;
+}
+
+.nav-logo-dreamlife {
+  font-family: 'Pacifico', cursive;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: normal;
+  background: linear-gradient(135deg, #0071e3 0%, #5ac8fa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.nav-menu {
+  display: flex;
+  list-style: none;
+  gap: 30px;
+}
+
+.nav-menu li a {
+  text-decoration: none;
+  color: #6e6e73;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.nav-menu li a:hover {
+  color: #0071e3;
+}
+
+.nav-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.nav-toggle span {
+  width: 25px;
+  height: 2px;
+  background: #1d1d1f;
+  transition: all 0.3s ease;
+}
+
+.hero {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 100px 20px 50px;
+  background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -20%;
+  width: 800px;
+  height: 800px;
+  background: radial-gradient(circle, rgba(0, 113, 227, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+}
+
+.hero::after {
+  content: '';
+  position: absolute;
+  bottom: -30%;
+  left: -10%;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(90, 200, 250, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+}
+
+.hero-content {
+  max-width: 1000px;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 60px;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+
+.hero-text {
+  text-align: left;
+}
+
+.hero-subtitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0071e3;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+}
+
+.hero-text h1 {
+  font-size: 56px;
+  font-weight: 700;
+  color: #1d1d1f;
+  line-height: 1.1;
+  margin-bottom: 24px;
+}
+
+.hero-description {
+  font-size: 18px;
+  color: #6e6e73;
+  line-height: 1.8;
+  margin-bottom: 40px;
+}
+
+.hero-buttons {
+  display: flex;
+  gap: 16px;
+}
+
+.btn {
+  padding: 14px 32px;
+  border-radius: 25px;
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #0071e3 0%, #0077ed 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(0, 113, 227, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.4);
+}
+
+.btn-secondary {
+  background: rgba(0, 0, 0, 0.05);
+  color: #1d1d1f;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.btn-secondary:hover {
+  background: rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+.hero-image {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.hero-image img {
+  width: 350px;
+  height: 350px;
+  object-fit: cover;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  transition: transform 0.5s ease;
+}
+
+.hero-image:hover img {
+  transform: scale(1.05);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-header h2 {
+  font-size: 40px;
+  font-weight: 700;
+  color: #1d1d1f;
+  margin-bottom: 16px;
+}
+
+.section-header p {
+  font-size: 16px;
+  color: #6e6e73;
+}
+
+.about {
+  padding: 100px 20px;
+  background: #ffffff;
+}
+
+.about-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+}
+
+.about-card {
+  background: #f5f5f7;
+  border-radius: 20px;
+  padding: 40px 30px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.about-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+}
+
+.about-icon {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.about-card h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1d1d1f;
+  margin-bottom: 12px;
+}
+
+.about-card p {
+  font-size: 14px;
+  color: #6e6e73;
+  line-height: 1.7;
+}
+
+.education {
+  padding: 100px 20px;
+  background: #f5f5f7;
+}
+
+.education-card {
+  background: #ffffff;
+  border-radius: 24px;
+  padding: 50px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.education-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 30px;
+  padding-bottom: 30px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.education-logo {
+  width: 100px;
+  height: 100px;
+}
+
+.education-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.education-info h3 {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1d1d1f;
+  margin-bottom: 4px;
+}
+
+.education-info p {
+  font-size: 16px;
+  color: #6e6e73;
+}
+
+.education-time {
+  margin-left: auto;
+  font-size: 14px;
+  color: #0071e3;
+  font-weight: 600;
+  background: rgba(0, 113, 227, 0.1);
+  padding: 8px 16px;
+  border-radius: 20px;
+}
+
+.education-course h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1d1d1f;
+  margin-bottom: 16px;
+}
+
+.course-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.course-tags span {
+  padding: 8px 16px;
+  background: #f5f5f7;
+  border-radius: 20px;
+  font-size: 14px;
+  color: #6e6e73;
+  transition: all 0.3s ease;
+}
+
+.course-tags span:hover {
+  background: rgba(0, 113, 227, 0.1);
+  color: #0071e3;
+}
+
+.experience {
+  padding: 100px 20px;
+  background: #ffffff;
+}
+
+.experience-card {
+  background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
+  border-radius: 24px;
+  padding: 50px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.experience-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.experience-icon {
+  width: 120px;
+  height: 120px;
+}
+
+.experience-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.experience-info h3 {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1d1d1f;
+  margin-bottom: 4px;
+}
+
+.experience-info p {
+  font-size: 16px;
+  color: #0071e3;
+  font-weight: 500;
+}
+
+.experience-time {
+  margin-left: auto;
+  font-size: 14px;
+  color: #6e6e73;
+}
+
+.experience-list {
+  list-style: none;
+}
+
+.experience-list li {
+  padding: 12px 0;
+  padding-left: 30px;
+  position: relative;
+  font-size: 15px;
+  color: #6e6e73;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+.experience-list li:last-child {
+  border-bottom: none;
+}
+
+.experience-list li::before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  color: #0071e3;
+  font-weight: bold;
+}
+
+.campus {
+  padding: 100px 20px;
+  background: #f5f5f7;
+}
+
+.campus-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 30px;
+}
+
+.campus-card {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.campus-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+}
+
+.campus-icon {
+  font-size: 40px;
+  margin-bottom: 20px;
+}
+
+.campus-card h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1d1d1f;
+  margin-bottom: 8px;
+}
+
+.campus-time {
+  font-size: 13px;
+  color: #0071e3;
+  font-weight: 500;
+  margin-bottom: 20px;
+}
+
+.campus-card ul {
+  list-style: none;
+}
+
+.campus-card ul li {
+  padding: 8px 0;
+  padding-left: 24px;
+  position: relative;
+  font-size: 14px;
+  color: #6e6e73;
+}
+
+.campus-card ul li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  color: #34c759;
+  font-weight: bold;
+}
+
+.volunteer {
+  padding: 100px 20px;
+  background: #ffffff;
+}
+
+.volunteer-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+}
+
+.volunteer-card {
+  background: linear-gradient(135deg, #0071e3 0%, #0077ed 100%);
+  border-radius: 24px;
+  padding: 50px;
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.volunteer-card::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -20%;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+}
+
+.volunteer-badge {
+  width: 100px;
+  height: 100px;
+  margin-bottom: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.volunteer-badge img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.volunteer-card h3 {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  position: relative;
+  z-index: 1;
+}
+
+.volunteer-time {
+  font-size: 14px;
+  opacity: 0.8;
+  margin-bottom: 8px;
+  position: relative;
+  z-index: 1;
+}
+
+.volunteer-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 24px;
+  position: relative;
+  z-index: 1;
+}
+
+.volunteer-card ul {
+  list-style: none;
+  position: relative;
+  z-index: 1;
+}
+
+.volunteer-card ul li {
+  padding: 10px 0;
+  padding-left: 28px;
+  position: relative;
+  font-size: 15px;
+  opacity: 0.9;
+}
+
+.volunteer-card ul li::before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.volunteer-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+}
+
+.stat-item {
+  background: #f5f5f7;
+  border-radius: 16px;
+  padding: 35px 30px;
+  text-align: center;
+  transition: all 0.3s ease;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.stat-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+.stat-number {
+  display: block;
+  font-size: 48px;
+  font-weight: 700;
+  color: #0071e3;
+  margin-bottom: 8px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #6e6e73;
+}
+
+.skills {
+  padding: 100px 20px;
+  background: #f5f5f7;
+}
+
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 30px;
+}
+
+.skills-category {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 40px 35px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.skills-category:hover {
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  transform: translateY(-3px);
+}
+
+.skills-category h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1d1d1f;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.skill-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.skill-tags span {
+  padding: 8px 14px;
+  background: rgba(0, 113, 227, 0.08);
+  color: #0071e3;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.3s ease;
+}
+
+.skill-tags span:hover {
+  background: rgba(0, 113, 227, 0.15);
+  transform: translateY(-2px);
+}
+
+.skill-tags span img {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.projects {
+  padding: 100px 20px;
+  background: #ffffff;
+}
+
+.project-card {
+  background: #f5f5f7;
+  border-radius: 24px;
+  padding: 50px;
+  max-width: 900px;
+  margin: 0 auto;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.project-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.project-icon {
+  width: 60px;
+  height: 60px;
+}
+
+.project-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.project-info h3 {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1d1d1f;
+  margin-bottom: 4px;
+}
+
+.project-info p {
+  font-size: 16px;
+  color: #6e6e73;
+}
+
+.project-list {
+  list-style: none;
+  margin-bottom: 30px;
+}
+
+.project-list li {
+  padding: 12px 0;
+  padding-left: 30px;
+  position: relative;
+  font-size: 15px;
+  color: #6e6e73;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+.project-list li:last-child {
+  border-bottom: none;
+}
+
+.project-list li::before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  color: #0071e3;
+}
+
+.project-stats {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  padding-top: 20px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.project-stats span {
+  font-size: 14px;
+  color: #6e6e73;
+}
+
+.project-stats span:nth-child(2) {
+  color: #0071e3;
+  font-weight: 600;
+}
+
+.project-metrics {
+  display: flex;
+  gap: 20px;
+  margin-left: auto;
+}
+
+.project-metrics span {
+  padding: 6px 12px;
+  background: rgba(0, 113, 227, 0.1);
+  color: #0071e3;
+  border-radius: 12px;
+  font-size: 13px;
+}
+
+.awards {
+  padding: 100px 20px;
+  background: #f5f5f7;
+}
+
+.awards-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 24px;
+}
+
+.award-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: #ffffff;
+  padding: 20px 30px;
+  border-radius: 20px;
+  font-size: 16px;
+  color: #1d1d1f;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.award-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+.award-badge {
+  font-size: 24px;
+}
+
+.contact {
+  padding: 100px 20px;
+  background: #ffffff;
+}
+
+.contact-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 40px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.contact-card {
+  background: #f5f5f7;
+  border-radius: 20px;
+  padding: 40px;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.contact-item:last-child {
+  border-bottom: none;
+}
+
+.contact-item img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.contact-item div {
+  display: flex;
+  flex-direction: column;
+}
+
+.contact-label {
+  font-size: 12px;
+  color: #86868b;
+  margin-bottom: 2px;
+}
+
+.contact-value {
+  font-size: 16px;
+  color: #1d1d1f;
+  font-weight: 500;
+}
+
+.contact-qr {
+  text-align: center;
+  background: #f5f5f7;
+  border-radius: 20px;
+  padding: 40px;
+}
+
+.contact-qr img {
+  width: 180px;
+  height: 180px;
+  object-fit: contain;
+  margin-bottom: 16px;
+}
+
+.contact-qr p {
+  font-size: 14px;
+  color: #6e6e73;
+}
+
+.footer {
+  padding: 40px 20px;
+  background: #1d1d1f;
+  color: #f5f5f7;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-logo {
+  font-family: 'Pacifico', cursive;
+  font-size: 28px;
+}
+
+.footer-content p {
+  font-size: 14px;
+  color: #86868b;
+}
+
+@media (max-width: 768px) {
+  .nav-menu {
+    display: none;
+    position: absolute;
+    top: 70px;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    flex-direction: column;
+    padding: 20px;
+    gap: 15px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  }
+
+  .nav-menu.active {
+    display: flex;
+  }
+
+  .nav-toggle {
+    display: flex;
+  }
+
+  .nav-logo {
+    font-size: 20px;
+  }
+
+  .nav-logo-dreamlife {
+    font-size: 16px;
+  }
+
+  .nav-logo-separator {
+    font-size: 14px;
+  }
+
+  .hero {
+    min-height: auto;
+    padding: 100px 20px 60px;
+  }
+
+  .hero-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 30px;
+  }
+
+  .hero-text h1 {
+    font-size: 36px;
+  }
+
+  .hero-description {
+    font-size: 16px;
+  }
+
+  .hero-buttons {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .hero-image img {
+    width: 250px;
+    height: 250px;
+  }
+
+  .section-header h2 {
+    font-size: 28px;
+  }
+
+  .section-header p {
+    font-size: 14px;
+  }
+
+  .about {
+    padding: 60px 20px;
+  }
+
+  .about-card {
+    padding: 30px 20px;
+  }
+
+  .about-card h3 {
+    font-size: 18px;
+  }
+
+  .about-card p {
+    font-size: 13px;
+  }
+
+  .education {
+    padding: 60px 20px;
+  }
+
+  .education-card {
+    padding: 30px 20px;
+  }
+
+  .education-info h3 {
+    font-size: 20px;
+  }
+
+  .course-tags span {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+
+  .experience {
+    padding: 60px 20px;
+  }
+
+  .experience-card {
+    padding: 30px 20px;
+  }
+
+  .experience-info h3 {
+    font-size: 20px;
+  }
+
+  .campus {
+    padding: 60px 20px;
+  }
+
+  .campus-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .campus-card {
+    padding: 30px 20px;
+  }
+
+  .volunteer {
+    padding: 60px 20px;
+  }
+
+  .volunteer-content {
+    grid-template-columns: 1fr;
+  }
+
+  .volunteer-card {
+    padding: 35px 25px;
+  }
+
+  .volunteer-card h3 {
+    font-size: 22px;
+  }
+
+  .skills {
+    padding: 60px 20px;
+  }
+
+  .skills-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .skills-category {
+    padding: 25px;
+  }
+
+  .projects {
+    padding: 60px 20px;
+  }
+
+  .project-card {
+    padding: 30px 20px;
+  }
+
+  .project-info h3 {
+    font-size: 20px;
+  }
+
+  .awards {
+    padding: 60px 20px;
+  }
+
+  .award-item {
+    padding: 16px 20px;
+    font-size: 14px;
+  }
+
+  .contact {
+    padding: 60px 20px;
+  }
+
+  .contact-content {
+    grid-template-columns: 1fr;
+  }
+
+  .contact-card {
+    padding: 30px 20px;
+  }
+
+  .contact-qr {
+    padding: 30px;
+  }
+
+  .contact-qr img {
+    width: 150px;
+    height: 150px;
+  }
+
+  .footer {
+    padding: 30px 20px;
+  }
+
+  .footer-content {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+  }
+
+  .footer-logo {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-text h1 {
+    font-size: 28px;
+  }
+
+  .hero-description {
+    font-size: 15px;
+  }
+
+  .hero-image img {
+    width: 200px;
+    height: 200px;
+  }
+
+  .nav-logo {
+    font-size: 18px;
+  }
+
+  .nav-logo-dreamlife {
+    font-size: 14px;
+  }
+
+  .section-header h2 {
+    font-size: 24px;
+  }
+
+  .btn {
+    padding: 12px 24px;
+    font-size: 14px;
+  }
+
+  .education-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .education-time {
+    margin-left: 0;
+  }
+
+  .volunteer-badge {
+    width: 60px;
+    height: 60px;
+  }
+
+  .stat-number {
+    font-size: 36px;
+  }
+}
\ No newline at end of file
diff --git a/font/Pacifico.ttf b/font/Pacifico.ttf
new file mode 100644
index 0000000..122e451
Binary files /dev/null and b/font/Pacifico.ttf differ
diff --git a/icon/easytier.png b/icon/easytier.png
new file mode 100644
index 0000000..5bd1c08
Binary files /dev/null and b/icon/easytier.png differ
diff --git a/icon/sykean.png b/icon/sykean.png
new file mode 100644
index 0000000..2d68ed6
Binary files /dev/null and b/icon/sykean.png differ
diff --git a/icon/volunteer.png b/icon/volunteer.png
new file mode 100644
index 0000000..d1f1f18
Binary files /dev/null and b/icon/volunteer.png differ
diff --git a/icon/zust.png b/icon/zust.png
new file mode 100644
index 0000000..06170cc
Binary files /dev/null and b/icon/zust.png differ
diff --git a/index.html b/index.html
index 8c63c4b..e7fadbd 100644
--- a/index.html
+++ b/index.html
@@ -3,223 +3,399 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>郭嘉琪 - 简历</title>
+  <title>郭嘉琪 - 个人主页</title>
   <link rel="stylesheet" href="css/style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
-  <div class="page page-left">
-    <div class="left-section">
-      <div class="basic-info">
-        <h1>郭嘉琪</h1>
-        <p>浙江科技大学 · 自动化专业 · 本科生 · 女 · 23岁</p>
-        <p class="tagline">权益部长 · 亚运志愿者 · 共青团员</p>
+  <nav class="navbar">
+    <div class="nav-container">
+      <div class="nav-logo">
+        <span>GJQ</span>
+        <span class="nav-logo-separator">×</span>
+        <span class="nav-logo-dreamlife">DreamLife</span>
       </div>
+      <ul class="nav-menu">
+        <li><a href="#about">关于我</a></li>
+        <li><a href="#education">教育背景</a></li>
+        <li><a href="#experience">实习经历</a></li>
+        <li><a href="#campus">校园工作</a></li>
+        <li><a href="#volunteer">志愿经历</a></li>
+        <li><a href="#skills">专业技能</a></li>
+      </ul>
+      <button class="nav-toggle">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+    </div>
+  </nav>
 
-      <div class="section">
-        <h2>教育背景</h2>
-        <div class="education-item">
-          <p class="school">浙江科技大学</p>
-          <p class="major">自动化专业 · 工学学士</p>
-          <p class="time">2022.09 – 2026.06</p>
-          <p>主修课程：</p>
-          <ul>
-            <li>数字/模拟电子技术、信号与系统、自动控制原理、过程控制系统、电路与电子技术、人工智能与模式识别、单片机与嵌入式系统原理及应用、检测技术与自动化仪表等</li>
-          </ul>
+  <section class="hero">
+    <div class="hero-content">
+      <div class="hero-text">
+        <p class="hero-subtitle">权益部长 · 亚运志愿者 · 共青团员</p>
+        <h1>郭嘉琪</h1>
+        <p class="hero-description">浙江科技大学自动化专业本科生，具备丰富的团队管理、新媒体运营及公益项目经验。热爱志愿服务，积极投身社会实践，追求卓越与创新。</p>
+        <div class="hero-buttons">
+          <a href="#contact" class="btn btn-primary">联系我</a>
+          <a href="#skills" class="btn btn-secondary">查看技能</a>
         </div>
       </div>
+      <div class="hero-image">
+        <img src="photo/gjq.png" alt="郭嘉琪">
+      </div>
+    </div>
+    <div class="hero-decoration"></div>
+  </section>
 
-      <div class="section">
-        <h2>专业能力</h2>
-        <h3>控制系统 · PLC/工控</h3>
-        <ul>
-          <li>熟悉西门子 PLC，能够编写梯形图程序并进行仿真调试。</li>
-          <li>具备工业控制系统流程设计与控制逻辑实现的能力。</li>
+  <section class="about" id="about">
+    <div class="container">
+      <div class="section-header">
+        <h2>关于我</h2>
+        <p>了解更多关于我的故事</p>
+      </div>
+      <div class="about-content">
+        <div class="about-card">
+          <div class="about-icon">🎓</div>
+          <h3>专业方向</h3>
+          <p>自动化控制与智能系统方向，擅长PLC编程、控制系统设计及数据分析，具备跨学科的知识整合能力。</p>
+        </div>
+        <div class="about-card">
+          <div class="about-icon">💼</div>
+          <h3>工作理念</h3>
+          <p>做事认真积极、细心负责，对待任务有较强的执行力，注重团队协作与沟通协调。</p>
+        </div>
+        <div class="about-card">
+          <div class="about-icon">❤️</div>
+          <h3>志愿服务</h3>
+          <p>热爱志愿服务，累计服务时长120+小时，2022杭州亚(残)运会优秀志愿者。</p>
+        </div>
+        <div class="about-card">
+          <div class="about-icon">🚀</div>
+          <h3>追求目标</h3>
+          <p>不断学习，追求卓越，希望在工作中发挥专业特长，实现个人价值与社会价值的统一。</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="education" id="education">
+    <div class="container">
+      <div class="section-header">
+        <h2>教育背景</h2>
+        <p>学术经历与专业素养</p>
+      </div>
+      <div class="education-card">
+        <div class="education-header">
+          <div class="education-logo"><img src="icon/zust.png" alt="浙江科技大学"></div>
+          <div class="education-info">
+            <h3>浙江科技大学</h3>
+            <p>自动化专业 · 工学学士</p>
+          </div>
+          <div class="education-time">2022.09 – 2026.06</div>
+        </div>
+        <div class="education-course">
+          <h4>主修课程</h4>
+          <div class="course-tags">
+            <span>数字/模拟电子技术</span>
+            <span>信号与系统</span>
+            <span>自动控制原理</span>
+            <span>过程控制系统</span>
+            <span>电路与电子技术</span>
+            <span>人工智能与模式识别</span>
+            <span>单片机与嵌入式系统</span>
+            <span>检测技术与自动化仪表</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="experience" id="experience">
+    <div class="container">
+      <div class="section-header">
+        <h2>实习经历</h2>
+        <p>实践经验与职业成长</p>
+      </div>
+      <div class="experience-card">
+        <div class="experience-header">
+          <div class="experience-icon"><img src="icon/sykean.png" alt="苏州思源科安"></div>
+          <div class="experience-info">
+            <h3>苏州思源科安科技有限公司</h3>
+            <p>新媒体运营</p>
+          </div>
+          <div class="experience-time">2025.12 – 2026.03</div>
+        </div>
+        <ul class="experience-list">
+          <li>负责公司新媒体矩阵下一个抖音账号两个微信视频号的日常更新维护工作</li>
+          <li>配合口播视频素材拍摄及产品实地应用效果拍摄，完成后期剪辑成片</li>
+          <li>进行数据分析，优化内容策略，提升账号影响力</li>
         </ul>
       </div>
-
-      <div class="section">
-        <h2>实习经历</h2>
-        <div class="experience-item">
-          <h4>苏州思源科安科技有限公司</h4>
-          <p class="date">新媒体运营 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2025.12 – 2026.03</p>
-          <ul>
-            <li>后期制作、数据分析。</li>
-            <li>负责公司新媒体矩阵下一个抖音账号两个微信视频号的日常更新维护工作。</li>
-            <li>配合口播视频素材拍摄及产品实地应用效果拍摄，完成后期剪辑成片。</li>
-          </ul>
-        </div>
-      </div>
-
-      
     </div>
+  </section>
 
-    <div class="right-section">
-      <img src="photo/gjq.png" alt="头像" class="avatar">
-      <div class="contact-info">
-        <h2>联系方式</h2>
-        <p><img src="svg/email.svg" alt="邮箱" style="width:16px; vertical-align:middle; margin-right:8px;">3395501665@qq.com</p>
-        <p><img src="svg/phone.svg" alt="电话" style="width:16px; vertical-align:middle; margin-right:8px;">18089191618</p>
-        <p><img src="svg/wechat.svg" alt="微信" style="width:16px; vertical-align:middle; margin-right:8px;">G3395501665</p>
-      </div>
-
-      <div class="skills">
-        <h3>技能分类</h3>
-        <div class="skill-tags">
-          <span>剪辑</span>
-          <span>新媒体</span>
-          <span>运营</span>
-          <span>自动化</span>
-          <span>控制</span>
-        </div>
-
-        <h3>软件技能</h3>
-        <div class="skill-tags">
-          <span class="tag" style="display:inline-flex; align-items:center; gap:4px;">
-              <img src="icon/jianying.png" alt="剪映" class="icon"  style="width:18px; height:18px;"> 剪映
-          </span>
-          <span class="tag" style="display:inline-flex; align-items:center; gap:4px;">
-              <img src="icon/office.png" alt="Office" class="icon"  style="width:18px; height:18px;"> Office
-          </span>
-          <span class="tag" style="display:inline-flex; align-items:center; gap:4px;">
-              <img src="icon/adobe_audition.png" alt="Adobe Audition" class="icon"  style="width:18px; height:18px;"> Adobe Audition 
-          </span>
-          <span class="tag" style="display:inline-flex; align-items:center; gap:4px;">
-              <img src="icon/matlab.png" alt="MATLAB" class="icon"  style="width:18px; height:18px;"> MATLAB
-          </span>
-          <span class="tag" style="display:inline-flex; align-items:center; gap:4px;">
-              <img src="icon/python.png" alt="Python" class="icon"  style="width:18px; height:18px;"> Python
-          </span>
-        </div>
-        
-        <div class="qr">
-          <h3>个人网站</h3>
-          <img src="photo/m.png" alt="网站二维码">
-          <h5>个人网站主页、工具箱、博客、Gitea代码仓库均可通过扫码或访问上方网站查看</h5>
-        </div>
-        <div class="logo">DreamLife</div>
-      </div>
-    </div>
-  </div>
-
-  <div class="page page-right">
-    <div class="left-section">
-
-      <div class="section">
-        <h2>公益项目 · 共同参与</h2>
-        <div class="project-item">
-          <h3>EasyTier 公共服务节点（公益）</h3>
-          <ul>
-            <li>根据 EasyTier 开源项目所部署虚拟组网服务公共节点。</li>
-            <li>对外提供免费的多设备异地互联组网服务。</li>
-            <li>负责公益项目中的用户群管理及媒体运营。</li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="section">
+  <section class="campus" id="campus">
+    <div class="container">
+      <div class="section-header">
         <h2>校园工作</h2>
-        <div class="project-item">
-          <h3>自动化专业班级管理工作 · 2022年9月-2026年6月</h3>
+        <p>学生工作与领导能力</p>
+      </div>
+      <div class="campus-grid">
+        <div class="campus-card">
+          <div class="campus-icon">📚</div>
+          <h3>班级管理工作</h3>
+          <p class="campus-time">2022.09 - 2026.06</p>
           <ul>
-            <li>统筹班级日常管理，负责师生沟通协调、班会组织、活动策划及班级信息管理等工作。</li>
-            <li>高效落实考试通知、班级评优等事务，完成 40+ 项工作。</li>
-            <li>班级事务保持零失误、零延误，保障班级高效、有序运行。</li>
+            <li>统筹班级日常管理，负责师生沟通协调</li>
+            <li>组织班会、活动策划及班级信息管理</li>
+            <li>高效落实考试通知、班级评优等40+项工作</li>
+            <li>保持班级事务零失误、零延误</li>
           </ul>
         </div>
-        <div class="project-item">
-          <h3>学生会权益部 · 2022年9月-2025年6月</h3>
+        <div class="campus-card">
+          <div class="campus-icon">🏛️</div>
+          <h3>学生会权益部</h3>
+          <p class="campus-time">2022.09 - 2025.06</p>
           <ul>
-            <li>聚焦学生日常权益诉求，通过线下走访、线上问卷等方式收集意见，及时反馈并推动解决各方面问题。</li>
-            <li>沟通协调学校搭建安吉校区校内食堂外卖平台；推动食堂商户周均订单量提升约500+单。</li>
-            <li>协助约30名家庭经济困难学生对接校内兼职岗位</li>
+            <li>聚焦学生日常权益诉求，收集意见并推动解决</li>
+            <li>沟通协调搭建安吉校区校内食堂外卖平台</li>
+            <li>推动食堂商户周均订单量提升约500+单</li>
+            <li>协助约30名困难学生对接校内兼职岗位</li>
           </ul>
         </div>
-        <div class="project-item">
-          <h3>和山之声广播电台播音部 · 2022年9月-2023年6月</h3>
+        <div class="campus-card">
+          <div class="campus-icon">🎙️</div>
+          <h3>广播电台播音部</h3>
+          <p class="campus-time">2022.09 - 2023.06</p>
           <ul>
-            <li>负责按照排班表稳定输出节目，活动主持与音频制作，传递校园资讯，圆满完成各类校级活动播报。</li>
+            <li>负责按照排班表稳定输出节目</li>
+            <li>活动主持与音频制作</li>
+            <li>传递校园资讯，完成各类校级活动播报</li>
           </ul>
         </div>
       </div>
-
-      <div class="section">
-        <h2>志愿经历</h2>
-        <div class="experience-item">
-          <ul>
-            <li>热爱志愿服务，累计志愿服务时长 120+ 小时。</li>
-            <li>2022 杭州亚(残)运会“小青荷”志愿者。负责训练场赛事保障、人员引导及现场协调等工作。场馆内运动员引导、观众服务及赛事辅助工作；协助20+名运动员完成赛前入场、赛后离场引导，精准配合赛事工作人员保障环节衔接顺畅。</li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="section">
-        <h2>自我评价</h2>
-        <div class="experience-item">
-          <ul>
-            <li>工作态度：做事认真积极、细心负责，对待任务有较强的执行力，能高效推进工作落地。</li>
-            <li>综合能力：拥有丰富的沟通协调经验，能灵活与不同人群（同学、老师、客户、社区居民等）沟通。</li>
-            <li>学习能力：可快速适应新环境与新任务，面对挑战能保持积极心态，主动寻求突破。</li>
-            <li>团队协作：具备良好的团队合作精神与责任感，助力团队取得优异成果。</li>
-          </ul>
-        </div>
-      </div>
-
     </div>
-    <div class="right-section">
+  </section>
 
-      <div class="contact-info">
-        <h2>EasyTier 公益服务</h2>
-        <div class="skill-tags">
-          <h5>项目主页</h5>
-          <h5>easytier.dreamlife.indevs.in</h5>
-          <span class="tag" style="display:inline-flex; align-items:center; gap:4px;">
-              项目唯一访问者：600+
-          </span>
-          <span class="tag" style="display:inline-flex; align-items:center; gap:4px;">
-              请求总数：11k+
-          </span>
+  <section class="volunteer" id="volunteer">
+    <div class="container">
+      <div class="section-header">
+        <h2>志愿经历</h2>
+        <p>公益服务与社会责任</p>
+      </div>
+      <div class="volunteer-content">
+        <div class="volunteer-card">
+          <div class="volunteer-badge"><img src="icon/volunteer.png" alt="志愿者"></div>
+          <h3>杭州亚(残)运会志愿者</h3>
+          <p class="volunteer-time">2022年</p>
+          <p class="volunteer-title">小青荷</p>
+          <ul>
+            <li>负责训练场赛事保障、人员引导及现场协调</li>
+            <li>场馆内运动员引导、观众服务及赛事辅助工作</li>
+            <li>协助20+名运动员完成赛前入场、赛后离场引导</li>
+            <li>精准配合赛事工作人员保障环节衔接顺畅</li>
+          </ul>
+        </div>
+        <div class="volunteer-stats">
+          <div class="stat-item">
+            <span class="stat-number">120+</span>
+            <span class="stat-label">志愿服务时长(小时)</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-number">20+</span>
+            <span class="stat-label">服务运动员人数</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-number">1</span>
+            <span class="stat-label">大型赛事服务</span>
+          </div>
         </div>
       </div>
+    </div>
+  </section>
 
-      <div class="contact-info">
-        <h2>工作关键词</h2>
-        <div class="skill-tags">
-          <span>宣传播报</span>
-          <span>需求调研</span>
-          <span>资源对接</span>
-          <span>活动策划</span>
-          <span>信息管理</span>
+  <section class="skills" id="skills">
+    <div class="container">
+      <div class="section-header">
+        <h2>专业技能</h2>
+        <p>能力标签与技术专长</p>
+      </div>
+      <div class="skills-grid">
+        <div class="skills-category">
+          <h3>技能分类</h3>
+          <div class="skill-tags">
+            <span>剪辑</span>
+            <span>新媒体</span>
+            <span>运营</span>
+            <span>自动化</span>
+            <span>控制</span>
+          </div>
+        </div>
+        <div class="skills-category">
+          <h3>软件技能</h3>
+          <div class="skill-tags">
+            <span><img src="icon/jianying.png" alt="剪映"> 剪映</span>
+            <span><img src="icon/office.png" alt="Office"> Office</span>
+            <span><img src="icon/adobe_audition.png" alt="Adobe Audition"> Adobe Audition</span>
+            <span><img src="icon/matlab.png" alt="MATLAB"> MATLAB</span>
+            <span><img src="icon/python.png" alt="Python"> Python</span>
+          </div>
+        </div>
+        <div class="skills-category">
+          <h3>项目能力</h3>
+          <div class="skill-tags">
+            <span>用户管理</span>
+            <span>公益运营</span>
+            <span>社群运营</span>
+            <span>用户服务</span>
+            <span>新媒体运营</span>
+          </div>
+        </div>
+        <div class="skills-category">
+          <h3>能力标签</h3>
+          <div class="skill-tags">
+            <span>执行力</span>
+            <span>沟通协调</span>
+            <span>学习能力</span>
+            <span>环境适应</span>
+            <span>团队协作</span>
+            <span>责任意识</span>
+          </div>
         </div>
       </div>
+    </div>
+  </section>
 
-      <div class="skills">
-        <h3>项目能力</h3>
-        <div class="skill-tags">
-          <span>用户管理</span>
-          <span>公益运营</span>
-          <span>社群运营</span>
-          <span>用户服务</span>
-          <span>新媒体运营</span>
+  <section class="projects">
+    <div class="container">
+      <div class="section-header">
+        <h2>公益项目</h2>
+        <p>共同参与，共创价值</p>
+      </div>
+      <div class="project-card">
+        <div class="project-header">
+          <div class="project-icon"><img src="icon/easytier.png" alt="EasyTier"></div>
+          <div class="project-info">
+            <h3>EasyTier 公共服务节点</h3>
+            <p>开源公益项目</p>
+          </div>
         </div>
+        <ul class="project-list">
+          <li>根据EasyTier开源项目部署虚拟组网服务公共节点</li>
+          <li>对外提供免费的多设备异地互联组网服务</li>
+          <li>负责公益项目中的用户群管理及媒体运营</li>
+        </ul>
+        <div class="project-stats">
+          <span>项目主页</span>
+          <span>easytier.dreamlife.indevs.in</span>
+          <div class="project-metrics">
+            <span>访问者：600+</span>
+            <span>请求总数：11k+</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-        <h3>荣誉标签</h3>
-        <div class="skill-tags">
+  <section class="awards">
+    <div class="container">
+      <div class="section-header">
+        <h2>荣誉奖项</h2>
+        <p>认可与成就</p>
+      </div>
+      <div class="awards-list">
+        <div class="award-item">
+          <div class="award-badge">🏆</div>
           <span>亚(残)运会优秀志愿者</span>
+        </div>
+        <div class="award-item">
+          <div class="award-badge">🌟</div>
           <span>社会实践先进个人</span>
+        </div>
+        <div class="award-item">
+          <div class="award-badge">⭐</div>
           <span>社会实践十佳团队</span>
         </div>
+      </div>
+    </div>
+  </section>
 
-        <h3>能力标签</h3>
-        <div class="skill-tags">
-          <span>执行力</span>
-          <span>沟通协调</span>
-          <span>学习能力</span>
-          <span>环境适应</span>
-          <span>团队协作</span>
-          <span>责任意识</span>
+  <section class="contact" id="contact">
+    <div class="container">
+      <div class="section-header">
+        <h2>联系方式</h2>
+        <p>期待与您交流</p>
+      </div>
+      <div class="contact-content">
+        <div class="contact-card">
+          <div class="contact-item">
+            <img src="svg/email.svg" alt="邮箱">
+            <div>
+              <span class="contact-label">邮箱</span>
+              <span class="contact-value">3395501665@qq.com</span>
+            </div>
+          </div>
+          <div class="contact-item">
+            <img src="svg/phone.svg" alt="电话">
+            <div>
+              <span class="contact-label">电话</span>
+              <span class="contact-value">18089191618</span>
+            </div>
+          </div>
+          <div class="contact-item">
+            <img src="svg/wechat.svg" alt="微信">
+            <div>
+              <span class="contact-label">微信</span>
+              <span class="contact-value">G3395501665</span>
+            </div>
+          </div>
+        </div>
+        <div class="contact-qr">
+          <img src="photo/m.png" alt="网站二维码">
+          <p>扫码访问个人网站</p>
         </div>
       </div>
     </div>
-  </div>
+  </section>
+
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-logo">DreamLife</div>
+        <p>© 2026 郭嘉琪. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <script>
+    const navToggle = document.querySelector('.nav-toggle');
+    const navMenu = document.querySelector('.nav-menu');
+
+    navToggle.addEventListener('click', () => {
+      navMenu.classList.toggle('active');
+    });
+
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth' });
+          navMenu.classList.remove('active');
+        }
+      });
+    });
+
+    window.addEventListener('scroll', () => {
+      const navbar = document.querySelector('.navbar');
+      if (window.scrollY > 50) {
+        navbar.classList.add('scrolled');
+      } else {
+        navbar.classList.remove('scrolled');
+      }
+    });
+  </script>
 </body>
 </html>
\ No newline at end of file