ポートフォリオを作って見た
完全な静的サイトとして、副業探すときのネタになるかなと思って作りました。
作ったサイト
全体的な話
見た目はmaterializeなどの選択肢もありましたが、よく使うのでbootstrapを使いました。 JavaScriptでゴリゴリ動きをつけたり、CSSのanimationでゴリゴリ動きをつけるのも考えたんですが、あとでReactのデモアプリを作ろうと思っていたため、開発スピードを重視して取捨選択しました。具体的には8時間縛りにしました。
やってみたこと１：フォント
仕事で関わったデザイナーさんによく「フォントが全てだ」と言われました。 google fontをおすすめされたので、そのあたりから選んでいます。 色味と形も重要ですが、フォントとページの構成がうまくいっていることがwebサイトには重要だとか。
やってみたこと２：オープニングアニメーション
最初のアニメーション、どうやってるんだろうと思ったらCSSなんですね。 今回のはCSSのアニメーションで最初にページ全体を覆っておいたdivを消したり、擬似要素で色味のあるレイヤーを重ねたりしています。
やってみたこと３：SVG
SVGを使うと簡単に図形を動かせて、今時っぽいサイトになります。 今回は単純に曲線描いて動かしただけなんですが、例えばイラレとかでsvg出力して、線をチカチカさせたりとかもできるようです。 あとでちゃんと勉強したら記事書きます。
ドメインについて
選択肢は3つありました。 - github.ioに乗せる - レンタルサーバに乗せる - AWSに乗せる（S3+CloudFront+Route53） 今回はレンタルサーバのロリポップを使っています。 登録すると独自ドメインもどきもついてきて、ファイルをFTPでアップロードするだけで公開できます。 個人利用だと安価で手っ取り早い。 github.ioはドメインいじれないのと、リポジトリに紐づくので決定打はないですが却下。 AWSは手間がかかり、8時間に収まらなくなりそうなので諦めました。
