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, i…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Yan-Ying Liao

Live Demo

https://noworneverev.github.io/

About The Project

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


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Yan-Ying Liao


Print Share Comment Cite Upload Translate Updates
APA

Yan-Ying Liao | Sciencx (2022-09-17T15:05:27+00:00) I built a VSCode like Portfolio with React.js. Retrieved from https://www.scien.cx/2022/09/17/i-built-a-vscode-like-portfolio-with-react-js/

MLA
" » I built a VSCode like Portfolio with React.js." Yan-Ying Liao | Sciencx - Saturday September 17, 2022, https://www.scien.cx/2022/09/17/i-built-a-vscode-like-portfolio-with-react-js/
HARVARD
Yan-Ying Liao | Sciencx Saturday September 17, 2022 » I built a VSCode like Portfolio with React.js., viewed ,<https://www.scien.cx/2022/09/17/i-built-a-vscode-like-portfolio-with-react-js/>
VANCOUVER
Yan-Ying Liao | Sciencx - » I built a VSCode like Portfolio with React.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/17/i-built-a-vscode-like-portfolio-with-react-js/
CHICAGO
" » I built a VSCode like Portfolio with React.js." Yan-Ying Liao | Sciencx - Accessed . https://www.scien.cx/2022/09/17/i-built-a-vscode-like-portfolio-with-react-js/
IEEE
" » I built a VSCode like Portfolio with React.js." Yan-Ying Liao | Sciencx [Online]. Available: https://www.scien.cx/2022/09/17/i-built-a-vscode-like-portfolio-with-react-js/. [Accessed: ]
rf:citation
» I built a VSCode like Portfolio with React.js | Yan-Ying Liao | Sciencx | https://www.scien.cx/2022/09/17/i-built-a-vscode-like-portfolio-with-react-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts