/isLinXu.github.io

Primary LanguageTypeScriptApache License 2.0Apache-2.0

gh-pages-shield website-shield Forks Stargazers Issues MIT License LinkedIn


Logo

react-vscode-portfolio

A vscode inspired portfolio project
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Features
  4. License
  5. Contact
  6. Acknowledgments

About The Project

Product Name Screen Shot

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

(back to top)

Update

npm install
npm start
npm run build

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. 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>
    

(back to top)

Features

  • Powered by markdown
  • 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

(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

(back to top)