在歷經六個月的個人網頁開發後，我在2022年10月2日完成了我的個人網站設計，也許沒有很美麗的頁面，沒有酷炫的動畫技巧，但整個網站呈現的樣貌能夠代表我內心想呈現的氣息，而且從設計到開發都是我自己規劃的，意義非凡了。

本篇我想分享自己喜歡上網頁設計的過程、經營網站的初心、本網站的理念以及當初設計這個網站的各個小設計。

埋下想自己設計自己個人網頁的過程

我記得我的第一篇文章誕生在無名小站，小時候就很喜歡在筆記本上寫日記，還有寫下一些偶而突然從腦中冒出的一些喜歡的事物。當時我把高二的生活分享在無名小站上，然後傳給我的同學們看，紀錄那些高二發生很搞笑的事情。

高中，我迷上了日本跟日文，所以當時我為了想學日文，我去找了日本的部落格網頁服務，然後一邊練習日文，一邊撰寫文章。

FC2 是當時使用的日本部落格網站，我一時找不到我以前的FC2網站，但我記得我當時用的網站還存在，當時覺得FC2的主題很可愛，於是燃起了我想裝飾自己網站興趣，甚至還找一些別人做好的小工具放在Sidebar上，然後當時學著調CSS，覺得很有趣。

然後過不久，我發現Ameba的網站更美更喜歡，但當時因為Ameba的日文用的更艱深我看不懂，所以只能用他最簡單的版面，也許就是使用這兩個網站的契機，讓我對前端設計產生興趣。

所以當時大學在面試時，也是直接表明自己很喜歡前端網頁設計，只是後來順利進入大學後，因為自己定心不夠，都在玩耍，沒有在學習。

2016年進了碩士班，為了記錄碩士的功課跟知識，我開了Blogger來紀錄上課的筆記，但由於當時不會裝飾Blogger，覺得自己的網站看起來很醜，直到2017年發現wordpress，才決定把網頁搬到wordpress，這是我的wordpress網頁。

但至始至終我內心想要自己設計網站的小火苗仍舊存在，他一直在醞釀著。

2019年1月，在之前的公司同事建議下，我搬到了Hugo，但由於自己當時畢業後就往後端深耕，所以前端的技術我仍舊只停在淺層，只能使用Hugo其他開發者設計的主題暫時當作我的部落格主題，然後自己嘗試做些小更改。

hugo-future-imperfect-blog是我當時folk原作者的 Hugo Future Imperfect 然後來做一些更改，是我Hugo上一個使用的主題。

一直到今年(2022年4月)，我可能有了前一年(2021年)用半年開發Miri的經驗，加上也找到工作了，我突然覺得

我好像可以來搞些東西？

於是，就在4月初的假日，我看了Nuxt.js框架的文件，npm install 終於開啟了長久以來我想開發自己的個人網站的大門。

經營網站的初心？

其實也沒什麼初心(喂～)，不過讓我堅持繼續寫文章的幾個點，是…

• 身為一個ENTP，我發現自己非常的健忘，幾乎不會記得以前發生的事，所以如果我的人生中遇到什麼特別的經歷，我都希望像寫日記般把他們記錄下來。

我早期(2017年)很多情感抒發的文章，在我目前看起來會覺得我當時到底在幹嘛？但當時確實都身處在很水深火熱的情況，現在回頭看反而覺得自己真的成長很多。

• 身為一個軟體工程師，我發現大家都會分享技術跟自己卡的Bug解法，所以我也會跟隨這樣的精神，盡量分享技術文章。

• 透過撰寫文章記錄自己內心成長的過程。

有幾篇愛情的文章是我的網站裡瀏覽量最高，身為以前是一個焦慮依戀情人，我歷經過四段戀情，從剛開始很失控的狀態一直到現在貌似變成了迴避型(考)，從剛開始會情緒勒索會崩潰會大哭，然後追朔到原生家庭的議題，許多許多跟自己內心成長的議題，不只是愛情，還有其他議題，我都會去反省，然後把這些反省的過程跟結論寫下來。

• 我想成為一個很酷的人

研究所以前，也許是因為國高中都被排擠，讓我變得很唯唯諾諾，溫溫和和，不太敢太突出，不太敢表現自己，沒什麼個性的感覺，沒什麼想法，大部分也都跟著別人的思維走，然後隱藏自己的想法，沒什麼主見。

然而我2017年11月去了一趟美國兩週的企業交換旅行，帶給我的震撼感，讓我覺得原來我可以自由的做自己，變成我想要的樣子，所以從那個時候開始，我覺得經營一個自己的網站這件事酷斃了，我也想成為這樣的人，在上面分享故事，然後分享我的專業跟興趣，可以活出自我，做自己。

• 我慢慢的發現，我撰寫的文章可以幫助到別人

這也是一個在我開始寫文章之前沒有想太多的點，就是當我還是很隨意的想寫什麼就寫什麼，但是要認真撰寫，我漸漸的發現會有人寄信給我，告訴我，我的文章讓他們感覺到很有共鳴，或者激勵他們幫助到他們。

這點讓我非常的開心，到現在仍然是一個很重要的點，主要推動我繼續撰寫文章的其中一個動力。

網站的設計？

我覺得至從我去美國一趟後，我整個人的想法都改變了，我很喜歡那種人可以自由做自己的感覺，喜歡人很正向很陽光很激勵的感覺，促使我勇敢去嘗試一些不同的經驗跟新奇的東西。後來某次去英國跟冰島，我也很喜歡那邊的氛圍，很希望自己能變得勇敢嘗試、正向跟帶給人激勵的人。

所以我一直都很希望，我的網站也能呈現一種很自由、很正向、很激勵、很勇敢嘗試、勇敢表達做自己的感覺。不希望大家因為害怕別人的眼光，因為別人三言兩語的勸退，因為社會價值灌輸的概念而掩蓋自己想冒險的心，想成為自己的心，想表達自我的心。

就像我前幾天晚上走在路上，聽著百靈果的Podcast，然後突然想到我之所以現在會這麼勇敢挑戰跟嘗試，是因為當時去了一趟美國接觸到當地的人，帶給我很震撼的改觀，因為這個改觀讓我往後的人生跟先前的人生全然不同。

所以，我當時覺得，有的時候人們擁有同樣的生活，在一個同溫層或舒適圈，秉持著相似的想法，而如果我的個人網站能夠傳遞一些激勵的故事，是不是也能給人勇氣，鼓勵去勇敢嘗試或者改變思維去面對未來，創造出不同的人生故事呢？

這是我的網站整體想要傳達給人的理念。

剛開始我只是希望營造一種我面對逆境不害怕繼續往前的樣子，所以一開始的設計，我決定把我在Wordpress的網頁設計作沿用，花了大概一週還是兩週左右的時間把把那個照片跟上面黑色的Navbar複製下來，但仍舊沒辦法呈現我想要的樣子。

我花了一週左右的時間，看了很多不同的網頁設計，收集自己喜歡的設計，最後在測驗紙上畫下內心中理想的完成圖。

Header & Navbar

在一開始，我參考了我的Wordpress網站設計，但背景圖片有點暗色，然後後來又把Navbar調成白色，放在中間，雖然看起來很…就是…很正常的Header 圖片 + Navbar，但感覺這個Header沒有呈現出想呈現的樣子。

我很希望自己的網站一進去就有一張很大的照片Cover，然後能夠帶出整個網站充滿生氣勃勃且激勵人心的樣貌。

後來我參考了一個主題Demo的網站發想。

無論是字的配色跟字型跟圖片的搭配都很美，有帶出一種冬天雪季的氛圍。再加上Navbar跟其他網站很不同，沒有一條很明顯的Navbar，而是完美巧妙融合在圖片，因此，Header的設計沿用了這個網站。

Motto 標語/ Slogan

大家應該有發現，我幾乎在每頁都有一個Section是放上一小段文字。這是我特別為我的網站而設計的，我記得之前好像在看某些很激勵人心的明星網站時，時不時會在網頁中間出現一些標語，像是:

我們帶給人歡樂，期望能將這份歡樂分享至地球的每一處。

類似這樣的Slogan標語能搭配整個網站的美觀設計跟內容，讓觀看者的感受能有更深一層的撼動，尤其是跟激勵相關的內容，僅僅一兩句話，能夠將整個網站的內容往上拔升的感覺，能更直接的表達這一個網站或者這一個頁面想要傳遞給觀看者的訊息，更能吸引觀看者繼續瀏覽跟深入了解這個網站。

也是我這次個人最滿意最喜歡的設計。

The Boxes in Index Page

首頁下拉的主題式 Grid 設計，應該也令人蠻印象深刻的吧？現在的網頁設計好像蠻少使用這樣的設計了。

我的網站大量使用到方格 Grid 的概念，因為我五年前當時很喜歡一個日本的網站，他就是採用方格的設計，檔滑鼠移動到方格時，該方格會有特效，現在那個網頁已經不在了，只是在當時埋下了我很想要設計方格在網頁裡。

而這部分的排版參考是參考一個日本的部落格網站服務 Ownd 其中一個主題。

這樣的排版方式我自己覺得很像線上雜誌的風味，讀者可以根據自己有興趣的主題點進連結觀看內容，而這樣獨特的設計也能讓我把我主要想要推給大眾或者主打的一些內容放在置頂。

同樣也是我覺得很滿意也很有特色的設計。

Blog Page

部落格這頁跟其他頁的設計很不同，他同時融合了2~3個網站的參考。

主頁的Header分成兩半邊，而照片放我自己在寫字的自拍，可以呈現出很認真在思考要撰寫什麼文章的樣貌，剛好呼應這一頁是在呈現部落格的文章。

這個部分我本來很想要完全抄我之前在 Ownd建立的部落格主題

