├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    ├── 5.png
    ├── 6.png
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── components
    │   ├── Footer.vue
    │   ├── HelloWorld.vue
    │   └── NavBar.vue
    ├── main.js
    ├── plugins
    │   └── vuetify.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
    │   ├── About.vue
    │   └── Home.vue
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # portfolio
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portfolio",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11",
13 |     "vue-router": "^3.2.0",
14 |     "vuetify": "^2.4.0",
15 |     "vuex": "^3.4.0"
16 |   },
17 |   "devDependencies": {
18 |     "@fortawesome/fontawesome-free": "^5.15.4",
19 |     "@vue/cli-plugin-babel": "~4.5.0",
20 |     "@vue/cli-plugin-eslint": "~4.5.0",
21 |     "@vue/cli-plugin-router": "~4.5.0",
22 |     "@vue/cli-plugin-vuex": "~4.5.0",
23 |     "@vue/cli-service": "~4.5.0",
24 |     "babel-eslint": "^10.1.0",
25 |     "eslint": "^6.7.2",
26 |     "eslint-plugin-vue": "^6.2.2",
27 |     "material-design-icons-iconfont": "^6.1.1",
28 |     "sass": "~1.32.0",
29 |     "sass-loader": "^10.0.0",
30 |     "vue-cli-plugin-vuetify": "~2.4.5",
31 |     "vue-template-compiler": "^2.6.11",
32 |     "vuetify-loader": "^1.7.0"
33 |   },
34 |   "eslintConfig": {
35 |     "root": true,
36 |     "env": {
37 |       "node": true
38 |     },
39 |     "extends": [
40 |       "plugin:vue/essential",
41 |       "eslint:recommended"
42 |     ],
43 |     "parserOptions": {
44 |       "parser": "babel-eslint"
45 |     },
46 |     "rules": {}
47 |   },
48 |   "browserslist": [
49 |     "> 1%",
50 |     "last 2 versions",
51 |     "not dead"
52 |   ]
53 | }
54 | 


--------------------------------------------------------------------------------
/public/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs---Vuetify-How-To-Build-A-Personal-Portfolio-Website-Using-HTML-CSS-JS-Portfolio-Website/47cacc9e8b07c6d3371df0e8949e1175b4951945/public/1.png


--------------------------------------------------------------------------------
/public/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs---Vuetify-How-To-Build-A-Personal-Portfolio-Website-Using-HTML-CSS-JS-Portfolio-Website/47cacc9e8b07c6d3371df0e8949e1175b4951945/public/2.png


--------------------------------------------------------------------------------
/public/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs---Vuetify-How-To-Build-A-Personal-Portfolio-Website-Using-HTML-CSS-JS-Portfolio-Website/47cacc9e8b07c6d3371df0e8949e1175b4951945/public/3.png


--------------------------------------------------------------------------------
/public/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs---Vuetify-How-To-Build-A-Personal-Portfolio-Website-Using-HTML-CSS-JS-Portfolio-Website/47cacc9e8b07c6d3371df0e8949e1175b4951945/public/4.png


--------------------------------------------------------------------------------
/public/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs---Vuetify-How-To-Build-A-Personal-Portfolio-Website-Using-HTML-CSS-JS-Portfolio-Website/47cacc9e8b07c6d3371df0e8949e1175b4951945/public/5.png


