Portfolio - Ancient Book In Mythology
山經天懸雲漢淒垂
瓊島廣寒螭蟾現蹤
計畫 / 核心目標
</>
至今為止，包含放入作品集中的練習作品，都是為了北經殘卷的誕生而存在。
這是我的第一個完全創作網頁，所有網頁語言為我的繪圖創作服務。為了不向技術妥協，我跟著Youtube影片練習許多不同的小計畫，也從Stackoverflow尋找能解決困難的解答。或許在語言的使用上仍不夠成熟完美，但是靠自己尋找解決問題的方法及經驗，是我在製作此作品集中，獲得最珍貴的寶藏。
Figma
製作個人作品網頁為主要目標，以強烈視覺統一各種視覺風格迥異作品。所有圖像透過Figma鋼筆工具繪製，藉此熟悉Figma繪圖功能。
十車書計從始
阡陌欲行由此
作品集計畫從蒐集資料開始。
網路上有很多模板，像是Bootstrap直接套用、也有webflow這類不需寫程式的網站提供服務。
Figma社群也許多的模板分享，直接在軟體內製作作品集與流程模擬，不做成完整網頁的形式呈現。
使用模版若不吸收深化，加以設計成獨具風格的設計，就流於形式、空洞而沒有靈魂。
我發現簡易的排版方式，具體清楚的簡介自己並呈現作品，是傑出範例的共同點。
Figma社群也許多的模板分享，直接在軟體內製作作品集與動態原型，不做成完整網頁的形式呈現。
我發現簡易的排版方式，具體清楚的簡介自己並呈現作品，是傑出範例的共同點。
紙間斷柬墨畫天河珠繪
極光捻絲牽織霞雲星彗
我想跳脫流於形式的作品集與西式風格框架，以我自己喜愛的風格，創造出足以展現自己設計美感能力的作品。
我很喜歡古代神話元素，在思考視覺風格時，最先想到的是山海經裡的燭龍。
現代科學研究山海經，燭龍被認為是北歐極光的神化現象，因此我將極光轉化與星河長夜作為視覺風格。
雲海、山跡是古代墨畫中不可或缺的部分，我用自己視覺風格，以夜幕成色、霞光捻絲織就。
網路上有許多山海神獸圖，如同作品集模板，它們都不是我。因此我重新繪製。(圖像來自《觀山海》與網路資源。)
跳脫形式空洞的排列，以卷軸滑動設計，金線菱梭赤絨、檀木為骨，與星夜相襯。
標題以墨漬暈染，朱砂點綴，文字同古文縱向右書，使視覺風格一致。
技能說明以三足金烏、廣寒玉蟾融匯於紫微星陣，將技能名繪成星符。(星圖詳見下方說明)
設計淵源至此渠成，星河長夜為基、雲海山相為輔、神獸綴飾章節、卷軸入制。燭龍載於大荒北經，故作品集以北經為名，是謂- 北經殘卷。
現代科學研究山海經，燭龍被認為是北歐極光的神化現象，因此我將極光轉化與星河長夜作為視覺風格。
網路上有許多山海神獸圖，如同作品集模板，它們都不是我。因此我重新繪製。(圖像來自《觀山海》與網路資源。)
標題以墨漬暈染，朱砂點綴，文字同古文縱向右書，使視覺風格一致。
設計淵源至此渠成，星河長夜為基、雲海山相為輔、神獸綴飾章節、卷軸入制。燭龍載於大荒北經，故作品集以北經為名，是謂- 北經殘卷。
萬卷倉頡砌玉宇
粼粼珠璣衍蜃息
為了完成目標，我跟著影片練習許多不同的小計畫，一點一滴的完成網頁。
為使首頁雲海有動態層次，在youtube 學習Parallax Scrolling Effect 的寫法。
圖片響應瀏覽器和螢幕縮放，透過沙漠旅遊首頁，學習背景圖片位移控制。
大量背景圖檔過大，造成網頁不易讀取，縮放時也有模糊情況，我找了許多壓縮或轉檔方法，並不能改善。
在製作第二作品集-羽衣悔換，無意間學會用程式語言換置<svg>顏色及尺寸。
故將部分北經殘卷圖片換成<svg>程式，減少大圖檔案，同時解決圖像縮放的模糊問題。
加入Loading畫面，彌補等待網頁下載時間。
引入第三方程式Swiper(swiperjs.com)呈現卷軸滑動更換。
為方便平板與手持裝置閱讀，響應各式裝置螢幕。
圖片響應瀏覽器和螢幕縮放，透過沙漠旅遊首頁，學習背景圖片位移控制。
在製作第二作品集-羽衣悔換，無意間學會用程式語言換置<svg>顏色及尺寸。
加入Loading畫面，彌補等待網頁下載時間。
為方便平板與手持裝置閱讀，響應各式裝置螢幕。
紫微卷開星河入陣
三足烏飛瑤宮蟾躍
技能說明與星陣圖融合過程中，我遇上許多困難，曾數度想放棄計畫。
技能說明的呈現很多: %、星評、水準形容詞，優缺點眾說紛紜，我只覺得它們千篇一律。
我參考陰陽家陣法、紫微星圖、魔法陣、黃道十二宮，將技能名稱畫成星符。
古代人類崇拜光，日月在東方、西方的玄學、理學裡皆為重要象徵，我繪製三足金烏、廣寒玉蟾呈現。
編寫程式語言時，我希望做點擊按鈕後出現文字內容，卻遇上了很大的阻礙，幾乎要放棄。
第一個困難是:hover。點擊元素後，該元素無法刪除:hover響應，我找了許多網頁卻不得解法。
換角度思考解決問題，改為點擊後禁用該技能的pointer-events。
第二個困難是陰影效果。為指引觀看者明白目前停在哪一個星符，以星符光圈定位，但是:hover禁用後無法維持。
在練習小計劃時，學習到::before和::after應用，改為將陰影拆分圖層寫入，以利配合JS調用。
第三個困難是我遇到的最大阻礙，我為此改變HTML多次...最後才發現closest()抓不到<p>、也難以配合向下抓取。
苦惱許久才找到實用好操作的.parentNode和.children[ ]，並修改HTML配合JS。
第四個困難，解決星陣圖因螢幕縮小被裁切，尋找解法時發現w3schools教學是舊版。
我不知道更新後的addEventListenter中，” event ” 該使用什麼。好在stackoverflow有大神解答。
技能說明與星陣圖融匯完成，並加入響應式設計。
我參考陰陽家陣法、紫微星圖、魔法陣、黃道十二宮，將技能名稱畫成星符。
編寫程式語言時，我希望做點擊按鈕後出現文字內容，卻遇上了很大的阻礙，幾乎要放棄。
換角度思考解決問題，改為點擊後禁用該技能的pointer-events。
在練習小計劃時，學習到::before和::after應用，改為將陰影拆分圖層寫入，以利配合JS調用。
苦惱許久才找到實用好操作的.parentNode和.children[ ]，並修改HTML配合JS。
我不知道更新後的addEventListenter中，” event ” 該使用什麼。好在stackoverflow有大神解答。
檐前卷展見微瑕
計矢倉頡改朱顏
朋友第一次操作後，我發現許多誤區。為方便使用者，做出改變。
Loading時，金烏也在下載而沒出現造成黑幕。
加入進度條，在沒有金烏的況下，使用者也能明白網頁在Loading。
觸控操作下，作品展示的捲軸很難滑動，Swiper預設的點點很小很難點。
結合不同的Swiper Demos，修改Thumbs，使用者在觸控操作下能輕易點選觀看不同卷軸。
原本覺得星陣圖的提示句很破壞氣氛，朋友試用後，我發覺提示非常重要，它快速有效的指引使用者操作並養成習慣動作。
在手機上使用時，習慣將手指放在螢幕上的人，容易喚醒圖片的長按動作反饋。
用CSS與JS阻止滑鼠右鍵發生。
Nav選項在:hover時，觸發其他選項的透明度問題。
Nav修改後:hover正常反應。
Nav選單在手機閱讀不易，關閉按鈕錯位與難觸及。
修改透明度及按鈕位置，便手持裝置使用者操作。
圖片在點擊當下出現藍色閃爍，” outline: none; ”明顯無效。
換角度思考，改變背景顏色解決藍色背景問題。
加入進度條，在沒有金烏的況下，使用者也能明白網頁在Loading。
結合不同的Swiper Demos，修改Thumbs，使用者在觸控操作下能輕易點選觀看不同卷軸。
在手機上使用時，習慣將手指放在螢幕上的人，容易喚醒圖片的長按動作反饋。
Nav選項在:hover時，觸發其他選項的透明度問題。
Nav選單在手機閱讀不易，關閉按鈕錯位與難觸及。
圖片在點擊當下出現藍色閃爍，” outline: none; ”明顯無效。
北經至此結尾卷
謝君一覽鏡花月
北經殘卷於此告一段落。從無到有的這過程中，我遇上許多困難與挫折，也盡最大努力一一克服，並且堅持到底。當然，在程式語言使用上不夠精練，也一定有更好的寫法可以使北經殘卷更加完善。我很喜歡這部作品，希望你也喜歡，謝謝。