<template>
  <div class="about-page-container">
    <div class="about-content-wrapper">
      <!-- 页面头部 -->
      <div class="about-page-header">
        <h3 class="about-page-title">关于</h3>
      </div>

      <!-- 关于内容 -->
      <div class="about-main-content">
        <div class="about-personal-intro">
          <h4>清风--清疯--清疯不颠</h4>
          <h5>
            <!-- “徐徐清风知我意，悠悠湖水荡人心。” -->
            名字从“清风”起步，但总觉得少了点年轻人的疯狂，于是干脆改叫“清疯”。疯久了，又怕真“颠”了，便在后面补上“不颠”二字，作为提醒。“清疯不颠”就此定下——风与疯，只在一念之间；疯与不颠，则是我给自己的清醒界限。
            <!-- &nbsp; &nbsp; 让我回忆回忆...大一的时候（还是上学的日子好哈哈哈哈哈！！）跟室友一块玩游戏，因为我的Steam名字叫“清风”，慢慢的这个名儿就这么成了我的外号。说来也怪，被他们这么一叫，心里那点初入大学的陌生和拘谨，
            好像真被一阵风吹散了似的，
            哈哈哈哈哈，我还蛮喜欢这个外号的。
            <br></br>
            &nbsp; &nbsp; 有段时间，不知道怎么了，精神状态不是很好，好想发疯，突然这疯就像钉子一样扎在我脑海里（哈哈哈哈！）。于是就干脆改名叫“清疯”了——清风，清疯，念起来几乎没差，
            但内核却从一种理想的淡然，切换成了真实的、带点毛边的鲜活。“悠悠清风荡我心”，只是如今这阵清风熬成了清疯，终于在我心里刮起一场疯——疯啦！
            <br></br>
              &nbsp; &nbsp; 又过些日子，玩新游戏要起名，正盯着输入框里的“清疯”发呆， 两个字在脑海里冒出来……疯癫？哎，好像是疯了，但也没完全颠嘛！那种在理智边界试探、却绝不越线的微妙感，一下对味了——干脆就叫“清疯不颠”！
            名字一出自己先乐了。
            <br></br>
            哈哈哈哈哈哈！俗话说天才在左疯子在右，在我这儿，大概是左脑负责疯，右脑负责颠，两个家伙吵吵闹闹，反而让我在这个世界里自得其乐。 -->
          </h5>
        </div>

        <div class="about-personal-intro">
          <h4>疯言疯语</h4>
          <h5>
            &nbsp; &nbsp; 我想设计一下独属于清疯的页面，可是我并不清楚该如何去写这个页面。就干脆当一个我发疯的地方吧（哈哈哈哈哈 所以你有看到彩色的小鹿吗？）
          </h5>
        </div>

        <div class="about-skill-section">
          <h4>前端技术栈</h4>
          <div class="skills-display-list">
            &nbsp; &nbsp;
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" class="skill-tag-link"><el-tag
                type="primary">HTML5</el-tag></a>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS" target="_blank" class="skill-tag-link"><el-tag
                type="primary">CSS3</el-tag></a>
            <a href="https://tailwindcss.com/" target="_blank" class="skill-tag-link"><el-tag type="primary">Tailwind
                CSS</el-tag></a>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript" target="_blank"
              class="skill-tag-link"><el-tag type="primary">JavaScript (ES6+)</el-tag></a>
            <a href="https://www.typescriptlang.org/" target="_blank" class="skill-tag-link"><el-tag
                type="primary">TypeScript</el-tag></a>
            <a href="https://vuejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Vue.js
                3</el-tag></a>
            <a href="https://pinia.vuejs.org/" target="_blank" class="skill-tag-link"><el-tag
                type="primary">Pinia</el-tag></a>
            <a href="https://react.dev/" target="_blank" class="skill-tag-link"><el-tag type="primary">React
                18</el-tag></a>
            <a href="https://nodejs.org/" target="_blank" class="skill-tag-link"><el-tag
                type="primary">Node.js</el-tag></a>
            <a href="https://vite.dev/" target="_blank" class="skill-tag-link"><el-tag type="primary">Vite</el-tag></a>
            <a href="https://webpack.js.org/" target="_blank" class="skill-tag-link"><el-tag
                type="primary">Webpack</el-tag></a>
            <a href="https://element-plus.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Element
                Plus</el-tag></a>
            <a href="https://git-scm.com/" target="_blank" class="skill-tag-link"><el-tag
                type="primary">Git</el-tag></a>
          </div>
        </div>

        <div class="about-skill-section">
          <h4>后端技术栈</h4>
          <div class="skills-display-list">
            &nbsp; &nbsp;
            <a href="https://spring.io/projects/spring-boot" target="_blank" class="skill-tag-link"><el-tag
                type="success">Spring Boot 3.x</el-tag></a>
            <a href="https://spring.io/projects/spring-security" target="_blank" class="skill-tag-link"><el-tag
                type="success">Spring Security</el-tag></a>
            <a href="https://spring.io/projects/spring-data-jpa" target="_blank" class="skill-tag-link"><el-tag
                type="success">Spring Data JPA</el-tag></a>
            <a href="https://mybatis.org/mybatis-3/" target="_blank" class="skill-tag-link"><el-tag
                type="success">MyBatis-Plus</el-tag></a>
            <a href="https://www.mysql.com/" target="_blank" class="skill-tag-link"><el-tag type="success">MySQL
                8</el-tag></a>
            <a href="https://www.postgresql.org/" target="_blank" class="skill-tag-link"><el-tag
                type="success">PostgreSQL</el-tag></a>
            <a href="https://redis.io/" target="_blank" class="skill-tag-link"><el-tag type="success">Redis</el-tag></a>
            <a href="https://projectlombok.org/" target="_blank" class="skill-tag-link"><el-tag
                type="success">Lombok</el-tag></a>
            <a href="https://mapstruct.org/" target="_blank" class="skill-tag-link"><el-tag
                type="success">MapStruct</el-tag></a>
            <a href="https://maven.apache.org/" target="_blank" class="skill-tag-link"><el-tag
                type="success">Maven</el-tag></a>
            <a href="https://gradle.org/" target="_blank" class="skill-tag-link"><el-tag
                type="success">Gradle</el-tag></a>
            <a href="https://www.oracle.com/java/technologies/java17.html" target="_blank"
              class="skill-tag-link"><el-tag type="success">Java 8</el-tag></a>
          </div>
        </div>

        <div class="about-contact-section">
          <h4>联系方式</h4>
          <p>如果你有任何问题或建议，欢迎随时联系我！（我文笔真的很烂QAQ）</p>
          <div class="contact-options">
            <el-button type="primary" plain @click="goToMessageBoard">留言板</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

