-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathMainPage.html
More file actions
171 lines (159 loc) · 7.42 KB
/
Copy pathMainPage.html
File metadata and controls
171 lines (159 loc) · 7.42 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
<!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="responsive-stylesheet" rel="stylesheet" href="CSS/styles.css">
<script src="JS/main.js" defer></script>
</head>
<body>
<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>
</ul>
</nav>
<main>
<section id="welcome">
<div class="welcome-text">
<h2>Welcome<br>歡迎來到Tana的個人學習網站！</h2>
<p>這裡是我紀錄關於近期作品、分享學習資源
<br>以及提供迷你遊戲的地方。如有任何需求或連繫，
<br>請<a href="#contact">聯繫我</a>或者參考資訊分頁
</p>
</div>
<div class="welcome-image">
<img src="img/ME.jpg" alt="圓形圖片">
</div>
</section>
<section id="featured">
<h2>精選展示</h2>
<div class="highlight">
<article>
<h3>近期作品</h3>
<img src="img/PIC (10).png" alt="近期作品示例">
<p>最近完成的繪畫作品在這...</p>
<a href="portfolio.html">查看更多作品</a>
</article>
<article>
<h3>最新學習資源</h3>
<img src="img\LearnBG.png" alt="最新資源示例">
<p>這是新發現的優質學習資源...</p>
<a href="viewport.html">探索更多資源</a>
</article>
<article>
<h3>迷你遊戲</h3>
<img src="img/inasnake.png" alt="迷你遊戲截圖">
<p>這是一個我最近做的迷你遊戲...</p>
<a href="#games">玩玩看其他遊戲</a>
</article>
<article>
<h3>新消息</h3>
<img src="img\MPimg.png" alt="個人日誌區">
<p>也想一起學習新技能嗎？...</p>
<a href="LearningDiary.html">查看個人日記</a>
</article>
<article>
<h3>持續更新</h3>
<img src="img\WaitUpdate.png" alt="持續更新中">
<p>持續更新中...</p>
<a href="#games">持續更新中</a>
</article>
<article>
<h3>持續更新</h3>
<img src="img\WaitUpdate.png" alt="持續更新中">
<p>持續更新中...</p>
<a href="#games">持續更新中</a>
</article>
</div>
</section>
<!-- 關於我 -->
<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/WaitUpdate.png" alt="Image 1">
</div>
<div class="card-text">
<h2>梁之泰</h2>
<p>出生於台中，現年23歲。對設計充滿熱情。</p>
</div>
</div>
</div>
<div class="card inactive" id="card-2">
<div class="card-content">
<div class="card-image">
<img src="img/WaitUpdate.png" alt="Image 2">
</div>
<div class="card-text">
<h2>學歷與經歷</h2>
<p>文藻外語大學數位設計系，專注於平面設計與數位藝術。</p>
<p>曾在上捷廣告擔任數位行銷與網站編輯，負責WIX與WordPress平台的內容更新與管理。</p>
</div>
</div>
</div>
<div class="card inactive" id="card-3">
<div class="card-content">
<div class="card-image">
<img src="img/WaitUpdate.png" alt="Image 3">
</div>
<div class="card-text">
<h2>專業技能</h2>
<p>音訊編輯：擁有兩年Podcast製作經驗，熟悉音訊編輯與影片剪輯。</p>
<p>遊戲開發：經驗豐富於迷你遊戲的開發，掌握Unity、C#等技術，具備遊戲上架經驗。</p>
<p>網頁設計：具備HTML、CSS、JavaScript的基礎知識，能夠進行網頁設計與開發。</p>
<p>平面設計：熟悉Adobe Photoshop與Illustrator，具備平面設計與文案撰寫能力。</p>
</div>
</div>
</div>
<div class="card inactive" id="card-4">
<div class="card-content">
<div class="card-image">
<img src="img/WaitUpdate.png" alt="Image 4">
</div>
<div class="card-text">
<h2>額外經歷</h2>
<p>參與多次小型遊戲製作，擁有多人協作與獨立開發經驗。</p>
<p>曾經經營個人Podcast一年，參與各種活動並與台北遊戲電玩展合作。</p>
</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>
<!-- NEWS -->
<section id="news">
<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="footer-background">
<p class="footer-text">© 2024 版權所有.</p>
<!-- 慶祝按鈕及其特效 -->
<div class="celebrate-container">
<div class="celebrate"></div>
<button id="celebrate-btn" class="celebrate-btn">🎉</button>
</div>
<div id="celebrate" class="celebrate"></div>
</footer>
</body>
</html>