Documentation

Geekfolio  |  Portfolio & Creative Vue/Nuxtjs Portfolio Template

Geekfolio is a Vue/Nuxtjs creative & modern multi-purpose template, A perfect place for your creative portfolio.. Multiple templates are included in this template with lots of CSS and Vue animations, a perfect template for business startups, web studio, and agencies. Responsive based on Bootstrap 5.

If you have any questions that are beyond the scope of this help file, Please feel free to contact us via ThemesCamp.

Features

• Based on Vue & Nuxt 3
• Based on Bootstrap 5
• Based On SCSS
• Creative layouts
• 100% Responsive
• Easy to Customize
• Minimal and Clean
• Fonts Awesome Icons
• Well Documentation
• Free Updates
• All files are well commented
• Displays well in all modern browsers

Files Include

geekfolio_nuxtjs Folder

Folder contains main template code & all vue, json, scss, css, images, fonts, js files

geekfolio-nuxtjs-docs Folder

Documentation folder of "geekfolio nuxtjs" written in html css

Installation

Follow the steps below to setup your template:

1. Download the latest theme source code from the Marketplace.
2. Download and install Node.js and npm from Nodejs. The suggested version to install is LTS.
3. Open terminal in geekfolio_nuxtjs template folder.

                     > cd /geekfolio_nuxtjs/
                   

4. Install npm packages. You must have to install packages of your project to install all the necessary dependencies, You can do this by running the following command.

                     > npm install
                   

Run Development Server

Start your app development server to change, update and customize your app.

Run npm run dev in the terminal from the root of your project to start a dev server

              > npm run dev
            

Navigate to http://localhost:3000 to see your app, the app will automatically reload if you change any of the source files.

Build For Production

Build the app for production and make it ready for deployment (used for dynamic & ssr support hosting)

Run npm run build to build and optimize your application with webpack for production.

              > npm run build
            

The build artifacts will be stored in the /.nuxt/ directory.

Run npm run preview to run the production build of the project locally.

Export To HTML

Build the application, and generate every route as a HTML file (used for static hosting)

Run npm run generate to export your application

              > npm run generate
            

The generated HTML files will statically be exported to .output/public directory.

Run npm run preview to serve the .output/public directory like your static hosting would do (Netlify, Vercel, etc), great for testing before deploying.

Deployment

You can deploy your project to any static hosting or a hosting that supports Node.js
We suggest some hosting you can consider to use:

consider reading the documentation in the official nuxt website https://nuxt.com/docs/getting-started/deployment#static-hosting

Folder Structure

Geekfolio comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain the entire file structure and how to adapt it to your project.

Root Folder

[root_folder] folder contains the whole project folders & files

Root Folder Content:

Layouts Folder

/geekfolio_nuxtjs/layouts folder contains all template layouts.

Pages Folder

/geekfolio_nuxtjs/pages folder contains template pages files.

pages folder content

dark folder content

Folders content:

• /dark/home-main
• index.vue
• /light/home-main
• index.vue
• ...

Each file is a Vue component exported from a .vue file in the pages directory is associated with a route based on its containing folder name.

Components Folder

/geekfolio_nuxtjs/components folder contains template components that imported and used in pages.

Components folders are grouped together according to the pages with same style.
e.g. Main Folder contains all the components of Home Main page

• /Architecture
• Header.vue //= Architecture-Style Header Component
• Services.vue //= Architecture-Style Services Component
• ...
• /Corporate
• Header.vue //= Corporate-Style Header Component
• Services.vue //= Corporate-Style Services Component
• ...
• ...

Each folder contains a vue components that is imported and rendered in some pages component.

Data Folder

/geekfolio_nuxtjs/data folder contains static app data in json format.

Each folder contains a page components data stored in JSON format.

• /Architecture
• header.json //= Architecture Header Component Data
• services.json //= Architecture Services Component Data
• ...
• /Corporate
• header.json //= Corporate Header Component Data
• services.json //= Corporate Services Component Data
• ...
• ...

Each file contains JSON data that imported and rendered on it's component.

Common Folder

/geekfolio_nuxtjs/common folder contains common helper functions.

Each file is JavaScript function that is commonly used in project components.

Plugins Folder

/geekfolio_nuxtjs/plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application. read more about nuxt plugins https://nuxt.com/docs/guide/directory-structure/plugins

This is the place to add Vue plugins and to inject functions or constants. Every time you need to use defineNuxtPlugin, you should create a file in plugins/ and add its path to plugins in nuxt.config.ts

Code Structure