--------------------------------------------------------------------------------
/public/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs---Vuetify-How-To-Build-A-Personal-Portfolio-Website-Using-HTML-CSS-JS-Portfolio-Website/47cacc9e8b07c6d3371df0e8949e1175b4951945/public/6.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs---Vuetify-How-To-Build-A-Personal-Portfolio-Website-Using-HTML-CSS-JS-Portfolio-Website/47cacc9e8b07c6d3371df0e8949e1175b4951945/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-main>
 4 |       <router-view/>
 5 |     </v-main>
 6 |   </v-app>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 | export default {
12 |   name: 'App',
13 | 
14 |   data: () => ({
15 |     //
16 |   }),
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zakaria-29-dev/Vuejs---Vuetify-How-To-Build-A-Personal-Portfolio-Website-Using-HTML-CSS-JS-Portfolio-Website/47cacc9e8b07c6d3371df0e8949e1175b4951945/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-footer dark padless>
 3 |     <v-card
 4 |       flat
 5 |       tile
 6 |       class="black white--text py-5 px-5 text-center"
 7 |       width="100%"
 8 |     >
 9 |       <v-row>
10 |         <v-col cols="12" sm="4">
11 |           <v-card-text class="white--text pt-2">
12 |             <v-btn icon>
13 |               <v-icon color="#A7121D">fas fa-dragon</v-icon>
14 |             </v-btn>
15 |           </v-card-text>
16 |         </v-col>
17 | 
18 |         <v-col cols="12" sm="4">
19 |           <v-card-text class="pt-2">
20 |             <v-btn
21 |               v-for="icon in icons"
22 |               :key="icon"
23 |               class="mx-1 white--text"
24 |               icon
25 |             >
26 |               <v-icon size="24px">
27 |                 {{ icon }}
28 |               </v-icon>
29 |             </v-btn>
30 |           </v-card-text>
31 |         </v-col>
32 |         <v-col cols="12" sm="4">
33 |           <v-card-text class="pt-2">
34 |             <v-btn class="mx-1 white--text" icon>
35 |               <v-icon color="#A7121D">mdi-heart</v-icon>
36 |             </v-btn>
37 |             Created by AAE IdeaPro
38 |           </v-card-text>
39 |         </v-col>
40 |       </v-row>
41 |     </v-card>
42 |   </v-footer>
43 | </template>
44 | 
45 | <script>
46 | export default {};
47 | </script>
48 | 
49 | <style>
50 | </style>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row class="text-center">
  4 |       <v-col cols="12">
  5 |         <v-img
  6 |           :src="require('../assets/logo.svg')"
  7 |           class="my-3"
  8 |           contain
  9 |           height="200"
 10 |         />
 11 |       </v-col>
 12 | 
 13 |       <v-col class="mb-4">
 14 |         <h1 class="display-2 font-weight-bold mb-3">
 15 |           Welcome to Vuetify
 16 |         </h1>
 17 | 
 18 |         <p class="subheading font-weight-regular">
 19 |           For help and collaboration with other Vuetify developers,
 20 |           <br>please join our online
 21 |           <a
 22 |             href="https://community.vuetifyjs.com"
 23 |             target="_blank"
 24 |           >Discord Community</a>
 25 |         </p>
 26 |       </v-col>
 27 | 
 28 |       <v-col
 29 |         class="mb-5"
 30 |         cols="12"
 31 |       >
 32 |         <h2 class="headline font-weight-bold mb-3">
 33 |           What's next?
 34 |         </h2>
 35 | 
 36 |         <v-row justify="center">
 37 |           <a
 38 |             v-for="(next, i) in whatsNext"
 39 |             :key="i"
 40 |             :href="next.href"
 41 |             class="subheading mx-3"
 42 |             target="_blank"
 43 |           >
 44 |             {{ next.text }}
 45 |           </a>
 46 |         </v-row>
 47 |       </v-col>
 48 | 
 49 |       <v-col
 50 |         class="mb-5"
 51 |         cols="12"
 52 |       >
 53 |         <h2 class="headline font-weight-bold mb-3">
 54 |           Important Links
 55 |         </h2>
 56 | 
 57 |         <v-row justify="center">
 58 |           <a
 59 |             v-for="(link, i) in importantLinks"
 60 |             :key="i"
 61 |             :href="link.href"
 62 |             class="subheading mx-3"
 63 |             target="_blank"
 64 |           >
 65 |             {{ link.text }}
 66 |           </a>
 67 |         </v-row>
 68 |       </v-col>
 69 | 
 70 |       <v-col
 71 |         class="mb-5"
 72 |         cols="12"
 73 |       >
 74 |         <h2 class="headline font-weight-bold mb-3">
 75 |           Ecosystem
 76 |         </h2>
 77 | 
 78 |         <v-row justify="center">
 79 |           <a
 80 |             v-for="(eco, i) in ecosystem"
 81 |             :key="i"
 82 |             :href="eco.href"
 83 |             class="subheading mx-3"
 84 |             target="_blank"
 85 |           >
 86 |             {{ eco.text }}
 87 |           </a>
 88 |         </v-row>
 89 |       </v-col>
 90 |     </v-row>
 91 |   </v-container>
 92 | </template>
 93 | 
 94 | <script>
 95 |   export default {
 96 |     name: 'HelloWorld',
 97 | 
 98 |     data: () => ({
 99 |       ecosystem: [
100 |         {
101 |           text: 'vuetify-loader',
102 |           href: 'https://github.com/vuetifyjs/vuetify-loader',
103 |         },
104 |         {
105 |           text: 'github',
106 |           href: 'https://github.com/vuetifyjs/vuetify',
107 |         },
108 |         {
109 |           text: 'awesome-vuetify',
110 |           href: 'https://github.com/vuetifyjs/awesome-vuetify',
111 |         },
112 |       ],
113 |       importantLinks: [
114 |         {
115 |           text: 'Documentation',
116 |           href: 'https://vuetifyjs.com',
117 |         },
118 |         {
119 |           text: 'Chat',
120 |           href: 'https://community.vuetifyjs.com',
121 |         },
122 |         {
123 |           text: 'Made with Vuetify',
124 |           href: 'https://madewithvuejs.com/vuetify',
125 |         },
126 |         {
127 |           text: 'Twitter',
128 |           href: 'https://twitter.com/vuetifyjs',
129 |         },
130 |         {
131 |           text: 'Articles',
132 |           href: 'https://medium.com/vuetify',
133 |         },
134 |       ],
135 |       whatsNext: [
136 |         {
137 |           text: 'Explore components',
138 |           href: 'https://vuetifyjs.com/components/api-explorer',
139 |         },
140 |         {
141 |           text: 'Select a layout',
142 |           href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
143 |         },
144 |         {
145 |           text: 'Frequently Asked Questions',
146 |           href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
147 |         },
148 |       ],
149 |     }),
150 |   }
151 | </script>
152 | 


--------------------------------------------------------------------------------
/src/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app-bar app color="#111111" dark flat class="px-8">
 3 |     <v-btn icon>
 4 |       <v-icon color="#A7121D">fas fa-dragon</v-icon>
 5 |     </v-btn>
 6 | 
 7 |     <v-spacer></v-spacer>
 8 |     <v-btn text @click="scroll('home')">Home</v-btn>
 9 |     <v-btn text @click="scroll('project')">Project</v-btn>
10 |     <v-btn text @click="scroll('about')">about</v-btn>
11 |     <v-btn text @click="scroll('contact')"> contact</v-btn>
12 |   </v-app-bar>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   methods: {
18 |     scroll(refName) {
19 |       const element = document.getElementById(refName);
20 |       element.scrollIntoView({ behavior: "smooth" });
21 |     },
22 |   },
23 | };
24 | </script>
25 | 
26 | <style>
27 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import vuetify from './plugins/vuetify'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   router,
11 |   store,
12 |   vuetify,
13 |   render: h => h(App)
14 | }).$mount('#app')
15 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import '@fortawesome/fontawesome-free/css/all.css'
 2 | import 'material-design-icons-iconfont/dist/material-design-icons.css'
 3 | import Vue from 'vue';
 4 | import Vuetify from 'vuetify/lib/framework';
 5 | 
 6 | Vue.use(Vuetify);
 7 | 
 8 | export default new Vuetify({
 9 |     icons: {
10 |         iconfont: 'fa' || 'md' || 'mdi'
11 |     },
12 |     theme: {
13 |         themes: {
14 |             dark: {
15 |                 background: '#111111'
16 |             }
17 |         }
18 |     }
19 | });


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home
12 |   },
13 |   {
14 |     path: '/about',
15 |     name: 'About',
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
20 |   }
21 | ]
22 | 
23 | const router = new VueRouter({
24 |   mode: 'history',
25 |   base: process.env.BASE_URL,
26 |   routes
27 | })
28 | 
29 | export default router
30 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app
  3 |     id="home"
  4 |     :style="{ background: $vuetify.theme.themes.dark.background }"
  5 |   >
  6 |     <nav-bar />
  7 |     <v-container fluid>
  8 |       <v-row>
  9 |         <v-col cols="6">
 10 |           <v-img src="1.png" contain max-height="500"></v-img>
 11 |         </v-col>
 12 |         <v-col cols="6">
 13 |           <h5 class="red--text text--darken-4 top">Hello Im Agetha</h5>
 14 |           <h1 class="white--text">Visual Designer</h1>
 15 |           <p class="grey--text">
 16 |             Lorem, ipsum dolor sit amet consectetur adipisicing elit. <br />
 17 |             Adipisci explicabo, cupiditate necessitatibus iure hic omnis est ab
 18 |             <br />
 19 |             At nihil et temporibus ratione!
 20 |           </p>
 21 |           <v-btn tile color="#A7121D" dark> about me </v-btn>
 22 |         </v-col>
 23 |         <v-col cols="12" class="padd">
 24 |           <div class="first" id="project">
 25 |             <v-row>
 26 |               <v-col cols="12">
 27 |                 <div class="child bgColor1">
 28 |                   <v-icon color="#A7121D" x-large class="ml-3"
 29 |                     >mdi-palette-swatch</v-icon
 30 |                   >
 31 |                   <h3 class="white--text ml-3 mt-4">UI Design</h3>
 32 |                   <p class="grey--text ml-3 mt-6">
 33 |                     Lorem, ipsum dolor sit amet <br />consectetur adipisicing
 34 |                     elit.
 35 |                   </p>
 36 |                   <v-btn color="#A7121D" dark text>
 37 |                     know more
 38 |                     <v-icon right>mdi-arrow-right</v-icon>
 39 |                   </v-btn>
 40 |                 </div>
 41 |                 <div class="child bgColor2">
 42 |                   <v-icon color="" x-large class="ml-3" dark
 43 |                     >mdi-shopping</v-icon
 44 |                   >
 45 |                   <h3 class="white--text ml-3 mt-4">Product Design</h3>
 46 |                   <p class="grey--text ml-3 mt-6">
 47 |                     Lorem, ipsum dolor sit amet <br />consectetur adipisicing
 48 |                     elit.
 49 |                   </p>
 50 |                   <v-btn color="" dark text>
 51 |                     know more
 52 |                     <v-icon right>mdi-arrow-right</v-icon>
 53 |                   </v-btn>
 54 |                 </div>
 55 |                 <div class="child bgColor1">
 56 |                   <v-icon color="#A7121D" x-large class="ml-3"
 57 |                     >mdi-book-open-page-variant</v-icon
 58 |                   >
 59 |                   <h3 class="white--text ml-3 mt-4">Branding</h3>
 60 |                   <p class="grey--text ml-3 mt-6">
 61 |                     Lorem, ipsum dolor sit amet <br />consectetur adipisicing
 62 |                     elit.
 63 |                   </p>
 64 |                   <v-btn color="#A7121D" dark text>
 65 |                     know more
 66 |                     <v-icon right>mdi-arrow-right</v-icon>
 67 |                   </v-btn>
 68 |                 </div>
 69 |               </v-col>
 70 |               <v-col cols="12" class="mt-10">
 71 |                 <div class="child1">
 72 |                   <h1 class="red--text text--darken-4 mt-4 number">12</h1>
 73 |                   <h3 class="white--text mt-4">Years Experience</h3>
 74 |                 </div>
 75 |                 <div class="child2 mRight">
 76 |                   <v-row>
 77 |                     <v-col cols="12" class="childcol">
 78 |                       <div class="child2 mButton padding bgColor1">
 79 |                         <h1 class="red--text text--darken-4">60+</h1>
 80 |                         <p class="grey--text">Clients</p>
 81 |                       </div>
 82 |                     </v-col>
 83 |                     <v-col cols="12" class="childcol">
 84 |                       <div class="child2 padding bgColor1">
 85 |                         <h1 class="red--text text--darken-4">122+</h1>
 86 |                         <p class="grey--text">Completed Projects</p>
 87 |                       </div>
 88 |                     </v-col>
 89 |                   </v-row>
 90 |                 </div>
 91 |                 <div class="child2">
 92 |                   <v-row>
 93 |                     <v-col cols="12" class="childcol">
 94 |                       <div class="child2 mButton padding bgColor1">
 95 |                         <h1 class="red--text text--darken-4">08</h1>
 96 |                         <p class="grey--text">Years Experience</p>
 97 |                       </div>
 98 |                     </v-col>
 99 |                     <v-col cols="12" class="childcol">
