【React/Next.js入門書!】Next.jsでWeb制作はじめる!
【Webエンジニア】転職活動時のポートフォリオ公開します。
転職活動に必要なものであるポートフォリオ。
自身のプロフィールや、実績紹介、またポートフォリオそのものから、技術力をアピールできるものです。
私は転職活動時に、どのようにすれば目を惹くポートフォリオを作ろうか考えていました。
私が転職活動のために、実際に作ったポートフォリオを2つ紹介します。
- Contents
- シェルなポートフォリオ
- レトロなポートフォリオ
- 最後に
シェルなポートフォリオ
概要
シェルの画面を模したポートフォリオサイトです。
当時「カロリーメイトのプログラマー用特設サイト」を発見して衝撃を受けました。
このサイトはRubyの生みの親である、まつもとゆきひろ氏によって手がけられたもので、コマンドを使用して、カロリーメイトのサイトを閲覧できる仕様です。
様々なギミックが仕掛けられていて、終了コマンドを実行した際のアニメーションも面白いです。
「こんなサイトが作りたい!」と思い、どんな技術を使えば、実装できるのか考えました。
カロリーメイトのサイトは、Gatsby.js(React)を使用しているのですが、当時勉強していたVue.jsを使って真似して実装してみました。
このポートフォリオを転職活動に使用していた時は、特にエンジニアの方々からの反応が良かったです笑。
使用技術
レトロなポートフォリオ
概要
こちらは、Windows95の画面を模したポートフォリオサイトです。
面白いサイトがないかなと、ネットサーフィンしている時に、windows95のアイコンを配布しているサイトを見つけました。
「こんなポートフィリオサイトがあったら面白いんじゃないか」と思い、デザインを参考にして、実装しました。
アイコンは履歴書やGitHubを開き、左下のスタートボタンからはプロフィールや実績などをウインドウで開くように実装。
当時勉強していたVue.jsを使用して構築してみました。
使用技術
Vuex (3.6.2)
vue-moment (4.1.0)
vue2-touch-events (3.2.2)
最後に
これら2つのポートフォリオを持って、私は転職活動をしました。
面接では、ポートフォリオについて、聞いていただけることも多々ありました。
「面白いサイトが作りたいことが伝わった」
「Vueなどの技術に興味があることが伝わった」
と言っていただき、自分が興味のある技術や、やりたいことを言葉だけでなく、行動で表せたと思います。
今回ご紹介した2つのポートフォリオはどちらもデザインは有名サイトを参考にしました。
ポートフォリオを1から作ろうとするとかなり時間がかかります。
アイデアやデザインは他のサイトを参考にして、まずは真似して実装してみることをオススメします。
あなたも少し工夫したポートフォリオを作って、転職活動に役立ててください!