Improve About Section

* Move Skills and Timeline to includes. * Change extension to markdown file.
marcinperkow · Feb 10, 2019 · 62e1850 · 62e1850
1 parent 96594c0
commit 62e1850
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 50 deletions.
diff --git a/_config.yml b/_config.yml
@@ -12,6 +12,7 @@ permalink: articles/:title
 # Author Info
 author:
   img: https://ssl.gstatic.com/images/branding/product/1x/avatar_square_blue_512dp.png
+  name: John Doe
   email: [email protected]
   github: portfolYOU
   twitter: portfolYOU

diff --git a/_includes/skills.html b/_includes/skills.html
@@ -0,0 +1,28 @@
+<!-- Programming Skills -->
+<div class="row">
+<div class="col-lg-6">
+    <h2 class="mb-3">Programming Skills</h2>
+    {% for skill in page.programming-skills %}
+    <div class="skill">
+        <p>{{ skill.name }}</p>
+        <div class="skill-bar skill-bar-{{ skill.color }} skill-{{ skill.percentage }} wow animated slideInLeft"
+             data-wow-delay="{{ forloop.index | divided_by: 20.0 }}">
+            <span>{{ skill.percentage }}%</span>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+<!-- Other Skills -->
+<div class="col-lg-6">
+    <h2 class="mb-3">Other Skills</h2>
+    {% for skill in page.other-skills %}
+    <div class="skill">
+        <p>{{ skill.name }}</p>
+        <div class="skill-bar skill-bar-{{ skill.color }} skill-{{ skill.percentage }} wow animated slideInLeft"
+             data-wow-delay="{{ forloop.index | divided_by: 20.0 }}">
+            <span>{{ skill.percentage }}%</span>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+</div>
diff --git a/_includes/timeline.html b/_includes/timeline.html
@@ -0,0 +1,15 @@
+<div class="row">
+    <div class="col mt-3">
+        <div class="timeline-body">
+        {% for item in page.timeline %}
+            <div class="timeline-item">
+                <div class="content">
+                    <h2>{{ item.title }}</h2>
+                    <h6 class="date">{{ item.from }} — {{ item.to }}</h6>
+                    <p>{{ item.description }}</p>
+                </div>
+            </div>
+        {% endfor %}
+        </div>
+    </div>
+</div>
diff --git a/_layouts/about.html b/_layouts/about.html
@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<div class="col-lg-10 mx-auto mt-5 article">
+
+    <h1><b>{{ page.title }}</b></h1>
+
+    {{ content }}
+
+</div>
diff --git a/pages/about.html → pages/about.md b/pages/about.html → pages/about.md
@@ -1,5 +1,6 @@
 ---
-layout: default
+layout: about
+title: "About Me"
 permalink: /about/
 
 # visit https://getbootstrap.com/docs/4.1/utilities/colors/#background-color
@@ -50,55 +51,10 @@
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
 ---
 
-<div class="row justify-content-center m-3 mt-5">
-
-	<!-- Programming Skills -->
-    <div class="col-lg-5 m-2">
-        <h2 class="mb-3">Programming Skills</h2>
-        {% for skill in page.programming-skills %}
-        <div class="skill">
-            <p>{{ skill.name }}</p>
-            <div class="skill-bar skill-bar-{{ skill.color }} skill-{{ skill.percentage }} wow animated slideInLeft"
-                 data-wow-delay="{{ forloop.index | divided_by: 20.0 }}">
-                <span>{{ skill.percentage }}%</span>
-            </div>
-        </div>
-        {% endfor %}
-    </div>
-
-	<!-- Other Skills -->
-    <div class="col-lg-5 m-2">
-        <h2 class="mb-3">Other Skills</h2>
-        {% for skill in page.other-skills %}
-        <div class="skill">
-            <p>{{ skill.name }}</p>
-            <div class="skill-bar skill-bar-{{ skill.color }} skill-{{ skill.percentage }} wow animated slideInLeft"
-                 data-wow-delay="{{ forloop.index | divided_by: 20.0 }}">
-                <span>{{ skill.percentage }}%</span>
-            </div>
-        </div>
-        {% endfor %}
-    </div>
-
-
-	<!-- TimeLine -->
-    <div class="col-lg-10 m-2">
-		<div class="timeline-body">
-
-        {% for item in page.timeline %}
-			<div class="timeline-item">
-				<div class="content">
-					<h2>{{ item.title }}</h2>
-					<h6 class="date">{{ item.from }} — {{ item.to }}</h6>
-					<p>{{ item.description }}</p>
-				</div>
-            </div>
-        {% endfor %}
-
-		</div>
-    </div>
+Hi I am **{{ site.author.name }}**,<br>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
-</div>
+{% include skills.html %}
+{% include timeline.html %}