フリーランスとして活動するようになって、クラウドワークスやランサーズで案件に応募する時に、実績や、ポートフォリオがあまりなかったので、サイトを０から作りました。
コーディングの練習・新しいスキルの取得も兼ねています。
なので、完璧ではないですが、一応公開しています。
＊随時更新・アップデートしていく予定です。
kentaro koga
kentaro_kogaのポートフォリオサイト
以下では、作った時の流れを書いていこうかと思います。
ポートフォリオサイト作成のワークフロー
ワークフローについてですが、勉強しつつなので効率悪いかもですがご了承ください。
使用言語・ツールは、
- HTML/CSS
- Sass/SCSS
- jQuery
- Sketch3
- font awesome
- font awesome animation
以上です。
サイトに載せる情報を書き出す
普段はEverNoteに書くのですが、何故か今回は手書きでノートに書きました。
デザインのラフ画も同じノートに書いていたので今回はこれで良かったかも。
こんな感じで結構適当ですww
あとあと入れたくなった情報は追加で入れています。
デザインのラフ画を描く
こんな感じで簡単なレイアウトとどんなエフェクト・アニメーションをつけるか書いています。
簡単なテキストも横に添えています。
スマホ中心でデザインしていきました。
もちろんPCでも綺麗にみれます。＊見れるはず！！ww
むしろPCの場合はパララックスがうまく表示されます笑
スマホでbackground-size:coverとbackground-attachment:fixedが効かない時【パララックス】
スマホでは何故かbackground:coverとbackground-attachment:fixedが効かなくなり背景の画像が拡大されてパララックスが実現されなくなります。 そこで、このハゲーーーー！！ってなって色々解決策を考えたり調べたりしてとりあえず対処法を見つけましたww
HTMLを準備
ここは簡単にHTMLで必要な要素などをツラーーーっと書いていきます。
あとあと必要なものが増えてごちゃごちゃしないように気をつけてます。
Scssで書いていく
正直あまりScssで書いたことが少なかったので、良い復習・練習になりました。(フロントエンドなのに、、、ごめんなさいww)
色や文字、フォント、レイアウトなどを作り込んでいきます。
CSSで背景に動くアニメーションをつける方法・ツール【めちゃ簡単】
CSSで背景に動くグラデーションをつける方法と使えるツールを簡単に紹介しています。めちゃめちゃ簡単です。
Safariでちゃんと文字がマスクされない時【CSS】
ブラウザ毎に違った挙動をするので主にSafari、Chrome、Firefoxで確認してますが、Safariで何故か文字がちゃんとマスクされなかったので色々試して修正しました。
パララックスデザインを作る時のCSSの雛形
パララックス（視差効果）のあるサイトが好きだったので、雛形を作りました。 HTMLとCSSだけで実装できます。コピペで簡単に使えるのでパララックスデザインが好きな方はどうぞ。
Sketch3でアイコンの作成
AboutページのSkillsの所のアイコンを自作しました。
Sketchには無料の素材がたくさんありますが、僕が必要だったアイコンが全部揃ってなかったし、複数の作者から素材をダウンロードするとデザインが統一されないので全部自作ですww
こんな感じ
font awesomeを導入
SNSアイコンだけのために入れるのはどうかなと思いましたが、入れちゃいましたww
font awesome animationと組み合わせてアイコンに動きをつけています。
超簡単です。
Font Awesome Animationの使い方
fontawesomeの便利なアニメーションを使ってみました。超簡単で色んなアニメーションをアイコンに付けれるので是非使ってみてください。
jQueryで動きをつける
巷では脱jQueryだという話も聞きますが、jQueryを使わせていただいております。
ごめんなさいww
文字がふわっと現れたり、スクロールするとメニューの背景色が変わったりするのをjQueryで行なっています。
実装している動きは以下
- １文字ずつ現れる文字
- 文字が大きくなりつつ現れる
- 文章がふわっと現れる
- メニューの背景色を変える(PC)
- スクロールで可視範囲にきた時に上の動きを実行
- メニューボタンを押すとメニューが現れる(スマホ)
こんな感じです。
大体はCSSを変えたり、クラスをつけたりで動きを実現しています。
こんな感じです。
hrでグラデーション付きの線をニョーンっと表示する方法
ポートフォリオサイト的なのを作ってた時にhrにグラデーションを付けてページが読み込まれたらニョーンっと表示されるようにしました。
スマホで使いやすそうなメニューボタン【第二弾】
スマホで使いやすそうなボタンをまた作ってみました。コードも汚いかもですが紹介していますので参考にしてみてください。
jqueryとcssで画面をスクロール時にフワッと文字や要素が現れるやつ
今回はjqueryとcssと使って、画面をスクロールした時にフワッと文字や要素を表示してみました。自分用の備忘録ですが、気になる方はチェックしてみてください。
favicon・OGP設定
一応SNS上での表示もちゃんとされるようにOPG設定もしました。
簡単なファビコンもSketchで自作しました。超シンプルですがww
テストサーバーにアップロードして表示の確認
Chromeなどでスマホサイズの表示もできますが、実際にアップロードしてみるとちゃんと動かなかったり、表示されなかったりしたので「このハゲーーーーー！！」って何回かなりましたが、良い勉強になりましたww
その時の備忘録は上に載せています。最近の記事はそんなんが多いですww
本番サーバー(このブログの下層フォルダ)に配置
WordPressがインストールされているディレクトリに配置して良いのか、下層フォルダに入れて良いのか謎だったので、色々調べてローカル環境(MAMP)でも試しました。
MAMPが起動しなくなった時の対処法と最終手段
MAMPがいきなり起動しなくなったので、対処法をググって実行しました。 その時の備忘録です。
以上で完成です〜
＊ほぼww
まとめ
今回サイトを作ってみて勉強になることもたくさんありましたし、良い練習になりました。
途中で「コーディング楽しい！！」ってなったし、もっと色々作りたい・もっと良いものを作りたい、と思うようになりました。
svgアニメーションや、背景のアニメーション、スムーズな動きなどなど、これから色々試して行こうと思います。
では〜