Overview

This portfolio project is powered by Vue3, TailwindCSS, ThreeJS, and AnimeJS. It features an interactive 3D model and UI, auto code typing with custom syntax highlighting, highly customizable theme selection, and a flexible responsive design. The project is frontend only, with no backend frameworks involved.

Features

• Interactive 3D model and UI: The portfolio includes an interactive 3D model and a user interface for a dynamic user experience.
• Auto code typing + custom syntax highlighting: The project includes auto code typing functionality with custom syntax highlighting, adding a visually engaging element to the portfolio.
• Highly customizable with theme selector: Users can easily customize the portfolio’s appearance by selecting from a variety of themes.
• Flexible responsive design: The portfolio is designed to be responsive, adapting to different screen sizes and devices.

Installation

To install and run the portfolio project, follow these steps:

Prerequisites

Make sure you have Git and NodeJS installed. You can install both of these programs through a package manager.

• For Windows, you can use Scoop.
• For Mac, you can use Homebrew.
• For Linux, use your own distro package manager or Homebrew.

Assuming you are using Scoop on Windows, you can install the programs by typing the following commands on your terminal:

scoop install git
scoop install nodejs

If you are using Homebrew on Mac, the commands will be:

brew install git
brew install node

Get Started

1. Fork this project on Git.
2. After forking the project, clone it into your own local machine.
3. Initialize the project.
4. Run the project.
5. Visit http://localhost:3000 to view the project.

Folder Structure

The folder structure of the project will look like this:

• All images are located in the public/assets folder.
• Other assets such as .css files or icons are located in the public/ folder.
• Page views (full page, e.g., /routes) are located in the src/views folder.
• Shared components used in the views are located in the src/components folder. If the components become too complicated, you can create a new directory within the components folder and place your components there.

Customization

New Page

• To create a new page, add a new route in router.js.
• Update the data block of webRoutes in MainNavbar.vue.

Modifying Contents

• The Skills and Works (projects) sections contain JSON files in the components folder.
• If you want to modify the contents of the pages without touching the UI, you need to modify the JSON file of the relevant page.
• Note that the MainLanding and MainContact pages do not have a JSON file, so modifications to the contents will require modifying the HTML contents of the files.

New Color Scheme

• The color palette is defined in a JSON file called Themes.json.
• The themeType property defines whether it is a light or dark theme.
• Modifying the color scheme will change the overall appearance of the portfolio.
• The DomID property is not relevant currently.
• It is recommended to use the hex code of the color for the color scheme, including transparent hex colors.

Deployment

The recommended deployment platform for this portfolio project is Vercel. It offers features such as preview deployment before production deployment. If you prefer using a VPS for hosting, follow these steps:

1. [Instructions for VPS deployment]
2. Once you have followed the instructions, you will get a ZIP file.
3. Put the ZIP file on the VPS server according to their relevant instructions.

License

This project is MIT licensed. You are free to create your own project based on this portfolio and modify it without notifying the original author. However, it is required to add a link to the original repository, making it easily accessible and visible.