reactjs portfolio

React-Portfolio應用程序

個人投資組合頁面www.fdaviz.com內置的React。

建築過程

1. 使用節點JS安裝了新的React應用程序。

2. 遷移了我的Vanillajs投資組合版本，並將其遷移到新的React應用程序中。

3. 第一種方法是使用庫來創建動畫，因為創建自己的動畫是耗時的。因此，我決定使用wow.js and Animate.css庫。

4. 使用的React Props來管理應用程序中的組件參考並共享組件詳細信息，以創建SmoothScroll Usign我自己的代碼。

5. 該頁面的大多數使用Bootstrap，除了具有我自己的CSS3 Flex-Box代碼的模態庫。

6. 為畫廊項目創建了不同的模式，並使用React事件處理程序可以顯示每個項目模式。

7. 該表單使用Formfree.io進行後端提交。

8. 我使用了免費使用的Unsplash圖像，以及來自Flaticon的圖標，這些圖像也可以免費使用。

9. 我想在頁面頂部創建一個令人驚嘆的動畫背景，因此我使用了Codepen.io的一些幫助，並將代碼調整到了我的網站上。

我花了一些時間解決的挑戰

1. 實施WOW.JS + Animate.css一開始很困難，但值得。它需要時間才能使其與您的應用程序一起使用，但是比構建自己的庫所需的時間少。

2. 在其他組件之間共享DOM組件的詳細信息，例如高度，偏移台等，因為React Ref必須匹配父容器的ID，這有點困難。那花了我很長時間才弄清楚。

3. 使用Bootstrap一段時間後，我必須重新學習一些CSS3技巧，例如Flex-Box以及如何使用@KeyFrames + Animation。

更新NPM

1. 刪除了節點 - 薩斯（不推薦使用）庫以使用SASS進行引導兼容性。

結論

感謝您訪問我的React-Portfolio-website，並花點時間閱讀此信息！