さらにもう一つのウェブサイトのリニューアル。

心の中で、ちょうど昨日この記事を書きました。

わかりました。それで...ウェブサイトを完全に再構築したかもしれません...また

シド・21年12月23日

#webdev #showdev #html #css

しかし、4 年近くがあっという間に過ぎ、今になって振り返ってみると、Web デザインにおける私の初期の試みは、まあ、あまり優れたものではなかったと自信を持って言えます。古いウェブサイトは 13 歳がデザインしたように見えました。なぜなら、それらは だった からです。そう、その 13 歳は私でした?

。

それ以来:

• 私はあと 3 年間の学校を卒業しました。私は今、実質的に専門学生です。
• 私は優れた UI デザインの重要な基礎を研究するのに数え切れないほどの時間を費やしてきました。私は自分が認める以上に多くのデザインに関する記事を読んできました。
• 私はより良いコードを書く方法を学びました。ほとんどの場合、クラッシュしなくなりました。
• Adam Wathan 著 UI のリファクタリング という本を読みました。これにより、UI の設計についての考え方が完全に変わりました。

しかし、その間ずっと、私はどういうわけか、ウェブサイトの更新という小さな点を無視していました。 16歳の今、このコメント:

エドヴァルド・ブッシュ・ニールセン • 2021 年 3 月 6 日

ウェブサイトの UI がとても気に入りました。カラーバリエーションも素晴らしい！しかし、個人のウェブサイトに関しては、自分のスキルと経験に重点を置くべきだと私の意見ではあります。少なくとも、あなたの目標が採用担当者に自分自身を売り込むことである場合は。申し訳ありませんが、ほとんどの採用担当者はブログ投稿など気にしません。彼らは、あなたが何ができるか、そしてそれをどれだけ長く続けているかを気にしています。プロジェクトのポートフォリオも重要です。ブログ投稿には確かにあなたの性格や興味が少しは表れますが、採用担当者はおそらくブログ投稿を読む時間がありません。あなたは、金曜日の夜に彼らが審査する最後の申し込みになるかもしれません。彼らの時間を無駄にすることは絶対に避けたいことです。

しかし、その素晴らしい仕事以外にも！そしてもちろん、これは単なる私の意見です。

本当にやり始めました。

私はさまざまなプロジェクトに多くの時間を費やしてきましたが、それらを実際に展示する場所がなく、したがって潜在的な採用担当者に好印象を与えるプラットフォームがありませんでした。さらに、私のプロジェクトのほとんどの UI を見ると、まだやや平凡なものでした。私は彼らを驚かせる何かが必要だったので、数日前、全力を尽くして個人的なウェブサイト (あるいはポートフォリオ) を再設計し、再構築することにしました。

テクノロジー

これまでの私の個人的な Web サイトはすべて、昔ながらの HTML、CSS、JavaScript で構築されていました。シンプルで機能的ですが、電子レンジを使ってグルメな食事を作るようなものです。さらに、私は自分の React スキルを披露したかったのです (正直に言うと、それが本当の理由でした)。

そこで、Next.js を選択しました。なぜ？そうですね、当時はそれが良い選択のように思えましたし (そして実際にそうなりました)、それに私はすでにそれについて十分な経験を積んでいました。

CSS には、Tailwind CSS を使用しました (つまり、2024 年にこれを使用していないということは、本当にですか? ?)。

デザイン

古いウェブサイトを見つめるのにあまりにも多くの時間を費やした後、ライト モードでは不十分だと判断しました。私は劇的な変化、つまり本当に影響を与えるような変化を望んでいました。そして、それを実現するには、スイッチを入れて完全なダークモードにすることよりも良い方法があるでしょうか?あなたのウェブサイトが悪役編が始まるようなものですか?.

フォントには Inter を選択しました。他のフォント、特に Windows デバイスで何度も失敗した後、私のサイトは次のようになりました。

...macOS ではこれと比較して、Tailwind CSS が提供するデフォルトのシステム フォントの使用を中止することにしました。

明らかに、Mac のフォントの方が優れていました。しかし、デフォルトの San Francisco フォントは Apple 専用なので、代替フォントが必要でした。 Inter を入力してください。これは私がこれまで見た中で最も素晴らしいフォントの 1 つであり、San Francisco の完璧な代替品です。

わかりますか?このフォントがとてもきれいですね?

メインカラーはパープルにしました。特別な理由はありませんが、以前使用していたインディゴを混ぜてみることにしました。

レイアウト

ヒーローセクションから始めました。簡単、シンプル、そして...ああ、ちょっと待って...タイプライター効果があると言いましたか?

その後、私は次のセクションについての考えに素早く移りました。

エドヴァルドのコメントを再考:

エドヴァルド・ブッシュ・ニールセン • 2021 年 3 月 6 日

