ポートフォリオを作ってみました！

こんにちはー、最近では在宅時々ノマドワークしているニアです！

昨年の秋に、私は現職で使っているTypeScriptやWebpackの勉強を兼ねてポートフォリオのサイトを作ってみました。

Nia's Portfolio

nia-tn1012.com

1. 何を載せるか

他のエンジニアの方々が何を載せているのかを色々調べて参考にしつつ、以下の内容を記載することにしました。

• 自己紹介
• スキル
• 成果物（業務、プライベート）

参考サイト

• エンジニアでポートフォリオ作りました – Qiita
• エンジニアだけどポートフォリオサイト作ってみた – Qiita

2. プログラミング言語とフレームワーク

プログラミング言語にTypeScriptを使い、フレームワークにVue.jsを使いました。

当初はLaravelやConcrete5を使おうと思ったのですが、サイト構築やサイトデザインの設計に時間がかかるので、また今度の機会にすることにしました。

ページの切り替えは、Vue.jsのRouter機能を使用しています。

デザインはシンプルに、白地ベースに青色をアクセントカラーにしました。

工夫した点としては、PCやスマホがダークモードの時にアクセスすると、このポートフォリオもダークモードとして表示されるようになります。

<style lang="scss">
$pcs: dark;

body {
    font-size: 1rem;
    @media ( prefers-color-scheme: $pcs ) {
        background-color: #111;
    }
}

/* ... */
</style>

アイコンは、Font Awesomeを使用しています。

3. おわりに

このポートフォリオの作成で、TypeScriptとWebpackを使ったのですが、JavaScript（ES5）よりコーディングしやすかったです。今度WordPressのGutenberg向けプラグインを開発する機会があれば、間違いなく、TypeScriptとWebpackを使いたいと思います。

[END]