Reactでポートフォリオサイトを作る、Bootstrapを使ってみる

こんにちはとのっちょです。

前回React.jsを利用してサイトを作るためにとりあえず項目を満たすところまでやりました。

とはいえ、あまりにもダサいのでもうちょっと見栄えをよくしていきたいと思いました。

そういうわけでBootstrapを使うことにしました。

Bootstrapってなに？

BootstrapはCSSフレームワークというやつで、すでにいろんなものが用意されたものを使ってウェブサイトを作れます。

Bootstrap

で、色々と適用して今のポートフォリオはこんな感じになっています。

こんな感じになりました

前回のクソダサウェブサイトからだいぶ垢抜けた気がします。

アイコンはicooon-monoから

アイコンも随分いいデザインのものになりましたが、書いているわけではありません。icooon-monoから使わせていただきました。

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

デザインはbootstrapのexampleを参考にしました。

私はUIデザイナーとかそういうのではないので、コンポーネントをどう配置するかとかはよくわかりませんから、bootstrapのexampledsを参考にしてコピペ改変しました。

Examples

Reactでbootstrapを使うには

私はindex.htmlでCSSやJSを読み込んで、App.jsの中でCSSを当てたJSXを返しています。以下は抜粋です。

import './App.css';

function App() {
  return (
    <div>
      <main role="main">
        <div class="container col-xxl-8 px-4 py-5">
          <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
            <div class="col-10 col-sm-8 col-lg-6">
              <img src="images/tonoccho.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"/>
            </div>
            <div class="col-lg-6">
              <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">とのっちょのポートフォリオ</h1>
              <p class="lead">2014年からニュージーランド在住。現在はJavaプログラマーとしてAucklandに住んでいます。</p>
            </div>
          </div>
        </div>
        <div class="container px-4 py-5" id="featured-3">
          <h2 class="pb-2 border-bottom">Biography</h2>
          <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
            <div class="feature col">
              <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-gradient fs-2 mb-3">
                <img src="images/icon_000850_256.png" alt="" width="32" />
              </div>

今はあまりにもベタ書きなので、もうちょっと変えていくことにします。