ウェブサイトの UI がとても気に入りました。カラーバリエーションも素晴らしい！しかし、個人のウェブサイトに関しては、自分のスキルと経験に重点を置くべきだと私の意見ではあります。少なくとも、あなたの目標が採用担当者に自分自身を売り込むことである場合は。申し訳ありませんが、ほとんどの採用担当者はブログ投稿など気にしません。彼らは、あなたが何ができるか、そしてそれをどれだけ長く続けているかを気にしています。プロジェクトのポートフォリオも重要です。ブログ投稿には確かにあなたの性格や興味が少しは表れますが、採用担当者はおそらくブログ投稿を読む時間がありません。あなたは、金曜日の夜に彼らが審査する最後の申し込みになるかもしれません。彼らの時間を無駄にすることは絶対に避けたいことです。

しかし、その素晴らしい仕事以外にも！そしてもちろん、これは単なる私の意見です。

しかし、私の意見では、個人の Web サイトに関しては、特に採用担当者に好印象を与えることが目標である場合は、自分のスキルと経験に焦点を当てる必要があります。

ブログセクションを完全に廃止することにしました。さまざまなフレームワークやツールに関する私の何千もの言葉をあなたは楽しんでくれるかもしれませんが、採用担当者はおそらくそうではありません。さらに、学校の最後の 2 年間に入るにつれて授業の負担が増えたため、ブログを維持する時間がまったくありませんでした。

また、すべての採用担当者が確認できるように、スキル セクションを最上部、前面、中央に移動しました。ああ、クールなエフェクトを追加してみませんか?以下に示すエフェクトでは、framer-motion を使用しました。これは、「React 用のプロダクション対応モーション ライブラリ」と説明されています。これ以上同意することはできません。

わかりますか?アニメーションがどれほどクールであるかを見てください。

次に、プロジェクトセクションに取り組みました。トップ 4 プロジェクトをホームページで紹介し、残りへのリンクも含めました。このセクションでは、プロジェクトをクリックするとページの下部からモーダルが跳ね上がり、詳細が表示されるという素晴らしいアイデアを思いつきました。そしてもちろん、framer-motion がその仕事のためのツールでした。

1 時間後、次のものができました:

友達が意見を言うまでは完璧だと思っていました:

• 弾みすぎるので、少しトーンを下げてください。
• それは気に入っていますが、バウンスを本当に減らす必要があります。
• その弾力は不快に見えます。

最初、私はそれを変えることに抵抗がありました。しかし、何時間も調整した後、おそらく、おそらく、バウンスが少し過剰であることに気づきました。そこで、ダイヤルダウンしました。

最終バージョン。なかなかいい感じですね?

最後に、LinkedIn と電子メールへのリンクを含む連絡先セクションを追加しました。そしてもちろん、すべての採用担当者が閲覧できるように、GitHub プロフィールへのリンクも追加しました。

前に述べたように、プロジェクト ページも作成しました。これはホームページのプロジェクト セクションと非常に似ており、私が長年にわたって開発してきたすべてのプロジェクトを紹介する同じモーダルを誇っていました (注: このセクションはまだ進行中の作業なので、少し違っていても驚かないでください)スパース)。

それで私は今、苦労して得た知識をすべて使ってウェブサイトを更新しています。この作品が 16 歳の若者がデザインしたように見えないことを祈りましょう。ああ、待って… ?

---

ここで私のウェブサイトとここでコードをチェックしてください。この投稿が気に入った場合は、リポジトリに星を付けて、フォローを検討してください。

シドクラフトコード / ポートフォリオ

Next.js で構築された私の個人的なポートフォリオ Web サイト

これは、create-next-app でブートストラップされた Next.js プロジェクトです。

はじめに

まず、開発サーバーを実行します。

npm run dev
<span class="pl-c"># or</span>
yarn dev
<span class="pl-c"># or</span>
pnpm dev
<span class="pl-c"># or</span>
bun dev

ブラウザで http://localhost:3000 を開いて結果を確認します。

pages/index.js を変更することで、ページの編集を開始できます。ファイルを編集すると、ページが自動更新されます。

API ルートには http://localhost:3000/api/hello でアクセスできます。このエンドポイントは、pages/api/hello.js.

で編集できます。

pages/api ディレクトリは /api/* にマッピングされます。このディレクトリ内のファイルは、React ページではなく API ルートとして扱われます。

このプロジェクトでは、next/font を使用して、カスタム Google フォントである Inter を自動的に最適化し、読み込みます。

さらに詳しく

Next.js について詳しくは、次のリソースをご覧ください。

• Next.js ドキュメント - Next.js の機能と API について学びます。
• Next.js を学ぶ - インタラクティブな Next.js チュートリアル。

Next.js GitHub リポジトリをチェックしてください - フィードバック…

GitHub で表示

ここにいくつかのスクリーンショットがあります


:

以上がさらにもう一つのウェブサイトのリニューアル。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。