100 |                       <div class="child2 padding bgColor1">
101 |                         <h1 class="red--text text--darken-4">10</h1>
102 |                         <p class="grey--text">Achievements</p>
103 |                       </div>
104 |                     </v-col>
105 |                   </v-row>
106 |                 </div>
107 |               </v-col>
108 |             </v-row>
109 |           </div>
110 |         </v-col>
111 |         <v-col md="3" offset-md="3" id="about">
112 |           <h4 class="white--text">FEATURED PROJECTS</h4>
113 |           <p class="grey--text">Lorem ipsum dolor Lorem ipsum dolor</p>
114 |         </v-col>
115 |         <v-col md="3" class="text-end">
116 |           <v-btn tile color="#A7121D" dark> View All </v-btn>
117 |         </v-col>
118 |         <v-col md="3" offset-md="3">
119 |           <v-card
120 |             class="pa-2 py-12"
121 |             outlined
122 |             tile
123 |             height="250px"
124 |             color="#1E1E1E"
125 |           >
126 |             <v-img src="3.png" contain max-height=""></v-img>
127 |           </v-card>
128 |         </v-col>
129 |         <v-col md="3">
130 |           <v-card
131 |             class="pa-2 py-12"
132 |             outlined
133 |             tile
134 |             height="250px"
135 |             color="#1E1E1E"
136 |           >
137 |             <v-img src="2.png" contain max-height=""></v-img>
138 |           </v-card>
139 |         </v-col>
140 |         <v-col md="3" offset-md="3">
141 |           <v-btn color="white" dark text class="ml-n4"> The Vintage </v-btn
142 |           ><br />
143 | 
144 |           <v-btn color="#A7121D" dark text class="ml-n4">
145 |             know more
146 |             <v-icon right>mdi-arrow-right</v-icon>
147 |           </v-btn>
148 |         </v-col>
149 |         <v-col md="3">
150 |           <v-btn color="white" dark text class="ml-n4"> Foodasa </v-btn><br />
151 | 
152 |           <v-btn color="#A7121D" dark text class="ml-n4">
153 |             know more
154 |             <v-icon right>mdi-arrow-right</v-icon>
155 |           </v-btn>
156 |         </v-col>
157 |         <v-col md="3" offset-md="3">
158 |           <v-card
159 |             class="pa-2 py-12"
160 |             outlined
161 |             tile
162 |             height="250px"
163 |             color="#1E1E1E"
164 |           >
165 |             <v-img src="4.png" contain max-height=""></v-img>
166 |           </v-card>
167 |         </v-col>
168 |         <v-col md="3">
169 |           <v-card
170 |             class="pa-2 py-12"
171 |             outlined
172 |             tile
173 |             height="250px"
174 |             color="#1E1E1E"
175 |           >
176 |             <v-img src="5.png" contain max-height=""></v-img>
177 |           </v-card>
178 |         </v-col>
179 |         <v-col md="3" offset-md="3">
180 |           <v-btn color="white" dark text class="ml-n4"> AAE IdeaPro </v-btn
181 |           ><br />
182 | 
183 |           <v-btn color="#A7121D" dark text class="ml-n4">
184 |             know more
185 |             <v-icon right>mdi-arrow-right</v-icon>
186 |           </v-btn>
187 |         </v-col>
188 |         <v-col md="3">
189 |           <v-btn color="white" dark text class="ml-n4"> Mozaik </v-btn><br />
190 |           <v-btn color="#A7121D" dark text class="ml-n4">
191 |             know more
192 |             <v-icon right>mdi-arrow-right</v-icon>
193 |           </v-btn>
194 |         </v-col>
195 |         <v-col cols="12" class="padd topInverse">
196 |           <div class="second">
197 |             <div class="secondchild1" id="contact">
198 |               <v-row>
199 |                 <v-col cols="7">
200 |                   <h1 class="white--text">
201 |                     Let's work together on<br />your next project
202 |                   </h1>
203 |                   <p class="grey--text">
204 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
205 |                     Eius nesciunt ducimus natus <br />
206 |                   </p>
207 |                 </v-col>
208 |                 <v-col cols="5">
209 |                   <v-btn tile color="#A7121D" dark class="mt-16">
210 |                     Contact
211 |                   </v-btn>
212 |                 </v-col>
213 |               </v-row>
214 |             </div>
215 |           </div>
216 |           <v-toolbar class="topTolbar" color="#111111" dark flat>
217 |             <div
218 |               style="
219 |                 position: absolute;
220 |                 margin-left: auto;
221 |                 margin-right: auto;
222 |                 left: 0;
223 |                 right: 0;
224 |                 text-align: center;
225 |               "
226 |             >
227 |               <v-btn text>Home</v-btn>
228 |               <v-btn text>Project</v-btn>
229 |               <v-btn text>about</v-btn>
230 |               <v-btn text> contact</v-btn>
231 |             </div>
232 |           </v-toolbar>
233 |         </v-col>
234 |       </v-row>
235 |     </v-container>
236 |     <Footer />
237 |   </v-app>
238 | </template>
239 | 
240 | <script>
241 | import NavBar from "../components/NavBar.vue";
242 | import Footer from "../components/Footer.vue";
243 | 
244 | export default {
245 |   name: "Home",
246 |   data: () => ({
247 |     icons: ["mdi-facebook", "mdi-twitter", "mdi-linkedin", "mdi-instagram"],
248 |   }),
249 |   components: {
250 |     NavBar,
251 |     Footer,
252 |   },
253 | };
254 | </script>
255 | <style scoped>
256 | .top {
257 |   margin-top: 180px;
258 | }
259 | .topInverse {
260 |   margin-top: -250px;
261 | }
262 | .topTolbar {
263 |   margin-top: 100px;
264 |   text-align: center;
265 | }
266 | .first {
267 |   width: 100%;
268 |   height: 610px;
269 |   background: linear-gradient(
270 |     to right,
271 |     #181818,
272 |     #181818 50%,
273 |     #111111 50%,
274 |     #111111 50%
275 |   );
276 |   text-align: center;
277 |   padding: 2rem 2rem;
278 | }
279 | .second {
280 |   width: 100%;
281 |   height: 400px;
282 |   background: #181818;
283 |   text-align: center;
284 |   padding: 2rem 2rem;
285 | }
286 | .secondchild1 {
287 |   display: inline-block;
288 |   background-color: #1e1e1e;
289 |   padding: 2rem 1rem;
290 |   vertical-align: middle;
291 |   text-align: left;
292 |   margin-top: 250px;
293 | }
294 | .child {
295 |   display: inline-block;
296 |   padding: 2rem 1rem;
297 |   vertical-align: middle;
298 |   text-align: left;
299 |   margin-right: 8px;
300 | }
301 | .bgColor1 {
302 |   background-color: #1e1e1e;
303 | }
304 | .bgColor2 {
305 |   background-color: #ce1d2a;
306 | }
307 | 
308 | .child1 {
309 |   display: inline-block;
310 |   padding: 2rem 1rem;
311 |   vertical-align: middle;
312 |   margin-right: 5px;
313 |   width: 240px;
314 | }
315 | .child2 {
316 |   display: inline-block;
317 |   width: 245px;
318 |   vertical-align: middle;
319 | }
320 | .mRight {
321 |   margin-right: 8px;
322 | }
323 | .mButton {
324 |   margin-bottom: 8px;
325 | }
326 | .padding {
327 |   padding: 8px 0;
328 | }
329 | 
330 | .col-12.padd {
331 |   padding: 12px 0 !important;
332 | }
333 | .col-12.childcol {
334 |   padding: 0 !important;
335 | }
336 | h1.number {
337 |   font-size: 50px;
338 |   font-weight: bold;
339 | }
340 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   transpileDependencies: [
3 |     'vuetify'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------