vscode-portfolio

react-vscode-portfolio

A vscode inspired portfolio project
Explore the docs »

View Demo · Markdown prview · Report Bug

Table of Contents

About The Project
- Built With
Getting Started
- Installation
Demonstration
Features
License
Contact
Acknowledgments

Preface

This website portfolio showcasing my work is based on noworneverev’s project, which can be found at github.com/noworneverev/react-vscode-portfolio, and is not an original creation of mine.

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

(back to top)

Getting Started

Installation

Clone the repo

git clone https://github.com/noworneverev/react-vscode-portfolio.git

Install NPM packages
```
npm install
```
Enter your name in .env.development
```
REACT_APP_NAME=<your_name>
```
Add your markdown pages in public/pages

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' },
 ];

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 />,
   },
 ];

Runs the app in the development mode
```
npm start
```
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>   
```