VueJS Portfolio Template

Apr 9, 2023 | Programming

This portfolio template utilizes the VueJs framework, CosmicJS API, and Bootstrap to create a stunning online portfolio. It’s a seamless way to showcase your talents and skills. You can view a live demo with my personal data here.

portfolio-vuejs preview

Table of Contents

Features

  • Built with VueJs framework
  • One-page layout
  • Material design
  • Bootstrap 4.5 SCSS
  • Responsive design
  • Animated layout
  • Content managed with CosmicJS API

Project Setup

To get started with the VueJS Portfolio Template, run the following command to install the necessary packages:

npm install

Next, you can compile and hot-reload for development using:

npm run serve

To compile and minify for production, run:

npm run build

Additionally, you can lint and fix files using:

npm run lint

For more customization options, refer to the Configuration Reference.

How to Edit Content

This template supports a Content Management System (CMS) via CosmicJS, making it easy for you to manage your content. Here’s how to customize your portfolio:

  1. Create and link your CosmicJS account.
  2. Create a new bucket on CosmicJS.
  3. Update the credentials in your .env file:
  4. # CosmicJS 
    VUE_APP_COSMICJS_TOKEN=
    VUE_APP_COSMICJS_BUCKET_SLUG=
    VUE_APP_COSMICJS_BUCKET_READ_KEY=
  5. Import the JSON file located here from the data folder of the repo, using the import/export settings inside your bucket settings page.
  6. Customize your data through the CosmicJS interface!

Author

Hugo Bollon
GitHub: @hbollon
LinkedIn: @Hugo Bollon
Portfolio: hugobollon.me

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page for more details.

License

This project is under the MIT license.

Troubleshooting

While using this template, you may encounter some common issues. Here are some troubleshooting tips:

  • If the template fails to load correctly, ensure that all dependencies are installed by re-running npm install.
  • If there’s a problem with the API connection, double-check your environment variables in the .env file to ensure they are correct.
  • If you’re unfamiliar with CosmicJS, their documentation can offer more insight.
  • Feel free to reach out for support or ideas. For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox