ぴよまるの雑多な技術所

持病で休職中のエンジニアです。ReactとPythonで自分のサービス作り、業務系を普段はやりたくwindowsをいじっています。ORの研究開始。

ポートフォリオを作って見た

完全な静的サイトとして、副業探すときのネタになるかなと思って作りました。

作ったサイト

http://piyomaru.girly.jp

全体的な話

見た目はmaterializeなどの選択肢もありましたが、よく使うのでbootstrapを使いました。 JavaScriptでゴリゴリ動きをつけたり、CSSのanimationでゴリゴリ動きをつけるのも考えたんですが、あとでReactのデモアプリを作ろうと思っていたため、開発スピードを重視して取捨選択しました。具体的には8時間縛りにしました。

やってみたこと1:フォント

仕事で関わったデザイナーさんによく「フォントが全てだ」と言われました。 google fontをおすすめされたので、そのあたりから選んでいます。 色味と形も重要ですが、フォントとページの構成がうまくいっていることがwebサイトには重要だとか。

やってみたこと2:オープニングアニメーション

最初のアニメーション、どうやってるんだろうと思ったらCSSなんですね。 今回のはCSSのアニメーションで最初にページ全体を覆っておいたdivを消したり、擬似要素で色味のあるレイヤーを重ねたりしています。

やってみたこと3:SVG

SVGを使うと簡単に図形を動かせて、今時っぽいサイトになります。 今回は単純に曲線描いて動かしただけなんですが、例えばイラレとかでsvg出力して、線をチカチカさせたりとかもできるようです。 あとでちゃんと勉強したら記事書きます。

ドメインについて

選択肢は3つありました。 - github.ioに乗せる - レンタルサーバに乗せる - AWSに乗せる(S3+CloudFront+Route53) 今回はレンタルサーバロリポップを使っています。 登録すると独自ドメインもどきもついてきて、ファイルをFTPでアップロードするだけで公開できます。 個人利用だと安価で手っ取り早い。 github.ioはドメインいじれないのと、リポジトリに紐づくので決定打はないですが却下。 AWSは手間がかかり、8時間に収まらなくなりそうなので諦めました。

何を得たか

  • イマドキっぽいwebサイト作りの概要知識(SVG要素、CSS Animation、CSSフレームワークあたり)
  • 個人でwebサイト運用するときの選択肢(レンタルサーバーが最強な気がした)
  • 自己アピール手段