Reactでポートフォリオサイトを作ってみた大学生の話

動機

大学生が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 を使いました。

index.js

import {BrowserRouter, Route} from 'react-router-dom';

として BrowserRouter と Route を import して

index.js

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 に分けて、

Animation.js

import * as THREE from 'three';

として、

Home.js

import posed from 'react-pose'

インタラクションは上のようにインポートして使いました。

参考文献

react pose の参考にした記事
three の参考にした記事

コンポーネント

カードと枠線については component 化しました。
カードは title, image, description を props で渡し、

Card.js

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 で渡すようにしました。

BorderYellow.js

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 サイト作りに少しでも参考になれば嬉しいです〜