react-vscode-portfolio

A vscode inspired portfolio project
Explore the docs »

View Demo · Markdown prview · Report Bug

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Demonstration
4. Features
5. License
6. Contact
7. Acknowledgments

About The Project

The project is inspired by Visual Studio Code and caglarturali.github.io. The pages of the portfolio are powered by markdown, which make them easy to modify or add your own contents.

(back to top)

Built With

• React.js
• Material UI
• react-markdown

(back to top)

Getting Started

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. Deploy your own portfolio,

   • modify homepage property in package.json

   "homepage": "https://{username}.github.io/{repo-name}"
   

   * For a project site, that's the format. For a user site, the format is: https://{username}.github.io. You can read more about the homepage property in the "GitHub Pages" section of the create-react-app documentation.

   • modify Google Analytic measurement id in .env.production

   REACT_APP_NAME=<your_name>
   REACT_APP_MEASUREMENT_ID=<your_measurement_id>   
   

Alternative Deployment

docker-compose up

(back to top)

Demonstration

• The project is deployed to following two domains, and they are in synchronization.
  • user site: https://noworneverev.github.io/
  • project site: https://noworneverev.github.io/react-vscode-portfolio/

(back to top)

Features

• Powered by markdown
• Extended markdown syntax supported
  • Syntax highlight
  • Alert
• Dark mode and light mode available
• Closable tabs
• Collapsible explorer
• Responsive web design
• Google Analytics supported
• Auto-deploy to gh-pages with github actions ready

Markdown preview: https://noworneverev.github.io/#/docs

(back to top)

License

Distributed under the MIT License. See LICENSE.md for more information.

(back to top)

Contact

Yan-Ying Liao - Personal Portfolio - n9102125@gmail.com

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

(back to top)

Acknowledgments

• Img Shields
• GitHub Pages
• React Icons
• caglarturali.github.io

(back to top)