因為一直找不到工作(...汗)所以來整理作品
基本上是參考Let's Write做的Demo
在頁面下方有作品導覽以及Github連結
使用工具：
1.Github Page
2.Google Tag Manager
步驟：
1.申請GTM並取得GTM代碼
2.將GTM代碼插入所有專案的index.html中，並將所有專案上傳github，開啟page頁面
3.另外做一個myNavbat的github page，將所有專案連結放進去，可參考我做的
4.用GTM的「自訂HTML」功能將myNavbar和github連結塞進所有專案中，參考代碼如下：
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<div class="myNav"></div>
<div class="github">
<a class="githubHerf">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
</div>
<script>
var githubHerf=document.querySelector(".githubHerf")
githubHerf.setAttribute("href","https://github.com/superyngo"+{{Page Path}})
var myNav2 = document.querySelector(".myNav");
var iframe2 = document.createElement("iframe");
iframe2.setAttribute("src", "https://superyngo.github.io/myNavbar/");
iframe2.setAttribute("width", "100%");
iframe2.setAttribute("frameborder", "0");
myNav2.appendChild(iframe2)
</script>
<style>
body{
background-color: #fff0df;
}
.github {
position: fixed;
left: 0;
bottom: 0;
display: flex;
width: 100px;
height: 100px;
cursor: pointer;
z-index: 2;
:hover {
position: absolute;
left: 10px;
bottom: 5px;
font-size: 3rem;
color: #fff;
scale: 0.9;
}
}
.github::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 100px 0 0 100px;
border-color: transparent transparent transparent #6e5494;
}
.github .fa {
position: absolute;
left: 10px;
bottom: 5px;
font-size: 3rem;
color: #fff;
}
@media screen and (max-width: 600px) {
:root {
font-size: 12px;
}
.github {
width: 70px;
height: 70px;
}
.github::before {
border-width: 70px 0 0 70px;
}
.github .fa {
left: 8px;
bottom: 4px;
font-size: 2rem;
}
}
</style>注意事項；
1.不知為何我GTM塞iframe一直不給過，所以用append的。
2.iframe內的超連結預設會在iframe內開啟，要避免只要在myNavbar的head裡加上<base target="_parent" />就可以了。
3當初做這些作業時完全沒考慮theme和RWD，花了一些時間但又不想花太多時間結果就勉勉強強用手機也都能開。
閒聊：
前陣子都在codeSignal上刷題，看別人解法真的很神，學很多...
有沒有北部公司缺人啊...投履歷都沒人回..中年轉行真的不行嗎...
熱門文章
中年轉行應該不成問題，滿多公司就是缺人，應該沒那麼在乎年齡
按照我之前提的方式，履歷表列出那些作業，應該會引起不少公司的興趣才對
https://codelove.tw/@howtomakeaturn/post/k31dYx
104、yourator、甚至臉書的 Front-end 社團，再留意一下，找找看？
https://www.facebook.com/groups/521085554595481