|
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | | - <title>关于我们 - 我的网站</title> |
| 6 | + <title>关于柯迓Keya</title> |
| 7 | + <!-- Favicon --> |
| 8 | + <link rel="icon" href="/public/img/favicon.ico" type="image/x-icon"> |
7 | 9 | <link rel="stylesheet" href="/src/assets/styles/base.css"> |
8 | 10 | <link rel="stylesheet" href="/src/assets/styles/layout.css"> |
9 | 11 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
| 12 | + <style> |
| 13 | + .profile-header { |
| 14 | + text-align: center; |
| 15 | + padding: 40px 0; |
| 16 | + background-color: #f8f9fa; |
| 17 | + } |
| 18 | + .profile-avatar { |
| 19 | + width: 200px; |
| 20 | + height: 200px; |
| 21 | + border-radius: 50%; |
| 22 | + object-fit: cover; |
| 23 | + border: 5px solid white; |
| 24 | + box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
| 25 | + margin-bottom: 20px; |
| 26 | + } |
| 27 | + .profile-name { |
| 28 | + font-size: 2.5rem; |
| 29 | + margin: 10px 0; |
| 30 | + color: #333; |
| 31 | + } |
| 32 | + .profile-title { |
| 33 | + font-size: 1.2rem; |
| 34 | + color: #666; |
| 35 | + margin-bottom: 20px; |
| 36 | + } |
| 37 | + .about-section { |
| 38 | + max-width: 800px; |
| 39 | + margin: 0 auto; |
| 40 | + padding: 40px 20px; |
| 41 | + } |
| 42 | + .section-title { |
| 43 | + font-size: 1.8rem; |
| 44 | + margin-bottom: 20px; |
| 45 | + color: #333; |
| 46 | + border-bottom: 2px solid #eee; |
| 47 | + padding-bottom: 10px; |
| 48 | + } |
| 49 | + .skills-list { |
| 50 | + display: flex; |
| 51 | + flex-wrap: wrap; |
| 52 | + gap: 10px; |
| 53 | + margin: 20px 0; |
| 54 | + } |
| 55 | + .skill-item { |
| 56 | + background-color: #1ec09729; |
| 57 | + padding: 8px 15px; |
| 58 | + border-radius: 20px; |
| 59 | + font-size: 0.9rem; |
| 60 | + } |
| 61 | + |
| 62 | + #english-quote { |
| 63 | + text-align: center; |
| 64 | + font-style: italic; |
| 65 | + margin: 20px 0; |
| 66 | + font-size: 1.5rem; |
| 67 | + color: #1e54f6; |
| 68 | + word-wrap: break-word; |
| 69 | + word-break: break-word; |
| 70 | + white-space: normal; |
| 71 | + max-width: 1000%; |
| 72 | + } |
| 73 | + </style> |
10 | 74 | </head> |
11 | 75 | <body> |
12 | 76 | <div id="header"></div> |
13 | 77 |
|
14 | 78 | <main class="container"> |
| 79 | + <div class="profile-header"> |
| 80 | + <img src="/public/img/头像.png" alt="柯迓Keya" class="profile-avatar"> |
| 81 | + <h1 class="profile-name">柯迓Keya</h1> |
| 82 | + <p class="profile-title">一个平凡的普通人 (‾◡◝)</p> |
| 83 | + </div> |
| 84 | + |
15 | 85 | <section class="about-section"> |
16 | | - <h1>关于我们</h1> |
17 | | - <p>欢迎了解我们的故事和使命</p> |
| 86 | + <h2 class="section-title">关于我</h2> |
| 87 | + <p>喜欢看番，游戏，要和我一起吗？（。＾▽＾）</p> |
18 | 88 |
|
19 | | - <article class="about-content"> |
20 | | - <h2>我们的故事</h2> |
21 | | - <p>成立于2023年，我们致力于提供高质量的网站开发服务。从一个小型工作室开始，我们已经成长为拥有10名专业开发人员的团队。</p> |
22 | | - |
23 | | - <h2>我们的使命</h2> |
24 | | - <p>通过创新的技术和卓越的设计，帮助客户在数字世界中脱颖而出。</p> |
| 89 | + <h2 class="section-title">兴趣</h2> |
| 90 | + <div class="skills-list"> |
| 91 | + <span class="skill-item">loli</span> |
| 92 | + <span class="skill-item">少女</span> |
| 93 | + <span class="skill-item">JK</span> |
| 94 | + </div> |
| 95 | + |
| 96 | + <h2 class="section-title">一些话</h2> |
| 97 | + <div class="experience-item"> |
| 98 | + <p>你知道的，我是纯爱 (๑•̀ㅂ•́)و✧</p><br> |
25 | 99 |
|
26 | | - <h2>我们的价值观</h2> |
27 | | - <ul class="values-list"> |
28 | | - <li><i class="fas fa-check"></i> 客户至上</li> |
29 | | - <li><i class="fas fa-check"></i> 追求卓越</li> |
30 | | - <li><i class="fas fa-check"></i> 持续创新</li> |
31 | | - <li><i class="fas fa-check"></i> 团队合作</li> |
32 | | - </ul> |
33 | | - </article> |
34 | | - |
35 | | - <div class="team-showcase"> |
36 | | - <h2>核心团队</h2> |
37 | | - <div class="team-grid"> |
38 | | - <div class="team-member"> |
39 | | - <div class="member-photo"></div> |
40 | | - <h3>张伟</h3> |
41 | | - <p>创始人 & CEO</p> |
42 | | - </div> |
43 | | - <div class="team-member"> |
44 | | - <div class="member-photo"></div> |
45 | | - <h3>李娜</h3> |
46 | | - <p>技术总监</p> |
47 | | - </div> |
48 | | - </div> |
| 100 | + <p id="english-quote" data-typewriter data-blink="true" data-speed="10"></p> |
49 | 101 | </div> |
50 | 102 | </section> |
51 | | - </div> |
| 103 | + </main> |
52 | 104 |
|
53 | 105 | <div id="footer"></div> |
54 | 106 |
|
| 107 | + <script> |
| 108 | + // Fetch English quote from API |
| 109 | + fetch('https://v.api.aa1.cn/api/api-wenan-yingwen/index.php?type=json') |
| 110 | + .then(response => response.json()) |
| 111 | + .then(data => { |
| 112 | + const quoteElement = document.getElementById('english-quote'); |
| 113 | + quoteElement.textContent = data.text; |
| 114 | + // 手动触发打字机动画 |
| 115 | + if (window.typewriter) { |
| 116 | + window.typewriter.animate(quoteElement, 20, 0, true, true); |
| 117 | + } |
| 118 | + }) |
| 119 | + .catch(error => { |
| 120 | + console.error('Error fetching quote:', error); |
| 121 | + const quoteElement = document.getElementById('english-quote'); |
| 122 | + quoteElement.textContent = 'Everything in excess is opposed to nature.'; |
| 123 | + if (window.typewriter) { |
| 124 | + window.typewriter.animate(quoteElement, 20, 0, true, true); |
| 125 | + } |
| 126 | + }); |
| 127 | + </script> |
55 | 128 | <script src="/src/scripts/main.js"></script> |
| 129 | + <!-- 加载可选功能脚本 --> |
| 130 | + <script src="/src/scripts/optional.js"></script> |
56 | 131 | </body> |
57 | 132 | </html> |
0 commit comments