どのように私は私のポートフォリオとして使用するVSCodeクローン

私のポートフォリオにWhatYouCodBoutWareと呼ばれるすべてを紹介したいと思います!これを完了するために私は良い4〜5日かかったと私は喜んで私はそれが出てきた方法を誇りに思うと言うことができます.私の意図は、私のポートフォリオをVSCODEに可能な限り似ているようにすることでした.私は、このルートに行くのは賢いと思いました.なぜなら、開発者としての大部分は、魔法を起こすためにVSCodeを使っているからです.私は基本的なHTML/SCSS/JSを使用してこれを達成するために、アイコンとアニメーションのいくつかの他のツールと一緒に.
概要

私が一番楽しんだもの
私は実際にそれがすべての瞬間を正直に楽しんだ.しかし、もし私が特定の何かを選択する必要がある場合、私はスタイリングを楽しんだと言うだろう.vscodeのように、私のポートフォリオを設計するためにvscodeを見なければならなかったので、私はそれを作成していました🤯. そこで、ブラウザで作成したvscodeエディタのクローンの中をクリックして、そこから変更を加えることができると思いました😅.
使用される技術の詳細
HTML
私はかなり簡単にコンテンツのHTMLを使用します.私も、フォントの素晴らしいアイコンの幅広い選択を使用するように含まれています.ソーシャルアイコン、エディタヘッダーのタブの横にあるアイコン、左側のエクスプローラなど.
SCSS
私は、SSSSを使用して、VSCODE自体に私のポートフォリオのほとんど「吐き出すイメージ」観察を成し遂げました.

js
私は、双方向性とアニメーションを扱うために、jsを使いました.アニメーションなどの場合は、最初のアプリをロードし、下部にあるエクスプローラの下にある社会的なアイコンを参照してくださいドロップダウンします.私も、あなたが着陸ページに向けられている習慣を保つように、LocalStorageにURLを加えます

私は、これがちょうど私のポートフォリオを見るためにVSCodeアイコンをクリックしなければならないユーザーのために悪いUXであると感じました.それで、私は彼らが着陸ページを一度だけ見なければならないところにそれをセットアップしました.私はJSとLocalStorageを使用して、ユーザーが既にサイトを訪問したかどうかを確認し、彼らがした場合、彼らは私のポートフォリオに代わりにリダイレクトされます.このロジックのコード断片です.

また、私は“デスクトップの壁紙”は、サイトを訪問したときにランダムに変更少し機能を実装しました.私は、Pexelsからこれらのイメージを得ました.それをチェック!私がAnimate.cssを使ったアニメーションのために.これは非常に簡単なものを使用することです.
私が望む願望
多くはありませんが、私が変更を加えたいいくつかのことがあります.特に、私のコード.多くの繰り返しがあります.この繰り返しは、私はこれを得るために、私はいくつかの重複したコードを取り除くために主要なリファクタを行う上で計画を取得するためにokだった.つまり、これを見てください.

const handleTabClick = () => {
    Array.from(tabs).forEach((tab) => {
        tab.addEventListener("click", (e) => {
            if (e.target.classList.contains("readme")) {
                user.style.borderLeft = "2px solid #fff";
                astronautIcon.style.color = "#fff";
                readme.style.display = "block";
                readme.style.backgroundColor = "#272727";
                readmePath.style.display = "block";
                nayaImageContWithCaptionMax.style.display = "block";
                nayaImageContWithCaptionMin.style.display = "block";
                skillsEducation.style.display = "block";

                // turn off git stuff
                git.style.borderLeft = "none";
                gitIcon.style.color = "#7e7e7e";
                gitProjects.style.backgroundColor = "#505050";
                projectsPath.style.display = "none";
                myProjectsContainer.style.display = "none";

                // turn off contact stuff
                contactMe.style.borderLeft = "none";
                contactIcon.style.color = "#7e7e7e";
                contactPath.style.display = " none";
                contact.style.backgroundColor = "#505050";
            } else if (e.target.classList.contains("git-projects")) {
                // turn on user > projects
                git.style.borderLeft = "2px solid #fff";
                gitIcon.style.color = "#fff";
                gitProjects.style.display = "block";
                gitProjects.style.backgroundColor = "#272727";
                projectsPath.style.display = "block";
                myProjectsContainer.style.display = "block";
                lineNumbers.style.display = "none";

                //turn off user stuff
                user.style.borderLeft = "none";
                astronautIcon.style.color = "#7e7e7e";
                readme.style.display = "block";
                readmePath.style.display = "none";
                readme.style.backgroundColor = "#505050";
                nayaImageContWithCaptionMax.style.display = "none";
                nayaImageContWithCaptionMin.style.display = "none";
                skillsEducation.style.display = "none";

                // turn off contact stuff
                contactMe.style.borderLeft = "none";
                contactIcon.style.color = "#7e7e7e";
                contactPath.style.display = " none";
                contact.style.backgroundColor = "#505050";
            } else if (e.target.classList.contains("contact")) {
                contactMe.style.borderLeft = "2px solid #fff";
                contactIcon.style.color = "#fff";
                contact.style.display = "block";
                contact.style.backgroundColor = "#272727";
                contactPath.style.display = "block";

                // turn off project stuff
                git.style.borderLeft = "none";
                gitIcon.style.color = "#7e7e7e";
                gitProjects.style.backgroundColor = "#505050";
                projectsPath.style.display = "none";
                myProjectsContainer.style.display = "none";

                // turn off user
                user.style.borderLeft = "none";
                astronautIcon.style.color = "#7e7e7e";
                readme.style.display = "block";
                readmePath.style.display = "none";
                readme.style.backgroundColor = "#505050";
                nayaImageContWithCaptionMax.style.display = "none";
                nayaImageContWithCaptionMin.style.display = "none";
                skillsEducation.style.display = "none";
            }
        });
    });
};

😳...
これは1つのdamnメソッドです.私は間違いなくこれより良い.しかし、鉱山の賢い前技術リードは、「最初にそれからそれから働くことを得ることはOKです、そして、後でRefactor」と言いました.
私のポートフォリオの将来計画
まず第一に、私は私のポートフォリオのモバイル版を設計するつもりです.その後、最終的に、私はこれを完全な吹き飛ばさノード/反応アプリを作る予定です.私も明らかに、それは非常にアクセス可能です(アプリケーションへの実際のURLリンクなど)、より多くのプロジェクトを追加する予定です.
OK、私は話しています、ここのリンクWhatYouCodingBoutWillisです.以下のコメントとフィードバックを残して、感謝し、私はそれを感謝!