Main template components code structure

Layout

/geekfolio_nuxtjs/layouts/[layout].vue Vue component that contains app layout.

// ./layouts/default.vue
<template>
  <CommonLoader />
  <CommonCursor />
  <CommonProgressScroll />
  <slot />
</template>

<script setup>
import { onMounted } from 'vue';
//= Scripts
import correctStylesheetsOrder from '@/common/correctStylesheetsOrder';

useHead({
  link: [
    { rel: 'stylesheet', href: '/dark/assets/css/plugins.css' },
    { rel: 'stylesheet', href: '/dark/assets/css/style.css' },
    { rel: 'stylesheet', href: '/dark/assets/css/base.css' },
  ]
});

onMounted(() => {
  setTimeout(() => {
    correctStylesheetsOrder({ lightMode: false });
  }, 10);
});
</script>

            

Layout component wraps pages content and contains specific configurations such as common components, css or scripts.

Page

/geekfolio_nuxtjs/pages/[page_folder]/[page].vue Vue component that contains a page code.

// pages/dark/home-corporate/index.vue
<template>
  <div>
    <CommonLinesTwo />
    <CommonNavbar />
    <main class="main-bg">
      <CorporateHeader />
      <CorporateServices />
      <CorporateAbout />
      <CorporateMarq />
      <CorporatePortfolio />
      <CorporateNumbers />
      <CorporateTestimonials />
      <CorporateBlock />
      <CorporatePricing />
      <CorporateBlog />
    </main>
    <CorporateFooter />
  </div>
</template>

<script setup>
//= Page Head
useHead({
  titleTemplate: `%s - Corporate`,
  bodyAttrs: {
    class: 'home-corp'
  }
})
</script>

            

Component

/geekfolio_nuxtjs/components/[component_folder]/[component].vue Vue component contains part of a page code.

// components/Corporate/Numbers.vue
<template>
  <section :class="`numbers section-padding ${paddingTop ? '' : 'pt-0'}`">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="item md-mb50">
            <h2> class="fw-800 stroke">16</h2>
            <h6>Years of Experience</h6>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 d-flex justify-content-around">
          <div class="item md-mb50">
            <h2 class="fw-800">4<span> class="fz-80 fw-600">k</span></h2>
            <h6>Projects Complated</h6>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 d-flex justify-content-around">
          <div class="item sm-mb50">
            <h2 class="fw-800 stroke">9<span> class="fz-80 fw-600">k</span></h2>
            <h6>Happy Customers</h6>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 d-flex">
          <div class="item ml-auto">
            <h2> class="fw-800">12</h2>
            <h6>Awards Winning</h6>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script> setup>
const { paddingTop } = defineProps(['paddingTop']);
</script>

            

Data

/geekfolio_nuxtjs/data/[data_folder]/[data_file].json JSON file stores component data.

// data/Corporate/blog.json
[
  {
    "id": 1,
    "title": "Creative advertising in our life became a info noise",
    "cover": "/dark/assets/imgs/blog/b1.jpg",
    "author": "Admin",
    "date": "august 6, 2021"
  },
  {
    "id": 3,
    "title": "We create some things for your success in future growth",
    "cover": "/dark/assets/imgs/blog/b3.jpg",
    "author": "Admin",
    "date": "august 6, 2021"
  },
  {
    "id": 2,
    "title": "Creative advertising in our life became a info noise",
    "cover": "/dark/assets/imgs/blog/b2.jpg",
    "author": "Admin",
    "date": "august 6, 2021"
  }
]

              

Source & Credits

Images:

• Pexels - https://pexels.com
• Unsplash - https://unsplash.com

Images are only for demo purpose and not included with the download bundle.

Fonts:

• Playfair Display - https://fonts.google.com/specimen/Playfair+Display
• Sora - https://fonts.google.com/specimen/Sora
• Poppins - https://fonts.google.com/specimen/Poppins
• Space Grotesk - https://fonts.google.com/specimen/Space+Grotesk
• Epilogue - https://fonts.google.com/specimen/Epilogue
• Lexend+Deca - https://fonts.google.com/specimen/Lexend+Deca

Scripts:

• Nuxt 3 - https://nuxt.com
• Vue 3 - https://vuejs.org
• Bootstrap 5 - http://getbootstrap.com
• Swiper Carousel - https://swiperjs.com
• vue3-parallax - https://www.npmjs.com/package/vue3-parallax

Thank you for purchased Geekfolio template

We truly appreciate and really hope that you'll enjoy our template!

If you like our template, plase rate us 5 star !