個人網站 (舊)

# 專案

展示專案、文章與經歷的網站

個人網站 (舊)

執行期間:2021/08 ~ 2023/07

身分:個人

成員:1 人,我自己

產出:網站

技能:

  • 網站前端 JavaScript, SCSS, HTML
  • 版本控制 Git, GitHub
  • 部署 GitHub Pages
  • 使用者體驗 FigJam

背景說明

我為自己設計並開發的個人網站。


專案開發流程

設計概要

列出基本設定、尋找參考資料。

背景研究

觀察別人的個人網站或公司網站有出現的頁面內容,以及每個頁面都有的共用區塊。

使用者故事

寫下使用者的需求,例如瀏覽作品說明與自我介紹。

功能地圖

列出需要準備的各項資料與功能。

功能流程圖

以流程圖表示頁面、區塊和動作的操作流程。

介面流程圖

列出所有頁面的編號與名稱,以及各頁面之間的連結。

內容準備

根據功能地圖收集與整理所有資料,並製作各專案的預覽圖和履歷的 PDF 檔案。

線框圖

分別繪製各頁面與區塊的線框圖,包括手機版與電腦版。


開發

SCSS 分為六個檔案,依序是預設、色彩、文字、按鈕、區塊、工具。

利用變數來管理會重複使用的數值。

利用 @mixin 設定文字的字級、字重、行高。

以 720px 和 1080px 為 RWD 的斷點。

部署

利用 GitHub Pages 功能部署網站。

相關連結