DEV Community

Cover image for How I Cloned VSCode to use as my Portfolio
Naya Willis
Naya Willis

Posted on

How I Cloned VSCode to use as my Portfolio

I would like to introduce you all to my portfolio called WhatYouCodingBoutWillis! It took me a good 4 to 5 days to complete this and I can happily say I'm proud of how it came out. My intention was to make my portfolio look as similar as possible to VSCode. I thought that it would be clever to go this route because most of us as developers use VSCode to make the magic happen. I used basic HTML/SCSS/JS to accomplish this, along with some other tools for icons and animations.

Overview

Portfolio Demo

What I enjoyed the most

I actually enjoyed every moment of it to be honest. But, if I must choose something specific, I'd say I enjoyed the styling. It was a bit "loopy" as I was creating this because I had to look at VSCode to design my portfolio to look like VSCode, while writing the code inside VSCode 🤯. So, there were often times where I would click inside the VSCode editor clone that I created in the browser thinking that I can make the changes from there 😅.

More on the tech used

HTML

I used HTML for the content which was pretty straightforward. I also included font-awesome to make use of their wide selection of icons. Such as the social icons, the icons you see next to the tabs in the editor header, and the explorer on the left.

SCSS

I used SCSS to accomplish the almost "spitting image" look of my portfolio to VSCode itself.

Alt Text

JS

I used JS to handle the interactivity and animations. Animations such as when you first load the app and you see the social icons at the bottom left of the explorer drop down. I also add the url to localStorage so that you wont keep being directed to the landing page >

Alt Text

I felt that this was a bad UX for a user to keep having to click on the VSCode icon just to see my portfolio. So I set it up where they would only have to see the landing page once. I used JS and localStorage to check if a user already visited the site and if they did then they'll just be redirected to my portfolio instead. Here's a code snippet of this logic.

Alt Text

Also, I implemented a little feature where the "Desktop Wallpaper" changes randomly upon visiting the site. I got these images from Pexels. Check it out! For the animations I used Animate.css. This is a very simple one to use.

Issues I wish to address

Though there aren't many, but there are some things I wish to make changes to. Specifically, my code. There is a lot of repetition. This repetition was ok for me to get this up and running so I plan on doing a major refactor to get rid of some duplicate code. I mean, look at this ...

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";
            }
        });
    });
};
Enter fullscreen mode Exit fullscreen mode

😳...

This is one got damn method. I can definitely do better than this. But, a wise former tech lead of mines said "It's ok to get it working first then refactor later", so I don't feel too bad.

Plans for my portfolios future

First and foremost, I am going to design the mobile version of my portfolio. Then eventually, I plan to make this a full blown Node/React app. I also, obviously plan to add more projects to it that are highly accessible (actual url links to the application, etc).

Ok, I'm done talking, here's the link WhatYouCodingBoutWillis. Leave your comments and feedback below, thanks, and I appreciate it!

Top comments (22)

Collapse
 
ms314006 profile image
Clark • Edited

So good!
I love your idea! I saw a similar idea before, but the different is that he made a game: peteroravec.com/

Collapse
 
greedybrain profile image
Naya Willis

This is DOPE. lol. That's the thing about us developers. We get to be creative as can be

Collapse
 
monfernape profile image
Usman Khalil • Edited

It's amazing. My two cents.
How about changing the background. It really doesn't match the VS Code.

And I have a question? How do you keep yourself motivated for your own projects. I started one this April but I hardly commit one day a week.

Collapse
 
greedybrain profile image
Naya Willis

I try to just tune out everything else that isn't important and get what I have to get done, done. Sometimes it's hard though. But, you can do it.

Collapse
 
andrehorstmann profile image
Andre Horstmann

That is pretty cool!! Was it hard to change the vscode source code to reflect your program?

Collapse
 
greedybrain profile image
Naya Willis

Can you elaborate a little please? I feel like I understand but I don't ha

Collapse
 
andrehorstmann profile image
Andre Horstmann

Sure :-) did I get it right that you used the vscode source code to compile your own tool? And that you did so by changing the source code? If so, was it difficult?

Thread Thread
 
greedybrain profile image
Naya Willis • Edited

Oh no. My this is a 100% clone from scratch. From <!DOCTYPE> to the closing html tag. I wrote my own source code to accomplish everything you see.

Collapse
 
williamhenderson profile image
William Henderson

I did something similar to this by using HTML, CSS and JS to put my portfolio in a terminal... Yours is much cooler though! w-henderson.github.io

Collapse
 
greedybrain profile image
Naya Willis

wow, I like the animation

Collapse
 
shripathy profile image
Shripathy 🚀

Looks amazing 🔥

Collapse
 
greedybrain profile image
Naya Willis

Thanks Shripathy

Collapse
 
13point5 profile image
Bharath Sriraam R R

Amazing creativity! Just awesome!

Collapse
 
coderjai profile image
Jai Marshall

This is so cool.

Collapse
 
greedybrain profile image
Naya Willis

Thanks Jai

Collapse
 
dj221ai profile image
D

Well It is quite nice idea and nice work. keep it up!!

Collapse
 
greedybrain profile image
Naya Willis

Thanks Dhirendra

Collapse
 
greedybrain profile image
Naya Willis

I actually never heard of that, I'll definitely look into that

Collapse
 
cguttweb profile image
Chloe

What a great idea! I especially like the fact you've got the mini-map in there :)

Collapse
 
greedybrain profile image
Naya Willis

Lol, I thought it'd be cool to add that ha. I basically just took a literal screenshot of w.e code I can see and used that.

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more