-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
308 lines (283 loc) · 15.4 KB
/
index.html
File metadata and controls
308 lines (283 loc) · 15.4 KB
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
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>個人作品集與學習平台</title>
<link id="mobileStyle" rel="stylesheet" href="css/mobileStyle.css">
<link id="nav-stylesheet" rel="stylesheet" href="css/navStyles.css">
<link id="body-main-stylesheet" rel="stylesheet" href="css/bodyMain.css">
<link id="welcome-featured-profile-highlight-stylesheet" rel="stylesheet" href="css/welcomeFeatured.css">
<link id="news-stylesheet" rel="stylesheet" href="css/newsStyles.css">
<link id="register-auth-modal-stylesheet" rel="stylesheet" href="css/registerModal.css">
<link id="card-display-stylesheet" rel="stylesheet" href="css/card.css">
<link id="footer-celebrate-btn-stylesheet" rel="stylesheet" href="css/footerStyles.css">
<link id="search-stylesheet" rel="stylesheet" href="css/search.css">
<link id="main-page-section-stylesheet" rel="stylesheet" href="css/mainPageSection.css">
<script src="JS/main.js" defer></script>
<script src="JS/search.js" defer></script>
<script src="JS/mainPageSection.js" defer></script>
</head>
<body>
<div id="star-container"></div>
<!-- 懸浮視窗的 HTML 結構 -->
<div id="authModal" class="modal">
<div class="modalContent">
<span class="RScloseBtn" onclick="RScloseModal()">×</span>
<h2>welcome！</h2>
<div id="authForm">
<div id="loginForm">
<h3>好久不見！</h3>
<form>
<label for="loginEmail">電子郵件：</label>
<input type="email" id="loginEmail" name="loginEmail" required>
<label for="loginPassword">密碼：</label>
<input type="password" id="loginPassword" name="loginPassword" required>
<button type="submit" class="submitBtn">登入</button>
</form>
<p>還沒有帳號？ <button class="toggleFormBtn" onclick="showRegisterForm()">註冊</button></p>
</div>
<div id="registerForm" style="display:none;">
<h3>你好啊，新朋友！</h3>
<form>
<label for="registerEmail">電子郵件：</label>
<input type="email" id="registerEmail" name="registerEmail" required>
<label for="registerPassword">密碼：</label>
<input type="password" id="registerPassword" name="registerPassword" required>
<button type="submit" class="submitBtn">註冊</button>
</form>
<p>已有帳號？ <button class="toggleFormBtn" onclick="showLoginForm()">登入</button></p>
</div>
</div>
</div>
</div>
<!-- 向下箭頭提示色塊 -->
<div class="arrow-indicator">⏑</div>
<!-- 搜尋列 -->
<div class="search-container">
<input type="text" id="searchInput" placeholder="搜尋內容...">
<button id="searchButton">搜尋</button>
</div>
<div id="noResults" style="display: none; color: red;">
沒有找到結果
</div>
<div id="searchingNotification" class="notification">
<p>正在導向搜尋結果...</p>
</div>
<!-- 導航列 -->
<nav>
<img src="img\BACKBTN-01-01.png" alt="backBTN" class="backBTN">
<h1>主頁</h1>
<ul>
<li><a href="portfolio.html">過去作品</a></li>
<li><a href="LearningDiary.html">學習日誌</a></li>
<li><a href="viewport.html">學習資源推薦</a></li>
<li><a href="mini-games.html">迷你遊戲</a></li>
<li><a href="contact.html">聯絡</a></li>
<a href="index.html" class="home-button">
<img src="img\homepage.png" class="home-icon">
</a>
</ul>
<!-- 顯示懸浮視窗的按鈕 -->
<button id="openModalBtn" class="openModalBtn">註冊 | 登入</button>
</nav>
<!-- - 提供網站的主要導航連結
- 包含返回按鈕、標題和不同的頁面連結 -->
<main>
<section id="welcome">
<div class=" welcome-text">
<h2 id="modal-title"></h2>
<p class="modal-text"></p>
<!-- 慶祝按鈕及其特效 -->
<div class="celebrate-container">
<div class="celebrate"></div>
<button id="celebrate-btn" class="celebrate-btn">🎉</button>
</div>
<div id="celebrate" class="celebrate"></div>
</p>
</div>
</section>
<section id="mainPageSection" class="mainPageSectionStyled">
<div class="image-container">
<div class="image-item" id="item1">
<img src="img\CodeMonkey.png" alt="Intro 1" class="mainPageIMG">
<div class="overlay">你好，我是梁之泰，<br>目前正在資策會學習。<br><br>我的學習目標是成為一名合格的程式設計師。</div>
<div class="bg-cover"></div>
</div>
<div class="image-item" id="item2">
<img src="img\PIC (10).png" alt="Intro 2" class="mainPageIMG">
<div class="overlay">
我過去的主要工作經驗集中在廣告行銷美編，<br>這段經歷讓我養成了設計思維和注重細節的習慣。<br><br>雖然過去沒有學習過程式語言，<br>但我已經逐漸適應並apply到學習中。
</div>
<div class="bg-cover"></div>
</div>
<div class="image-item" id="item3">
<img src="img/WaitUpdate.png" alt="Intro 3" class="mainPageIMG">
<div class="overlay">
目前，<br>我正在學習SQL、HTML、JavaScript和C#等技術。<br>我希望能將這些技能應用到實際專案中，<br>進一步提升自己的開發能力。<br><br>完整作品細節請點選：
</div>
<div class="bg-cover"></div>
<a href="portfolio.html" class="btnMore">前往查看更多</a>
</div>
</div>
</section>
<div id="MainSkillCard" class="MainSkillCard">
<button id="MainPrevBtn" class="MainNavBtn">往左</button>
<button id="MainNextBtn" class="MainNavBtn">往右</button>
<div class="MainCardContent">
<div id="MainSkillNameContainer" class="MainSkillNameContainer">
<div id="MainSkillName" class="MainSkillName">
<!-- 這裡會顯示技能名稱 -->
</div>
<div id="MainSkillPercentage" class="MainSkillPercentage">
<!-- 這裡會顯示技能百分比 -->
</div>
</div>
<div id="MainSkillDescription" class="MainSkillDescription">
<!-- 這裡會顯示技能的描述 -->
</div>
<div id="MainPieChartContainer" class="MainPieChartContainer">
<div id="MainPieChart" class="MainPieChart"></div>
</div>
</div>
</div>
<section id="about">
<div class="card-container">
<div class="card active" id="card-1">
<div class="card-content">
<div class="card-image">
<img src="img\inasnake.png" alt="C# 貪吃蛇遊戲">
</div>
<div class="card-text">
<h2>貪吃蛇遊戲(C#基礎開發)</h2>
<p>使用 C# 開發貪吃蛇遊戲，為首次接觸程式語言，學習基礎語法與控制流程。玩家控制蛇移動並吃食物，增加長度。長度過長會導致遊戲結束。</p>
<h3>開發技術</h3>
<ul>
<li><strong>Victor3</strong> 引擎：實現重力效果與速度增長。</li>
<li><strong>隨機食物生成</strong>：提升遊戲挑戰性。</li>
<li><strong>視覺化介面</strong>：清晰展示遊戲狀態。</li>
<li><strong>Inspector 與 Component</strong>：高效管理遊戲元素。</li>
<a href="https://tananis.itch.io/inake" target="_blank"
class="profile-button">前往itch.io</a>
</ul>
</div>
</div>
</div>
<div class="card inactive" id="card-2">
<div class="card-content">
<div class="card-image">
<img src="img/FIREWORK.gif" alt="Image 2">
</div>
<div class="card-text">
<h2>煙火特效</h2>
<p>展示了我如何用 HTML、CSS 和 JavaScript 創建動態煙火效果，點擊按鈕後會產生多彩的紙雪動畫。</p>
<a href="portfolioWEB\firework.html" target="_blank" class="profile-button">前往效果頁</a>
<ul>
<h3>技術要點</h3 class="card-text">
<li><strong>動態生成：</strong> 用 JS 創建數百個紙雪片，並設置其樣式。</li>
<li><strong>動畫效果：</strong> 使用 CSS 實現煙火的擴散和下落。</li>
<li><strong>效能考量：</strong> 透過限制 DOM 操作和優化動畫過渡，確保平滑的使用體驗。</li>
</ul>
</div>
</div>
</div>
<div class="card inactive" id="card-3">
<div class="card-content">
<div class="card-image">
<img src="img\webShort.gif" alt="Image 3">
</div>
<div class="card-text">
<h2>各式Web模板練習</h2>
<p>實作了多種商用網站模板，如影音播放器、首頁、購物車、聯絡頁面等，並參加了資策會課程提升技能。</p>
<h3>技術要點</h3>
<ul>
<li><strong>CSS3：</strong> 設計響應式和動態效果。</li>
<li><strong>JavaScript：</strong> 增加互動功能。</li>
</ul>
<ul>
<li><strong>增強前端技能：</strong> 精通 CSS 設計。</li>
<li><strong>提升問題解決能力：</strong> 能夠應對技術挑戰。</li>
<li><strong>實戰經驗：</strong> 在實際專案中應用所學。</li>
</ul>
</div>
<a href="portfolioWEB\firework.html" target="_blank" class="profile-button">查看模板</a>
</div>
</div>
<div class="card inactive" id="card-4">
<div class="card-content">
<div class="card-image">
<img src="img\artshot.gif" alt="額外平面美術作品">
</div>
<div class="card-text">
<h2>額外平面美術作品</h2>
<p>展示 Adobe Illustrator 和數位繪圖的平面設計作品。</p>
<h3>內容重點</h3>
<ul>
<li><strong>Adobe AI/PS：</strong> 標誌和視覺設計。</li>
<li><strong>數位繪圖：</strong> 高品質平面繪圖。</li>
<li><strong>多樣設計：</strong> 探索視覺風格。</li>
<li><strong>設計技能提升：</strong> 加強設計能力。</li>
<li><strong>視覺溝通：</strong> 改進作品效果。</li>
<li><strong>專業經驗：</strong> 實際設計經驗。</li>
</ul>
</div>
</div>
</div>
<div class="nav-buttons">
<button class="nav-button" id="prev-button"></button>
<button class="nav-button" id="next-button"></button>
</div>
</div>
</section>
<section id="featured">
<!-- 精選展示區域 -->
<h2>精選展示</h2>
<div class="highlight">
<article class="searchable-content">
<h3>近期作品</h3>
<img src="img/PIC (10).png" alt="近期作品示例">
<p>最近完成的繪畫作品在這...</p>
<a href="portfolio.html">查看更多作品</a>
</article>
<article class="searchable-content">
<h3>最新學習資源</h3>
<img src="img\LearnBG.png" alt="最新資源示例">
<p>這是新發現的優質學習資源...</p>
<a href="viewport.html">探索更多資源</a>
</article>
<article class="searchable-content">
<h3>迷你遊戲</h3>
<img src="img/inasnake.png" alt="迷你遊戲截圖">
<p>這是一個我最近做的迷你遊戲...</p>
<a href="#games">玩玩看其他遊戲</a>
</article>
<article class="searchable-content">
<h3>新消息</h3>
<img src="img\MPimg.png" alt="個人日誌區">
<p>也想一起學習新技能嗎？...</p>
<a href="LearningDiary.html">查看個人日記</a>
</article>
</div>
<!-- - 顯示幾個精選項目，每個項目包含標題、圖片、描述及連結
- 用於展示網站的主要內容和更新信息 -->
</section>
<!-- NEWS -->
<section id="news" class="searchable-content">
<h2>What's New</h2>
<p>1. 2024年8月17日學習紀錄：個人網站創立</p>
<a href="MainPage.html">查看更多</a>
<p>2. 2024年8月16日學習紀錄：JavaScript基礎教學if-else與迴圈</p>
<a href="MainPage.html">查看更多</a>
<p>教育資源推薦：w3school</p>
<a href="https://www.w3school.com.cn/">前往</a>
<p>教育資源推薦：MDN Web Docs</p>
<a href="https://developer.mozilla.org/zh-TW/">前往</a>
<p>教育資源推薦：Codecademy</p>
<a href="https://www.codecademy.com/">前往</a>
</section>
</main>
<footer class="footerBG searchable-content">
<p class="footer-text">© 2024 版權所有.</p>
</footer>
</body>
</html>