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，并花点时间阅读此信息！