經過幾個月的努力，我終於推出了我的作品集向世界展示。
我一直相信社交資料就足夠了，你其實不需要作品集（在大多數情況下）。但如果沒有單獨的作品集，就很難展現你的故事和個性。
我做過使用者體驗設計、技術寫作、開源開發、社群管理，所以我很難只使用 GitHub、LinkedIn、X 等一個平台來展示所有內容。
今天，我將其部署在anmolbaranwal.com上！我仍然希望加入很多東西和功能（例如 PWA、UI 改進...），但我認為它足以向世界展示。
請提供您的回饋，這將意味著很多！ 🙏
小心一點，還有燈光模式（是的，我知道）！
在這個部落格中，您將找到我的建造方法、哪一部分對我來說最難、我使用的技術堆疊以及該專案的主要收穫。
哪一部分對我來說最難？
編碼確實很困難，至少在某些部分是這樣，但 UI 設計對我來說更困難。
我想創造一個令人驚嘆的因素，並以易於理解的方式顯示所有必要的資訊。我掙扎了幾個月，直到我決定放棄在 AdobeXD 中進行設計，而只是開始建造。
最後，我繼續建造東西（考慮到基本結構），設計過程變得容易多了。
對於某些部分，我從一些網站獲得了靈感（主要是在用戶體驗方面），但我自己編寫了所有內容。
就性能而言，它在桌面螢幕上表現良好，但在行動螢幕上存在Largest Contentful Paint (LCP)問題。我盡我所能地改進並考慮發布它。幾週後我會改進它。
一切都經過優化和自動化。
我想要一個需要最少努力來更新的作品集，這就是我建立這個作品集的方法。
讓我們以專案部分為例。
我建立了一個系統，可以從 GitHub 獲取專案並僅顯示允許的專案，並提供一種簡單的方法來安排它們的順序。
然後，如果我想更新特定字段（並保留其餘字段），我也可以這樣做。
例如，如果我只想更改專案的描述並保留所獲取的其餘資訊。我可以將其加入到資料中，它將自動使用，並保持其他欄位相同。
使用時間軸、推薦圖標和許多其他內容對這部分進行編碼非常困難。
幾乎所有其他部分也僅依賴資料，因此很容易更新所有內容。
技術堆疊
簡單說一下我使用的技術堆疊：
-
Next.js v14：作為前端框架（SEO 友善） -
TypeScript：作為程式語言 -
Tailwind CSS：用於樣式 -
Framer motion：用於動畫 -
Forem v1 APIs：用於取得博客 -
GitHub APIs：用於取得專案 -
Cursor free version：作為程式碼編輯器（從 VSCode 切換） -
GitHub：用於儲存原始碼（它是私有的） -
Vercel：用於每次提交的部署和即時預覽
我還為不同的元件使用了不同的包：
-
embla-carousel：用於推薦 -
lucide icons：用於圖標 -
react-modern-drawer：用於移動螢幕中的側邊欄
我建立了自己的圖示元件，這使得 SVG 檔案的工作變得更加容易。
字體
我使用了Open_Sans 、 Google Fonts 中的Manrope以及連結部分標題的自訂字體。
顏色
我是黑暗模式的粉絲，所以我想以一些暗色調作為主導。
我同意紫色作為主要顏色。它代表忠誠，所以它適合我的個性。
我的作品集中的部分
我加入的所有部分：
- 首頁
- Hero
- Companies
- My Story
- Work Process
- Testimonials
- Contact
- Footer
-
關於
-
工作經驗
-
專案
-
部落格
-
連結
最複雜的部分是專案和部落格。
我也使用了一些開源元件，但需要進行大量更改才能獲得我想要的最終結果。大多數部分都是我從頭開始完成的，以保持程式碼庫的整潔。
幾個月後，我還計劃加入更多部分，例如achievements和tech stack 。
主要要點
與其試圖設計一個完美的頁面或沉迷於每一個小細節，剛開始。
專注於建立基本結構或線框，然後不斷改進它。一旦你踏出第一步，這個過程就會變得容易得多。
我學到了很多東西，包括：
-
在複雜的層面上開放圖形影像和元資料
-
優化技術，尤其是關於最大內容繪製的優化技術
在建造這個的過程中還有更多。你也會的！
這是我在社群媒體上使用的示範影片。
{% 嵌入 https://youtu.be/KFPngmNt2Ow %}
現在，我將休息一下，並將更多精力放在技術寫作上。
我知道它並不完美，但我花了很多精力對其進行編碼。
我一直喜歡建造專案來向世界展示，這對我來說真的很特別。謝謝你！ 💜
您可以在GitHub 、 Twitter和LinkedIn上聯絡我。
原文出處：https://dev.to/anmolbaranwal/yay-i-created-my-first-portfolio-375
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式