Vue Resume Template by Ryan Balieiro
A clean and minimal template for building a resume landing page, powered by Vue 3 (Composition API) and Bootstrap 5.
Key features:
- Uses Vue3 Composition API.
- Six unique section layouts to showcase your work experience, education, skills, projects, and more.
- Adaptive navigation: a fixed sidebar for desktops and a tabbed layout for mobile.
- Built-in multi-language support.
- Emails with EmailJS – no backend needed!
- Super easy to customize!
Here's a list of live versions of the template:
| # | Version | Description | URL |
|---|---|---|---|
| 🟣 | Roy Sheppard (default) | Latest deployment of the template here on GitHub pages. | Preview |
| 🟢 | Alana Richard | An example of how the template can be customized. | Preview |
| 🔵 | Gabriel Becker | Another example of how the template can be customized. | Preview |
The theme has a clean, minimalist design with a nice mix of purple shades that gives it a fresh, stylish vibe.
On desktop, it has a simple one-page layout with a fixed sidebar, so users can easily scroll through the sections.
On mobile, the layout groups the sections into categories and transforms into a tabbed interface with a bottom navigation.
- Clone the repo:
git clone https://github.com/ryanbalieiro/vue-resume-template
- Go to the project's root folder and use npm to install all required components:
npm install
- Launch the project in developer mode:
npm run dev
- (Optional) If you'd like to clear all the portfolio data and begin with a blank page with no sections, run the command below:
npm run resume:clear
- (Optional) If you want to temporarily deactivate the preload animation during theme adjustments, go to
public/data/settings.jsonand set thepreloaderEnabledflag to false.
Watch this step-by-step video tutorial to see exactly how to configure your resume:
| # | Title | Watch |
|---|---|---|
| 1 | Setting up the project | Watch on YouTube |
| 2 | Title and colors | Watch on YouTube |
| 3 | Settings, strings and profile | Watch on YouTube |
| 4 | Categories and sections | Watch on YouTube |
| 5 | ArticleProfile | Watch on YouTube |
| 6 | ArticleTimeline | Watch on YouTube |
| 7 | ArticleSkills | Watch on YouTube |
| 8 | ArticlePortfolio | Watch on YouTube |
| 9 | ArticleThreads and ArticleContactOptions | Watch on YouTube |
| 10 | ArticleContactForm | Watch on YouTube |
| 11 | Deploying on GitHub Pages | Watch on YouTube |
| 12 | Extra deployment instructions | Watch on YouTube |
For step-by-step setup and deployment instructions, you can also check out the following docs:
- CONFIGURATION.md – learn how to configure and customize the project.
- DEPLOYMENT.md – short guide on deploying the project.
This template was created by and is maintained by Ryan Balieiro.
It is based on the Bootstrap framework created by Mark Otto and Jacob Thorton; and the Vue framework created by Evan You.
Additional frameworks and plugins used include:
- Font Awesome: A library of free vector icons.
- EmailJS: A free service that allows you to send emails using JavaScript.
Code released under the MIT license, providing complete freedom for utilization. Feel free to enhance and adapt it to suit your needs.
Oh... and if you like this template, don't forget to give it a ⭐ :)
