##動機
大学生がvueでポートフォリオサイトを作ってみたという記事を読み、
インターン先でReactを使っていたこともあり、自分もポートフォリオ作ってみました。
完成品
こちらが完成したポートフォリオサイトです。情報量これからもうちょい増やしたいですね。
##デザイン
デザインは adobeXD でまずざっくりイメージを作ってからの実装にしてみました。
(tofubeatsの「what you got」のMVぽく枠線を入れてみました...笑)
##create-react-app
ここから実装の本題です。
まず npm などは React を使う上で必要なのでインストールされていることを確認してください。
$ npm install -g create-react-app
こちらのコマンドを用いて create-react-app をインストールしてから、
$ create-react-app portfolio
これで新しく portofolio というディレクトリが作られ、React アプリに必要なファイルがコピーされます。
$ npm start
を実行するとサーバーが起動し、localhost:3000
で開くことができるようになります。
##ルーティング
ルーティングについてはブラウザで動くページを書くには react-router-dom を使いました。
import {BrowserRouter, Route} from 'react-router-dom';
として BrowserRouter と Route を import して
ReactDOM.render(
<BrowserRouter>
<ToDo />
<Route exact path={'/'} component={Home}/>
<Route path={'/about'} component={About}/>
<Route path={'/work'} component={Work}/>
<Route path={'/contact'} component={Contact}/>
</BrowserRouter>
, document.getElementById('root'));
このようにして、ルーティングできるようしました。
##アニメーションとインタラクション
アニメーションとインタラクションについては、three.js を React で使えるようにしたパッケージと、react poseというライブラリを使いました。
アニメーションは component に分けて、
import * as THREE from 'three';
として、
import posed from 'react-pose'
インタラクションは上のようにインポートして使いました。
参考文献
[react pose の参考にした記事] (https://qiita.com/seya/items/096862b488258f719e03)
three の参考にした記事
##コンポーネント
カードと枠線については component 化しました。
カードは title, image, description を props で渡し、
import React from 'react'
import './Card.css'
class Card extends React.Component {
render(){
return(
<div className="card">
<img
className="card__img"
src={this.props.img}
alt=""
/>
<div className="card__content">
<div className="card__title">
{this.props.title}
</div>
<div className="card__lead">
{this.props.lead}
</div>
</div>
</div>
)
}
}
export default Card;
枠線は、display を props で渡すようにしました。
import React, { Component } from 'react';
import posed from 'react-pose'
import './BorderYellow.css';
const props = {
visible: { opacity: 1 },
hidden: { opacity: 0 }
}
const Border = posed.div(props)
class BorderYellow extends Component {
constructor(props) {
super(props);
}
state = { isUnVisible: false };
componentDidMount() {
setTimeout(() => {
this.setState({ isUnVisible: !this.state.isUnVisible });
}, 1000);
}
render() {
return (
<Border className={this.props.display ? "border border-visible" : "border"} pose={this.state.isUnVisible ? 'hidden' : 'visible'} />
);
}
}
export default BorderYellow;
##おわり
こちらに github のソースコードを共有しておきます。(恥ずかしながら)
portfolio サイト作りに少しでも参考になれば嬉しいです〜