Vuepress Portfolio Theme

Overview

The ViewPress Portfolio Theme is a customizable theme designed for portfolio websites. It comes pre-populated with sample portfolio items and supports several plugins, including medium-zoom, google-analytics, and custom-container. The theme offers flexibility and allows users to customize various aspects of their site, such as the title, description, favicon, social links, and more. It can be deployed either locally or on GitHub Pages.

Features

• Pre-populated with sample portfolio items
• Supports plugins such as medium-zoom, google-analytics, and custom-container
• Customizable theme color and font options
• Allows customization of site details such as title, description, and social links
• Easy deployment options for local development or GitHub Pages

Installation

To install the ViewPress Portfolio Theme, follow these steps:

1. Clone the repository.
2. Open the terminal in the root directory and run the necessary commands.
3. Copy the .env.example file in the root directory and update the environment variables accordingly.
4. Choose one of the following options to run the project:
   • Run the project in Docker.
   • Run the project locally.
5. Access the project at https://localhost:8080.

To configure the site, follow these steps:

1. Open the docs/.viewpress/config.js file.
2. Edit the title, description, favicon, social links, and any other desired details.
3. If you want to add custom icons to the social links list, refer to the Font Awesome library.
4. Open the docs/README.md file and edit the home page content.

To add portfolio items, follow these steps:

1. In the docs > project folder, add a markdown file for each of your projects.
2. Customize the metadata at the top of each file to personalize the portfolio item page.
3. You can refer to the sample portfolio items in the repository for guidance.

For advanced customization of the theme color and font, follow these steps:

1. Open the docs/.viewpress/theme/style/index.styl file.
2. At the top of the file, you will find all the color options that can be modified according to your needs.

To deploy the website to GitHub Pages, there are two options:

Option 1: Github Actions

1. Open the .github/workflows/deploy.yml file.
2. Edit the target repository where your portfolio will be hosted.
3. Go to your current GitHub repository page for the project.
4. Navigate 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. With this setup, every new commit should automatically trigger a deployment to the target repository.

Option 2: Manual Deployment

1. Open the deploy.sh file.
2. Replace all references to https://github.com/alamkanak/alamkanak.github.io.git with the URL of your repository where you want to deploy.
3. Replace all references to alam with your local machine username.
4. To deploy, use one of the following commands:
   • If running npm on your local environment:

   npm run deploy
   

   • If running on Docker:

   docker run [IMAGE] npm run deploy
   

Summary

The ViewPress Portfolio Theme is a versatile theme designed for creating portfolio websites. It offers various features, including pre-populated sample portfolio items, plugin support, customization options for colors and fonts, and easy deployment options. With its user-friendly installation steps and detailed guides for customization and deployment, users can quickly set up and personalize their portfolio websites.