Let's create a clean, modern portfolio website using Vue.js. This single-file component (SFC) 1 includes all the essential sections for a professional portfolio.
Portfolio.vue
This portfolio website includes:
You can easily customize this portfolio by:
This single-file component (SFC) 2 encapsulates all the HTML, CSS, and JavaScript needed for your portfolio in one file, making it easy to understand and modify.
Vue CLI is a full system for rapid Vue.js development 1. Let's create a professional portfolio website using Vue CLI.
First, you'll need to create a new Vue project using Vue CLI:
# Install Vue CLI if you haven't already
npm install -g @vue/cli
# Create a new project
vue create portfolio-website
# Navigate to the project folder
cd portfolio-website
# Start the development server
npm run serveWhen prompted during the creation process, you can select the default preset (Vue 3) or manually select features.
Here's how we'll organize our portfolio website:
src/
├── assets/ # Images and static files
├── components/ # Reusable components
│ ├── Header.vue
│ ├── Hero.vue
│ ├── About.vue
│ ├── Skills.vue
│ ├── Projects.vue
│ ├── Contact.vue
│ └── Footer.vue
├── App.vue # Main application component
└── main.js # Application entry pointLet's start with the App.vue file:
App.vue
Now let's create each component. Here's the Header.vue component:
components/Header.vue
Here's the Hero.vue component:
components/Hero.vue
For icons and other features, you'll need to install some packages:
# Install Feather icons for Vue
npm install vue-feather-icons
# Optional: Install GSAP for animations
npm install gsapYou would need to create the remaining components (About.vue, Skills.vue, Projects.vue, Contact.vue, and Footer.vue) following a similar pattern to the ones shown above.
Each component should:
Create an assets folder in the src directory and add your images:
When you're ready to deploy:
# Build for production
npm run buildThis will create a dist folder with your compiled application that you can deploy to services like:
#42b883) in the CSS to match your personal brandThis modular approach using Vue CLI makes your portfolio easy to maintain and extend as your career grows.