From 6861f9b9128628a7da2790970ac028bbfabfd9cf Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanuelabiy.as@gmail.com>
Date: Wed, 3 Aug 2022 17:28:18 +0300
Subject: [PATCH 1/3] created basic ui

---
 .../components/amanabiy/AmanAddBlog.vue       | 50 +++++++++++
 .../components/amanabiy/AmanBlog.vue          | 84 +++++++++++++++++++
 .../pages/amanabiy/_id.vue                    | 76 +++++++++++++++++
 .../pages/amanabiy/index.vue                  | 25 ++++++
 starter-project-web-vue2/pages/index.vue      |  5 ++
 5 files changed, 240 insertions(+)
 create mode 100644 starter-project-web-vue2/components/amanabiy/AmanAddBlog.vue
 create mode 100644 starter-project-web-vue2/components/amanabiy/AmanBlog.vue
 create mode 100644 starter-project-web-vue2/pages/amanabiy/_id.vue
 create mode 100644 starter-project-web-vue2/pages/amanabiy/index.vue

diff --git a/starter-project-web-vue2/components/amanabiy/AmanAddBlog.vue b/starter-project-web-vue2/components/amanabiy/AmanAddBlog.vue
new file mode 100644
index 00000000..53d520da
--- /dev/null
+++ b/starter-project-web-vue2/components/amanabiy/AmanAddBlog.vue
@@ -0,0 +1,50 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-dialog v-model="dialog" class='my-20' width="800px">
+        <template #activator="{ on, attrs }">
+          <v-btn color="blue" v-bind="attrs" outlined v-on="on"
+            >Add Blog</v-btn
+          >
+        </template>
+        <v-card>
+          <v-card-title>
+            <span class="text-h5">Create Your Blog</span>
+          </v-card-title>
+          <v-form >
+            <v-container>
+              <v-row>
+                <v-col cols="12">
+                  <v-text-field label="Title" required></v-text-field>
+                </v-col>
+                <v-col cols="12">
+                  <v-textarea dense label="Content" required></v-textarea>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-form>
+          <v-card-actions>
+            <v-btn color="blue lighten-2" outlined @click="dialog = false">
+              Save Blog
+            </v-btn>
+            <v-btn color="red lighten-2"  outlined @click="dialog = false">
+              Discard
+            </v-btn>
+
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AmanAddBlog',
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/amanabiy/AmanBlog.vue b/starter-project-web-vue2/components/amanabiy/AmanBlog.vue
new file mode 100644
index 00000000..e769ebc4
--- /dev/null
+++ b/starter-project-web-vue2/components/amanabiy/AmanBlog.vue
@@ -0,0 +1,84 @@
+<template>
+
+  <v-list
+    flat
+    subheader
+    three-line
+    class="my-50"
+  >
+    <v-card class="my-20" width="90%">
+      <v-subheader> Blogs </v-subheader>
+      <div v-for="blog in blogs" :key="blog.id"> 
+        <v-list-item  :class="{'grey lighten-4': blog.id % 2 && !blog.done}">
+            <v-list-item-action>
+            </v-list-item-action>
+
+            <v-list-item-content>
+                <nuxt-link
+                  style="text-decoration: none; color: inherit"
+                  :to="'/amanabiy/' + blog.id"
+                >
+                    <v-list-item-title>{{ blog.title }}</v-list-item-title>
+                    <v-list-item-subtitle> <span class="font-weight-bold"> By {{blog.author}}: </span> {{ blog.desc }}</v-list-item-subtitle>
+                </nuxt-link>
+            </v-list-item-content>
+
+            <v-list-item-action :key="blog.id">
+              <v-btn icon>
+                <v-icon color="green">mdi-pencil</v-icon>
+              </v-btn>
+            </v-list-item-action>
+
+            <v-list-item-action :key="blog.id">
+              <v-btn icon>
+                <v-icon color="red">mdi-delete</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          
+          </v-list-item>
+          <v-divider ></v-divider>
+      </div>
+    </v-card>
+  </v-list>
+</template>
+
+<script>
+  export default {
+    name: 'BlogsList',
+
+    data: () => {
+      return {
+    
+        blogs: [
+          {
+            id: 1,
+            title: "Why you should Wake up",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Amanuel Sisay",
+          },
+          {
+            id: 2,
+            title: "Why you should Gym",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+
+            author: "Abel",
+          },
+          {
+            id: 3,
+            title: "The benifit of Working hard",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Abebe",
+
+          },
+          {
+            id: 4,
+            title: "Interviews Trick",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Kebede",
+
+          },
+        ]
+      }
+    },
+  }
+</script>
diff --git a/starter-project-web-vue2/pages/amanabiy/_id.vue b/starter-project-web-vue2/pages/amanabiy/_id.vue
new file mode 100644
index 00000000..ad6f2084
--- /dev/null
+++ b/starter-project-web-vue2/pages/amanabiy/_id.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-app>
+    <nuxt-link style="text-decoration: none; color: inherit"  :to="'/amanabiy/'">
+      <v-btn fab outlined x-small color="green" class="pa-2 mb-2 mx-7 mt-3"
+        ><v-icon> mdi-chevron-left </v-icon></v-btn
+      ></nuxt-link
+    >
+
+    <v-card class="mx-6 my-6">
+      <v-card-title>
+        <span class="text-h6 font-weight-bold"
+          >{{ curr_blog.title }} <small>{{ curr_blog.id }}</small></span
+        >
+      </v-card-title>
+
+      <v-card-text class="subtitle-2">
+        {{ curr_blog.desc }}
+      </v-card-text>
+
+      <v-list-item class="font-weight-light">
+          <v-list-item-title class="-2 font-weight-light">By {{ curr_blog.author }}</v-list-item-title>
+      </v-list-item>
+    </v-card>
+  </v-app>
+</template>
+
+
+<script>
+  export default {
+    name: 'BlogCurr',
+
+    data: () => {
+      return {
+        curr_blog: {
+            id: "1",
+            title: "Why you should Wake up",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Amanuel Sisay",
+        },
+        blogs: [
+          {
+            id: "1",
+            title: "Why you should Wake up",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Amanuel Sisay",
+          },
+          {
+            id: "2",
+            title: "Why you should Gym",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+
+            author: "Abel",
+          },
+          {
+            id: "3",
+            title: "The benifit of Working hard",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Abebe",
+
+          },
+          {
+            id: "4",
+            title: "Interviews Trick",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Kebede",
+
+          },
+        ]
+      }
+    },
+    created () {
+        this.curr_blog = this.blogs.filter((blog) => blog.id === this.$route.params.id)[0]
+    },
+  }
+</script>
+
diff --git a/starter-project-web-vue2/pages/amanabiy/index.vue b/starter-project-web-vue2/pages/amanabiy/index.vue
new file mode 100644
index 00000000..c0b84825
--- /dev/null
+++ b/starter-project-web-vue2/pages/amanabiy/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-row class="my-12">
+        <AddBlog />
+      </v-row>
+      <v-row class="my-12">
+        <BlogPost />
+      </v-row>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+import BlogPost from '../../components/amanabiy/AmanBlog.vue'
+import AddBlog from '../../components/amanabiy/AmanAddBlog.vue'
+
+export default {
+  name: 'BlogPosts',
+  components: {
+    BlogPost,
+    AddBlog,
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index f4de04f5..7abfe742 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -67,6 +67,11 @@ export default {
           description: 'Web Team Member',
           link: '/liben/articles',
         },
+        {
+          name: "Amanuel Sisay",
+          description: "Web Team Member",
+          link: '/amanabiy',
+        },
       ],
     }
   },

