Vuejs Portfolio Template Neva Vue

“Dark , minimal and modern theme for portfolios .”

https://github.com/aabidsofi19/neva-portfolio-template .

live preview at https://neva-portfolio-vue.netlify.app/

Neva vue is a minimal ,open-source and free vuejs template for portfolios.

Fully Responsive on Mobile  Devices

The template has been crafted with love using Vuejs, Vuex, and Vuetify.

The template follows a component-based design so, is easy to customize for both developers and people not familiar with code.

The template has been specially crafted to be simple to customize for people not familiar with code.

The installation process is pretty simple and won’t take more than 10 minutes. So let’s begin.

Hav’nt installed the template yet,clone the repo now.

The template has been licensed under the MIT license. Which means you are not bound for any type of credit. But surely giving one in your footer will be helpful and appreciated a lot.

Star the repo on Github and follow me. It means a lot ❤️.

Installation

To build the theme locally we need the following tools installed : nodejs , npm or yarn(preferred) .

clone the repo using git from here https://github.com/aabidsofi19/neva-portfolio-template

After installing the above. change the directory that of the downloaded repository :

  cd neva-portfolio

now run the following commands


  yarn install


  npm install

to run the development server :


 npm run serve


  yarn run serve

Now you have reached the point where you want to set up the site as per your needs. The customization is pretty easy, so let’s jump into it.

Customization

About Section

Personalizing the about section is pretty forward.

Go to the src/components/about.vue file. And add your bio in the column reading the comment

You can change the photo by changing the image name portrait.jpg in src/assets. Don’t forget to check that the image you are adding is also named portrait.jpg.

Let us start with the banner text.

Default banner text 👇🏼

The banner can be found in src/components/banner.vue.

We can customize the introduction by changing the text in the template tag in the above file.

default file :

lets change this to :

And here we are.

Contact Form

I hope you have finished customizing rest of the site . As this part is a little tricky but trust me i am gonna guide you through this also.

To setup recieving the contact form data you need as backend api will recieve the post data and save it somewhere or trigger an email based on it . (as /testendpoint/submit_message)

The only requirement is that the post api endpoint should recieve data in the following format . everthing els e on the client side is already configured and it uses axios.js for sending api requests .


{
    "name":"name",
    "email":"mailt@aabid.com",
    "message":"test message"
}

Now you have to add your endpoint in the src/axiosClient.js , replace the BaseUrl with your api endpoint

Projects Section

You can add your projects to the portfolio section site by simple adding them to the projects array in src/store/index.js

As shown below.

Services Section

Contents of the services section can be changed in the src/components/services.vue .

Please don’t change the column layout as it can cause some layout problems later on

The file for the footer lies in src/components/footer.vue.

You can customize the copyright text here.

To add your social links go to src/store/index.js

Add your links to the social links array as below.

SEO And Meta tags Customization

The template has been crafted with giving seo and UX , most priority .

The seo details like title , meta-tags and opengraph tags can be updated in the public/index.html file .

you can also add the google analytics snippet here .

Licence

Coded by Aabid Sofi

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.