Localization/Toggle Code.txt at main · IreliaWuW/Localization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Gaming & AI Engineer Profile</title>
  <style>
    /* General Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Arial', sans-serif;
      background-color: #f5f5f5;
      color: #333;
      overflow-x: hidden;
    }

    /* Horizontal Scroll Container */
    .horizontal-scroll {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      height: 100vh;
      width: 100%;
    }

    .section {
      flex: none;
      width: 100vw;
      height: 100vh;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    /* Section Styles */
    .section:nth-child(odd) {
      background-color: #FFD373;
    }

    .section:nth-child(even) {
      background-color: #80C5A2;
    }

    /* Language Toggle Button */
    .language-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      background-color: #F27873;
      color: white;
      font-size: 16px;
      font-weight: bold;
      padding: 10px 20px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      z-index: 1000;
      transition: background-color 0.3s ease;
    }

    .language-toggle:hover {
      background-color: #D92CDD;
    }

    /* Section Content */
    h1, h2 {
      color: #333;
      margin-bottom: 20px;
    }

    h1 {
      font-size: 3rem;
    }

    h2 {
      font-size: 2rem;
    }

    p {
      font-size: 1.2rem;
      line-height: 1.8;
      max-width: 800px;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 20px 0;
    }

    ul li {
      font-size: 1.2rem;
      margin: 10px 0;
    }

    /* Button Styles */
    .button {
      display: inline-block;
      padding: 10px 20px;
      color: #fff;
      text-decoration: none;
      background-color: #468BCA;
      border-radius: 25px;
      font-weight: bold;
      transition: background-color 0.3s ease;
    }

    .button:hover {
      background-color: #008A45;
    }

    /* Magazine Style Enhancements */
    .featured-projects, .testimonials, .certifications {
      margin-top: 20px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .testimonials p, .certifications ul, .featured-projects ul {
      margin: 10px 0;
    }

    .certifications ul, .featured-projects ul {
      list-style: none;
    }

    .certifications ul li, .featured-projects ul li {
      padding: 10px;
      background-color: #F27873;
      color: white;
      border-radius: 10px;
      margin: 10px 0;
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 20px;
      background-color: #5F5F5E;
      color: white;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    /* Responsive */
    @media (max-width: 768px) {
      h1 {
        font-size: 2rem;
      }

      h2 {
        font-size: 1.5rem;
      }

      p {
        font-size: 1rem;
      }
    }
  </style>
</head>
<body>
  <!-- Language Toggle Button -->
  <button class="language-toggle" id="languageToggle">中文</button>

  <!-- Horizontal Scroll Sections -->
  <div class="horizontal-scroll" id="content">
    <!-- Welcome Section -->
    <div class="section" id="welcome">
      <h1 data-en="Welcome!" data-zh="欢迎！">Welcome!</h1>
      <p data-en="Explore my unique blend of gaming expertise and AI localization skills." data-zh="探索我在游戏专业知识和AI本地化技能上的独特结合。">
        Explore my unique blend of gaming expertise and AI localization skills.
      </p>
    </div>

    <!-- Gaming Expertise Section -->
    <div class="section" id="gaming-expertise">
      <h2 data-en="🎮 Gaming Expertise" data-zh="🎮 游戏专业知识">🎮 Gaming Expertise</h2>
      <p data-en="Localized AAA titles and indie games for global audiences." data-zh="为全球受众本地化AAA大作和独立游戏。">
        Localized AAA titles and indie games for global audiences.
      </p>
      <ul>
        <li data-en="MMORPG" data-zh="大型多人在线角色扮演游戏">MMORPG</li>
        <li data-en="MOBA" data-zh="多人在线战术竞技游戏">MOBA</li>
        <li data-en="Unity & Unreal Engine" data-zh="Unity & Unreal 引擎">Unity & Unreal Engine</li>
      </ul>
    </div>

    <!-- AI Localization Section -->
    <div class="section" id="ai-localization">
      <h2 data-en="🤖 AI Localization" data-zh="🤖 AI本地化">🤖 AI Localization</h2>
      <p data-en="Adapted LLMs and other AI tools for cultural relevance." data-zh="为语言模型和其他AI工具进行文化适配。">
        Adapted LLMs and other AI tools for cultural relevance.
      </p>
      <ul>
        <li data-en="ChatGPT Localization" data-zh="ChatGPT本地化">ChatGPT Localization</li>
        <li data-en="NLP and ML Models" data-zh="自然语言处理与机器学习模型">NLP and ML Models</li>
        <li data-en="AI Content Adaptation" data-zh="AI内容适配">AI Content Adaptation</li>
      </ul>
    </div>

    <!-- Featured Projects Section -->
    <div class="section" id="featured-projects">
      <h2 data-en="🏆 Featured Projects" data-zh="🏆 特色项目">🏆 Featured Projects</h2>
      <div class="featured-projects">
        <ul>
          <li data-en="🎮 [Game Title] - Lead Localizer" data-zh="🎮 [游戏名称] - 主本地化工程师">🎮 [Game Title] - Lead Localizer</li>
          <li data-en="🤖 AI Project - Cultural Adaptation" data-zh="🤖 AI项目 - 文化适配">🤖 AI Project - Cultural Adaptation</li>
        </ul>
      </div>
    </div>

    <!-- Certifications Section -->
    <div class="section" id="certifications">
      <h2 data-en="📜 Certifications" data-zh="📜 认证">📜 Certifications</h2>
      <div class="certifications">
        <ul>
          <li data-en="Unity Certified Developer" data-zh="Unity认证开发者">Unity Certified Developer</li>
          <li data-en="AI Localization Specialist" data-zh="AI本地化专家">AI Localization Specialist</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer>
    © 2024 [Your Name]. Built with ❤️.
  </footer>

  <!-- Language Toggle Script -->
  <script>
    const languageToggle = document.getElementById("languageToggle");
    const content = document.getElementById("content");

    languageToggle.addEventListener("click", () => {
      const isEnglish = languageToggle.innerText === "中文";
      languageToggle.innerText = isEnglish ? "English" : "中文";

      // Update all sections' text
      const sections = content.querySelectorAll("[data-en]");
      sections.forEach((element) => {
        element.innerText = isEnglish ? element.dataset.zh : element.dataset.en;
      });
    });
  </script>
</body>
</html>