From ecbf40b26e00cf1746112b8314473bb4bc58ba57 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanuelabiy.as@gmail.com>
Date: Thu, 4 Aug 2022 01:22:53 +0300
Subject: [PATCH 2/3] implemented state management with dummy data

---
 .../components/amanabiy/AmanBlog.vue          | 42 +++--------
 .../pages/amanabiy/_id.vue                    | 36 ++--------
 starter-project-web-vue2/store/amanabiy.js    | 70 +++++++++++++++++++
 3 files changed, 86 insertions(+), 62 deletions(-)
 create mode 100644 starter-project-web-vue2/store/amanabiy.js

diff --git a/starter-project-web-vue2/components/amanabiy/AmanBlog.vue b/starter-project-web-vue2/components/amanabiy/AmanBlog.vue
index e769ebc4..9235068d 100644
--- a/starter-project-web-vue2/components/amanabiy/AmanBlog.vue
+++ b/starter-project-web-vue2/components/amanabiy/AmanBlog.vue
@@ -29,7 +29,7 @@
               </v-btn>
             </v-list-item-action>
 
-            <v-list-item-action :key="blog.id">
+            <v-list-item-action :key="blog.id" @click="deleteBlog(blog.id)">
               <v-btn icon>
                 <v-icon color="red">mdi-delete</v-icon>
               </v-btn>
