自己紹介とポートフォリオが見れるサイト
このサイトは、私の自己紹介とポートフォリオが見れる静的なWebサイトです。
このサイトでは、採用に関わる企業の方やソフトウェアエンジニアに見てもらうことを想定して作成しています。
Projectsには、注目してもらいたいプロジェクトから順に展示しています。
気になるプロジェクトのREADMEボタンをクリックしてみてください。
基本的な機能として、自己紹介とProjectsの表示/各プロジェクトのREADMEへのアクセスができます。
説明で登場する用語について補足します。
用語の意味がわからない時は、下記表を確認してください。
| 用語 | 意味 |
|---|---|
| ポートフォリオ | 個人の技能、経験、成果を示すために使用される作品集のことです。 |
一通りの手順のイメージはデモを参考にしてください。
- URLにアクセスする
- Projectsの情報を確認して、気になるプロジェクトの
READMEボタンをクリックする
| カテゴリ | 技術スタック |
|---|---|
| フロントエンド | HTML |
| CSS | |
| JavaScript | |
| CSSのフレームワーク : Tailwind CSS | |
| Tailwind CSSのフレームワーク : Flowbite | |
| インフラ | Amazon EC2 |
| Nginx | |
| Ubuntu | |
| VirtualBox | |
| その他 | Git |
| Github | |
| SSL/TLS証明書取得、更新、暗号化 : Certbot |
| 機能 | 内容 |
|---|---|
| Projectsの表示 | 各プロジェクトには、画像、タイトル、概要、タグ、READMEボタンが記載されています。 |
| About/Projects | ページ内のリンクに遷移します。 |
| ダークモードとライトモードの切り替え | ヘッダーの切替ボタンでダークモードとライトモードの切り替えができます。 ローカルストレージの値を参照してどちらに切り替えるか処理しています。 |
| Report | weekly-reportというGitHubリポジトリへ遷移します。 |
| README | ポートフォリオのGitHubリポジトリへ遷移します。 |
| ⬆︎Back to Top | ページの先頭へ移動します。 |
デプロイの経験がなかったため、Amazon EC2へ静的サイトをリリースすることにしました。
静的サイトは、これまでに手がけたプロジェクトを一つに集約したかったため、ポートフォリオサイトを作成することにしました。
静的サイトの開発および本番環境へのリリースの流れを理解するためのプロジェクトです。
プロジェクトを実施する前提条件として、自身のウェブサーバをセットアップする方法を学びました。
- VirtualBox(Ubuntu)
- Amazon EC2
次に、ウェブサーバの役割と HTTP 通信の基本を理解し、Nginx を活用したリクエストのハンドリング方法について学びました。
最後に、インターネットの基盤である DNS について理解し、TLS によるセキュリティ確保の重要性を学びました。
これらの知識を活用して自身のポートフォリオサイトをデプロイしました。
Projectsの表示には、JSONファイルを読み込み、レンダリングすることで表示させています。
JSONファイルには、以下のような形式のデータを記述しています。
JSONファイルは、portfolio.jsonを確認してください。
[
{
"id" : 1,
"title" : "E-Commerce-Webapp-with-Stripe-Sync",
"summary" : "アートに関わる物理・デジタル両方の商品を扱うECサイト",
"source" : "https://github.com/recursion-backend-projects/E-Commerce-Webapp-with-Stripe-Sync",
"thumbnail" : "./images/E-Commerce-Webapp-with-Stripe-Sync.png",
"type" : "web-app",
"tag" : ["チーム開発", "CI/CD", "TypeScript", "Ruby on Rails", "MySQL", "Docker", "GitHub Actions","AWS"]
},
]- レジュメのブラッシュアップ
- ポートフォリオサイトのブラッシュアップ
- 成果物の追加