在我看來，這篇文章是我昨天寫的。
然而，近四年過去了，事後看來，我可以自信地說，我早期在網頁設計方面的嘗試是，我們只能說不太出色。 我的舊網站看起來像是由 13 歲的孩子設計的，因為，好吧，它們是——是的，那個 13 歲的孩子就是我？ .
從那時起：
但在這段時間裡，我不知何故忽略了一個小細節——是的，你猜對了——更新我的網站。現在，16 歲，這篇評論：
真正開始擊中要害。
我花了很多時間在各種專案上工作，但沒有地方實際展示它們，因此沒有平台來打動潛在的招募人員。另外，如果你看看我的大多數項目的使用者介面，它仍然有點平庸。我需要一些東西來哇他們——所以幾天前，我決定全力以赴，重新設計和重建我的個人網站（或作品集，如果你願意的話）。
我以前的所有個人網站都是用普通的舊式 HTML、CSS 和 JavaScript 建立的。它簡單實用，但就像嘗試用微波爐做一頓美食一樣。另外，我真的很想展現我的 React 技能（說實話，這才是真正原因）。
所以，我選了 Next.js。為什麼？嗯，當時這似乎是一個不錯的選擇（事實證明也是如此），而且我已經擁有了豐富的經驗。
對於 CSS，我選擇了 Tailwind CSS（我的意思是，如果你在 2024 年不再使用它，你是真的嗎？？）。
在花了太多時間盯著我的舊網站之後，我認為淺色模式並不能解決問題。我想要一個巨大的改變，一些能夠產生真正影響力的事情。還有什麼比按下開關進入全暗模式更好的方法呢？這就像你的網站開始了惡棍弧線？ .
字體我選了Inter。在多次嘗試其他字體失敗後，尤其是在 Windows 裝置上，我的網站如下所示：
...與 macOS 上的情況相比，我決定停止使用 Tailwind CSS 提供的預設系統字體。
顯然，Mac 上的字體更出色。但由於預設的 San Francisco 字體是 Apple 獨有的，我需要一個替代字體。輸入 Inter——我見過的最令人驚嘆的字體之一，也是 San Francisco 的完美替代品。
看到了嗎？看看這個字體多漂亮？
對於主色，我選擇了紫色。沒有真正的原因，只是決定將我之前用過的靛藍混合起來。
我從英雄部分開始。簡單、簡單……喔等等……我有沒有提到有打字機效果？
之後我迅速開始思考下一部分。
重溫愛德華的評論：
愛德華·布斯克-尼爾森
•
我真的很喜歡該網站的使用者介面。還有很棒的顏色選擇！但是，在我看來，當涉及個人網站時，您應該專注於您的技能和經驗。至少如果你的目標是向招募人員推銷自己的話。抱歉，大多數招募人員不會關心部落格文章。他們關心你能做什麼以及你做了多久。項目組合也很重要。部落格文章確實展示了您的個性和興趣，但招聘人員可能沒有時間閱讀它們。您可能是他們在周五晚上處理的最後一個申請，您最不想做的就是浪費他們的時間。
但除了那項偉大的工作！當然，這只是我的意見。
但是，在我看來，當涉及到個人網站時，您應該專注於您的技能和經驗，特別是如果您的目標是給招聘人員留下深刻印象。
我決定完全放棄部落格部分。儘管你可能會喜歡我關於不同框架和工具的數千字，但招募人員可能不會。另外，隨著我進入學校的最後兩年，我的課程負擔不斷增加，我只是沒有時間維護部落格。
我還將我的技能部分移至頂部、前面和中心，以便所有招募人員都能看到？ 。哦，為什麼不添加一些很酷的效果呢？對於下面顯示的效果，我使用了 framer-motion，他們將其描述為「React 的生產就緒運動庫」。我完全同意。
看到了嗎？看看這個動畫看起來多酷。
接下來，我處理了專案部分。我在主頁上展示了我的前 4 個項目，並包含了其餘項目的連結。對於本節，我想出了一個很酷的想法——當單擊項目時，該模式會從頁面底部彈出，提供更多詳細資訊。當然，framer-motion 是完成這項工作的工具。
一個小時後，我得到了這個：
我認為這是完美的，直到我的朋友們參與其中：
- 太有彈性，調低一點。
- 我喜歡它，但你真的應該減少反彈。
- 彈力看起來很刺耳。
最初，我拒絕改變它。但經過幾個小時的調整，我意識到也許，只是也許，反彈有點過度。所以，我把它撥了下來。
最終版本。看起來不錯吧？
最後，我添加了一個聯繫部分，其中包含我的 LinkedIn 和電子郵件的鏈接，當然還有我的 GitHub 個人資料的鏈接，供所有招聘人員查看。
我還建立了一個專案頁面，如前所述。它與主頁上的項目部分非常相似，採用相同的模式來展示我多年來開發的所有項目（注意：這部分仍在進行中，所以如果它有點稀疏）。
所以我在這裡，終於用所有這些來之不易的知識更新了我的網站。我們只是希望這個設計不會看起來像是 16 歲的孩子設計的。喔等等…？
你可以在這裡查看我的網站和這裡的程式碼。如果您喜歡這篇文章，請給該存儲庫一顆星並考慮關注。
西德克拉夫特代碼
/
資料夾
這是一個使用 create-next-app 引導的 Next.js 專案。
首先，運行開發伺服器：
npm run dev <span class="pl-c"># or</span> yarn dev <span class="pl-c"># or</span> pnpm dev <span class="pl-c"># or</span> bun dev
用瀏覽器開啟http://localhost:3000即可查看結果。
您可以透過修改pages/index.js開始編輯頁面。當您編輯文件時，頁面會自動更新。
API 路由可以透過 http://localhost:3000/api/hello 存取。該端點可以在pages/api/hello.js中編輯。
pages/api 目錄對應到 /api/*。此目錄中的檔案被視為 API 路由而不是 React 頁面。
專案使用 next/font 自動最佳化和載入 Inter，一種自訂 Google 字型。
要了解有關 Next.js 的更多信息，請查看以下資源：
您可以查看 Next.js GitHub 儲存庫 - 您的回饋...
這是一些截圖
：
以上是另一個網站重新設計。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
我真的很喜歡該網站的使用者介面。還有很棒的顏色選擇！但是，在我看來，當涉及個人網站時，您應該專注於您的技能和經驗。至少如果你的目標是向招募人員推銷自己的話。抱歉，大多數招募人員不會關心部落格文章。他們關心你能做什麼以及你做了多久。項目組合也很重要。部落格文章確實展示了您的個性和興趣，但招聘人員可能沒有時間閱讀它們。您可能是他們在周五晚上處理的最後一個申請，您最不想做的就是浪費他們的時間。
但除了那項偉大的工作！當然，這只是我的意見。