@@ -43,42 +43,20 @@
 </template>
 
 <script>
+  import { mapState, mapActions } from 'vuex'
   export default {
     name: 'BlogsList',
-
     data: () => {
       return {
-    
-        blogs: [
-          {
-            id: 1,
-            title: "Why you should Wake up",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Amanuel Sisay",
-          },
-          {
-            id: 2,
-            title: "Why you should Gym",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-
-            author: "Abel",
-          },
-          {
-            id: 3,
-            title: "The benifit of Working hard",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Abebe",
-
-          },
-          {
-            id: 4,
-            title: "Interviews Trick",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Kebede",
-
-          },
-        ]
+        current: {},
       }
     },
+    computed: { ...mapState('amanabiy', ['blogs']) },
+    created () {
+      this.getBlogs()
+    },
+    methods: {
+      ...mapActions('amanabiy', ['getBlogs', 'deleteBlog']),
+    }
   }
 </script>
diff --git a/starter-project-web-vue2/pages/amanabiy/_id.vue b/starter-project-web-vue2/pages/amanabiy/_id.vue
index ad6f2084..9e580920 100644
--- a/starter-project-web-vue2/pages/amanabiy/_id.vue
+++ b/starter-project-web-vue2/pages/amanabiy/_id.vue
@@ -9,7 +9,7 @@
     <v-card class="mx-6 my-6">
       <v-card-title>
         <span class="text-h6 font-weight-bold"
-          >{{ curr_blog.title }} <small>{{ curr_blog.id }}</small></span
+          >{{ curr_blog.title }}</span
         >
       </v-card-title>
 
@@ -26,6 +26,7 @@
 
 
 <script>
+  import { mapState, mapActions } from 'vuex'
   export default {
     name: 'BlogCurr',
 
@@ -37,40 +38,15 @@
             desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
             author: "Amanuel Sisay",
         },
-        blogs: [
-          {
-            id: "1",
-            title: "Why you should Wake up",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Amanuel Sisay",
-          },
-          {
-            id: "2",
-            title: "Why you should Gym",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-
-            author: "Abel",
-          },
-          {
-            id: "3",
-            title: "The benifit of Working hard",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Abebe",
-
-          },
-          {
-            id: "4",
-            title: "Interviews Trick",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Kebede",
-
-          },
-        ]
       }
     },
+    computed: { ...mapState('amanabiy', ['blogs'])},
     created () {
+        this.getBlogs()
         this.curr_blog = this.blogs.filter((blog) => blog.id === this.$route.params.id)[0]
     },
+    methods: { ...mapActions('amanabiy', ['getBlogs'])},
+    
   }
 </script>
 
diff --git a/starter-project-web-vue2/store/amanabiy.js b/starter-project-web-vue2/store/amanabiy.js
new file mode 100644
index 00000000..225a9a97
--- /dev/null
+++ b/starter-project-web-vue2/store/amanabiy.js
@@ -0,0 +1,70 @@
+const desc = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam."
+
+export const state = {
+        blogs: [
+        {
+            id: "1",
+            title: "Why you should Wake up early",
+            author: "Amanuel Sisay",
+            desc,
+        },
+        {
+            id: "2",
+            title: "Why you should Gym and go to gym",
+            desc,
+            author: "Abel",
+        },
+        {
+            id: "3",
+            title: "The benifit of Working hard",
+            desc,
+            author: "Abebe",
+        },
+        {
+            id: "4",
+            title: "Interviews Trick",
+            desc,
+            author: "Kebede",
+        },
+    ],
+}
+
+export const actions = {
+    getBlogs({ commit }) {
+        commit('getBlogs', state.blogs)
+    },
+
+    deleteBlog({ commit }, id) {
+        commit('deleteBlog', id)
+    },
+
+    addBlog({ commit }, addedBlog) {
+        commit('addBlogs', addedBlog)
+    },
+
+    updateBlog({ commit }, updatedBlog) {
+        commit('updateBlog', updatedBlog)
+    }
+
+}
+
+export const getters = {
+    // sorted options
+
+    // filtered options
+
+    // filtered + sorterd options
+}
+
+export const mutations = {
+    getBlogs: (state, blogs) => (state.blogs = blogs),
+    deleteBlog: (state, id) => {
+        (state.blogs = state.blogs.filter((blog) => blog.id !== id))},
+    editBlog: (state, newBlog) => {
+        const blogToEdit = state.blogs.filter((blog) => blog.id === newBlog.id)[0]
+        blogToEdit.title = newBlog.title
+        blogToEdit.desc = newBlog.desc
+        blogToEdit.author = newBlog.author
+    },
+    addBlog: (state, newBlog) => { state.blogs.unshift(newBlog)}
+}
\ No newline at end of file

