這是一個現代化、響應式的個人履歷網站,適合部署到 GitHub Pages。
- 📱 完全響應式設計,支援桌面、平板和手機
- 🎨 現代化漸層設計和動畫效果
- 🖨️ 友善的列印樣式
- ⚡ 輕量級,純 HTML/CSS/JavaScript
- 🚀 適合 GitHub Pages 部署
- 📧 包含聯絡資訊和社群媒體連結
- 💼 專業的作品展示區域
- 🏆 技能視覺化展示
Resume/
├── index.html # 主要 HTML 檔案
├── styles.css # CSS 樣式檔案
├── script.js # JavaScript 功能
└── README.md # 說明文件
-
個人化內容:
- 在
index.html中更新您的個人資訊 - 替換照片 URL
- 修改聯絡資訊、工作經驗、教育背景等
- 在
-
自訂樣式:
- 在
styles.css中調整顏色主題 - 修改 CSS 變數來改變整體外觀
- 在
-
添加功能:
- 在
script.js中添加更多互動功能 - 啟用或停用特定功能(如主題切換)
- 在
- 將所有檔案上傳到您的 GitHub repository
- 在 repository 設定中啟用 GitHub Pages
- 選擇部署分支(通常是
main或gh-pages) - 您的網站將在
https://yourusername.github.io/repository-name可以訪問
在 styles.css 檔案開頭的 :root 區塊中修改 CSS 變數:
:root {
--primary-color: #4f46e5; /* 主要顏色 */
--secondary-color: #6366f1; /* 次要顏色 */
--accent-color: #8b5cf6; /* 強調顏色 */
/* ... 其他顏色變數 */
}- 在
index.html的.main-content中添加新的<section> - 在
styles.css中添加對應的樣式 - 如需要,在
script.js中添加互動功能
在 index.html 的 <head> 區塊中更改 Google Fonts 連結,然後在 CSS 中更新 font-family。
- Chrome (推薦)
- Firefox
- Safari
- Edge
- 移動端瀏覽器
此專案採用 MIT 授權,您可以自由使用和修改。
- HTML5
- CSS3 (Grid, Flexbox, 自訂屬性)
- Vanilla JavaScript (ES6+)
- Font Awesome 圖示
- Google Fonts
- 使用 CSS Grid 和 Flexbox 進行佈局
- 最小化 HTTP 請求
- 優化圖片大小
- 使用現代 CSS 特性減少 JavaScript 依賴
定期更新內容並檢查:
- 連結的有效性
- 瀏覽器相容性
- 行動裝置顯示效果
- 載入速度