CSS & Layout Updates:

- New fields added in education and experience sections.
- Now a section can be separated into multiple pages.
  - You can define page number for each item, see experience.yaml
- Header:
   - if no avatar is displayed, then contact links will be on the right.
   - header will repeat for each page.
- CSS class names are mostly kept unchanged.

11 files changed, 173 insertions, 98 deletions

diff --git a/assets/css/_layout.scss b/assets/css/_layout.scss
index b9b3388..ee219a9 100644
--- a/assets/css/_layout.scss
+++ b/assets/css/_layout.scss
@@ -18,12 +18,12 @@
 
   h1 {
     margin-bottom: 0.8rem;
-    font-size: 1.5rem;
+    font-size: 1.35rem;
   }
 
   h2 {
     margin-bottom: 0.4rem;
-    font-size: 1.1rem;
+    font-size: 1.20rem;
   }
 
   h3 {
@@ -66,7 +66,6 @@ main.paper {
   header {
     grid-area: 1 / 1 / 2 / 8;
     border-bottom: $border-color 0.05rem solid;
-    height: 12.75rem;
 
     .title {
       display: flex;
@@ -106,7 +105,10 @@ main.paper {
     }
   }
 
-  .left-column, .right-column {
+  .left-column, .right-column, .single-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     margin-top: 0.75rem;
 
     > *:first-child,
@@ -115,20 +117,18 @@ main.paper {
     }
   }
 
+  .single-column {
+    grid-area: 2 / 1 / 6 / 8;
+  }
+
   .left-column {
     grid-area: 2 / 1 / 7 / 6;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
     border-right: $border-color 0.05rem solid;
     padding-right: 1rem;
   }
 
   .right-column {
     grid-area: 2 / 6 / 7 / 8;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
     margin-left: 0.5rem;
 
     li {
@@ -136,11 +136,6 @@ main.paper {
       padding: 0;
     }
 
-    h1 {
-      margin-bottom: 0.5rem;
-      font-size: 1.2rem;
-    }
-
     h2 {
       margin-bottom: 0.2rem;
       font-size: 1rem;
diff --git a/assets/css/_section.scss b/assets/css/_section.scss
index 7eba95d..737d995 100644
--- a/assets/css/_section.scss
+++ b/assets/css/_section.scss
@@ -11,8 +11,6 @@
 }
 
 .section-title {
-  border-left: solid 0.35rem $text-color;
-  padding-left: 0.4rem;
   font-family: $font-1;
 }
 
@@ -47,10 +45,14 @@
   }
 
   &.group {
+    margin-bottom: 1rem;
     .item {
       margin-top: 0;
     }
   }
+  &.group:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .item-title {
@@ -65,22 +67,17 @@
 
 .job-title {
   font-size: 14px;
+  font-weight: 600;
 }
 
-.date {
+.soft-color {
  color: scale-color($text-color, $lightness: 30%);
 }
 
+main.paper .single-column,
 main.paper .right-column,
 main.paper .left-column,
 .paper {
-  .section-education {
-    h2 {
-      margin-bottom: 0;
-      font-size: 1rem;
-    }
-  }
-
   .section-languages {
     .item {
       margin-bottom: 0.4rem;
diff --git a/config.yaml b/config.yaml
index 77758c2..94d8749 100644
--- a/config.yaml
+++ b/config.yaml
@@ -51,7 +51,7 @@ params:
     - custom.scss
 #   - print_urls.scss
   header:
-    avatar: avatar.jpg
+    avatar: false # avatar.jpg
     contact: true
     tagline: true
     links: false
@@ -70,6 +70,8 @@ params:
           title: About Me
         - feature: experience
     - features:
+        - feature: experience
+          title: Experience (Cont.)
         - feature: projects
           collection: projects
         - feature: publications
@@ -80,6 +82,13 @@ params:
         - feature: interests
           widget: word-list
           style: list
+  experience:
+    tools: 
+      show: false
+      title: Technologies
+  education:
+    location:
+      show: true
         
   footer:
     show: true
diff --git a/exampleSite/data/education.yaml b/exampleSite/data/education.yaml
index 10f96e3..f062948 100644
--- a/exampleSite/data/education.yaml
+++ b/exampleSite/data/education.yaml
@@ -1,10 +1,15 @@
-- name: "Msc. Industrial Engineering"
-  university: "Yildiz Technical University"
-  more: "English - with Thesis" # Optional field, if you want to add a non-standard line.
-  date: "2019- 2021"
-  gpa: "3.71 / 4.00"
+- name: Msc. Industrial Engineering
+  university: Yildiz Technical University
+  location: Istanbul, TR
+  more: with Thesis # Optional field, if you want to add a non-standard line.
+  link: https://... # Optional field, include a link to your project.
+  date: 2019- 2021
+  gpa: 3.71 / 4.00
+  details: >
+    Include details if you like to... 
 
-- name: "Bsc. Industrial Engineering"
-  university: "Gazi University"
-  date: "2013 - 2017"
-  gpa : "3.35 / 4.00"
\ No newline at end of file
+- name: Bsc. Industrial Engineering
+  university: Gazi University
+  location: Ankara, TR
+  date: 2013 - 2017
+  gpa : 3.35 / 4.00
\ No newline at end of file
diff --git a/exampleSite/data/experience.yaml b/exampleSite/data/experience.yaml
index add91f3..69eae1d 100644
--- a/exampleSite/data/experience.yaml
+++ b/exampleSite/data/experience.yaml
@@ -1,27 +1,36 @@
-- company: Uber
+- company: Company 1
   roles:
     - role: Data Scientist
-      details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sollicitudin fringilla.
-              Aenean nec volutpat arcu. Maecenas quis tempus risus. Curabitur condimentum ligula in erat pharetra porta. 
-              Nam suscipit nisi a bibendum lacinia. Donec aliquet, nibh dignissim placerat efficit"
-      date: "10.2020 -  Present"
+      details: |
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sollicitudin fringilla.
+        Aenean nec volutpat arcu. Maecenas quis tempus risus. Curabitur condimentum ligula in erat pharetra porta. 
+        Nam suscipit nisi a bibendum lacinia. Donec aliquet, nibh dignissim placerat efficit
+      date: 10.2020 -  Present
 
-- company: Google
+- company: Company 2
+  page: 1
   roles: 
     - role: Senior Software Developer
-      details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sollicitudin fringilla.
-              Aenean nec volutpat arcu. Maecenas quis tempus risus. "
-      date: "06.2019 - 10.2020"
+      tools: SQL, Flink, Kafka
+      details: |
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sollicitudin fringilla.
+        Aenean nec volutpat arcu. Maecenas quis tempus risus.
+      date: 06.2019 - 10.2020
     
     - role: Junior Software Developer
-      date: "10.2018 - 06.2019"
-      details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sollicitudin fringilla.
-              Aenean nec volutpat arcu. Maecenas quis tempus risus. "
+      tools: HTML, PHP, CSS
+      date: 10.2018 - 06.2019
+      details: |
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sollicitudin fringilla.
+        Aenean nec volutpat arcu. Maecenas quis tempus risus.
 
-- company: Uber
+- company: Company 1
+  page: 2
   roles:
-    - role: Driver
-      details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sollicitudin fringilla.
-              Aenean nec volutpat arcu. Maecenas quis tempus risus. Curabitur condimentum ligula in erat pharetra porta. 
-              Nam suscipit nisi a bibendum lacinia. Donec aliquet, nibh dignissim placerat efficit"
-      date: "2017 - 2018"
\ No newline at end of file
+    - role: Junior Software Developer
+      tools: C#, Python, Postgresql
+      details: |
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare sollicitudin fringilla.
+        Aenean nec volutpat arcu. Maecenas quis tempus risus. Curabitur condimentum ligula in erat pharetra porta. 
+        Nam suscipit nisi a bibendum lacinia. Donec aliquet, nibh dignissim placerat efficit
+      date: 2017 - 2018
\ No newline at end of file
diff --git a/layouts/home.html b/layouts/home.html
index 1236513..b9b32bc 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -20,34 +20,36 @@
 </head>
 
 <body>
+	{{ $.Scratch.Set "index" 0 }}
+	{{ range .Site.Params.pages }}
+	{{ $.Scratch.Set "index" (add ($.Scratch.Get "index") 1) }}
 	<main class="paper">
 		<div class="grid">
 			<header class="flex-row">
-				{{ partial "header" (dict "Header" .Site.Params.header "Data" .Site.Data "useFontAwesome" .Site.Params.useFontAwesome) }}
+				{{ partial "header" (dict "Header" $.Site.Params.header "Data" $.Site.Data "useFontAwesome" $.Site.Params.useFontAwesome) }}
 			</header>
 
-			{{ range first 1 .Site.Params.pages }}
+			{{- if eq ($.Scratch.Get "index") 1 -}}
 			<div class="left-column">
 				{{ range .features }}
-					{{ partial "section" (dict "Feature" . "Data" $.Site.Data "useFontAwesome" $.Site.Params.useFontAwesome) }}
+					{{ partial "section" (dict "Feature" . "Data" $.Site.Data "Params" $.Site.Params "Page" ($.Scratch.Get "index")) }}
 				{{ end }}
 			</div>
-			{{ end }}
 
 			<div class="right-column">
-				{{ range .Site.Params.side }}
-					{{ partial "section" (dict "Feature" . "Data" $.Site.Data "useFontAwesome" $.Site.Params.useFontAwesome) }}
+				{{ range $.Site.Params.side }}
+					{{ partial "section" (dict "Feature" . "Data" $.Site.Data "Params" $.Site.Params "Page" ($.Scratch.Get "index")) }}
 				{{ end }}
 			</div>
+			{{- else -}}
+			<div class="single-column">
+				{{- range .features -}}
+					{{ partial "section" (dict "Feature" . "Data" $.Site.Data "Params" $.Site.Params "Page" ($.Scratch.Get "index")) }}
+				{{- end -}}
+			</div>
+			{{- end -}}
 		</div>
 	</main>
-
-	{{ range after 1 .Site.Params.pages }}
-	<article class="paper">
-		{{ range .features }}
-			{{ partial "section" (dict "Feature" . "Data" $.Site.Data "useFontAwesome" $.Site.Params.useFontAwesome) }}
-		{{ end }}
-	</article>
 	{{ end }}
 
 	{{ if .Site.Params.footer.show }}
diff --git a/layouts/partials/_header_links.html b/layouts/partials/_header_links.html
new file mode 100644
index 0000000..572bb6c
--- /dev/null
+++ b/layouts/partials/_header_links.html
@@ -0,0 +1,33 @@
+{{ with .Data.features.about }}
+    {{ $sep := $.Separator | default "<br>" }}
+    {{- if $.Header.contact -}}
+        <span class="contact">
+            {{- with .phone -}}
+                {{- if $.useFontAwesome }}<i class="fas fa-tty"></i> {{ end -}}
+                <!-- fas fa-phone-alt -->
+                {{- . -}}
+            {{- end -}}
+            {{- if and .phone .email }} {{- $sep | safeHTML -}} {{ end -}}
+            {{- with .email -}}
+                <a href="mailto:{{- . -}}" class="no-external-icon">
+                    {{- if $.useFontAwesome }}<i class="fas fa-envelope"></i> {{ end -}}
+                    {{- . -}}
+                </a>
+            {{- end -}}
+        </span>
+    {{- end -}}
+
+    {{- if $.Header.links -}}
+        <span class="contact-links">
+            {{- $last := sub (len .links) 1 -}}
+            {{- range $i, $e := .links -}}
+            <a href="{{ $e.url }}" class="no-external-icon">
+                {{- if and $e.icon $.useFontAwesome }}<i class="{{ $e.icon }}"></i> {{ end -}}
+                {{- $e.title -}}
+            </a>
+            {{- if ne $i $last }}  {{- $sep | safeHTML -}} {{ end -}}
+            {{- end -}}
+        </span>
+    {{- end -}}
+
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index b2ddd55..b4e0111 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -2,35 +2,16 @@
 	{{ with .Data.features.about }}
 		<h1 class="name">{{ .name }}</h1>
 		{{ if $.Header.tagline }}<h2 class="tagline">{{ .tagline }}</h2>{{end}}
-		{{ if $.Header.contact -}}
-			<span class="contact">
-				{{- with .phone -}}
-					{{- if $.useFontAwesome }}<i class="fas fa-phone-square-alt"></i> {{ end -}}
-					{{- . -}}
-				{{- end -}}
-				{{- if and .phone .email }} | {{ end -}}
-				{{- with .email -}}
-					<a href="mailto:{{- . -}}" class="no-external-icon">
-						{{- if $.useFontAwesome }}<i class="fas fa-envelope"></i> {{ end -}}
-						{{- . -}}
-					</a>
-				{{- end -}}
-			</span>
-		{{- end }}
-		{{ if $.Header.links -}}
-			<span class="contact-links">
-				{{- $last := sub (len .links) 1 -}}
-				{{- range $i, $e := .links -}}
-				<a href="{{ $e.url }}" class="no-external-icon">
-					{{- if and $e.icon $.useFontAwesome }}<i class="{{ $e.icon }}"></i> {{ end -}}
-					{{- $e.title -}}
-				</a>
-				{{- if ne $i $last }} | {{ end -}}
-				{{- end -}}
-			</span>
+		{{ if $.Header.avatar }}
+			{{ partial "_header_links" (dict "Header" $.Header "Data" $.Data "useFontAwesome" $.useFontAwesome "Separator" " | ") }}
 		{{ end }}
 	{{ end }}
 </div>
+	
 {{ if .Header.avatar }}
 <div><img class="avatar right" src="{{ .Header.avatar }}"></div>
-{{ end }}
+{{ else }}
+	<div class="title">
+	{{ partial "_header_links" (dict "Header" .Header "Data" .Data "useFontAwesome" .useFontAwesome "Separator" "<br>") }}
+	</div>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/section-details-list.html b/layouts/partials/section-details-list.html
index c36e5ca..8d529f2 100644
--- a/layouts/partials/section-details-list.html
+++ b/layouts/partials/section-details-list.html
@@ -23,7 +23,7 @@
 		{{- range .links }}
 		<li>
 			{{- .prefix -}}
-			<a href="{{ .url }}" class="{{ if and $.useFontAwesome .icon }}no-external-icon{{ end }}">{{ .title }}{{ if and $.useFontAwesome .icon }}<i class="{{ .icon }}"></i>{{ end }}</a>
+			<a href="{{ .url }}" class="{{ if and $.Params.useFontAwesome .icon }}no-external-icon{{ end }}">{{ .title }}{{ if and $.Params.useFontAwesome .icon }}<i class="{{ .icon }}"></i>{{ end }}</a>
 			{{- end -}}
 		</li>
 	</ul>
diff --git a/layouts/partials/section-education.html b/layouts/partials/section-education.html
index e6c6888..12b1440 100644
--- a/layouts/partials/section-education.html
+++ b/layouts/partials/section-education.html
@@ -1,8 +1,41 @@
+{{ $isOnSide := false }}
+{{ range .Params.side }}
+{{ if eq .feature "education" }}
+	{{ $isOnSide = true }}
+{{ end }}
+{{ end }}
+
 {{ range .Data.education }}
 <div class="item">
-	<h2 class="item-title">{{ .name }}</h2>
-	<span>{{ .university }}</span><br>
-	{{ if .more }}<span>{{ .more }}</span><br>{{ end }}
+
+	{{- if and $.Params.education.location.show .location -}}
+	{{ if $isOnSide }}
+	<h2 class="item-title">{{ .university }}</h2>
+	<span>{{ .location }}</span><br>
+	{{- else -}}
+	<div class="flex-row">
+		<h2 class="item-title">{{ .university }}</h2>
+		<span class="soft-color">{{ .location }}</span>
+	</div>	
+	{{- end -}}
+	{{- else -}}
+	<h2 class="item-title">{{ .university }}</h2>
+
+	{{- end -}}
+	
+	<span>{{ .name }}</span><br>
+	
+	{{- if .more -}}
+		{{- if .link -}}
+		<span><a href="{{ .link }}">{{ .more }}</a></span><br>
+		{{- else -}}
+		<span>{{ .more }}</span><br>
+		{{- end -}}
+	{{- end -}}
 	<span>{{ .date }}{{ if .gpa }} | GPA: {{ .gpa }}{{ end }}</span>
+
+	{{ if .details }}
+		{{- partial "markdown" .details }}
+	{{ end }}
 </div>
 {{ end }}
diff --git a/layouts/partials/section-experience.html b/layouts/partials/section-experience.html
index 2fa580a..dc94e9b 100644
--- a/layouts/partials/section-experience.html
+++ b/layouts/partials/section-experience.html
@@ -1,16 +1,27 @@
+
 {{ range .Data.experience }}
+{{ $page := .page | default 1 }}
+{{- if eq $.Page $page -}}
 <div class="item group">
 	<h2 class="item-title">{{ .company }}</h2>
 	{{ range .roles }}
 	<div class="item">
 		<div class="flex-row">
 			<span class="job-title">{{ .role }}</span>
-			<span class="date">{{ .date }}</span>
+			<span class="soft-color">{{ .date }}</span>
 		</div>
+		
+		{{- if and $.Params.experience.tools.show .tools -}}
+		<div class="flex-row">
+		<span></span>
+		<span class="soft-color"><i>{{ $.Params.experience.tools.title }}: {{ .tools }}</i></span></div>
+		{{- end -}}
+
 		{{ if .details }}
 		{{- partial "markdown" .details }}
 		{{ end }}
 	</div>
 	{{ end }}
 </div>
+{{- end -}}
 {{ end }}