reactjs portfolioダウンロードreactjs portfolioソースコードのダウンロード

ダウンロード

React-Portfolioアプリ

パーソナルポートフォリオページwww.fdaviz.comが反応して組み込まれています。

ノードJSを使用して新しいReactアプリをインストールしました。
Vanillajsポートフォリオバージョンを移行し、新しいReactアプリケーションに移行しました。
最初のアプローチは、自分のものを作成するのに時間がかかるため、ライブラリを使用してアニメーションを作成することでした。そのため、wow.jsとanimate.cssライブラリを使用することにしました。
アプリケーションでコンポーネント参照を管理し、コンポーネントの詳細を共有するために使用されたReact Propsを使用して、SmoothScrollを作成して自分のコードをユーザーにします。
ページのほとんどは、独自のCSS3フレックスボックスコードを備えたモーダルギャラリーを除き、ブートストラップを使用しています。
ギャラリープロジェクトのさまざまなモーダルを作成し、Reactイベントハンドラーを使用して、各プロジェクトModalを表示できます。
フォームは、バックエンド提出にformsfree.ioを使用します。
Unsplashの画像を使用しました。この画像は自由に使用できる画像とFlaticonのアイコンを使用しました。
ページの上部に素晴らしいアニメーションの背景を作成したかったので、codepen.ioのヘルプを使用して、コードを自分のウェブサイトに適合させました。

wow.js + animate.cssの実装は最初は困難でしたが、それだけの価値がありました。アプリで動作させるには時間がかかりますが、独自のライブラリを構築するよりも時間がかかりません。
React Refが親コンテナのIDを一致させなければならなかったため、他のコンポーネント間で高さ、オフセットなどのDOMコンポーネントの詳細を共有することは少し困難でした。それは私に理解するのに長い時間がかかりました。
ブートストラップをしばらく使用した後、Flex-Boxや@KeyFrames + Animationの使用方法など、いくつかのCSS3トリックを再学習する必要がありました。