鐵人檔案
在這系列文章中，我將分享我從專案經理轉變為前端開發者的經歷，並使用React來構建我的個人作品集。我會逐步介紹如何利用React建立一個互動豐富、視覺吸引人的作品集網站，從基礎的React元件和狀態管理到進階功能，如路由和API整合。每篇文章都將深入探討一個主題，並提供實際的代碼示例與解決方案。
此外，我還將分享轉職過程中遇到的挑戰，如學習新技術、時間管理，以及保持學習動力的策略。我的目標是不僅展示技術成果，也希望透過我的經驗激勵正在或計劃職業轉換的讀者
在之前的學習中，我們探討了如何優化應用的性能和結構。隨著應用的增大，將所有功能集中在一個組件裡變得不夠靈活，因此，我們將進一步模組化應用功能，讓結構更加清晰，便...
在上一篇文章中，我們介紹了如何使用 React Router 實現頁面導航，並展示了模組化頁面如何提升程式碼的結構性與可維護性。今天，我們將進一步學習如何從零開...
在上一篇文章中，我們介紹了如何使用 Sass 和 map-get 來管理多主題樣式。隨著應用規模的擴大，程式碼變得越來越難以維護。今天，我們將探討為什麼選擇 C...
在過去的幾篇文章中，我們探討了如何使用 CSS Modules 和 CSS 變數 來優化應用中的主題切換機制，並提高應用的靈活性和可維護性。今天，我們基於Fig...
在前一篇文章中，我們設計了一個靈活的按鈕元件，並探討了多種屬性的應用。今天，我們將進一步研究 按鈕的樣式設計，探討如何根據不同狀態（如懸停、激活、禁用）調整按鈕...
在前兩篇文章中，我們深入探討了如何設計一個靈活、高效的 React 按鈕元件，還有助於在不同情境下保持一致的設計風格。今天，我們將這些按鈕設計應用到 Hero...
在上一篇文章中，我們逐步建立了 Hero Section，並結合 i18n 和 Framer Motion，來增強其動態效果與語言支持。 今天，我們將繼續加強...
在前幾篇文章中，我們探討了如何透過動畫、SVG 操作以及 Tooltip 來提升網站的互動性和視覺效果。然而，隨著使用者透過不同裝置訪問網站，響應式設計已成為現...
在過去的幾篇文章中，我們探討了 Hero Section 的設計和優化，包括使用 SVG 和動態控制來增強頁面交互效果。今天，我們將進一步完成個人網站的服務展示...
在前一篇文章中，我們討論了如何動態生成 Card 元件 並構建了基礎的 Service Section。今天，我們將繼續優化這個部分，重點放在如何使用 CSS...
