I built a VSCode like Portfolio with React.js

Live Demo

https://noworneverev.github.io/

About The Project

I built a VSCode like porfolio to practice with React.js. The project is inspired by Visual Studio Code and caglarturali.github.io. As I used markdown to build pages, it's super easy to modify them and write your own contents.

Features

• Powered by markdown
• Dark mode and light mode available
• Closable tabs
• Collapsible explorer
• Responsive web design
• Google analytics supported

Installation

1 Clone the repo

git clone https://github.com/noworneverev/react-vscode-portfolio.git

2 Install NPM packages

npm install

3 Enter your name in .env.development

REACT_APP_NAME=<your_name>

4 Add your markdown pages in public/pages
5 Add your routes in src/app/pages/page.ts, make sure the names of pages are consistent with markdown files.

export const pages = [  { index: 0, name: 'overview.md', route: '/overview' },  { index: 1, name: 'skills.md', route: '/skills' },  { index: 2, name: 'experience.md', route: '/experience' },  { index: 3, name: 'education.md', route: '/education' },  { index: 4, name: 'projects.md', route: '/projects' },    { index: 5, name: 'certificates.md', route: '/certificates' },  { index: 6, name: 'accomplishments.md', route: '/accomplishments' },];

6 Runs the app in the development mode

npm start

7 If you would like to deploy your own portfolio, don't forget to change Google Analytic measurement id in .env.production

REACT_APP_NAME=<your_name>REACT_APP_MEASUREMENT_ID=<your_measurement_id>

Github Repo Link

https://github.com/noworneverev/react-vscode-portfolio

Any comment is welcome. Thank you!