Vue.js Portfolio Website

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.

Features

This portfolio website includes:

1. Responsive Navigation - Works on mobile and desktop with a hamburger menu for smaller screens
2. Hero Section - Introduces you with a call-to-action
3. About Section - Shares your background and experience
4. Skills Section - Visualizes your technical abilities with progress bars
5. Projects Section - Showcases your work with images and descriptions
6. Contact Section - Includes a form and contact information
7. Footer - Contains navigation links and copyright information

Customization

You can easily customize this portfolio by:

1. Replacing placeholder images with your own photos
2. Updating the personal information in the data sections
3. Adding your real projects and skills
4. Changing the color scheme (currently using emerald as the accent color)
5. Adding additional sections as needed

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.

Creating a Portfolio Website with Vue CLI

Vue CLI is a full system for rapid Vue.js development 1. Let's create a professional portfolio website using Vue CLI.

Step 1: Setting Up Your Vue CLI Project

First, you'll need to create a new Vue project using Vue CLI:

When prompted during the creation process, you can select the default preset (Vue 3) or manually select features.

Step 2: Project Structure

Here's how we'll organize our portfolio website:

Step 3: Main App Component

Let's start with the App.vue file:

Step 4: Component Files

Now let's create each component. Here's the Header.vue component:

Here's the Hero.vue component:

Step 5: Install Additional Dependencies

For icons and other features, you'll need to install some packages:

Step 6: Complete the Remaining Components

You 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:

1. Accept props from the parent App component
2. Have its own scoped styles
3. Implement the appropriate functionality

Step 7: Add Images

Create an assets folder in the src directory and add your images:

• profile.jpg (for your profile picture)
• project1.jpg, project2.jpg, etc. (for your projects)

Step 8: Build and Deploy

When you're ready to deploy:

This will create a dist folder with your compiled application that you can deploy to services like:

• Vercel
• Netlify
• GitHub Pages
• Firebase Hosting

Customization Tips

1. Colors: Change the primary color (#42b883) in the CSS to match your personal brand
2. Content: Update the data in App.vue with your personal information
3. Images: Replace the placeholder images with your own photos
4. Animations: Consider adding animations with GSAP or CSS transitions
5. Additional Sections: Add more sections like testimonials or a blog

This modular approach using Vue CLI makes your portfolio easy to maintain and extend as your career grows.