This is my portfolio powered by Vue3, TailwindCSS, ThreeJS and AnimeJS.
All of the features within this project are frontend only, there are no involvement with any backend frameworks or similar.
View the production deployment of this project on here
- Interactive 3D model and UI
- Auto code typing + custom syntax highlighting
- Highly customizable with theme selector
- Flexible responsive design
NodeJS is required. I recommend installing both of these programs through a package manager.
- For Windows, I recommend using
- For Mac, I recommend using
- For Linux, use your own distro package manager or
Assuming you are using
Scoop, you can install the programs through typing these commands on your terminal
scoop install git scoop install nodejs
For Mac, if you are using
Homebrew, it will be
brew install git brew install <programs> # replace it with the programs to install
Fork this project on Git, after forking the project, clone it into your own local machine.
git clone https://github.com/<your-git-username>/kuon-portfolio.git
initialize the project
cd kuon-portfolio npm install
now run the project
npm run dev
then visit http://localhost:3000 to view the project.
The folder structure will be something like this
|- kuon-portfolio |- public |- assets |- src |- components |- views
All of your Images will be located on the
public/assets folder, any other assets such as
.css files or icons will be located on the
Page views (full page, for example
/routes) will be located on the
Any components that will be shared in the views will be located on the
src/components folder. If the components get too complicated, then make a new directory in component folder then place your components in that file.
When creating a new page, make sure to add a new route on
router.js, then update the data block of
Skills and Works (projects) both contain a JSON file on the
components folder. If you wish to modify only the contents of the pages without touching the UI, you will only need
to modify the JSON file of the related page. Note that the
MainContact does not contain a JSON file, so modifications to the contents will require modifying the
HTML contents of the files.
For the color palette, it will contain a JSON file called
themeType refers to the type of the theme whether it is a light theme or a dark theme, meanwhile modifying the
color scheme will change the overall appearance of the web.
DomID is not relevant as of now. It is recommended to use the hexcode of the color for
colorscheme, it also works for transparent
I recommend using Vercel for deployment as it is simple and contains a lot of features such as preview deployment before production deployment. If you are using VPS for hosting, you need to do the following
npm run build
afterwards you will get a ZIP file, put the ZIP file up on the VPS server according to their relevant instructions.
This project is MIT licensed.
You can create your own project and modifying it freely without notifying me under these conditions
- Add a link to this repository that can be easily found and visible in your page.
- Do not use the 3d Model if you do not agree to the license conditions (CC Atribution). Original Link
- Do not use it for commercial usage.
Check LICENSE for additional details.