我如何克隆 VSCode 并将其用作我的投资组合

我想向大家介绍我的作品集，名为“WhatYouCodingBoutWillis！”！我花了整整四五天的时间才完成，我很高兴地说，我对最终成品感到非常自豪。我的目标是让我的作品集看起来尽可能与 VSCode 相似。我认为这样做很明智，因为我们大多数开发者都使用 VSCode 来实现这个神奇的功能。我使用了基本的 HTML/SCSS/JS 来实现它，同时还使用了一些其他图标和动画工具。

概述

我最喜欢的

说实话，我真的很享受制作它的每一刻。但如果一定要选一个特别的点，我会说我喜欢它的风格。创作的时候有点“怪怪的”，因为我必须一边看着 VSCode，一边在 VSCode 里写代码，才能把我的作品集设计得像 VSCode 的样子🤯。所以，我经常会点击我在浏览器中创建的 VSCode 编辑器克隆版，以为可以从那里进行修改😅。

更多关于所用技术的信息

HTML

我使用 HTML 来编写内容，这相当直观。我还使用了 Font-Awesome 来充分利用其丰富的图标选择。例如社交图标、编辑器标题栏中选项卡旁边的图标，以及左侧的资源管理器图标。

SCSS

我使用 SCSS 实现了我的作品集与 VSCode 本身几乎“一模一样”的外观。

我使用 JS 来处理交互和动画。例如，首次加载应用时，在资源管理器下拉菜单左下角看到社交图标的动画。我还将 URL 添加到 localStorage，这样你就不会一直被引导到登录页面 >

我觉得用户为了查看我的作品集，不得不不断点击 VSCode 图标，这种用户体验很糟糕。所以我做了一个设置，用户只需要看一次落地页。我使用了 JS 和 localStorage 来检查用户是否已经访问过网站，如果已经访问过，就会直接重定向到我的作品集页面。以下是这段逻辑的代码片段。

另外，我还实现了一个小功能，让“桌面壁纸”在访问网站时随机变化。这些图片是我从Pexels上找到的。快来看看吧！动画部分我用的是Animate.css。这个插件用起来非常简单。

我希望解决的问题

虽然不多，但有些地方我想改一下。具体来说，是我的代码。有很多重复的地方。这些重复对我来说还好，可以让我顺利运行，所以我计划做一个大的重构，去掉一些重复的代码。我的意思是，看看这个……

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";
            }
        });
    });
};

😳...

这真是个糟糕的方法。我肯定能做得更好。不过，我之前一位明智的技术主管说过：“先让它工作起来，然后再重构也没问题”，所以我感觉还好。

我的投资组合未来计划

首先，我打算设计我的作品集的移动版本。最终，我计划把它打造成一个功能齐全的 Node/React 应用。当然，我还计划添加更多易于访问的项目（例如，提供应用的实际 URL 链接等）。

好了，我说完了，这是链接WhatYouCodingBoutWillis。请在下方留下你的评论和反馈，谢谢！

鏂囩珷鏉ユ簮锛�https://dev.to/greedybrain/i-used-vscode-itself-as-my-portfolio-1fg5