未経験エンジニアの自作ポートフォリオ【コードあり】

CSSとJavascriptでシンプルなポートフォリオサイトを作ったので、作った過程をまとめておこうと思います。
完成したサイトはこちら。

Kashiwaba Yuki

ソースコードはGithub上で公開してます。

Github

もくじ

  1. トップページのアニメーション
  2. Javacriptでイベントリスナーの実装
  3. CSSのflexによるレスポンシブ対応
  4. まとめ
  5. 参考

トップページのアニメーション

まずは今回のポートフォリオサイトの一番のお気に入りであるトップページについて。

名前と季節感を合わせて、背景で雪が降るアニメーションになっています。
朝から夜になっていくような演出になっているのもお気に入りポイント。

こちらのアニメーションは、背景画像とCSSで実装されています。
参考にしたのはこちら

このSnowEffectというサイトのコードをほとんどそのままいただきました。
自分で変更したのは、背景色が朝から夜に代わっていく部分のみです。

このアニメーションは、三枚の雪の画像を背景として重ねて、それぞれを動かすことによって作られています。
ちなみにCSSのコードはこちら。

  .cover{
    height: 100vh;
    background-color: rgba(67,135,233,0.7);
    position: relative;
    background-image: url("../img/snow1.png"), url("../img/snow2.png"), url("../img/snow3.png");
  	-webkit-animation: snow 20s linear infinite;
  	animation: snow 20s linear infinite;
    text-align: center;
  }
  @-webkit-keyframes snow {
  	0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  	50% { background-color: #151d25 }
  	100% {
  		background-position: 500px 1000px, 400px 400px, 300px 300px;
  		background-color: #151d25;
  	}
  }
  @keyframes snow {
  	0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  	50% { background-color: #151d25 }
  	100% {
  		background-position: 500px 1000px, 400px 400px, 300px 300px;
  		background-color: #151d25;
  	}
  }

まだあまり使いこなせてはいないのですが、CSSのアニメーションで背景画像の位置を少しずつ動かして雪が降るのを実装してます。
雪のオブジェクトを作ってJavascriptで動かす方法も考えたのですが、CSSのアニメーションってJavascriptと比べてどうなんでしょう?
やっぱり軽量なんでしょうか。

Javacriptでイベントリスナーの実装

WEBページ上で、ユーザーのアクションに合わせて処理を実行したい時、イベントリスナーを実装する必要があります。
今回は、Javascriptで三つのイベントリスナーを用意しました。

コードはこちら。

  const items = document.getElementsByClassName('item');
  const created = document.getElementById('created');
  //マウスが乗ったときの処理
  for(let i=0; i<items.length; i++){="" items[i].addeventlistener('mouseover',="" ()=""> {
      let style = created.style;
      items[i].style.opacity = 1;
    });
    //マウスが離れたときの処理
    items[i].addEventListener('mouseleave', () => {
      let style = created.style;
      items[i].style.opacity = 0.7;
      style.backgroundImage="url('')";
    });
    //クリックされたときの処理
    items[i].addEventListener('click', () => {
    });
  }
</items.length;>

itemというページ上の要素に対して、items[i].addEventListener()でイベントリスナーを設定しています。
イベントリスナーの実装は思ったより簡単ですね。

Javascriptで要素を自由に動かせるようになってくると、実装の幅が広がって面白いなと思います。

CSSのflexによるレスポンシブ対応

今回は脱bootstrapということで、レスポンシブ対応に関しても、自作のCSSのみで実装することにしました。
とはいえ、最近流行りのflexboxを使用したことで、bootstrapなしでも簡単にグリッドレイアウトを実装できました

すごく使いやすかったです。
flexboxについては、僕が解説するより、もっとわかりやすくまとまっている参考サイトのリンクを貼っておきます。

CSS Flexboxのチートシート

まとめ

この記事を書いている2019年の1月現在、僕は絶賛ニートの真っ最中です。
12月にこれまでの小売の職を辞め、2月からエンジニアになります。

その間の空白の時間。

ニートなので収入はなく、残高は減っていく一方です。
そんな状況から抜け出すため、コーディングの仕事をすべく、ポートフォリオサイトを作成しました。

一日二日でつくったような簡素なページなので、これからもっと育てていこうと思います。
そして明日からは、案件獲得目指して活動していきます!

どのくらいのスキルと時間があれば月に20万円くらいの収入を得られるのでしょうか?

参考

・WEB
【JavaScript入門】addEventListener()によるイベント処理の使い方!

EventTarget.addEventListener()

CSS SNOW

CSS Flexboxのチートシート