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、 Add your social links in src/app/pages/link.tsx, which will appear in both sidebar and homepage.

 export const links = [
  {
    index: 0,
    title: "Find me on Github",
    href: "https://github.com/noworneverev",
    icon: <FaGithub />,
  },
];

7、 Runs the app in the development mode

npm start

8、 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!

Comments

[Al - Naucode]

Great article, keep the good work! Liked and followed! 🚀