added feature and pages

.editorconfig

@@ -4,4 +4,4 @@ indent_size = 2
 end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
-max_line_length = 100
+max_line_length = 120

src/App.vue

@@ -1,61 +1,30 @@
 <template>
   <v-app>
-    <v-app-bar
-      app
-      color="primary"
-      dark
-    >
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
 
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
-
-      <v-spacer></v-spacer>
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-
-    <v-main>
-      <HelloWorld/>
+    <v-main class="justify-center bg-image">
+      <portfolio/>
     </v-main>
   </v-app>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import HelloWorld from './components/HelloWorld.vue';
+import Portfolio from './views/Portfolio.vue';
 
 export default Vue.extend({
   name: 'App',
 
   components: {
-    HelloWorld,
+    Portfolio,
   },
-
-  data: () => ({
-    //
-  }),
 });
 </script>
+
+<style lang="scss">
+  .bg-image{
+    background-image: url('./assets/images/bg.png');
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+</style>

src/components/HelloWorld.vue

@@ -10,7 +10,7 @@
         />
       </v-col>
 
-      <v-col class="mb-4">
+      <!-- <v-col class="mb-4">
         <h1 class="display-2 font-weight-bold mb-3">
           Welcome to Vuetify
         </h1>
@@ -23,9 +23,9 @@
             target="_blank"
           >Discord Community</a>
         </p>
-      </v-col>
+      </v-col> -->
 
-      <v-col
+      <!-- <v-col
         class="mb-5"
         cols="12"
       >
@@ -86,7 +86,7 @@
             {{ eco.text }}
           </a>
         </v-row>
-      </v-col>
+      </v-col> -->
     </v-row>
   </v-container>
 </template>

src/router/index.ts

@@ -1,15 +1,9 @@
 import Vue from 'vue';
 import VueRouter, { RouteConfig } from 'vue-router';
-import Home from '../views/Home.vue';
 
 Vue.use(VueRouter);
 
 const routes: Array<RouteConfig> = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-  },
   {
     path: '/about',
     name: 'About',

src/views/About.vue

@@ -1,5 +1,114 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h4 class="blue--text my-4">About Me</h4>
+    <p>{{ aboutMe }}</p>
+
+    <!-- expansion panels -->
+    <v-expansion-panels flat multiple v-model="panel">
+
+      <!-- services -->
+      <v-expansion-panel class="px-0">
+        <v-expansion-panel-header color="blue--text" class="font-weight-bold px-0">
+          Services
+        </v-expansion-panel-header>
+        <v-expansion-panel-content class="px-0">
+          <v-row class="d-flex">
+            <v-col
+              v-for="service in servicesData"
+              :key="service.img"
+              cols="auto"
+              class="pl-0"
+            >
+              <v-card elevation="2" class="pa-4">
+                <v-img
+                  max-height="80"
+                  max-width="80"
+                  class="mx-auto my-4"
+                  :src="service.img"
+                ></v-img>
+                <h5>{{ service.title }}</h5>
+                <small>{{ service.desc }}</small>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <!-- Skills -->
+      <v-expansion-panel>
+        <v-expansion-panel-header color="blue--text" class="font-weight-bold px-0">
+          Skills
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-row
+            align="center"
+            v-for="progress in progressData"
+            :key="progress.title"
+          >
+            <v-col cols="12" xl="2" class="pl-0"> {{ progress.title }} </v-col>
+            <v-col cols="12" xl="10" class="pl-0">
+              <v-progress-linear
+                :value="progress.value"
+                stream
+                buffer-value="0"
+                :color="progress.color"
+              ></v-progress-linear>
+            </v-col>
+          </v-row>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
   </div>
 </template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  data() {
+    return {
+      panel: [0, 1],
+      aboutMe: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem
+      et illum similique modi veniam eum quas pariatur, vel magnam harum
+      inventore aperiam labore distinctio ipsa, magni id autem incidunt.
+      Voluptatem perferendis, eum asperiores minus nam maiores delectus expedita
+      fugit, architecto ad qui nihil modi nisi deleniti, dolorum sunt. Ullam
+      quae a, temporibus saepe cumque sit hic tempore id consequuntur
+      necessitatibus quas, sunt in accusantium labore fuga similique? Beatae
+      molestiae obcaecati facere modi esse dolores maxime numquam ut qui
+      deserunt exercitationem possimus dicta consectetur labore ipsum ratione
+      dolor ducimus officiis, rerum fuga? Rem tempore corrupti reiciendis
+      maxime. Molestias ab similique vitae`,
+      progressData: [
+        { color: 'blue', value: 90, title: 'HTML' },
+        { color: 'red', value: 95, title: 'CSS' },
+        { color: 'green', value: 60, title: 'VueJS' },
+        { color: 'amber', value: 80, title: 'Vuetify' },
+      ],
+      /* eslint-disable global-require */
+      servicesData: [
+        {
+          img: require('@/assets/images/online-shopping.svg'),
+          title: 'Web Development',
+          desc: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit',
+        },
+        {
+          img: require('@/assets/images/checklist.svg'),
+          title: 'Branding Identity',
+          desc: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit',
+        },
+        {
+          img: require('@/assets/images/paint.svg'),
+          title: 'Designing',
+          desc: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit',
+        },
+        {
+          img: require('@/assets/images/watch.png'),
+          title: 'Designing',
+          desc: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit',
+        },
+      ],
+    };
+  },
+});
+</script>

src/views/HireMe.vue

@@ -0,0 +1,82 @@
+<template>
+  <v-form ref="form" v-model="valid">
+    <v-container>
+      <v-row>
+        <v-col cols="12" md="6">
+          <!-- first name -->
+          <v-text-field
+            v-model="firstName"
+            label="First name"
+            :rules="nameRules"
+            outlined
+            required
+          ></v-text-field>
+
+          <!-- last name -->
+          <v-text-field
+            v-model="lastName"
+            :rules="lastNameRules"
+            label="Last name"
+            outlined
+            required
+          ></v-text-field>
+
+          <!-- email -->
+          <v-text-field
+            v-model="email"
+            :rules="emailRules"
+            label="E-mail"
+            outlined
+            required
+          ></v-text-field>
+        </v-col>
+
+        <!-- text area -->
+        <v-col cols="12" md="6">
+          <v-textarea
+            v-model="textarea"
+            :rules="textareaRules"
+            outlined
+            name="input-7-4"
+            label="Write your message here.."
+            required
+          ></v-textarea>
+
+          <!-- button -->
+          <v-btn color="success" @click="submitForm">
+            <v-icon class="mr-2">mdi-send-outline</v-icon>
+            SEND MESSAGE
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-form>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  data() {
+    return {
+      valid: true,
+      firstName: '',
+      nameRules: [(v: string) => !!v || '*First Name is required'],
+      lastName: '',
+      lastNameRules: [(v: string) => !!v || '*Last Name is required'],
+      email: '',
+      emailRules: [
+        (v: string) => !!v || '*E-mail is required',
+        (v: string) => /.+@.+\..+/.test(v) || 'E-mail must be valid',
+      ],
+      textarea: '',
+      textareaRules: [(v: string|number) => !!v || '*Text Area is required'],
+    };
+  },
+  methods: {
+    submitForm() {
+      (this.$refs.form as Vue & { validate: () => boolean }).validate();
+    },
+  },
+});
+</script>