DEV Community

loading...
Cover image for I Built a VSCode Inspired Developer Portfolio

I Built a VSCode Inspired Developer Portfolio

itsnitinr profile image Nitin Ranganath ・2 min read

The Idea & Inspiration

Truth be told, I've lost count of the number of amazing portfolio websites I've visited and been in awe of. I would try to take some inspiration from them and recreate them in my own way for my portfolio. However, after working on it for a few hours, I would come across a different design or idea and hop onto that instead.

Due to this cycle, I have over 5-6 incomplete portfolio websites on my laptop, each having a different design. I love the creativity of some websites but I just can't make up my mind and stick to one design. So, what caught my eye this time? This amazing Ubuntu-themed portfolio website.

I liked the idea so I thought of what tools do developers use. And what could be a better choice than the text editor most of us write code on: Visual Studio Code.

VSCode-Themed Portfolio

If you're interested in exploring the project yourself, there's the link to it: http://vscode-portfolio.vercel.app/

GitHub logo itsnitinr / vscode-portfolio

A VSCode themed developer portfolio built using Next.js

vscode-portfolio

A Visual Studio Code themed developer portfolio website built with Next.js and deployed on Vercel.

vscode-portfolio banner

Features Roadmap

  • Themes and customizations
    • GitHub Dark (default)
    • One Dark Pro
    • Dracula
    • Ayu
    • Nord
  • Interactive custom terminal

For other features and themes suggestions, please open an issue.

Running Development Server

npm run dev
# or
yarn dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 with your browser to see the result.

All VSCode related components can be found in the components folder. To change the content of the portfolio, check out the pages folder. To add or remove pages, modify components/Sidebar.jsx and components/Tabsbar.jsx.

Next.js Resources

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform

This is a responsive and server-side rendered portfolio website built with Next.js, one of the technologies that I mentioned in my "Technologies I'll be Learning in 2021" post.

Right from the layout to appearance, I'm aiming to build a portfolio website that looks and feels like Visual Studio Code. This includes adding some cool stuff like themes, extensions, an interactive terminal, and probably more.

Can You Help Me?

As you might've noticed, most of the pages are still empty because I wanted some feedback on the layout and VSCode aspects of the design. What type of design would you like to see for the other pages? What other features would you like to see in this project? I would highly appreciate if you leave a feedback, criticism or suggestion of any kind.

The best part of the project is that since the other pages are yet to be built, you can fork the project and implement your own design which can help you stand out from the original project.

If you're interested in contributing, the project is open-source and I would appreciate any sort of help. Otherwise, you can share it or star the repo, if you want to of course.

Discussion (71)

Collapse
khangnd profile image
Khang

I love creative ideas like this and very well done 👍
You might as well like to check out mine (windows inspired portfolio): khang-nd.github.io 😁

Collapse
realniendoo profile image
Abdul Rauf 🇬🇭

Your portfolio is sick man🔥🔥🔥🔥 I wish I was this good😀

Collapse
khangnd profile image
Khang

You will for sure :)

Collapse
codeboi profile image
Timothy Rowell

LOL. i love it :D

Collapse
christiangroeber profile image
Christian Gröber • Edited

Love how so many people are doing home screens now, here's mine: christian-groeber.ch

Still a work in Progress

Collapse
itsnitinr profile image
Nitin Ranganath Author

Wow, so creative! My only recommendation is to get a free SSL certificate for Photography Portfolio page.

Collapse
ishikaa_2302 profile image
Ishika Gupta

Something amazing and unique.
Great work 🙌🏻

Collapse
itsnitinr profile image
Collapse
mehdi_jai profile image
MEDOSTUDIO • Edited

Hhh out of the box. I liked it 👌🏽👌🏽

Collapse
itsnitinr profile image
Nitin Ranganath Author

Woah, this is amazing. I can surely learn a thing or two from this. Great job!

Collapse
panasoft profile image
Abdul-Razak Alhassan

That is so cool... Maybe your contact form can look like a terminal opened in VScode!

Collapse
itsnitinr profile image
Collapse
hima_khaitan profile image
Himanshu • Edited

Hey There! Inspired from you I built my DEV Portfolio
github-portfolio.vercel.app/

Thanks Dude! Do checkout!
Portfolio

Collapse
itsnitinr profile image
Nitin Ranganath Author

Woah, looks amazing. Couldn't distinguish this from the original website. Great idea and implementation.

Collapse
hima_khaitan profile image
Himanshu

Means a lot! Thanks dude!

Collapse
hyprnrgy profile image
Kuldeep Ravishankar

Hey, nithin! I absolutely loved the portfolio and would love to share your work with others too. I think this is a great example of a simple yet minimalistic portfolio that all programmers should be inspired by!

Collapse
itsnitinr profile image
Nitin Ranganath Author

Wow, thanks a lot for the appreciation. Feel free to share in case you'd like to.

