另一個網站重新設計。

在我看來，這篇文章是我昨天寫的。

好的。所以...我可能再次完全重建了我的網站...

sid ・21 年 12 月 23 日

#webdev #showdev #html #css

然而，近四年過去了，事後看來，我可以自信地說，我早期在網頁設計方面的嘗試是，我們只能說不太出色。 我的舊網站看起來像是由 13 歲的孩子設計的，因為，好吧，它們是——是的，那個 13 歲的孩子就是我？ .

從那時起：

• 我又完成了三年的學業。我現在幾乎是專業學生了。
• 我花了無數時間研究優秀 UI 設計的關鍵基礎知識。我讀過的設計文章比我願意承認的還要多。
• 我學會如何寫出更好的程式碼。大多數時候它不再崩潰。
• 我讀了 Adam Wathan 的書重構 UI，它徹底改變了我設計 UI 的想法。

但在這段時間裡，我不知何故忽略了一個小細節——是的，你猜對了——更新我的網站。現在，16 歲，這篇評論：

愛德華·布斯克-尼爾森 • 21 年 3 月 6 日

我真的很喜歡該網站的使用者介面。還有很棒的顏色選擇！但是，在我看來，當涉及個人網站時，您應該專注於您的技能和經驗。至少如果你的目標是向招募人員推銷自己的話。抱歉，大多數招募人員不會關心部落格文章。他們關心你能做什麼以及你做了多久。項目組合也很重要。部落格文章確實展示了您的個性和興趣，但招聘人員可能沒有時間閱讀它們。您可能是他們在周五晚上處理的最後一個申請，您最不想做的就是浪費他們的時間。

但除了那項偉大的工作！當然，這只是我的意見。

真正開始擊中要害。

我花了很多時間在各種專案上工作，但沒有地方實際展示它們，因此沒有平台來打動潛在的招募人員。另外，如果你看看我的大多數項目的使用者介面，它仍然有點平庸。我需要一些東西來哇他們——所以幾天前，我決定全力以赴，重新設計和重建我的個人網站（或作品集，如果你願意的話）。

科技

我以前的所有個人網站都是用普通的舊式 HTML、CSS 和 JavaScript 建立的。它簡單實用，但就像嘗試用微波爐做一頓美食一樣。另外，我真的很想展現我的 React 技能（說實話，這才是真正原因）。

所以，我選了 Next.js。為什麼？嗯，當時這似乎是一個不錯的選擇（事實證明也是如此），而且我已經擁有了豐富的經驗。

對於 CSS，我選擇了 Tailwind CSS（我的意思是，如果你在 2024 年不再使用它，你是真的嗎？？）。

設計

在花了太多時間盯著我的舊網站之後，我認為淺色模式並不能解決問題。我想要一個巨大的改變，一些能夠產生真正影響力的事情。還有什麼比按下開關進入全暗模式更好的方法呢？這就像你的網站開始了惡棍弧線？ .

字體我選了Inter。在多次嘗試其他字體失敗後，尤其是在 Windows 裝置上，我的網站如下所示：

...與 macOS 上的情況相比，我決定停止使用 Tailwind CSS 提供的預設系統字體。

顯然，Mac 上的字體更出色。但由於預設的 San Francisco 字體是 Apple 獨有的，我需要一個替代字體。輸入 Inter——我見過的最令人驚嘆的字體之一，也是 San Francisco 的完美替代品。

看到了嗎？看看這個字體多漂亮？

對於主色，我選擇了紫色。沒有真正的原因，只是決定將我之前用過的靛藍混合起來。

佈局

我從英雄部分開始。簡單、簡單……喔等等……我有沒有提到有打字機效果？

之後我迅速開始思考下一部分。

重溫愛德華的評論：

愛德華·布斯克-尼爾森 • 21 年 3 月 6 日

我真的很喜歡該網站的使用者介面。還有很棒的顏色選擇！但是，在我看來，當涉及個人網站時，您應該專注於您的技能和經驗。至少如果你的目標是向招募人員推銷自己的話。抱歉，大多數招募人員不會關心部落格文章。他們關心你能做什麼以及你做了多久。項目組合也很重要。部落格文章確實展示了您的個性和興趣，但招聘人員可能沒有時間閱讀它們。您可能是他們在周五晚上處理的最後一個申請，您最不想做的就是浪費他們的時間。

但除了那項偉大的工作！當然，這只是我的意見。

但是，在我看來，當涉及到個人網站時，您應該專注於您的技能和經驗，特別是如果您的目標是給招聘人員留下深刻印象。

我決定完全放棄部落格部分。儘管你可能會喜歡我關於不同框架和工具的數千字，但招募人員可能不會。另外，隨著我進入學校的最後兩年，我的課程負擔不斷增加，我只是沒有時間維護部落格。

我還將我的技能部分移至頂部、前面和中心，以便所有招募人員都能看到？ 。哦，為什麼不添加一些很酷的效果呢？對於下面顯示的效果，我使用了 framer-motion，他們將其描述為「React 的生產就緒運動庫」。我完全同意。

看到了嗎？看看這個動畫看起來多酷。

接下來，我處理了專案部分。我在主頁上展示了我的前 4 個項目，並包含了其餘項目的連結。對於本節，我想出了一個很酷的想法——當單擊項目時，該模式會從頁面底部彈出，提供更多詳細資訊。當然，framer-motion 是完成這項工作的工具。

一個小時後，我得到了這個：

我認為這是完美的，直到我的朋友們參與其中：

• 太有彈性，調低一點。
• 我喜歡它，但你真的應該減少反彈。
• 彈力看起來很刺耳。

最初，我拒絕改變它。但經過幾個小時的調整，我意識到也許，只是也許，反彈有點過度。所以，我把它撥了下來。

最終版本。看起來不錯吧？

最後，我添加了一個聯繫部分，其中包含我的 LinkedIn 和電子郵件的鏈接，當然還有我的 GitHub 個人資料的鏈接，供所有招聘人員查看。

我還建立了一個專案頁面，如前所述。它與主頁上的項目部分非常相似，採用相同的模式來展示我多年來開發的所有項目（注意：這部分仍在進行中，所以如果它有點稀疏）。

所以我在這裡，終於用所有這些來之不易的知識更新了我的網​​站。我們只是希望這個設計不會看起來像是 16 歲的孩子設計的。喔等等…？

---

你可以在這裡查看我的網站和這裡的程式碼。如果您喜歡這篇文章，請給該存儲庫一顆星並考慮關注。

西德克拉夫特代碼 / 資料夾

我的個人作品集網站，使用 Next.js 構建

這是一個使用 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 文件 - 了解 Next.js 功能和 API。
• 學習 Next.js - 互動式 Next.js 教學。

您可以查看 Next.js GitHub 儲存庫 - 您的回饋...

在 GitHub 上查看

這是一些截圖


：

以上是另一個網站重新設計。的詳細內容。更多資訊請關注PHP中文網其他相關文章！