Resume Website

私自身の職務経歴、学習経歴、制作物一覧が閲覧できるサイト

💻サイトURL: https://portfolio.kano.wiki/
↑のリンクからアクセスできない場合はこちらを試してください。 https://southernminami.github.io/portfolio/

✨Features

共通・トップページ

機能	内容
各ページの概要	各ページへ遷移するカードに簡単な概要が書いてあります。ヘッダーにも同じ遷移先のナビゲーションバーがあります。
ページトップに戻るボタン	クリックするとページの一番上にスクロールします。一定ピクセル下にスクロールしたら現れます。

My Resumeページ

機能	内容
学歴・職務経歴	私のこれまでの経歴を表示しています。
職務経験	これまでの業務で経験してきたことを記載しています。業務内容及び、それを通して得られた知見についての説明を載せています。
履歴書・経歴書ダウンロード	履歴書・職務経歴書のPDFファイルがボタンからダウンロードできます。

*会社情報や本名につきましては現在非公開とさせていただいてます。会社名はイニシャルで表記しています。

Resume.mp4

Worksページ

機能	内容
制作物をカードで表示	これまでにプログラミングで開発してきた成果物をカード形式で表示しています。
Site URL	成果物を公開しているサイトへ遷移します。
Github	成果物のGitHubリポジトリページへ遷移します。

日々制作を行っているため、今後も随時更新していきます。

Works.mp4

⚒️Skills

カテゴリ	技術
フロントエンド	Next.js, Typescript, Tailwind CSS
本番環境	AWS EC2
デプロイ	Nginx, PM2
暗号化	Certbot

機能	内容
習得技術一覧	言語・フレームワーク等の経験年数と、それらを使ってできることを簡単に記載しています。
学習経歴	これまでに学習してきたことの内容と、それを通して得られたことやできるようになったことを記載しています。

Skills.mp4

🔥Motivations

開発のモチベーション

• これまでの経験を端的に見てもらうことが出来るサイトを作りたい
• 本番環境用のEC2インスタンスへのSSH接続に慣れたい
• フロントエンドのデプロイはVercelに任せがちだったので、この機会にNginx周りの必要な設定をした上でのデプロイ方法を身に着けたい
• Next.jsのSSRは今のところ必要としていませんが、v13以降のApp Routerのルーティング方法に慣れるために、その練習も兼ねてNext.jsを採用しました

👀Emphasis

こだわった点

• 一目見たときに経歴などの表が見やすいように、要素同士のマージンの大きさに気を使いました。
• ヘッダーのほうを見てもトップページのメインを見てもすぐに他ページへのリンクを見つけられるように、見やすいカード形式でトップページにリンクを追加しました。
• アプリの永続化と状態監視が出来るようにPM2を使用しました。

🔖References

参考記事

• Recursion バックエンドプロジェクト3 Static Web Server
• Deploy Your Next.js App Like a Pro: A Step-by-Step Guide using Nginx, PM2, Certbot, and Git on your Linux Server

➡️TBA

• レイアウトの改善
• 履歴書内容の更新