I Built a VSCode Inspired Developer Portfolio
source link: https://dev.to/itsnitinr/i-built-a-vscode-inspired-developer-portfolio-418g
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
I Built a VSCode Inspired Developer Portfolio
May 8
・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/
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.
Features Roadmap
-
Themes and customizations
- GitHub Dark (default)
- One Dark Pro
- Dracula
- Interactive custom terminal
For other features and themes suggestions, please open an issue.
Running Development Server
npm run dev # or yarn dev
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:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK