Skip to content

alamkanak/Vuepress-Portfolio-Theme

Repository files navigation

ViewPress Portfolio Theme

This is a viewpress theme, populated with sample portfolio items. The theme currently supports the plugins: medium-zoom, google-analytics and custom-container. The theme is also customizable (see below).

View demo

Setup

  1. Clone the repo.
  2. Open terminal in the root directory and run
    npm install
  3. Copy the .env.example file at the root directory and change all the environment variables
    cp .env.example .env
    nano .env
  4. To run the project you can use one of the following options:
    1. Run the project in docker
      docker-compose up
    2. Run the project locally
      npm run docs:dev
  5. Your project will be available in https://localhost:8080

Configure the site

  1. Open docs/.viewpress/config.js.
  2. Edit title, description, favicons, social links etc.
  3. Refer to font-awesome library if you want to add custom icons in the social links list.
  4. Open docs/README.md and edit home page content.

Add portfolio items

  1. In docs > project folder add a markdown file for each of your project.
  2. You can customize the metadata in the top of the file to customize portfolio item page. Have a look at the sample portfolio items in the repo.

Advanced: Customize theme color and font

  1. Open docs/.viewpress/theme/style/index.styl file.
  2. At the top of the file, you can see all of the color options that you can modify. Edit them according to your need.

Deploy to github pages

There are 2 ways to deploy

Option 1: Github actions

  1. Open .github/workflows/deploy.yml.
  2. Edit the target repository where your portfolio will be hosted:
    destination-github-username: <YOUR TARGET USERNAME>
    destination-repository-name: <YOUR TARGET REPO NAME>
    user-name: <YOUR COMMIT USERNAME>
    target-branch: <YOUR TARGET BRANCH>
  3. Open your current github repo page where this current project is hosted.
  4. Go to Settings > Secrets and variables > Actions > New repository secret.
  5. Add your github personal access token in a variable called PORTFOLIO_REPOSITORY_PERSONAL_ACCESS_TOKEN.
  6. From now on, when you make a new commit, github should automatically deploy into the target repo.

Option 2: Manually

  1. Open deploy.sh.
  2. Replace all references of https://github.com/alamkanak/alamkanak.github.io.git with your repo URL where you want to deploy.
  3. Replace all references of alam with your local machine user name.
  4. To deploy, run one of the following:
    1. If running npm on your local environment:
      sudo sh deploy.sh
    2. If running on docker:
      # get container ID
      docker ps
      
      # go into docker terminal
      docker exec -it <container_name> sh
      
      # setup git
      git config --global user.email "you@example.com"
      git config --global user.name "Your Name"
      
      # deploy
      sh deploy.sh
      
      # exit
      exit