From 5e8eef7cc70c04085e8ff1394c08dbf157a0b903 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanuelabiy.as@gmail.com>
Date: Thu, 4 Aug 2022 10:38:00 +0300
Subject: [PATCH 3/3] created basic ui

---
 .../components/amanabiy/AmanAddBlog.vue       | 50 +++++++++++
 .../components/amanabiy/AmanBlog.vue          | 84 +++++++++++++++++++
 .../pages/amanabiy/_id.vue                    | 76 +++++++++++++++++
 .../pages/amanabiy/index.vue                  | 25 ++++++
 starter-project-web-vue2/pages/index.vue      |  5 ++
 5 files changed, 240 insertions(+)
 create mode 100644 starter-project-web-vue2/components/amanabiy/AmanAddBlog.vue
 create mode 100644 starter-project-web-vue2/components/amanabiy/AmanBlog.vue
 create mode 100644 starter-project-web-vue2/pages/amanabiy/_id.vue
 create mode 100644 starter-project-web-vue2/pages/amanabiy/index.vue

diff --git a/starter-project-web-vue2/components/amanabiy/AmanAddBlog.vue b/starter-project-web-vue2/components/amanabiy/AmanAddBlog.vue
new file mode 100644
index 00000000..53d520da
--- /dev/null
+++ b/starter-project-web-vue2/components/amanabiy/AmanAddBlog.vue
@@ -0,0 +1,50 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-dialog v-model="dialog" class='my-20' width="800px">
+        <template #activator="{ on, attrs }">
+          <v-btn color="blue" v-bind="attrs" outlined v-on="on"
+            >Add Blog</v-btn
+          >
+        </template>
+        <v-card>
+          <v-card-title>
+            <span class="text-h5">Create Your Blog</span>
+          </v-card-title>
+          <v-form >
+            <v-container>
+              <v-row>
+                <v-col cols="12">
+                  <v-text-field label="Title" required></v-text-field>
+                </v-col>
+                <v-col cols="12">
+                  <v-textarea dense label="Content" required></v-textarea>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-form>
+          <v-card-actions>
+            <v-btn color="blue lighten-2" outlined @click="dialog = false">
+              Save Blog
+            </v-btn>
+            <v-btn color="red lighten-2"  outlined @click="dialog = false">
+              Discard
+            </v-btn>
+
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AmanAddBlog',
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/components/amanabiy/AmanBlog.vue b/starter-project-web-vue2/components/amanabiy/AmanBlog.vue
new file mode 100644
index 00000000..e769ebc4
--- /dev/null
+++ b/starter-project-web-vue2/components/amanabiy/AmanBlog.vue
@@ -0,0 +1,84 @@
+<template>
+
+  <v-list
+    flat
+    subheader
+    three-line
+    class="my-50"
+  >
+    <v-card class="my-20" width="90%">
+      <v-subheader> Blogs </v-subheader>
+      <div v-for="blog in blogs" :key="blog.id"> 
+        <v-list-item  :class="{'grey lighten-4': blog.id % 2 && !blog.done}">
+            <v-list-item-action>
+            </v-list-item-action>
+
+            <v-list-item-content>
+                <nuxt-link
+                  style="text-decoration: none; color: inherit"
+                  :to="'/amanabiy/' + blog.id"
+                >
+                    <v-list-item-title>{{ blog.title }}</v-list-item-title>
+                    <v-list-item-subtitle> <span class="font-weight-bold"> By {{blog.author}}: </span> {{ blog.desc }}</v-list-item-subtitle>
+                </nuxt-link>
+            </v-list-item-content>
+
+            <v-list-item-action :key="blog.id">
+              <v-btn icon>
+                <v-icon color="green">mdi-pencil</v-icon>
+              </v-btn>
+            </v-list-item-action>
+
+            <v-list-item-action :key="blog.id">
+              <v-btn icon>
+                <v-icon color="red">mdi-delete</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          
+          </v-list-item>
+          <v-divider ></v-divider>
+      </div>
+    </v-card>
+  </v-list>
+</template>
+
+<script>
+  export default {
+    name: 'BlogsList',
+
+    data: () => {
+      return {
+    
+        blogs: [
+          {
+            id: 1,
+            title: "Why you should Wake up",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Amanuel Sisay",
+          },
+          {
+            id: 2,
+            title: "Why you should Gym",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+
+            author: "Abel",
+          },
+          {
+            id: 3,
+            title: "The benifit of Working hard",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Abebe",
+
+          },
+          {
+            id: 4,
+            title: "Interviews Trick",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Kebede",
+
+          },
+        ]
+      }
+    },
+  }
+</script>
diff --git a/starter-project-web-vue2/pages/amanabiy/_id.vue b/starter-project-web-vue2/pages/amanabiy/_id.vue
new file mode 100644
index 00000000..ad6f2084
--- /dev/null
+++ b/starter-project-web-vue2/pages/amanabiy/_id.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-app>
+    <nuxt-link style="text-decoration: none; color: inherit"  :to="'/amanabiy/'">
+      <v-btn fab outlined x-small color="green" class="pa-2 mb-2 mx-7 mt-3"
+        ><v-icon> mdi-chevron-left </v-icon></v-btn
+      ></nuxt-link
+    >
+
+    <v-card class="mx-6 my-6">
+      <v-card-title>
+        <span class="text-h6 font-weight-bold"
+          >{{ curr_blog.title }} <small>{{ curr_blog.id }}</small></span
+        >
+      </v-card-title>
+
+      <v-card-text class="subtitle-2">
+        {{ curr_blog.desc }}
+      </v-card-text>
+
+      <v-list-item class="font-weight-light">
+          <v-list-item-title class="-2 font-weight-light">By {{ curr_blog.author }}</v-list-item-title>
+      </v-list-item>
+    </v-card>
+  </v-app>
+</template>
+
+
+<script>
+  export default {
+    name: 'BlogCurr',
+
+    data: () => {
+      return {
+        curr_blog: {
+            id: "1",
+            title: "Why you should Wake up",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Amanuel Sisay",
+        },
+        blogs: [
+          {
+            id: "1",
+            title: "Why you should Wake up",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Amanuel Sisay",
+          },
+          {
+            id: "2",
+            title: "Why you should Gym",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+
+            author: "Abel",
+          },
+          {
+            id: "3",
+            title: "The benifit of Working hard",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Abebe",
+
+          },
+          {
+            id: "4",
+            title: "Interviews Trick",
+            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
+            author: "Kebede",
+
+          },
+        ]
+      }
+    },
+    created () {
+        this.curr_blog = this.blogs.filter((blog) => blog.id === this.$route.params.id)[0]
+    },
+  }
+</script>
+
diff --git a/starter-project-web-vue2/pages/amanabiy/index.vue b/starter-project-web-vue2/pages/amanabiy/index.vue
new file mode 100644
index 00000000..c0b84825
--- /dev/null
+++ b/starter-project-web-vue2/pages/amanabiy/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-row class="my-12">
+        <AddBlog />
+      </v-row>
+      <v-row class="my-12">
+        <BlogPost />
+      </v-row>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+import BlogPost from '../../components/amanabiy/AmanBlog.vue'
+import AddBlog from '../../components/amanabiy/AmanAddBlog.vue'
+
+export default {
+  name: 'BlogPosts',
+  components: {
+    BlogPost,
+    AddBlog,
+  },
+}
+</script>
diff --git a/starter-project-web-vue2/pages/index.vue b/starter-project-web-vue2/pages/index.vue
index f4de04f5..7abfe742 100644
--- a/starter-project-web-vue2/pages/index.vue
+++ b/starter-project-web-vue2/pages/index.vue
@@ -67,6 +67,11 @@ export default {
           description: 'Web Team Member',
           link: '/liben/articles',
         },
+        {
+          name: "Amanuel Sisay",
+          description: "Web Team Member",
+          link: '/amanabiy',
+        },
       ],
     }
   },