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
  • Ayu
  • Nord
• Interactive custom terminal

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

Environment Variables

For fetching your articles from dev.to, create an .env.local file inside the project directory. Check the .env.local.example file for more information.

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 from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

vscode-portfolio's Issues

[feature] Keyboard shortcut support like vscode

• We can add few shortcuts support such as ctrl + p to switch tabs, ctrl + ~ to toggle terminal (yet to de developed), ctrl + b toggle sidebar.
• Later when projects support more features, gradually more shortcuts can be added.

Resource - https://johannesklauss.github.io/react-hotkeys-hook/docs-use-hotkeys

Reset scroll to top after navigating to different page

Describe the bug
Recently I cloned your repo to create my portfolio site and I added a page of my past experience and a few more projects which added a scroll to it and experience page also had the scroll, but when I scroll on the experience page and go to the projects page scroll remained at the same position where it was on the experience page which creates an issue in user experience and It might feel like a bug to a potential visitor.

This will also happen if you scroll down in the gitHub page and go to the projects page

To Reproduce
Steps to reproduce the behavior:

1. Go to github page
2. Scroll down to the bottom
3. Go to projects page

Expected behavior
Scroll position should make it back to the top on URL/pathname change

Screenshots
Demo:
Screencast from 09-08-23 01:57:36 AM IST.webm

Desktop (please complete the following information):

• OS: Ubuntu
• Browser

chrome

Smartphone (please complete the following information):

• Device: Moto G40 - OS: Andriod
• Browser chrome

[feature] Monaco Editor integration

Is your feature request related to a problem? Please describe.
To make the website look more VSCode-esque, I could integrate the Monaco Editor, which powers Visual Studio Code. However, is it worth it? Or will it make the user experience harder?

Describe the solution you'd like
https://www.npmjs.com/package/@monaco-editor/react
This package can be used to easily integrate Monaco with Next.js and use it on read-only mode.

Describe alternatives you've considered
An alternative is to code a mock layout that mimics Visual Studio Code without the actual editor functionality. Special precautions can be taken to achieve a better user experience or I can ditch the whole layout idea itself and keep it simple.

Additional context
One of the major issues with integrating Monaco is to define a custom theme for Monaco. Might be too much effort just to get the UI to look consistent with the theme.