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:
Clone the repo.
git clone https://github.com/noworneverev/react-vscode-portfolio.git
Install NPM packages.
npm install
Enter your name in
.env.development
file.NAME=Your Name
Add your markdown pages in
public/pages
folder.Add your routes in
src/app/pages/page.ts
, ensuring the names of the pages are consistent with the markdown files.Add your social links in
src/app/pages/link.tsx
, which will appear in both the sidebar and homepage.Run the app in the development mode.
npm start
To deploy your own portfolio, modify the
homepage
property inpackage.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 thehomepage
property in the “GitHub Pages” section of the create-react-app documentation.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.