DEV Community

Cover image for I Built a VSCode Inspired Developer Portfolio

I Built a VSCode Inspired Developer Portfolio

Nitin Ranganath on May 08, 2021

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...
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
 
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

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

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
 
ishikaa_2302 profile image
Ishika Gupta

Something amazing and unique.
Great work 🙌🏻

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you!

Collapse
 
mehdi_jai profile image
MEDOSTUDIO • Edited

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

Collapse
 
itsnitinr profile image
Nitin Ranganath

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

Collapse
 
hima_khaitan profile image
Himanshu Khaitan • Edited

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

Thanks Dude! Do checkout!
Portfolio

Collapse
 
franklyn-dotcom profile image
Franklyn-dotcom

wow!! you guys are inspiring me. i will definitely try mine

Collapse
 
hima_khaitan profile image
Himanshu Khaitan

Sure! You can hop to my discord server for any sort of help. Variable Community

Collapse
 
itsnitinr profile image
Nitin Ranganath

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

Collapse
 
hima_khaitan profile image
Himanshu Khaitan

Means a lot! Thanks dude!

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
Nitin Ranganath

Great idea!

Collapse
 
lucario profile image
Xrp7

This is amazing. Actually i also wanted to built my portfolio based on Vs Code theme so i was trying to get some inspirations. Till now only two Vs Code themed Portfolio i really liked - one is your and other one is rajsavaliya.com. Hats off to your creativity.

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you so much! Looking forward to your portfolio too. Do share the link once it's done.

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

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

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

whats the run command?

Collapse
 
itsnitinr profile image
Nitin Ranganath

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
Timothy Rowell

ok

Collapse
 
manitej profile image
Manitej ⚡

Amazing idea man!

Collapse
 
itsnitinr profile image
Nitin Ranganath

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
 
dkhd profile image
Diky Hadna 💡

Awesome!

In the other hand, I just love a simple one, here's mine: hadna.space

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

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

Collapse
 
codeboi profile image
Timothy Rowell

Thanks!!

Collapse
 
mrmuhammadali 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

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

Collapse
 
jsbroks profile image
Justin Brooks
Thread Thread
 
mrmuhammadali profile image
Muhammad Ali

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

Collapse
 
mkrajaci profile image
Mario Krajacic

I love it

Collapse
 
anthonyjdella profile image
Anthony

Nicely done!

Collapse
 
franklyn-dotcom profile image
Franklyn-dotcom

WOW this is so great!! i wish i can collaborate, i will like you to add animations to the article.json where by each article flows in one after the other.

Collapse
 
itsnitinr profile image
Nitin Ranganath

Great idea! I'll implement this feature soon.

Collapse
 
michelebarreto profile image
Michele Barreto

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

Collapse
 
itsnitinr profile image
Nitin Ranganath

Muito obrigado :)

Collapse
 
codeboi profile image
Timothy Rowell

can you follow me so we can privately chat?

Collapse
 
itsnitinr profile image
Nitin Ranganath

Sure

Collapse
 
ladvace profile image
Gianmarco

Very cool project!

Collapse
 
iamyogeshmalkani profile image
Yogesh Malkani • Edited

I showed my portfolio to a friend, expecting him to be impressed by my concept of creating a VS Code theme portfolio. 😕 However, he laughed and showed me yours instead. I was deeply disappointed at the time as yours was way too good and complete. I am also trying to complete it and will complete it soon.
yogeshmalkani.vercel.app

Collapse
 
aguaragazu profile image
Aguara Gazu

Wow!!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Wonderful work!

Collapse
 
ytrkptl profile image
Yatrik Patel

Wow.

Collapse
 
pb profile image
Pawel

It's so cool.
Loved it.

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

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
 
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

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

Thank you! 😄

Collapse
 
somanathgoudar profile image
Somanath Goudar

Dude! That is just Amazing. Impressive

Collapse
 
itsnitinr profile image
Nitin Ranganath

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

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH

That is insanely cool, literally blew my mind.

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thanks a lot!

Collapse
 
hima_khaitan profile image
Himanshu Khaitan

Loved the Idea Dude!

Collapse
 
codeboi profile image
Timothy Rowell

Add this file
.replit
and inside put:

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

Collapse
 
codeboi profile image
Timothy Rowell

IT HAS NO HTML WHAAAAA.

Collapse
 
tjasa profile image
Tjaša

Such a cool idea, it looks awesome! ✨

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you! 😄

Collapse
 
franklyn-dotcom profile image
Franklyn-dotcom

Nice, i love it. you could also add animation to the article page where by each article flows in one after the other

Collapse
 
antonijodod profile image
Antonijo Đođ

It's so cool. Well done

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you!

Collapse
 
whippingdot profile image
Sanjaay R.

Wait how did you log into my todoist account on the ubuntu portfolio?? DON'T STEAL MY PASSWORDS

Collapse
 
itsnitinr profile image
Nitin Ranganath

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

Collapse
 
cesar_code profile image
César

to be honest, I didn't see this coming! Nice touch🔥🔥

Collapse
 
rupayanr profile image
Rupayan Roy

Very creative

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you!

Collapse
 
manavss profile image
Manav Shete

i am using an personal access token for a github project but when i deploy it to a public repo github is revoking the token.How to solve this?