create portfolio website usibg vue
Creating a portfolio website using Vue.js involves a few steps, including setting up a Vue project, creating components for different sections of your portfolio, and styling your site. Below is a basic guide to help you get started:
### Step 1: Set Up Your Vue Development Environment
1. **Install Node.js and npm**: If you haven't already, download and install [Node.js](https://nodejs.org/). This will also install npm (node package manager).
2. **Install Vue CLI** (optional): If you want to use the Vue CLI for setting up your project, you can install it globally using:
```bash
npm install -g @vue/cli
```
3. **Create a New Vue Project**:
```bash
vue create my-portfolio
```
Follow the prompts to set up your project (you can choose default settings).
4. **Navigate to Your Project Directory**:
```bash
cd my-portfolio
```
5. **Run Your Development Server**:
```bash
npm run serve
```
Your Vue app should now be running at `http://localhost:8080`.
### Step 2: Structure Your Portfolio
Decide on the sections you want for your portfolio. Common sections include:
- Home
- About
- Projects
- Contact
### Step 3: Create Components
1. **Home Component**: Create a new file called `Home.vue` in the `src/components` directory.
```vue
<template>
<section class="home">
<h1>Welcome to My Portfolio</h1>
<p>This is a brief introduction about me.</p>
</section>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style>
/* Add your styles here */
</style>
```
2. **About Component**: Create `About.vue`.
```vue
<template>
<section class="about">
<h2>About Me</h2>
<p>Details about my background, experience, etc.</p>
</section>
</template>
<script>
export default {
name: 'About'
}
</script>
<style>
/* Add your styles here */
</style>
```
3. **Projects Component**: Create `Projects.vue`.
```vue
<template>
<section class="projects">
<h2>My Projects</h2>
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
</section>
</template>
<script>
export default {
name: 'Projects'
}
</script>
<style>
/* Add your styles here */
</style>
```
4. **Contact Component**: Create `Contact.vue`.
```vue
<template>
<section class="contact">
<h2>Contact Me</h2>
<form>
<input type="text" placeholder="Your Name" required />
<input type="email" placeholder="Your Email" required />
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
</template>
<script>
export default {
name: 'Contact'
}
</script>
<style>
/* Add your styles here */
</style>
```
### Step 4: Set Up Routing
1. **Install Vue Router**:
```bash
npm install vue-router
```
2. **Set Up Router**: Create a file called `router.js` in the `src` directory.
```javascript
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Projects from './components/Projects.vue';
import Contact from './components/Contact.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/projects', component: Projects },
{ path: '/contact', component: Contact }
]
});
```
3. **Update `main.js`**: Import and use the router.
```javascript
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App),
}).$mount('#app');
```
### Step 5: Create the Main App Layout
In `App.vue`, add links for navigation.
```vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/projects">Projects</router-link>
<router-link to="/contact">Contact</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
nav {
display: flex;
justify-content: space-around;
padding: 1em;
background-color: #333;
color: white;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
</style>
```
### Step 6: Add Styling
You can add styles in your component styles or in a global style sheet (e.g., in `App.vue` or an imported CSS file).
### Step 7: Build and Deploy
Once you're happy with your website, you can build it for production:
```bash
npm run build
```
This will create a `dist` directory with your compiled files that you can deploy to any static file hosting service like GitHub Pages, Netlify, or Vercel.
### Conclusion
With these steps, you should have a basic portfolio website using Vue.js. You can further enhance your site by adding animations, images, and any additional features you want. Consider integrating a blog or incorporating CSS frameworks like Bootstrap or Tailwind CSS for improved styling.