65
54

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-06-11

##動機
大学生がvueでポートフォリオサイトを作ってみたという記事を読み、
インターン先でReactを使っていたこともあり、自分もポートフォリオ作ってみました。

完成品

こちらが完成したポートフォリオサイトです。情報量これからもうちょい増やしたいですね。

##デザイン
デザインは adobeXD でまずざっくりイメージを作ってからの実装にしてみました。
(tofubeatsの「what you got」のMVぽく枠線を入れてみました...笑)

image.png

##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 の参考にした記事] (https://qiita.com/seya/items/096862b488258f719e03)
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 サイト作りに少しでも参考になれば嬉しいです〜

65
54
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
65
54

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?