所以Header確實是參考了Ownd的網站設計，而我目前部落格頁面下方其實左半邊的部分也是參考Ownd主題的設計，只是在這我一樣融合了另一個參考。因為，我實際上完全參考了Ownd的設計，但卻發現中間文章的呈現有點單調，而當時我更喜歡另外一個Notumn部落格頁面的排版，

所以部落格中間像是選轉木馬跟Profile的部分都參考了Notumn的排版設計。但滑到下方後就將Ownd的方格部分娜來使用。

我覺得目前方格的部分就是文章的標題跟描述會被切掉，不太好知道該文章的完整標題，但由於我實在是很愛Ownd的方格文章排版設計，所以對於要不要更改部落格文章的呈現，還在糾結掙扎當中。

Portfolio

作品集那頁最近有做更改

Slogan標語直接放在進入主題上面，想要表達 我就是喜歡學習鑽研技術，喜歡玩耍這些技術，然後會有一些有趣的創意，想要實現。

進入到專案跟產品的排版設計，這邊是我近期做更改的，本來他跟About的設計一樣是四格，但我發現我未來會自己創造跟開發更多產品或專案，格子會越來越多，所以我決定參考 Omi 偶像的官方網站，然後對作品集的內容呈現設計做更改。

對比一下

再來是作品Timeline的部分，也是其中一個我覺得很有設計感的地方，這個Timeline的設計，我曾經在碩士班推甄的文件上使用過，他不正式，可是很有創意的思想，最開始有這個想法應該是在MIT的History網頁上看到的，這個網站應該已經移除了。

About

關於我的頁面有一個很有趣的設計長這樣

在進入介紹我之前，有一個這樣的主題式連結安插在中間，剛開始並沒有想這樣設計，但我後來發現每一頁如果Slogan都擺在同個地方好像也蠻單調的，在使用TailBlocks切版時，找到了這個元件，本來是想使用這個元件，左邊擺我的圖右邊寫一些關於我的介紹，畢竟是關於這個頁面嘛，放上我的照片跟描述再正常不過了。

但如果依照我當時想像的那樣設計，不知道為什麼內心總是覺得有點奇怪，所以在反覆腦洞大開後，居然就變成了上面那張左邊方格，右邊標語的設計，其實也蠻有趣的不是嗎？

這樣的設計就是方格主要是幾個關於我的一些額外連結補充，有興趣的人可以再點進去看。

Footer

最後是最下面的Footer設計，這草寫應該沒有人看得懂吧？

這個設計是有一次我在查網站看到某個女生的部落格最下面有類似這種英文草寫的個人簡介，當下覺得 天啊酷斃了，所以就想到可以把它放在我的Footer作為一個藝術形象的揮灑(?)

這段話的涵義是:

大家好，我是 Mina Yu，一名軟體工程師、部落客和多語言學習者。從7-9年前開始，我的夢想就是設計自己的個人網站，現在我實現了，我將網站名稱更改為@Mina Influence，想通過我的影響力來鼓勵人們。未來我會繼續實現更多的夢想。我只想告訴你，不管你的計劃看起來多麼艱難，多麼遙不可及，只要你開始去做，一切都會改變。

連這個草寫標語都埋藏了鼓勵激勵大家的力量哈哈。

Footer當初想要呈現一種白雪/下雪/冬季雪季的氛圍，當時其實是想擺圖片啦，擺下面這個下雪的照片

我想擺雪花照，中間一個方格模糊，然後寫上我的名字，但是我的前端技術沒這麼強，擺上去看起來十分悲劇，也不知道怎麼調比較好，所以在反覆思考下，後來還是想說先用文字跟顏色呈現就好。

最上面的Header是活潑陽光的樣貌，而下面則是以雪跟冬季來做結尾，形成很強烈的對比，其實我當初也是想要用這個網頁設計來呈現我這個人的裡跟外。

活潑陽光是我對外，或者人群裡，我很積極的在努力經營自己的生活，在努力挑戰自己的人生，然後想要自己努力影響到其他人，激勵其他人也勇敢邁出自己想要前進的那一步。

我很喜歡少女時代Jessica的一首歌 Wonderland，雪季不是死氣沈沈，我認為下雪/雪景更能呈現一種夢幻奇幻的世界感。當我在面對很多很煩躁的事情時，有時候我會短暫的躲在這個雪景的世界中，只有我一個人的世界，在雪中盡情遊玩，在木屋中有暖氣跟溫馨感好好的善待疲憊的自己。

Footer的雪很大一部分代表著我內心的深層，也許在內心深層我有一塊小天地，能夠讓我屏除雜音，很純真很認真的專心在我眼前我想要關注想要努力的事情上。

最後

網頁對我來說不只是網頁，在我這個年齡，我更想把網頁當作也是一種藝術品，你可以覺得網頁是一種工具是一種服務，但在這，網頁可以是表現我/表達我/呈現我的藝術品，我可以用網頁呈現想要表達的意境，想要傳遞給人們的訊息，埋下許多精心設計的小心思，用網頁來呈現我的個人風格。