LoginSignup
5

More than 5 years have passed since last update.

Angular + Netlifyでポートフォリオを作ってみた

Posted at

はじめに

去年、転職活動をしていた際に自分のサイトがあるかを聞かれたことをふと思いだし、
Adobe XD, HTML+CSSの勉強も兼ねて作ってみました。

スクリーンショット 2018-11-14 21.44.33.png

使った言語、ツール、サービス

  • 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を使ってみました

新規登録し、プロジェクトを作成して、少し設定したら簡単に公開できたので感動しました :sparkles:

参考にしたサイト

カードデザインのポイントと実装方法
[CSS]レスポンシブ対応の文字サイズを指定するこれからのテクニック
エンジニアだけどポートフォリオサイト作ってみた
エンジニアでポートフォリオ作りました
ヘッダー背景画像カスタマイズ時の考え方
Scroll to element on click in Angular 4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5