ALPHA Camp 履歷網頁作業：內容解析
總結
記錄在 2021 年 ALPHA Camp 學期一、三月班第三週履歷網頁作業使用到的技術、思路與開發流程。
成品
- 純網頁展示版：點我
- codepen 展示：
See the Pen S4 A14 為客戶打造履歷網頁 by Charlie (@Charlie7779) on CodePen.
版本與環境
Google Chrome: 89.0.4389.90 (Official Build) (64-bit)
os: Windows_NT 10.0.18363 win32 x64流程
- 雖然課程還沒有要求成品需有 RDW 效果，但因為已經知道原理、也在之前做過的微型專案實作過 RDW，故本次作業要求自己做出（至少）手機與桌機兩種版面
- 還沒有實際使用純 CSS 做出一鍵切換「亮色／暗色模式」的效果，但已經知道原理，決定在本次作業中實踐此功能
- 將視覺動線統一為 F 字形（由上到下、從左到右）。且因網站內容基本上都是英語，橫向三欄平分畫面寬度後，寬度可能不足、導致內文頻繁換行，故不採用示範網站使用的三欄並排排版
- 對自己配色沒自信，決定直接到課程中提到的 Adobe Color: EXPLORE 搜尋以紅色為主的色票。最後挑了藍＋紅（配合作業用照片的印象）且彩度較低的組合：Cadmium Red Deep
- 使用 Figma 勾勒出wireframe，桌機的版面配置與手機橫放後一樣，故沒有特別畫出桌機的 wireframe
HTML 架構
- 照片、姓名與連結組合放在
<header>區塊 - 自我介紹文字、技能與工作經驗放在
<main>區塊 - 底部
<footer>區塊 - 在所有的裝置上，
<footer>都會在畫面的最底部，但手機直持或橫持會影響<header>與<main>要垂直還是水平排列，故外加了一個<div class="container">來打包<header>與<main>，並使用flex-direction來控制<header>與<main>在不同裝置上的排列方向 - 為配合 CSS 選取器的邏輯，控制「亮色／暗色模式」的
<input>、<label>組放在<div class="container">上方（<input>、<label>組的階層與<div class="container">一致）
最終<body>內容如下：
CSS 內容解析
通用樣式
- 字體
- 因作業會上傳到 codepen，故不採取 self-host，而是直接
@import由 Google 提供的字體服務 - 履歷內容文字多，並想呈現較專業的感覺，故挑選有襯線的
Newsreader作為主字體Newsreader的說明也提到字體本身適合應用在需要閱讀的情境：primarily intended for continuous on-screen reading in content-rich environments.
- 姓名的部分挑選
Kristi，想營造手動簽名的視覺效果
- 因作業會上傳到 codepen，故不採取 self-host，而是直接
- 全域設定（
*）- 手動重設
margin與padding為0、box-sizing設定為border-box，避免干擾後續排版作業 - 考量到後續可能會更改用色，選擇使用關鍵字（
var()）來控制顏色
- 手動重設
<div class="container">：一般狀態下使用淺色背景（var(--light)）搭配深色文字（var(--dark)）header, main：使用padding將內容往內推移，避免文字過於靠近邊緣，降低易讀性main：除了padding之外，加上max-width限制文字不會因為螢幕較寬而延伸到底h2：因有多個h2出現在網頁上，且樣式不會配合畫面改變尺寸或margin、padding等，故放在通用樣式區域宣告
header
-
header與.avatar：為了在各種版面下都能簡單的處理水平置中，直接使用display: flex;搭配flex-direction: column;與align-items: center;來做讓header與.avatar下所有的內容都呈現水平置中 -
img：與 wireframe 的設計不同，最後決定拿掉履歷照片的border-radius: 50%;，因為最終成品一眼望過去只有照片是圓形反而覺得有點突兀 -
h1：加上transform: rotate(-5deg);讓文字稍微向右上角抬起，增加一點活躍感；並配合margin-bottom: 8px;來製造空間，稍稍推開下方的連結組合- 最終並沒有實作 wireframe 中「讓姓名重疊到照片上」的排版，因目前只想到可以使用
position: absolute;來控制，但這樣會難以處理 RWD 下欄位寬度浮動時的水平置中問題，故暫時放棄此設計 - 更新：將
<h1>包在一層<div>內，設定<div>為position: absolute;，然後加上display: flex;來控制<h1>的水平位置即可
See the Pen S4 A14 為客戶打造履歷網頁 bonus track by Charlie (@Charlie7779) on CodePen.
- 照片下方的半透明底色使用兩層背景實現：第一層背景是`url("相片路徑")`、第二層背景是使用`linear-gradient()`繪製的半透明區塊 - 最終並沒有實作 wireframe 中「讓姓名重疊到照片上」的排版，因目前只想到可以使用
-
header ul：使用list-style: none;移除預設的圓點樣式；加上display: flex;讓連結們水平排列；使用header ul選取器是因為整份履歷中還有其他部位使用到ul元件，不加上header會導致其他區塊的ul排版走山 -
header ul li：加上margin: 16px;來讓按鈕之間保持距離- 更新修正：因為
header ul已經是 flex container，其中包含的<li>元素會成為 flex item，而 flex item 有 block 的特性，故不需要再對header ul li加上display: inline-block;來撐開 Y 軸（高度）
- 更新修正：因為
-
header ul li:last-child：display: none;讓連結群組最尾端的印表機圖示預設為不顯示，再往下的 CSS 設定會配合@media讓印表機圖示在適當的裝置上呈現出來 -
a：因為有三種顏色狀態，故加上transition: 0.3s;讓換色過程有 0.3 秒的漸變時間 -
a:link、a:visited、a:hover、a:active：剛好可以使用色票中的主、輔與亮點顏色；樣式撰寫的順序為 LVHA 的理由參考之前記錄過的CSS Specificity 相關筆記
main
main section：首先對<main>包含的三個<section>加上margin-bottom: 16px;，製造區塊之間的距離.about p, .skills p, .experiences ul li：一口氣撐開三個區塊的文字與清單排版的行高，偷懶一點可寫成main p, main ul li，不過，因為想維持樣式表內容撰寫的一致性，最後還是選擇統一使用「.class HTML 元素」的寫法.skills span：在技能區塊中使用<span>包裹住想要上色的文字.experiences div：工作經驗區塊中總計有三項子項目，因為只是要處理排版，沒有到語意上需要使用<section>的程度，故使用<div>將三個項目各自包起來，並給予margin-bottom: 8px;撐開項目之間的距離.experiences p：工作經驗中「任職公司」的部分使用<p>來處理（職稱與負責項目分別屬於<span>與<li>），稍微放大字體，並套用主色、讓其凸顯於其他文字內容之上.experiences span：職稱部分使用display: inline-block;搭配padding: 2px 8px;來撐開<span>的 Y 軸高，做成徽章樣式；另外、因為每一項工作經驗只有一個職稱，故使用margin: 4px 0px;移除 X 軸空間，但保持與上下 HTML 元素的距離.experiences ul li：使用"\21A0 "設定清單項目的樣式，並透過inside讓清單項目不外擴
footer
<footer>是 block 物件，直接使用height撐開高度後，配合display: flex;、justify-content: center;與align-items: center;讓裡面的文字 XY 軸置中；並使用background-color: var(--primary);填色
手機橫持的排版
min-width: 568px是 iPhone SE 橫持的寬度，以此為基準，開始處理第二種版面
.container：使用display: flex;讓<header>與<main>水平排列，並總高度設定為「螢幕視高（100vh）扣掉<footer>的 36px」，把<footer>固定在畫面最底header與main則各佔據 4 成與 6 成的寬度，並使用overflow: auto;在「內容超出容器高度後，出現捲軸，可透過捲動來瀏覽超出容器高度的內容」h1：稍微縮小字體，避免姓名過大造成版面在視覺上的不平衡
平板的排版
min-width: 768px是 iPad 直立的寬度，以此為基準，開始處理第三種版面
將header與main的寬度比例改為 3 比 7；並因為顯示區域變大，所以稍微增加內容內推的距離，padding提高為 32px、h1稍稍放大（4rem）
桌上裝置顯示印表機圖示
設定min-width: 768px以上後要顯示連結群組最尾端的印表機圖示，小缺點是這個 break point 會讓橫持的 iPad Pro 也看得到印表機……（ ˘･з･）
亮色／暗色模式
簡短說明如何使用純 CSS 做出「亮色／暗色模式」切換的效果：
- 使用
<input type="checkbox">搭配<label>並使用position: fixed;固定位置，<input>放在可視畫面之外，<label>留在畫面右下角（小版面）或右上方（中型以上版面）讓使用者點擊 <label>被點擊後，使用 CSS 選取器:checked搭配filter: invert(100%);來為畫面上的顏色套上負片效果- 關於
filter: invert(100%);的視覺效果，可參考之前做過的微型專案：CSS filter Property
較詳細說明如下：
#dark, #darkLabel：使用position: fixed;固定<input type="checkbox" id="dark">與<label for="dark" id="darkLabel">的位置#dark：幫<label>和<input>定位時，這兩項元素的位置是參考<body>來偏移，所以將<input>的位置設定為top: -2rem;、left: -2rem;來把核取方塊推到視覺範圍之外- 入門可參考 YouTube 影片：金魚都能懂網頁設計入門 : Fixed 定位
- MDN 對
fixed的說明：It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none, in which case that ancestor behaves as the containing block. 而因為<label>和<input>之上就是<body>了，所以在這份作業中不用擔心其他元素會被拿來當作定位參考的問題
#darkLabel：使用opacity: 0.8;讓按鈕在視覺上不要那麼厚重；加上z-index: 1;確保按鈕不會被其他元素覆蓋掉；而因為在亮色／暗色之間切換時會改變按鈕顏色，故補上transition: 0.3s;讓顏色轉換的過程不要太突兀；而display: flex;、justify-content: center;與align-items: center;讓按鈕中的圖示 XY 軸置中#darkLabel svg：按鈕中的圖示用fill: var(--light);來填入顏色#dark:checked~#darkLabel：在<input type="checkbox" id="dark">被勾選後，<label for="dark" id="darkLabel">按鈕本身的顏色要變淺（background-color: var(--medium);），並按鈕陰影因為整體畫面的背景顏色變深，所以也要改的亮一點（box-shadow: 0px 0px 8px var(--light);）#dark:checked~#darkLabel svg：原理同上，按鈕本身顏色變淺的話，按鈕內的圖示顏色要加深（fill: var(--dark);）#dark:checked~#darkLabel svg path：用選取器抓取<svg>圖示裡面的<path>元素，修改其d值讓圖示形狀從月亮變為太陽#dark:checked~.container, #dark:checked~footer：使用filter: invert(100%);來讓.container與footer元素的顏色負片化，而hue-rotate(180deg)讓顏色在負片化之後讓色相「轉回」原點#dark:checked~.container header .avatar img, #dark:checked~footer p span：把「不要負片」的元素選取起來，套用filter: hue-rotate(-180deg) invert(100%);把顏色負片回去（抵銷掉負片效果）- 上述 CSS 原始碼第 51 行開始：使用
@media讓切換「亮色／暗色模式」的按鈕在手機橫持以上的版面停留在畫面右上方（top: 0;與right: 60px;），並修改width與height讓按鈕變成窄長方形