-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
284 lines (261 loc) · 17.8 KB
/
Copy pathabout.html
File metadata and controls
284 lines (261 loc) · 17.8 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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>關於ㄚ亮笑長 - 丫亮笑長練功坊預約助手</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="icon" href="images/Alianglogo.png" type="image/png">
<style>
body {
font-family: 'Noto Sans TC', sans-serif;
}
/* Hero Background - Light Theme Adapted */
.hero-bg {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); /* blue-50 to blue-100 */
}
.timeline-line::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background-color: #cbd5e1; /* gray-300 */
transform: translateX(-50%);
}
@media (max-width: 768px) {
.timeline-line::before {
left: 20px;
}
}
</style>
</head>
<body class="bg-white text-gray-800">
<!-- Consistent Nav with Index -->
<nav class="bg-gray-900 text-white p-4 shadow-lg sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center px-4">
<div class="flex items-center space-x-2">
<a href="index.html" class="flex items-center space-x-2 hover:opacity-90 transition">
<img src="images/Alianglogo.png" alt="丫亮笑長" class="h-10 w-10 p-1 rounded-lg bg-yellow-400 object-contain">
<div>
<h1 class="text-xl font-bold">丫亮笑長練功坊預約助手</h1>
<p class="text-xs text-gray-400">預約與課程管理系統</p>
</div>
</a>
</div>
<div class="flex items-center space-x-6">
<a href="index.html" class="text-sm hover:text-yellow-400 transition font-medium"><i class="fa-solid fa-chalkboard-user"></i> 課程預約</a>
<a href="about.html" class="text-sm text-yellow-400 font-bold transition"><i class="fa-solid fa-user-circle"></i> 關於講師</a>
<a href="portfolio.html" class="text-sm hover:text-yellow-400 transition font-medium"><i class="fa-solid fa-briefcase"></i> ㄚ亮笑長作品集</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="hero-bg flex items-center relative overflow-hidden pt-10 pb-24 md:pt-12 md:pb-28">
<!-- Decorative Background Elements -->
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-blue-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-96 h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
<div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center relative z-10">
<div class="space-y-6 animate-fade-in-up order-2 md:order-1">
<span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-bold shadow-md inline-block mb-2">
教育．科技．分享
</span>
<h1 class="text-4xl md:text-6xl font-bold leading-tight text-gray-900">
用科技翻轉教育<br>
<span class="text-blue-600">用熱忱點亮教學</span>
</h1>
<p class="text-gray-600 text-lg leading-relaxed max-w-lg">
從基層教師一路走到國小校長，我始終致力於推動資訊科技融入教學。這條路上，我深信「一個人走得快，一群人走得遠」，因此以無私分享的精神，共同創辦了影響廣泛的教師專業社群「教育噗浪客」(TPET)。<br><br>
即使在退休後，我依然活躍於教育界，透過「ㄚ亮笑長練功坊」等平台，持續為教師們提供最新的教學科技知能，做老師們永遠的後盾。
</p>
<div class="flex flex-wrap gap-4 pt-4">
<a href="https://bit.ly/Aliang" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg shadow-lg transition duration-300 font-bold flex items-center">
<i class="fa-solid fa-school mr-2"></i> 參觀練功坊
</a>
<a href="index.html" class="bg-white border border-gray-300 text-gray-700 hover:border-blue-600 hover:text-blue-600 px-8 py-3 rounded-lg transition duration-300 flex items-center shadow-sm">
<i class="fa-regular fa-calendar-alt mr-2"></i> 立即預約課程
</a>
</div>
</div>
<div class="relative flex justify-center order-1 md:order-2">
<div class="relative w-72 h-72 md:w-96 md:h-96">
<div class="w-full h-full rounded-full overflow-hidden shadow-2xl border-8 border-white bg-white relative z-10">
<img src="images/Aliang.png" alt="洪旭亮照片" class="object-cover w-full h-full">
</div>
<div class="absolute bottom-4 -right-2 md:bottom-10 md:-right-4 bg-white px-4 py-2 rounded-full shadow-lg flex items-center gap-2 border border-gray-100 z-20">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
</span>
<span class="text-sm font-bold text-gray-700">ㄚ亮笑長</span>
</div>
</div>
</div>
</div>
</header>
<!-- Stats Section -->
<section class="py-12 bg-white shadow-sm relative z-20 -mt-16 container mx-auto rounded-2xl mx-4 md:mx-auto max-w-5xl border border-gray-100">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center divide-x divide-gray-100">
<div class="p-2">
<div class="text-3xl font-bold text-blue-600">30+年</div>
<div class="text-sm text-gray-500 mt-1 font-medium">資訊科技老兵</div>
</div>
<div class="p-2">
<div class="text-3xl font-bold text-blue-600">500+場</div>
<div class="text-sm text-gray-500 mt-1 font-medium">教育訓練</div>
</div>
<div class="p-2">
<div class="text-3xl font-bold text-blue-600">4.9</div>
<div class="text-sm text-gray-500 mt-1 font-medium">學員滿意度</div>
</div>
<div class="p-2">
<div class="text-3xl font-bold text-blue-600">Live</div>
<div class="text-sm text-gray-500 mt-1 font-medium">系列直播課程</div>
</div>
</div>
</section>
<!-- Professional Areas (Replacing generic blocks with Card Style) -->
<section class="py-20 px-6 bg-white">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-16">
<h4 class="text-blue-600 font-bold tracking-widest uppercase text-sm mb-2">EXPERTISE</h4>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">專業領域</h2>
<p class="text-gray-500">結合實務經驗與科技新知的教學風格</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-2xl hover:shadow-xl transition duration-300 border border-gray-100 group">
<div class="w-14 h-14 bg-white rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:bg-blue-600 transition overflow-hidden p-2">
<img src="images/pupu.png" alt="Podcast" class="w-full h-full object-cover rounded-full">
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Podcast 主持</h3>
<p class="text-gray-600 leading-relaxed">
擔任【噗噗聊聊】主持人，透過聲音與訪談，暢談教育現場的點滴與創新思維，連結教育工作者的心。
</p>
</div>
<div class="bg-gray-50 p-8 rounded-2xl hover:shadow-xl transition duration-300 border border-gray-100 group">
<div class="w-14 h-14 bg-white rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:bg-yellow-500 transition overflow-hidden p-2">
<img src="images/Alianglogo.png" alt="Live Course" class="w-full h-full object-contain rounded-full">
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">直播教學課程</h3>
<p class="text-gray-600 leading-relaxed">
透過【ㄚ亮笑長練功坊】進行系列直播，手把手帶領老師們掌握最新的數位工具，即時互動解決教學痛點。
</p>
</div>
<div class="bg-gray-50 p-8 rounded-2xl hover:shadow-xl transition duration-300 border border-gray-100 group">
<div class="w-14 h-14 bg-white rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:bg-green-600 transition overflow-hidden p-2">
<img src="images/Aliang1.png" alt="Live Course" class="w-full h-full object-cover rounded-full">
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">數位融入教學</h3>
<p class="text-gray-600 leading-relaxed">
身為專業講師，將複雜的資訊科技轉化為易懂的教學策略，協助學校與機構推動數位轉型與創新教學。
</p>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="py-20 bg-gray-50 relative overflow-hidden">
<div class="container mx-auto px-6 max-w-5xl">
<div class="text-center mb-16">
<h4 class="text-blue-600 font-bold tracking-widest uppercase text-sm mb-2">MY JOURNEY</h4>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">職涯歷程與里程碑</h2>
</div>
<div class="relative timeline-line space-y-12 pl-8 md:pl-0">
<!-- Current Item -->
<div class="relative flex flex-col md:flex-row items-center justify-between group">
<div class="md:w-5/12 text-left md:text-right mb-4 md:mb-0 order-1 w-full">
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-600 inline-block w-full md:w-auto">
<h3 class="text-xl font-bold text-gray-900">正在做的事</h3>
<p class="text-blue-600 text-sm font-semibold mb-3">Current Focus</p>
<ul class="text-gray-600 space-y-2 text-sm text-left">
<li class="flex items-center"><i class="fa-solid fa-check text-blue-500 mr-2"></i> 【噗噗聊聊】Podcast主持人</li>
<li class="flex items-center"><i class="fa-solid fa-check text-blue-500 mr-2"></i> 【ㄚ亮笑長練功坊】系列直播課程</li>
<li class="flex items-center"><i class="fa-solid fa-check text-blue-500 mr-2"></i> 數位融入教學專業講師</li>
</ul>
</div>
</div>
<div class="absolute -left-[19px] md:left-1/2 transform md:-translate-x-1/2 w-10 h-10 bg-blue-600 rounded-full border-4 border-white shadow flex items-center justify-center text-white z-10 order-2 top-0 md:top-auto">
<i class="fa-solid fa-microphone"></i>
</div>
<div class="md:w-5/12 order-3"></div>
</div>
<!-- Achievements Item -->
<div class="relative flex flex-col md:flex-row items-center justify-between group">
<div class="md:w-5/12 order-1 hidden md:block"></div>
<div class="absolute -left-[19px] md:left-1/2 transform md:-translate-x-1/2 w-10 h-10 bg-white border-2 border-yellow-400 rounded-full shadow flex items-center justify-center text-yellow-600 z-10 top-0 md:top-auto">
<i class="fa-solid fa-trophy"></i>
</div>
<div class="md:w-5/12 text-left mt-4 md:mt-0 order-3 w-full">
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-yellow-400 inline-block w-full md:w-auto">
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded mb-2 inline-block">30+年</span>
<h3 class="text-xl font-bold text-gray-900 mt-1">資訊科技老兵</h3>
<ul class="text-gray-600 space-y-2 mt-3 text-sm">
<li class="flex items-start"><span class="font-bold mr-2 text-gray-400">2022</span> 程有威先生教育科技獎</li>
<li class="flex items-start"><span class="font-bold mr-2 text-gray-400">2017</span> GHF教育創新學人獎</li>
<li class="flex items-start"><span class="font-bold mr-2 text-gray-400">2016</span> 傑出資訊人才獎</li>
<li class="flex items-start"><span class="font-bold mr-2 text-gray-400">2012</span> 教育部TaNet傑出貢獻人員</li>
</ul>
</div>
</div>
</div>
<!-- Past Item -->
<div class="relative flex flex-col md:flex-row items-center justify-between group">
<div class="md:w-5/12 text-left md:text-right mb-4 md:mb-0 order-1 w-full">
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-gray-400 inline-block w-full md:w-auto">
<h3 class="text-xl font-bold text-gray-900">曾經啦～</h3>
<p class="text-gray-500 text-sm mb-2">Past Experience</p>
<ul class="text-gray-600 space-y-1 text-sm text-left md:text-right">
<li>親子天下教育創新專案特約顧問</li>
<li>教育噗浪客(TPET)共同創辦人</li>
</ul>
</div>
</div>
<div class="absolute -left-[19px] md:left-1/2 transform md:-translate-x-1/2 w-10 h-10 bg-white border-2 border-gray-300 rounded-full shadow flex items-center justify-center text-gray-500 z-10 top-0 md:top-auto">
<i class="fa-solid fa-mountain"></i>
</div>
<div class="md:w-5/12 order-3"></div>
</div>
<!-- Origins Item -->
<div class="relative flex flex-col md:flex-row items-center justify-between group">
<div class="md:w-5/12 order-1 hidden md:block"></div>
<div class="absolute -left-[19px] md:left-1/2 transform md:-translate-x-1/2 w-10 h-10 bg-white border-2 border-gray-300 rounded-full shadow flex items-center justify-center text-gray-400 z-10 top-0 md:top-auto">
<i class="fa-solid fa-hourglass-start"></i>
</div>
<div class="md:w-5/12 text-left mt-4 md:mt-0 order-3 w-full">
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-gray-300 inline-block w-full md:w-auto">
<span class="bg-gray-200 text-gray-600 text-xs px-2 py-1 rounded mb-2 inline-block">Origins</span>
<h3 class="text-xl font-bold text-gray-900 mt-1">古早以前的事</h3>
<p class="text-gray-600 mt-1">國小教師、主任、校長</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-8 mt-0">
<div class="container mx-auto px-4 text-center text-sm">
<div class="flex justify-center space-x-6 mb-4">
<a href="mailto:hsuliang@gmail.com" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition" aria-label="Email 聯絡">
<i class="fa-regular fa-envelope"></i>
</a>
<a href="https://bit.ly/Aliang" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition" aria-label="ㄚ亮笑長練功坊">
<i class="fa-solid fa-globe"></i>
</a>
<a href="admin.html" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition" aria-label="管理端">
<i class="fa-solid fa-user-gear"></i>
</a>
</div>
<p class="mb-2">
© 2025 ㄚ亮笑長. All Rights Reserved.
</p>
<p class="text-xs text-gray-500">
Powered by Firebase Firestore & EmailJS for seamless booking experience.
</p>
</div>
</footer>
</body>
</html>