はじめに
去年、転職活動をしていた際に自分のサイトがあるかを聞かれたことをふと思いだし、
Adobe XD, HTML+CSSの勉強も兼ねて作ってみました。
使った言語、ツール、サービス
- Angular
- pug + stylus
- Netlify
- Adobe XD
実装
デザイン
普段仕事ではサーバーサイドしか触らないので、デザイナーさんやフロントエンジニアの方々がAdobeを使って綺麗な画面を設計しているのを見て、密かに憧れていました。
Adobe XDというツールが無料で使えるというのを教えてもらい、
せっかくなのでXDを使ってみました。
Adobe XDの使い方は基本的にudemyの以下のコースを参考にして、あとはひたすらググってました。
https://www.udemy.com/web-expert/
トップ画像の素材は 写真AC という素材サイトから拝借しました。
メニューボタン画像はアイコンをfont-awesomeから適当に選び、文字と組み合わせてからSVG出力しました
コーディング
最近Angularを少し触っていたので、Angularを選択。
素のHTML,CSSを書いていくのはちょっと厳しいので pug, stylus で書いていきました。
最初はコンポーネントとか考えずに app.component.pugに全部書いていき、ある程度書けたら
コンポーネントに分けて行きました
ホスティング
ホスティングもせっかくなので、最近名前をよく聞くNetlifyを使ってみました
新規登録し、プロジェクトを作成して、少し設定したら簡単に公開できたので感動しました 
参考にしたサイト
カードデザインのポイントと実装方法
[CSS]レスポンシブ対応の文字サイズを指定するこれからのテクニック
エンジニアだけどポートフォリオサイト作ってみた
エンジニアでポートフォリオ作りました
ヘッダー背景画像カスタマイズ時の考え方
Scroll to element on click in Angular 4