ポートフォリオサイトの作り方
16897 ワード
ポートフォリオは履歴書のより長いバージョンです、しかし、一部の人々は彼らの創造性と技術を示すためにそれをウェブサイトのようにします.最近、自分のドメインの下でポートフォリオサイトを作り、展開しましたhttps://itsrakesh.co . 私は、これのためにとても多くの感謝と驚くべきフィードバックを得ました.このブログでは、私がどのようにそれを作ったかを共有しています、私がそれを構築することを通して学んだこと、私が走らせた挑戦、そして、私はすべてのものが接続される方法を説明します.私もプロファイルを作成するいくつかの素晴らしいリソースを与える.
今、あなたのためのポートフォリオのウェブサイトを生成するツールがたくさんあります.しかし、私は自分のスキルを練習し、それをよりカスタマイズできるように自分自身を構築することを決めた.
始めましょう
始める前に コードはGithub . (スターイット-フォーク-それを使用してください)
ツール、テクノロジー、フレームワーク、ライブラリ 共通のツールが表示されます. 使用言語 フロントエンドの商品一覧を見る バックエンド( RESTAPI ) ホスティング- Netlify、Heroku サードパーティのAPIDev
NPMパッケージの束
ファイル構造
フロントエンド
この構造が好きならtemplate . あなたはすぐにプロジェクトを設定するために使用することができます.
バックエンド
このウェブサイトには大きなバックエンドがありません.
ウェブサイトには6ページが含まれている. Home Work Blogs About Me Contact Profiles すべてのページには、同じNavbarとフッターがあります.
パート1 -ホームページ#
ホームページは、全体のウェブサイトの簡単な概要です.それは私についての迅速なイントロが含まれて、いくつかの社会的なリンクは、電子メールと再開ボタンをクリックします.そして、異なるセクション- 2最近のプロジェクト、なぜ私とCTAを雇う.ヒーローセクションの3 D NFTはこのウェブサイトから生成されますreadyplayer.me "
パート2 -作業ページ#
作業ページは、私がすることの概要です.現在、それはプロジェクトのセクションがありますが、私はもっと追加を考えています.
プロジェクトページ#
プロジェクトページにはカードが含まれます.各カードには、プロジェクトの写真、タイトル、技術スタック、詳細ページとリンクをプレビューするライブへのリンクが含まれます.
プロジェクト詳細ページ
プロジェクトの詳細ページは、実際にはマークダウンファイルであり、HTMLとしてレンダリングされます.私はNPMパッケージを使用しますmarkdown-to-jsx . マークダウンファイルはgithub READMEです.それぞれのプロジェクトのレポのMD.これは簡単なトリックです.
パート3 -ブログページ#
ブログページは私のお気に入りページです.私はアマゾンのプライムビデオテレビアプリから小さなインスピレーションを取った😂. なぜそのプレビュー?私は自分の記事を3つのプラットフォームに投稿します.それで、プレビューを示すこの考えはそれらの3つの関連を含むことになっていて、ブログの小さな部分を示します.
これはどうやって動くの?使用するDev 各ブログは、カバーイメージ、タイトル、説明、反応、ビュー、読書時間、出版日などを含むデータを含んでいます.そのデータにはブログURLと標準的なリンクも含まれます.したがって、“読み取りブログ”URLは正規のURLです、“dev”のURLはブログのURLであり、まだ“媒体”のURLを把握することはできません☹️ 媒体がURLの最後に「id」を加えますので、現在のすべてのブログは私の媒体プロフィールページにリダイレクトします.結論として、このページのすべては自動化され、データベースにデータをアップロードする必要はありません.
パート4 -アバウトミーページ#
アバウトミーページは私についてのすべての簡単な概要です.これはいくつかの簡単なリンクが含まれ、Github貢献グラフ、ブログ解析、ツール、私は、言語、フレームワーク私は知っている、私のスキル(そのパーセンテージバーを削除する必要があります)と私の成果.
GITHUB貢献グラフのために、私はNPMパッケージと呼ばれましたgithub-calendar-graph .
第5部-コンタクトフォームページ#
連絡先ページには、人々のための簡単なフォームが私に簡単なメッセージを残しています.
このフォームはどのように動作しますか?私はnodemailer NODEJSとメールを送信するにはsendgrid メールサービスとして、ユーザーが「メッセージを送る」をクリックすると、ユーザメッセージを含む自分自身にメールを送ります.
パート6 -プロフィールページ#
プロフィールページには、いくつかの主要なプロファイルへのリンクが含まれます.そして、ここでクールなもの-あなたはURLで私の任意のオンラインプロファイルを見つけることができます
アニメーション
このウェブサイトはあまりにも多くのアニメーションを持っていない、これらのアニメーションのほとんどは、これらのアニメーションのほとんどは、ホームページ上のこれらのボタンのようないくつかのアニメーションcodepen 「コミュニティ.
ローダー
彼らはユーザーエクスペリエンスに最適ですので、このウェブサイトは多くのロードアニメーションを持っています.
単一のスピナー、プレースホルダーといくつかの創造的なローダのようなローダの種類があります.私は、ページのロードとbootstrapのプレースホルダのためにスピナーを上記の絵のようなプレースホルダーアニメーションのために使いました.
ページロードアニメーション?「コード分割」と呼ばれる反応には、ブラウザがロードされたファイルだけをロードする機能があります.ブラウザがファイルをロードする間、あなたは空白のページの代わりに若干のアニメーションを示すためにその待ち時間を使うことができます.
次のようにします.
分析論
ウェブサイトのフッター部には訪問回数があります.使用するCountAPI このウェブサイトが訪れた回数をカウントする.
私もGoogle Analyticsを使用する必要はありませんでした.私はGAを学ぶためにそれを使用.
検索コンソール
最後に、私はGoogle検索コンソールとビングウェブマスターツールに私のウェブサイトを提出しました.しかし、これらのツールは、あなたのウェブサイトで問題を見つけるのを助けます.
挑戦した
すべての開発者の経験のそれらの一般的なエラーとは別に、私は良いデザイン、色の組み合わせ、レイアウトなどを見つけるために苦労しました.私が直面した課題のほとんどはフロントエンドだけで、バックエンドとあまり関係がないので、それは単純なrestapiです.
学んだこと
これは私の最初のポートフォリオのウェブサイトですので、私はそれを構築全体を学んだ.技術的なものだけでなく、どのように一貫して、どのように一貫性のある、どのようにユーザーの視点から、どのようにさまざまな色を混在させる方法を設計するには、建物全体では、私はgoogling多くのことをしたので、どのように解決するために解決策を見つけることがどのような解決策を見つける適切な場所です.時間を無駄にしないように、私も非常に効果的にstackoverflowを使用して私は質問をする機会を得ることはありません.
あなたがウェブdevにないならば、あなたはポートフォリオウェブサイトを持つことができますか?
今、ポートフォリオをしたい場合は、Web開発者ではないか、フロントエンドの人ではない場合はwix , WordPress など
そして、単純なページが欲しいならば、若干の大きなウェブサイトがあります
私が知っている若干の選択肢は、ここにあります:
ギタブプロフィール#
あなたはGithubと素晴らしい探しプロファイルを作成することができます.
例えば、ここは私のものですGithub
2 . PeerList#
PeerListは誰にとっても素晴らしいです.それはあなたにあなたのすべてについて、あなたの仕事、ブログ、プロジェクトなどを含めることができます本当に素敵なプロフィールページを与える
3 . showwcase#
ShowWcaseは開発者向けのコミュニティです.そしてそれはあなたにページと無料のカスタムドメインを与えるクールな機能を持っています.これは何ですか?基本的には、すべてのあなたのスキル、プロジェクト、経験、技術スタック、社会的なリンク、プロファイルの写真やプロフィールのバナーをShowWcaseプロファイルとShowWcaseのすべてのこれらの詳細とページを作成し、無料ドメインを提供します.それで、あなたはちょうどあなたのプロフィールを示すためにその関連を共有することができます.クール、右?
ここに私のitsrakesh.showwcase.com
それだ!それは私が作った方法です.
私はあなたが役に立つと思います.もしそうなら、毎週このようなより便利なブログの私に従ってください.
フィードバック
私が私のウェブサイトまたはあなたがそれのようなものを改善する方法に関するフィードバックをください.これは私を大いに助けます.(詳細なフィードバックを与えるには、フッターのGoogleフォームリンクがあります.また、単純なフィードバックがコメントを残している場合)
ありがとう😇.
今、あなたのためのポートフォリオのウェブサイトを生成するツールがたくさんあります.しかし、私は自分のスキルを練習し、それをよりカスタマイズできるように自分自身を構築することを決めた.
始めましょう
始める前に
ツール、テクノロジー、フレームワーク、ライブラリ
ファイル構造
フロントエンド
この構造が好きならtemplate . あなたはすぐにプロジェクトを設定するために使用することができます.
Portfolio/
├── public
└── src/
├── assets/
│ ├── documents
│ └── images
├── common/
│ └── components/
│ ├── Footer
│ ├── Navigation
│ ├── UIElements/
│ │ └── loadingAnimations
│ ├── hooks
│ └── util
├── features/
│ └── ProfileRedirect
└── pages/
├── 404
├── About/
│ └── components
├── Blogs/
│ └── components
├── Contact/
│ └── components
├── Home/
│ └── components
├── Profiles
└── Work/
├── components
└── projects
バックエンド
このウェブサイトには大きなバックエンドがありません.
Server/
└── src/
├── controllers/
├── data/
├── routes/
├── services/
└── util/
ウェブサイトには6ページが含まれている.
パート1 -ホームページ#
ホームページは、全体のウェブサイトの簡単な概要です.それは私についての迅速なイントロが含まれて、いくつかの社会的なリンクは、電子メールと再開ボタンをクリックします.そして、異なるセクション- 2最近のプロジェクト、なぜ私とCTAを雇う.ヒーローセクションの3 D NFTはこのウェブサイトから生成されますreadyplayer.me "
パート2 -作業ページ#
作業ページは、私がすることの概要です.現在、それはプロジェクトのセクションがありますが、私はもっと追加を考えています.
プロジェクトページ#
プロジェクトページにはカードが含まれます.各カードには、プロジェクトの写真、タイトル、技術スタック、詳細ページとリンクをプレビューするライブへのリンクが含まれます.
プロジェクト詳細ページ
プロジェクトの詳細ページは、実際にはマークダウンファイルであり、HTMLとしてレンダリングされます.私はNPMパッケージを使用しますmarkdown-to-jsx . マークダウンファイルはgithub READMEです.それぞれのプロジェクトのレポのMD.これは簡単なトリックです.
...
const [readme, setReadme] = useState("");
...
// getting the README URL
...
const response = await axios.get(
`https://raw.githubusercontent.com/RakeshPotnuru/${repoName}/${
'master' || 'main'
}/README.md`
);
setReadme(response.data);
...
// render markdown
...
<div className="project-item">
<Markdown children={readme} />
</div>
...
パート3 -ブログページ#
ブログページは私のお気に入りページです.私はアマゾンのプライムビデオテレビアプリから小さなインスピレーションを取った😂. なぜそのプレビュー?私は自分の記事を3つのプラットフォームに投稿します.それで、プレビューを示すこの考えはそれらの3つの関連を含むことになっていて、ブログの小さな部分を示します.
これはどうやって動くの?使用するDev 各ブログは、カバーイメージ、タイトル、説明、反応、ビュー、読書時間、出版日などを含むデータを含んでいます.そのデータにはブログURLと標準的なリンクも含まれます.したがって、“読み取りブログ”URLは正規のURLです、“dev”のURLはブログのURLであり、まだ“媒体”のURLを把握することはできません☹️ 媒体がURLの最後に「id」を加えますので、現在のすべてのブログは私の媒体プロフィールページにリダイレクトします.結論として、このページのすべては自動化され、データベースにデータをアップロードする必要はありません.
パート4 -アバウトミーページ#
アバウトミーページは私についてのすべての簡単な概要です.これはいくつかの簡単なリンクが含まれ、Github貢献グラフ、ブログ解析、ツール、私は、言語、フレームワーク私は知っている、私のスキル(そのパーセンテージバーを削除する必要があります)と私の成果.
GITHUB貢献グラフのために、私はNPMパッケージと呼ばれましたgithub-calendar-graph .
第5部-コンタクトフォームページ#
連絡先ページには、人々のための簡単なフォームが私に簡単なメッセージを残しています.
このフォームはどのように動作しますか?私はnodemailer NODEJSとメールを送信するにはsendgrid メールサービスとして、ユーザーが「メッセージを送る」をクリックすると、ユーザメッセージを含む自分自身にメールを送ります.
パート6 -プロフィールページ#
プロフィールページには、いくつかの主要なプロファイルへのリンクが含まれます.そして、ここでクールなもの-あなたはURLで私の任意のオンラインプロファイルを見つけることができます
https://itsrakesh.co/profiles/<websitename> , それは私のプロファイルにリダイレクトされます.たとえば、私のTwitterのプロファイルにリダイレクトします.アニメーション
このウェブサイトはあまりにも多くのアニメーションを持っていない、これらのアニメーションのほとんどは、これらのアニメーションのほとんどは、ホームページ上のこれらのボタンのようないくつかのアニメーションcodepen 「コミュニティ.
ローダー
彼らはユーザーエクスペリエンスに最適ですので、このウェブサイトは多くのロードアニメーションを持っています.
単一のスピナー、プレースホルダーといくつかの創造的なローダのようなローダの種類があります.私は、ページのロードとbootstrapのプレースホルダのためにスピナーを上記の絵のようなプレースホルダーアニメーションのために使いました.
ページロードアニメーション?「コード分割」と呼ばれる反応には、ブラウザがロードされたファイルだけをロードする機能があります.ブラウザがファイルをロードする間、あなたは空白のページの代わりに若干のアニメーションを示すためにその待ち時間を使うことができます.
次のようにします.
import { lazy } from 'react';
const Home = lazy(() => import('./pages/Home/Home'));
...
<React.Suspense fallback={<LoadingSpinner />}>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</React.Suspense>
...
分析論
ウェブサイトのフッター部には訪問回数があります.使用するCountAPI このウェブサイトが訪れた回数をカウントする.
私もGoogle Analyticsを使用する必要はありませんでした.私はGAを学ぶためにそれを使用.
検索コンソール
最後に、私はGoogle検索コンソールとビングウェブマスターツールに私のウェブサイトを提出しました.しかし、これらのツールは、あなたのウェブサイトで問題を見つけるのを助けます.
挑戦した
すべての開発者の経験のそれらの一般的なエラーとは別に、私は良いデザイン、色の組み合わせ、レイアウトなどを見つけるために苦労しました.私が直面した課題のほとんどはフロントエンドだけで、バックエンドとあまり関係がないので、それは単純なrestapiです.
学んだこと
これは私の最初のポートフォリオのウェブサイトですので、私はそれを構築全体を学んだ.技術的なものだけでなく、どのように一貫して、どのように一貫性のある、どのようにユーザーの視点から、どのようにさまざまな色を混在させる方法を設計するには、建物全体では、私はgoogling多くのことをしたので、どのように解決するために解決策を見つけることがどのような解決策を見つける適切な場所です.時間を無駄にしないように、私も非常に効果的にstackoverflowを使用して私は質問をする機会を得ることはありません.
あなたがウェブdevにないならば、あなたはポートフォリオウェブサイトを持つことができますか?
今、ポートフォリオをしたい場合は、Web開発者ではないか、フロントエンドの人ではない場合はwix , WordPress など
そして、単純なページが欲しいならば、若干の大きなウェブサイトがあります
私が知っている若干の選択肢は、ここにあります:
ギタブプロフィール#
あなたはGithubと素晴らしい探しプロファイルを作成することができます.
例えば、ここは私のものですGithub
2 . PeerList#
PeerListは誰にとっても素晴らしいです.それはあなたにあなたのすべてについて、あなたの仕事、ブログ、プロジェクトなどを含めることができます本当に素敵なプロフィールページを与える
3 . showwcase#
ShowWcaseは開発者向けのコミュニティです.そしてそれはあなたにページと無料のカスタムドメインを与えるクールな機能を持っています.これは何ですか?基本的には、すべてのあなたのスキル、プロジェクト、経験、技術スタック、社会的なリンク、プロファイルの写真やプロフィールのバナーをShowWcaseプロファイルとShowWcaseのすべてのこれらの詳細とページを作成し、無料ドメインを提供します.それで、あなたはちょうどあなたのプロフィールを示すためにその関連を共有することができます.クール、右?
ここに私のitsrakesh.showwcase.com
それだ!それは私が作った方法です.
私はあなたが役に立つと思います.もしそうなら、毎週このようなより便利なブログの私に従ってください.
フィードバック
私が私のウェブサイトまたはあなたがそれのようなものを改善する方法に関するフィードバックをください.これは私を大いに助けます.(詳細なフィードバックを与えるには、フッターのGoogleフォームリンクがあります.また、単純なフィードバックがコメントを残している場合)
ありがとう😇.
Reference
この問題について(ポートフォリオサイトの作り方), 我々は、より多くの情報をここで見つけました https://dev.to/itsrakesh/how-i-built-my-portfolio-website-hl5テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol