I have taken inspiration from the Link to create my portfolio.

Changes Made

---

• Updated from react framework to Vite.
  • Why? Because Vite's hot reloading and page building is blazing fast than react framework.
• Added Docker Support
• Added Airbnb coding style with eslint and prettier
• Added CV Print Feature using marked package

My Portfolio

A vscode inspired portfolio project
Checkout Original Source »

View Website

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
   • Docker Setup
3. Features
4. Contact
5. Deploy as Github Pages

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

• Vite.js
• Material UI
• react-markdown

(back to top)

Getting Started

Installation

1. Clone the repo

   git clone https://github.com/rakimsth/portfolio.git

2. Install NPM packages

   yarn

3. Enter your name in .env.development

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

   import { GiBinoculars } from 'react-icons/gi';
   
   export const pages = [
     {
       index: 0,
       name: 'overview.md',
       route: '/overview',
       icon: <GiBinoculars color="#D07000" />,
     },
     { 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/rakimsth',
       icon: <FaGithub />,
     },
   ];

7. Runs the app in the development mode

   npm start

8. If you would like to deploy your own portfolio, Update .env file with the following

   VITE_APP_NAME=<your_name>
   

Docker Setup

1. We have dockerfile in the project directory.
2. Build the Docker Image

   docker build -t portfolio .
   

3. Run the docker image using the following command

   docker run -it -d -p 80:80 portfolio
   

(back to top)

Features

• Powered by markdown
• Dark mode and light mode available
• Closable tabs
• Collapsible explorer
• Responsive web design
• Auto-deploy to gh-pages with github actions ready

(back to top)

Contact

Raktim Shrestha - Personal Portfolio - rakimsth@gmail.com

Project Link: https://github.com/rakimsth/portfolio

(back to top)

Deploy as Github Pages

• Change the base in vite.config.js
• Update the GIT URL as well as CNAME in deploy.sh file
• Stay in root folder & run the following command to deploy

bash deploy.sh