Collapse
popeating profile image
popeating

Looks cool, but is a bit confusing from ux perspective
Some examples:

  • all the top menu (and the dots menu on right) have no link but still a pointer when hovering
  • The pages can be reached in many ways, but their menu are not organized: About is the only page that have an icon on the lower part, all the pages are under the "portfolio" but still accessible via the left icon menu

You should probably clean up the interface its quiete frustrating having more (different) links leading always to the same page

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you and to be honest, I agree with you. I was pondering over the same thing that how there are multiple ways to reach the same page. I'll see how I can improve it but I really appreciate the suggestions.

The dots on the menu don't have any functionality for now but I was planning to mimic some minimize and maximize animations. Not sure if I should do that but I'll give it a try.

I've kept the above page icon on the lower part because VSCode has this icon on the lower part as well. While it is for managing accounts I guess, I thought the icon could signify an about page for me. But I totally get your point. Once again, good suggestions and thanks a lot.

Collapse
codeboi profile image
Timothy Rowell

Is it ok if I used this project, and customize it as my own? I would give you full credit.

Collapse
itsnitinr profile image
Nitin Ranganath Author

Definitely. Go for it. I'd love to see you make it your own.

Collapse
codeboi profile image
Timothy Rowell

Thanks!!

Collapse
codeboi profile image
Timothy Rowell

whats the run command?

Collapse
itsnitinr profile image
Nitin Ranganath Author

Hi, you can run the project in development mode using npm run dev or yarn dev. Make sure you install all the packages first though. Let me know if you need any help :)

Collapse
codeboi profile image
Timothy Rowell

Oh i fixed it Nvm thx.

Collapse
codeboi profile image
Timothy Rowell

Hey im using repl.it and its diffrent soo... I need your help

Collapse
codeboi profile image
Collapse
muhammadali_dev profile image
Muhammad Ali

Good work, I liked the idea. You can add resizing support in sidebar using react-resizable-element.

Collapse
itsnitinr profile image
Nitin Ranganath Author

Wow, this is really cool. I'll consider adding this. Thank you!

Collapse
jsbroks profile image
Thread Thread
muhammadali_dev profile image
Muhammad Ali

Thanks for the suggestion but you can look at the bundle size comparisons as well.

Collapse
manitej profile image
Manitej ⚡

Amazing idea man!

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you! Inspired by the Ubuntu one I mentioned in the article.

Collapse
manitej profile image
Manitej ⚡

Looks cool. I'll try to give a PR

Collapse
karlosos profile image
Karol Działowski

That's cool! How have you created the gif in the readme? It's gorgeous.

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you! It's from canva.com

They have multiple animated presentation templates so I edited one them, added a screenshot, exported as gif, uploaded to Imgur and used that link in the readme. 😅

Collapse
hima_khaitan profile image
Himanshu

Loved the Idea Dude!

Collapse
michelebarreto profile image
Michele Barreto

amei, está incrível parabéns !!

Collapse
itsnitinr profile image
Nitin Ranganath Author

Muito obrigado :)

Collapse
codeboi profile image
Timothy Rowell

can you follow me so we can privately chat?

Collapse
itsnitinr profile image
Collapse
ladvace profile image
Gianmarco

Very cool project!

Collapse
mkrajaci profile image
Mario Krajacic

I love it

Collapse
aguaragazu profile image
Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Wonderful work!

Collapse
ytrkptl profile image
Collapse
pb profile image
Pawel

It's so cool.
Loved it.

Collapse
citizen428 profile image
Michael Kohl

Is “React out to me” a pun or did you mean “reach”?

Collapse
itsnitinr profile image
Nitin Ranganath Author

Oops, between you and me, it's most certainly a typo. But for others, it's a feature, not a bug!

Collapse
lindaicing profile image
Linda

This is such a neat idea and great execution! Love it!

Collapse
kascharowski profile image
Diego Kascharowski

That's soooo nice :D

Collapse
codeboi profile image
Timothy Rowell

I would love to help!

Collapse
itsnitinr profile image
Nitin Ranganath Author

I truly appreciate that! :)

Collapse
dev_emmy profile image
nshimiye_emmy

great idea thanks

Collapse
navaneethbysani profile image
Navaneeth Bysani

Nice! Great Innovation

Collapse
mukul_singhal profile image
Mukul Singhal

This is soooo Coool . Awesome Detailing😀😀

Collapse
commentme profile image
Unnati Bamania

Impressive

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you! 😄

Collapse
somanathgoudar profile image
Somanath Goudar

Dude! That is just Amazing. Impressive

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thanks! Do let me know if you have any suggestions or feedback 😃

Collapse
codeboi profile image
Timothy Rowell

IT HAS NO HTML WHAAAAA.

Collapse
codeboi profile image
Timothy Rowell

Add this file
.replit
and inside put:

language = "nodejs"
run = "npm run dev"

Forem Open with the Forem app