-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
310 lines (286 loc) · 22.8 KB
/
index.html
File metadata and controls
310 lines (286 loc) · 22.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
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LU MING-BIN</title>
<!-- load CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- https://getbootstrap.com/ -->
<link rel="stylesheet" href="fontawesome/css/fontawesome-all.min.css"> <!-- https://fontawesome.com/ -->
<link rel="stylesheet" type="text/css" href="slick/slick.css"/> <!-- http://kenwheeler.github.io/slick/ -->
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/tooplate-style.css"> <!-- Templatemo style -->
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this in a modern browser such as latest version of Chrome or Microsoft Edge.");</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/樣式名稱.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script> hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div id="tm-bg"></div>
<div id="tm-wrap">
<div class="tm-main-content">
<div class="container tm-site-header-container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-md-col-xl-6 mb-md-0 mb-sm-4 mb-4 tm-site-header-col">
<div class="tm-site-header">
<h1 class="mb-4">LU MING-BIN</h1>
<img src="img/underline.png" class="img-fluid mb-4">
<p>呂銘斌-個人網站</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="content">
<div class="grid">
<div class="grid__item" id="home-link">
<div class="product">
<div class="tm-nav-link">
<i class="fas fa-home fa-3x tm-nav-icon"></i>
<span class="tm-nav-text">個人簡介</span>
<div class="product__bg"></div>
</div>
<div class="product__description">
<div class="row mb-3">
<div class="col-12">
<h2 class="tm-page-title">呂銘斌</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<img src="img/0000.jpg" class="img-fluid mb-3">
<p>系級:電機四乙</p>
<p>學號:10528206</p>
<p>生日:1997/12/27</p>
<p>興趣:音樂</p>
</div>
<!--
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<img src="img/welcome-2.jpg" class="img-fluid">
<p>Donec eu lectus ligula. Aenean pulvinar dolor et massa lacinia rhoncus sit amet sed mauris. Aliquam dictum nibh et consequat finibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In magna mauris, malesuada ut diam eu, pellentesque fringilla orci.</p>
</div>
-->
</div>
</div>
</div>
</div>
<div class="grid__item" id="team-link">
<div class="product">
<div class="tm-nav-link">
<i class="fas fa-users fa-3x tm-nav-icon"></i>
<span class="tm-nav-text">機構演講-心得</span>
<div class="product__bg"></div>
</div>
<div class="product__description">
<div class="p-sm-4 p-2">
<div class="row mb-3">
<div class="col-12">
<h2 class="tm-page-title">3/17機構負責人分享-心得</h2>
</div>
</div>
<div class="row tm-reverse-sm">
<div class="col-sm-12 col-md-8 col-lg-8 col-xl-8">
<p class="mb-4">
本次寶貝潛能中心的總督導來分享機構的細節，機構的環境及目前的發展，並給我們看了很多機構內孩子們的照片及影片，
很多孩子都有不同的病因，因為這些病痛，導致他們無法這麼快學習，需要到特殊機構去做學齡前的準備，為的就是希望，
盡快地讓孩子更快學習。
</p>
<p class="mb-4">
講師問我們什麼是身心障礙？ 這個問題一問出來，其實卻答不上來正確的答案，從來沒有想過這個問題，但是對身心障礙者來說，
他們是把自己當成什麼樣的的存在，而又是希望我們是以何種眼光看待他們，其實答案很簡單，他們不外乎就是希望可以
像平常人一樣被正常看待。
</p>
<p class="mb-5">
也希望我們之後的課堂專題可以有效的幫助到他們，不管是修玩具也好，幫小孩子們做東西道具也好，能做的其實也不多，就盡力的
達成目標，能夠盡我們一點小小的心力。
</p>
<!--
<a href="#" class="btn tm-btn-gray">Read More</a>
-->
</div>
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4 mb-lg-0 mb-sm-4 mb-4">
<img src="img/123.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item">
<div class="product">
<div class="tm-nav-link">
<i class="fas fa-handshake fa-3x tm-nav-icon"></i>
<span class="tm-nav-text">機構參訪-心得</span>
<div class="product__bg"></div>
</div>
<div class="product__description">
<div class="p-sm-4 p-2">
<div class="row mb-3">
<div class="col-12">
<h2 class="tm-page-title">寶貝潛能發展中心參訪-心得</h2>
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<p>3/24(二) 14:00-17:00</p>
<p>
第一次到機構參訪，跟我預料之內不太一樣，負責人簡單跟我們介紹機構內環境跟各班小孩的狀況。
負責人希望我們兩天進班陪同小孩，去了解小孩的大致情況。
</p>
<p>
我進班才三個小時，已經感覺到疲憊，班上的小孩都是腦麻的，行動都很緩慢，都摸不透小孩的內心，
但是其他兩班的小孩，大致上還算活潑，非常佩服這裡的老師還有社工，真的都辛苦了。
</p>
<p>3/25(三) 14:00-17:00</p>
<p>
這次我們還是被分配到腦麻的河馬班，今天的課程是要幫她們活動筋骨，因為他們身體長時間，都
坐在特製輪椅上，所以肌肉如果不多運動，可能會導致萎縮，但每個小孩的身體狀況都又不一樣，
有些小孩的肌肉非常緊繃，有些則很鬆弛，他們因為不能走路，所以是利用爬行地墊，上面有一些
特殊的貼紙，不同觸感的材質，為的就是可以促進他們爬行的動力，所以老師跟我們提出，他們想要
2.0版的爬行地墊，希望由我們協助他們完成。
</p>
<p>3/26(四) 9:00-12:00</p>
<p>
今天是最後一天進班，行程預定是要討論地墊2.0的方案，還有與老師溝通，然後開始討論構思
如何改進，看小孩子在地墊是爬行，老師說他們爬短短的幾公尺，可能就是我們衝刺好幾分鐘，
所花費的力氣了，所以他們在爬行的時候，都會哭，需要非常用力，看到都很心疼，希望我們可以
做出更好的地墊，可以幫助他們。
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="p-sm-4 p-2 tm-img-container">
<div class="tm-img-slider" id="tmImgSlider">
<img src="img/1.jpg" alt="Image" class="tm-slider-img">
<img src="img/2.jpg" alt="Image" class="tm-slider-img">
<img src="img/3.jpg" alt="Image" class="tm-slider-img">
<img src="img/4.jpg" alt="Image" class="tm-slider-img">
<img src="img/5.jpg" alt="Image" class="tm-slider-img">
<img src="img/6.jpg" alt="Image" class="tm-slider-img">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item">
<div class="product">
<div class="tm-nav-link">
<i class="fas fa-comments fa-3x tm-nav-icon"></i>
<span class="tm-nav-text">聯絡方式</span>
<div class="product__bg"></div>
</div>
<div class="product__description">
<div class="pt-sm-4 pb-sm-4 pl-sm-5 pr-sm-5 pt-2 pb-2 pl-3 pr-3">
<div class="row mb-3">
<div class="col-12">
<h2 class="tm-page-title">聯絡資料</h2>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<p>MAIL: <a href="jamesnail333@gmail.com">jamesnail333@gmail.com</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item" id="home-link">
<div class="product">
<div class="tm-nav-link">
<i class="fas fa-star fa-3x tm-nav-icon"></i>
<span class="tm-nav-text">練習</span>
<div class="product__bg"></div>
</div>
<div class="product__description">
<h2 class="tm-page-title">練習網址</h2>
<p class="mb-4"><a href="test.html">test_website</a></p>
<p class="mb-4"><a href="animal/animal_game.html">animal_game</a></p>
</div>
</div>
</div>
<div class="grid__item" id="home-link">
<div class="product">
<div class="tm-nav-link">
<i class="fas fa-star fa-3x tm-nav-icon"></i>
<span class="tm-nav-text">學習過程</span>
<div class="product__bg"></div>
</div>
<div class="product__description">
<h2 class="tm-page-title">心得</h2>
<p class="mb-4">
我們這次製作給腦麻的小孩翻滾用的地墊，這次的內容是第一次接觸，所以很多東西不是我們想像的這們簡單，
需要顧慮到的方面有很多，都要以小孩為第一優先考量，所以要注意的地方非常多，材料也是一大難題，需要
能引起小孩興趣的材質，又要不能使小孩受傷，還得考慮價格，所以學到很多溝通上的技巧，溝通才能使問題
更快解決，還有練習小組討論合作，希望地墊可以如期完成，能夠使小孩喜歡。
</p>
<h2 class="tm-page-title">運用Tinkercad模擬arduion</h2>
<img src="img/DFPlayer.jpg" class="img-fluid mb-3">
<p class="mb-4">
運用<a href="https://www.tinkercad.com">Tinkercad</a>模擬arduion電路模擬，
用DFPlayer Mini模組加上喇叭做音樂撥放器，可以讀取SD卡，這樣就能存入小孩子喜歡的歌，
或是兒歌都可以隨意加減，再用按鈕可以添加切換上下首歌功能。
</p>
<img src="img/tinkercad.png" class="img-fluid mb-3">
<p class="mb-4">
想用NeoPixel來做成地墊的發光元件，但是成本有點高，所以目前還在考慮中，或許還有更好
的替代方案。
</p>
<p class="mb-4">
增加按鈕可以切換歌曲
</p>
<img src="img/BUTTON.jpg" class="img-fluid mb-3">
<p class="mb-4">
利用紙盒 將電路封閉，可避免小孩誤觸破壞電路，也做出簡易插孔使用者可以更方便連接
</p>
<img src="img/0008.jpg">
<img src="img/0009.jpg">
<p></p>
<a href="https://hackmd.io/@Jub9Bu1BR0qRYeSAA0wUJQ/爬行地墊">專案細部內容</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p class="small tm-copyright-text"><a href="https://jamesorry.github.io/APP_Team_2/">Home</a></p>
<p class="small tm-copyright-text">Copyright © <span class="tm-current-year">2020</span> LU MING-BIN </p>
</footer>
</div> <!-- .tm-main-content -->
</div>
<!-- load JS -->
<script src="js/jquery-3.2.1.slim.min.js"></script> <!-- https://jquery.com/ -->
<script src="slick/slick.min.js"></script> <!-- http://kenwheeler.github.io/slick/ -->
<script src="js/anime.min.js"></script> <!-- http://animejs.com/ -->
<script src="js/main.js"></script>
<script src="myscripts.js"></script>
<script>
function setupFooter() {
var pageHeight = $('.tm-site-header-container').height() + $('footer').height() + 100;
var main = $('.tm-main-content');
if($(window).height() < pageHeight) {
main.addClass('tm-footer-relative');
}
else {
main.removeClass('tm-footer-relative');
}
}
/* DOM is ready
------------------------------------------------*/
$(function(){
setupFooter();
$(window).resize(function(){
setupFooter();
});
$('.tm-current-year').text(new Date().getFullYear()); // Update year in copyright
});
</script>
</body>
</html>