adding summary section

nasserahmed009 · May 12, 2020 · d71d0b8 · d71d0b8
1 parent b2bdcbd
commit d71d0b8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 19 deletions.
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -8,39 +8,47 @@
 }
 
 .darkTheme {
-  --bg: #292929;
+  --bg1: #757575;
+  --bg2: #616161;
+  --bg4: #424242;
+  /* --bg3: #212121; */
+  --bg3: #161616;
+
   --shadowColor: rgba(255, 255, 255, 0.15);
   --deafult: #000;
-  --grey4: #f5f5f5;
-  --grey3: #eeeeee;
-  --grey2: #e0e0e0;
-  --grey1: #bdbdbd;
+  --text4: #f5f5f5;
+  --text3: #eeeeee;
+  --text2: #e0e0e0;
+  --text1: #bdbdbd;
 }
 
 .lightTheme {
-  --bg: #eaeaea;
+  --bg4: #f5f5f5;
+  --bg3: #eeeeee;
+  --bg2: #e0e0e0;
+  --bg1: #bdbdbd;
   --shadowColor: rgba(0, 0, 0, 0.15);
   --default: #fff;
-  --grey1: #757575;
-  --grey2: #616161;
-  --grey3: #424242;
-  --grey4: #212121;
+  --text1: #757575;
+  --text2: #616161;
+  --text3: #424242;
+  --text4: #212121;
 }
 
-.grey1Text {
-  color: var(--grey1);
+.textColor1 {
+  color: var(--text1);
 }
 
-.grey2Text {
-  color: var(--grey2);
+.textColor2 {
+  color: var(--text2);
 }
 
-.grey3Text {
-  color: var(--grey3);
+.textColor3 {
+  color: var(--text3);
 }
 
-.grey4Text {
-  color: var(--grey4);
+.textColor4 {
+  color: var(--text4);
 }
 
 .buttonMain {

diff --git a/components/Summary.vue b/components/Summary.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="summary">
+    <div class="container">
+      <h1 class="textColor3 text-center bold">Summary</h1>
+
+      <p class="textColor1 text-center">
+        Computer engineering student with a head full of dreams who is
+        passionate about building digital products or tools, eager to learn more
+        and enthusiastic about expanding his knowledge. I have a decent
+        experience working on software-centric projects as well I enjoy crafting
+        user interfaces with the help a good background of UX.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.summary {
+  padding: 40px 25px;
+  background: var(--bg4);
+}
+p {
+  font-size: 20px;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -2,14 +2,16 @@
   <div>
     <Navbar />
     <AppHeader />
+    <Summary />
   </div>
 </template>
 
 <script>
 export default {
   components: {
     Navbar: () => import("@/components/Navbar.vue"),
-    AppHeader: () => import("@/components/AppHeader.vue")
+    AppHeader: () => import("@/components/AppHeader.vue"),
+    Summary: () => import("@/components/Summary.vue")
   }
 };
 </script>