/**
 * 跳转到留言板页面
 * 当用户点击留言板按钮时触发
 */
const goToMessageBoard = () => {
  router.push('/message')
}
</script>

<style scoped>
/* 主容器样式 */
.about-page-container {
}

/* 内容包装器样式 */
.about-content-wrapper {
  max-width: 900px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

/* 内容包装器悬浮效果 */
.about-content-wrapper:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 页面头部样式 */
.about-page-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 2px solid #ecf0f1;
}

/* 页面标题样式 */
.about-page-title {
  font-size: 2.2rem;
  color: #2c3e50;
  margin-bottom: 12px;
  font-weight: 600;
}

/* 页面副标题样式 */
.about-page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
}

/* 主要内容区域样式 */
.about-main-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #34495e;
}

/* 个人介绍样式 */
.about-personal-intro {
  margin-bottom: 32px;
  text-align: left;
}

.about-personal-intro h5 {
  color: #34495e;
  margin-bottom: 16px;
}

/* 技能部分样式 */
.about-skill-section {
  margin-bottom: 32px;
}

.about-skill-section h4 {
  text-align: left;
}

/* 技能列表样式 */
.skills-display-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 技能标签链接样式 */
.skill-tag-link {
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-block;
}

/* 技能标签链接悬浮效果 */
.skill-tag-link:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.skill-tag-link:hover .el-tag {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 兴趣爱好部分样式 */
.about-hobbies-section {
  margin-bottom: 32px;
}

.about-hobbies-section h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin-bottom: 16px;
  font-weight: 600;
}

/* 兴趣爱好列表样式 */
.hobbies-list {
  list-style: none;
  padding: 0;
}

.hobbies-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.hobbies-list li:hover {
  color: #3498db;
}

.hobbies-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: #3498db;
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.hobbies-list li:hover::before {
  transform: scale(1.2);
}

/* 联系方式部分样式 */
.about-contact-section {
  margin-bottom: 20px;
}

.about-contact-section h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin-bottom: 16px;
  font-weight: 600;
}

/* 联系方式选项样式 */
.contact-options {
  gap: 10px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-page-container {
    padding: 20px 0;
  }
  .about-page-header{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .about-content-wrapper {
    width: 100%;
    padding: 20px;
    margin: 0 5%;
  }

  .about-page-title {
    font-size: 1.2rem;
  }

  .about-page-subtitle {
    font-size: 1rem;
  }

  .about-main-content {
    font-size: 1rem;
  }

  .about-page-header {
    margin-bottom: 32px;
  }

  .contact-options {
    flex-direction: column;
  }
  .skills-display-list {
    gap: 8px;
  }
}
</style>