React Vscode Portfolio screenshot

React Vscode Portfolio

Author Avatar Theme by Noworneverev
Updated: 29 Apr 2025
181 Stars

A vscode inspired portfolio website

Categories

Overview:

The project is a portfolio website that is inspired by Visual Studio Code and caglarturali.github.io. It allows users to easily modify or add their own content using markdown. The site is built with React.js and Material UI.

Features:

  • Powered by markdown: The portfolio pages are powered by markdown, making it easy to modify or add content.
  • Syntax highlight: Supports extended markdown syntax and syntax highlighting.
  • Alerts: Provides the ability to display customizable alerts on the website.
  • Dark mode and light mode: Users can switch between dark and light modes on the website.
  • Closable tabs: Tabs on the website can be closed by the user.
  • Collapsible explorer: The explorer panel on the website can be collapsed and expanded.
  • Responsive web design: The website is designed to be responsive and compatible with different screen sizes.
  • Google Analytics supported: Integration with Google Analytics to track website statistics.
  • Auto-deploy to gh-pages: Github actions are set up for automatic deployment of the website to gh-pages.

Installation:

To install the theme, follow these steps:

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

    NAME=Your Name
    
  4. Add your markdown pages in public/pages folder.

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

  6. Add your social links in src/app/pages/link.tsx, which will appear in both the sidebar and homepage.

  7. Run the app in the development mode.

    npm start
    
  8. To deploy your own portfolio, modify the homepage property in package.json. For a project site, the format is: https://{username}.github.io. 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.

  9. To modify the Google Analytics measurement id, update it in .env.production.

Summary:

The project is a portfolio website built with React.js and Material UI, inspired by Visual Studio Code. It allows users to easily modify or add content using markdown. The website features syntax highlighting, alerts, dark and light modes, closable tabs, collapsible explorer, and is compatible with different screen sizes. It also supports integration with Google Analytics and automatic deployment to gh-pages. The theme can be installed by cloning the repository, installing NPM packages, adding markdown pages and routes, and running the app in development mode.