Rewrite all layouts, data and configuration structures

* Add support for multiple pages * Add support to reorder and move features to columns and pages * Add support for new sections with generic widgets
2021-03-03 17:29:15 +02:00 · 2021-03-03 17:29:15 +02:00 · 3e13c5ea2d
commit 3e13c5ea2d
parent 23cd8528c5
41 changed files with 900 additions and 630 deletions
--- a/README.md
+++ b/README.md
@ -1,11 +1,10 @@
 # Features

-* Simple, easy to use, single page, A4-sized Resume generator.
+* Simple, easy to use, single or multi page, A4-sized Resume generator.
 * Print friendly, just use your browser or save as PDF.
 * Write your resume in yaml. All content stored in data files.
-* Enable/Disable sections from ```config.toml```.
-* Section names are configurable in ```config.toml```. So, you can write in any language you want.
-* Change ```bib_style``` (APA, IEEE, else) for ```publications.yaml```.
+* Remove/Add sections from `config.toml`.
+* Section names are configurable in `config.toml`. So, you can write in any language you want.

 # How To Use

@ -17,21 +16,29 @@

 ```
 cd themes
-$ git clone https://gitlab.com/mertbakir/resume-a4.git
+git clone https://gitlab.com/mertbakir/resume-a4.git
+```
+
+or add ass a submodule
+
+```
+git submodule add https://gitlab.com/mertbakir/resume-a4.git themes/resume-a4
 ```

 ## Start

-1. Go to ```exampleSite``` and copy ```config.toml``` to the root directory of your hugo project. 
-2. Open ```config.toml``` and add your relevant information.
-3. Copy ```data``` folder from ```exampleSite``` to root directory. All you need is that folder.
+1. Copy `config.toml` from `exampleSite` to the root directory of your hugo project.
+2. Open `config.toml` and add your relevant information.
+3. Copy `data` folder from `exampleSite` to the root directory of your hugo project. All you need is that folder.
 4. Create your resume in yaml files.

 ## Notes

-* Enable/Disable Sections in ```config.toml```
-* Set avatar link in ```config.toml```, keep your image under ```static``` folder if you want.
-* You can change bib_style in the config file. I've created options for APA and IEEE standards. You can configure ```publications.html``` file in the ```layouts\partials``` folder if you are looking for something else.
+* Add/Remove sections in `config.toml`
+* Set avatar link in `config.toml`, keep your image under `static` folder if you want.
+* You can change `style` of the `publications` feature in the config file.
+  I've created options for APA and IEEE standards.
+  You can add more standards to `section-publications.html` file in the `layouts\partials` folder if you are looking for something else.
 * [Here is the blog post](https://mertbakir.gitlab.io/projects/resume-a4/) about this project.

 # License
@ -43,7 +50,7 @@ This project is open-sourced and licensed under the terms of the MIT license. I
 # My Work Flow

 1. Make changes.
-2. Delete resources folder in main project.
-2. Build your hugo site using the theme. ```hugo server```
-3. Copy "resources" folder from main project to theme folder ```themes\resume-A4\resources```
-4. git commit & push.
+2. Delete `resources` folder in main project.
+2. Build your hugo site using the theme. `hugo server`
+3. Copy `resources` folder from main project to theme folder `themes\resume-A4\resources`
+4. `git commit` and `git push`.
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@ -0,0 +1,37 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #fff;
+  color: $text-color;
+  font-family: $font-1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  text-decoration: none;
+  color: $text-color;
+
+  i {
+    padding: 0 0.2rem 0 0.25rem;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:not(.no-external-icon)::after {
+    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
+    margin: 0 0.2rem 0 0.25rem;
+  }
+}
+
+li {
+  list-style-type: square;
+  padding-left: 0px;
+  list-style-position: inside;
+  margin: 0.5rem 0;
+}
--- a/assets/css/_footer.scss
+++ b/assets/css/_footer.scss
@ -0,0 +1,35 @@
+footer {
+  width: 8.25in;
+  margin: 36px auto;
+  text-align: center;
+  display: flex;
+  flex-flow: column;
+
+  .footer-item {
+    margin-bottom: 0.5rem;
+
+    a {
+      span {
+        font-weight: 700;
+      }
+
+      color: $turk;
+      padding: 0 4px;
+
+      &:hover {
+        color: white;
+        background-color: $turk;
+        text-decoration: none;
+        transition: all 0.35s ease-out;
+        transition-property: all 0.35s ease-out;
+        -webkit-transition-property: all 0.35s ease-out;
+        -moz-transition-property: all 0.35s ease-out;
+        -o-transition-property: all 0.35s ease-out;
+      }
+    }
+
+    .footer-link:not(:last-child)::after {
+      content: "\00B7";
+    }
+  }
+}
--- a/assets/css/_layout.scss
+++ b/assets/css/_layout.scss
@ -0,0 +1,154 @@
+.paper {
+  position: relative;
+  margin: 0.5rem auto;
+  padding: 0.45in 0.5in;
+  width: 210mm;
+  height: 297mm;
+  background-color: #fff;
+  -webkit-box-shadow: 0.2rem 0.2rem 0.6rem #aaa;
+  -moz-box-shadow: 0.2rem 0.2rem 0.6rem #aaa;
+  box-shadow: 0.2rem 0.2rem 0.6rem #aaa;
+  box-sizing: border-box;
+
+  font-size: 0.88rem;
+
+  h1, h2, h3 {
+    line-height: 1.2;
+  }
+
+  h1 {
+    margin-bottom: 0.8rem;
+    font-size: 1.5rem;
+  }
+
+  h2 {
+    margin-bottom: 0.4rem;
+    font-size: 1.1rem;
+  }
+
+  h3 {
+    margin-bottom: 0.2rem;
+    font-size: 1rem;
+  }
+
+  p {
+    margin: 0.5rem 0;
+    font-size: 0.88rem;
+    line-height: 1.5;
+    text-align: justify;
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+}
+
+main.paper {
+  margin-top: 2.5rem;
+  padding-top: 0;
+
+  .grid {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: repeat(6, 1fr);
+    grid-column-gap: 0;
+    grid-row-gap: 0;
+
+    .flex-row {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  header {
+    grid-area: 1 / 1 / 2 / 8;
+    border-bottom: $border-color 0.05rem solid;
+
+    .title {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      font-family: $font-1;
+
+      h1 {
+        margin-bottom: 0.4rem;
+        font-size: 4rem;
+        color: $text-color;
+        letter-spacing: 0.15rem;
+        text-transform: uppercase;
+      }
+
+      h2 {
+        margin-bottom: 0.3rem;
+        font-size: 1rem;
+      }
+    }
+
+    .avatar {
+      display: block;
+      margin: 1rem auto;
+      padding: 1rem;
+      object-fit: cover;
+      height: 8.75rem;
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      -ms-border-radius: 50%;
+      -o-border-radius: 50%;
+      border-radius: 50%;
+    }
+  }
+
+  .left-column, .right-column {
+    margin-top: 0.75rem;
+
+    > *:first-child,
+    > *:first-child > *:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .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 {
+      list-style-type: none;
+      padding: 0;
+    }
+
+    h1 {
+      margin-bottom: 0.5rem;
+      font-size: 1.2rem;
+    }
+
+    h2 {
+      margin-bottom: 0.2rem;
+      font-size: 1rem;
+    }
+
+    h3 {
+      margin-bottom: 0.1rem;
+      font-size: 0.8rem;
+    }
+
+    p {
+      font-size: 0.8rem;
+      line-height: 1.3;
+    }
+  }
+}
--- a/assets/css/_print.scss
+++ b/assets/css/_print.scss
@ -0,0 +1,59 @@
+/* Print */
+
+@media print {
+    @page {
+      size: A4;
+      margin: 0;
+    }
+
+    html, body {
+        background: #fff;
+        margin: 0;
+        padding: 0;
+    }
+
+    .paper, main.paper {
+      margin: 0;
+      width: 210mm;
+      height: 297mm;
+      overflow: hidden;
+      -moz-box-shadow: none;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      page-break-after: always;
+    }
+
+    a {
+      text-decoration: none;
+
+      &:not(.non-existing)::after {
+        content: " (" attr(href) ")";
+        margin: 0;
+        font-weight: 400;
+        font-size: 0.75rem;
+        color: scale-color($text-color, $lightness: 30%);
+      }
+
+      .item-title & {
+        &::after {
+          content: attr(href);
+          display: block;
+          margin: 0;
+        }
+      }
+
+      .section-publications & {
+        &::after {
+          content: attr(href);
+          display: block;
+          margin: 0 0.75rem;
+        }
+      }
+    }
+
+    .item-title {}
+
+    footer {
+      display: none;
+    }
+}
--- a/assets/css/_redundant.scss
+++ b/assets/css/_redundant.scss
@ -0,0 +1,23 @@
+*::-webkit-scrollbar {
+  width: 12px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: $toprak;
+  outline: 1px solid $toprak;
+}
+
+*::-webkit-scrollbar-track {
+  background-color: lighten($toprak, 50%);
+}
+
+::selection {
+  background: $toprak;
+  color: white;
+}
+
+::-moz-selection {
+  background: $toprak;
+  color: white;
+}
--- a/assets/css/_section.scss
+++ b/assets/css/_section.scss
@ -0,0 +1,105 @@
+.section {
+  margin-bottom: 1.5rem;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  .right-column & {
+    margin-bottom: 1rem;
+  }
+}
+
+.section-title {
+  border-left: solid 0.4rem $text-color;
+  padding-left: 0.5rem;
+  font-family: $font-1;
+
+  .right-column & {
+    border-left: solid 0.3rem $text-color;
+  }
+}
+
+.item {
+  margin-bottom: 0.6rem;
+
+  dl {
+    dt {
+      display: inline;
+      font-weight: 600;
+
+      &::after {
+        content: ': '
+      }
+    }
+
+    dd {
+      display: inline;
+
+      &:not(:last-child)::after {
+        content: "";
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      *:not(:last-child)::after {
+        content: "; ";
+        margin-right: 0.25rem;
+      }
+
+    }
+  }
+
+  &.group {
+    .item {
+      margin-top: 0;
+    }
+  }
+}
+
+.item-title {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.item-info {
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.job-title {
+  font-size: 14px;
+  font-style: italic;
+}
+
+.date {
+ color: scale-color($text-color, $lightness: 30%);
+}
+
+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;
+    }
+
+    h2 {
+      margin-bottom: 0.1rem;
+      font-size: 0.9rem;
+      line-height: 1.1;
+
+      span {
+        font-weight: 400;
+        font-size: 0.8rem;
+      }
+    }
+  }
+}
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -6,6 +6,7 @@ $turk: #E30A17;

@import "base";
@import "redundant";
+@import "layout";
+@import "section";
@import "footer";
-@import "item_styling";
@import "print";
--- a/assets/sass/_base.scss
+++ b/assets/sass/_base.scss
@ -1,118 +0,0 @@
-
-* {
-    margin: 0;
-    padding: 0;
-  }
-  
-  
-  body {
-    background: #FFF;
-    color: $text-color;
-    font-family: $font-1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  a {
-    text-decoration: none;
-    color: $text-color;
-  }
-  
-  li {
-    list-style-type: square;
-    padding-left: 0px;
-    list-style-position: inside;
-    margin: 8px 0;
-  }
-  
-  .resumeCanvas {
-    margin: 2.5rem auto;
-    padding: 0 0.45in 0.5in 0.45in;
-    width: 8.25in;
-    height: 11.75in;
-    background-color: #FFF;
-    -moz-box-shadow: 2px 2px 10px #aaa;
-    -webkit-box-shadow: 2px 2px 10px #aaa;
-    box-shadow: 2px 2px 10px #aaa;
-    box-sizing: border-box;
-  }
-  
-  .gridParent {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    grid-template-rows: repeat(6, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
-  }
-  
-  .flex-row{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-  
-  .titleHeader {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    font-family: $font-1;
-    h1 {
-      font-size: 64px;
-      color: $text-color;
-      letter-spacing: 0.15rem;
-    }
-  }
-  
-  header {
-    grid-area: 1 / 1 / 2 / 8;
-    border-bottom: $border-color 1px solid;
-  }
-  
-  .leftSide {
-    grid-area: 2 / 1 / 7 / 6;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    border-right: $border-color 1px solid;
-    padding-right: 16px;
-  }
-  
-  .rightSide {
-    grid-area: 2 / 6 / 7 / 8;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    margin-left: 8px;
-    
-    li {
-      list-style-type: none;
-      padding: 0;
-    }
-  }
-  
-  .leftSide, .rightSide {
-    margin-top: 12px;
-    font-size: 14px;
-    h1, h2, h3 {
-      line-height: 1.2;
-    }
-    h1 {
-      margin-bottom: 16px;
-      font-size: 24px;
-    }
-    h2 {
-      font-size: 20px;
-      margin-bottom: 4px;
-    }
-    h3 {
-      font-size: 16px;
-    }
-    p {
-      font-size: 14px;
-      margin: 8px 0;
-      line-height: 1.5;
-      text-align: justify;
-    }
-  }
--- a/assets/sass/_footer.scss
+++ b/assets/sass/_footer.scss
@ -1,39 +0,0 @@
-footer {
-    width: 8.25in;
-    margin: 36px auto;
-    text-align: center;
-    display: flex;
-    flex-flow: column;
-}
-  
-.link-text {
-    font-weight: 700;
-}
-
-.footer-item {
-    //I'm doing nothing here.
-}
-
-#link::after {
-    content: "\00B7";
-}
-
-#link:last-child::after {
-    content: "";
-}
-  
-footer {
-    a {
-       color: $turk;
-       padding: 0 4px;
-       &:hover {
-         color: white;
-         background-color: $turk;
-        transition: all 0.35s ease-out;
-        transition-property: all 0.35s ease-out;
-        -webkit-transition-property: all 0.35s ease-out;
-        -moz-transition-property: all 0.35s ease-out;
-        -o-transition-property: all 0.35s ease-out;
-       }
-    }
-}
--- a/assets/sass/_item_styling.scss
+++ b/assets/sass/_item_styling.scss
@ -1,58 +0,0 @@
-.section {
-    margin-bottom: 20px;
-  }
-
-.item {
-  margin-bottom: 14px;
-}
-
-.section {
-  .item:last-child {
-    margin-bottom: 0px;
-  }
-}
-
-.group {
-  .item {
-    margin-top: 0;
-  }
-}
-
-.section-title {
-  border-left: solid 6px $text-color;
-  padding-left: 8px;
-  font-family: $font-1;
-}
-
-.job-title {
-  font-size: 14px;
-}
-
-.item-title {
-  margin-bottom: 2px;
-}
-
-.item-title-span {
-  font-weight: 400;
-  font-size: 14px;
-}
-  
-.item-info
-{
-  font-weight: 400;
-  font-size: 14px;
-}
-
-
-.avatar {
-  display: block;
-  margin: 1rem auto;
-  padding: 1rem;
-  object-fit: cover;
-  height: 140px;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
-  border-radius: 50%;
-}
--- a/assets/sass/_print.scss
+++ b/assets/sass/_print.scss
@ -1,23 +0,0 @@
-/* Print */
-
-@media print{
-    @page {
-      size: A4;
-      margin:0;
-    }
-    html, body {
-        width: 210mm;
-        height: 297mm;
-        background: #FFF;
-        overflow: hidden;
-        margin: 0; padding:0;
-    }
-  
-    .resumeCanvas { 
-      margin: 0;
-      width: 100%; height: 100%;
-      -moz-box-shadow: none;
-      -webkit-box-shadow: none;
-      box-shadow: none;
-    }
-}
--- a/assets/sass/_redundant.scss
+++ b/assets/sass/_redundant.scss
@ -1,22 +0,0 @@
-*::-webkit-scrollbar {
-    width: 12px;
-    height: 8px;
-  }
-  
-  *::-webkit-scrollbar-thumb {
-    background-color: $toprak;
-    outline: 1px solid $toprak;
-  }
-
-  *::-webkit-scrollbar-track {
-    background-color: lighten($toprak, 50%);
-  }
-  
-  ::selection {
-    background: $toprak;
-    color: white;
-  }
-  ::-moz-selection {
-    background: $toprak;
-    color: white;
-}
--- a/exampleSite/assets/css/custom.scss
+++ b/exampleSite/assets/css/custom.scss
@ -0,0 +1,15 @@
+main.paper {
+  header .title h1 {
+    // You might want to change the font size if you have a long or a short name
+    //font-size: 4rem;
+
+    // You may disable all capitals name with this.
+    //text-transform: none;
+  }
+
+  .section-experience p {
+    // If you have a lot of experiences, you can lower the line height
+    // to fit more text on a single page.
+    //line-height: 1.5;
+  }
+}
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@ -2,59 +2,126 @@ baseURL = "/"
 languageCode = "en-us"
 title = "Resume | MERT BAKIR"
 disableKinds = ["taxonomy", "term", "page", "section", "RSS", "sitemap", "robotsTXT", "404"]
-theme = "resume-A4"
+theme = "resume-a4"

 [params]
 useFontAwesome = true
+css = [ "custom.scss" ]
+
+[params.header]
 avatar = "avatar.jpg"
-bib_style = "IEEE" # IEEE, APA, else
-
-[params.display]
-experience = true
-education = true
-languages = true
-awards = true
-skills = true
-skills_grouped = false
-interests = true
-contact = false
-linkedin = false
+contact = true
 tagline = true
-aboutMe = false
-projects = false
-publications = false
-certificates = true
-avatar = true
-
-[params.title_as]
-experience = "Experience"
-education = "Education"
-languages = "Languages"
-awards = "Awards"
-skills = "Skills"
-certificates = "Certifications"
-interests = "Interests"
-about_me = "About Me"
-publications = "Publications"
-projects = "Projects"
-
-[params.display.footer]
-footer = true
 links = true
-credits = true
+
+# Construct main column, side column and additional page from features
+# Every column and page may include any features. Some features are
+# created using generic widgets and you can add easily new features,
+# as long as an existing widget can render it as you like.
+#
+# Common keys:
+#   feature: name of the feature. For generic features, this is also the root key in the yaml file.
+#   title: string rendered as the header of the element. Can be disabled with an empty string.
+#   collection: the base name of the yaml file containing the data. Defaults to "features".
+#   widget: `layout/partials/section-<widget>.html` used to render this element.
+#
+# Common widgets:
+#
+#   details-list:
+#     Used by default, if section-<feature>.html doesn't exists.
+#
+#     Expects data in format (in yaml file):
+#       title: the title string
+#       subtitle: string rendered under title. E.g., company for projects, certificate authority etc.
+#       date: date string, e.g., when a certificate was given
+#       details: a text in markdown.
+#       link: url where the title will link to
+#       links: list of links rendered as a bullet list below details
+#         prefix: a string before the link
+#         title: a string inside the link
+#         url: the destination of the link
+#         icon: the icon string, e.g., "fas fa-cloud". rendered inside link and after title.
+#
+#   word-list:
+#     Handy for skills and interests etc.
+#
+#     Additional keys:
+#       style: Rendering style for word list. One of: list, compact, or title-list
+#
+#     Expects data in format (in yaml file):
+#       A list of strings, if style is "list", or
+#
+#       A list of:
+#         groupName: title of the group
+#         list: list of strings rendered under the group
+
+# Side panel
+
+[[params.side]]
+feature = "education"
+
+[[params.side]]
+feature = "languages"
+
+[[params.side]]
+feature = "skills"
+widget = "word-list"
+style = "title-list" # list, compact, title-list
+
+[[params.side]]
+feature = "interests"
+widget = "word-list"
+style = "list" # list, compact, title-list
+
+
+# First Page
+
+[[params.pages]]
+[[params.pages.features]]
+feature = "about"
+title = "About Me"
+
+[[params.pages.features]]
+feature = "experience"
+
+
+# Additional Pages
+
+[[params.pages]]
+[[params.pages.features]]
+feature = "projects"
+collection = "projects"
+
+[[params.pages.features]]
+feature = "publications"
+style = "IEEE" # IEEE, APA, else
+
+[[params.pages.features]]
+feature = "awards"
+
+[[params.pages.features]]
+feature = "certificates"
+title = "Certifications"
+
+
+# Footer

 [params.footer]
-footnote = "You can print this resume in A4 size or save as pdf. | Last update on 01.09.2020."
+show = true
+credits = true
+footnote = "You can print this resume in A4 size or save as pdf. | Last update on 2020-09-01."

-[params.footer.links]
-[[params.footer.links.link]]
+[[params.footer.links]]
 prefix = "Contact me on"
-name = "Linkedin"
+title = "Linkedin"
 url = "https://linkedin.com/in/mertbakir/"
 icon = "fab fa-linkedin"

-[[params.footer.links.link]]
+[[params.footer.links]]
 prefix = "Check out my"
-name = "Website"
+title = "Website"
 url = "https://mertbakir.gitlab.io/about/"
 icon = "fas fa-globe"
+
+
+# p.s. if you know YAML, then you should use that for this file.
--- a/exampleSite/data/features.yaml
+++ b/exampleSite/data/features.yaml
@ -1,57 +1,70 @@
+about:
+  name: Mert Bakir
+  tagline: Data Scientist
+  phone: "5070*4****"
+  email: yourmail@yourdomain
+  links:
+    - title: /in/mertbakir
+      url: https://tr.linkedin.com/in/mertbakir
+      icon: fab fa-linkedin
+    - title: mertbakir
+      url: https://gitlab.com/mertbakir/
+      icon: fab fa-gitlab
+    - title: mertbakir
+      url: https://github.com/mertbakir
+      icon: fab fa-github
+  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.
+
+
 skills:
-  - "Python - R - SQL"
-  - "InfluxDB/TICK Stack"
-  - "Grafana - PowerBI"
-  - "Excel - Minitab - SPSS"
-  - "GAMS - OR-Tools - IBM CPLEX"
-  - "C# - Git - Docker - NGINX"
+  - groupName: Databases & Visualization
+    list:
+      - Grafana - Kibana - PowerBI
+      - InfluxDB - TICK Stack

-skillsGrouped:
-  - groupName: "Databases & Visualization"
-    skills: ["Grafana - Kibana - PowerBI", "InfluxDB - TICK Stack"]
+  - groupName: Data Analysis & Analytics
+    list:
+      - Python - R - SQL
+      - Excel - Minitab - SPSS
+      - GAMS - PuLP - OR Tools

-  - groupName: "Data Analysis & Analytics"
-    skills: ["Python - R - SQL", "Excel - Minitab - SPSS", "GAMS - PuLP - OR Tools"]
-
-  - groupName: "Programming & Systems"
-    skills: ["C# - Git - Docker - NGINX", "Linux - CentOS RHEL"]
+  - groupName: Programming & Systems
+    list:
+      - C# - Git - Docker - NGINX
+      - Linux - CentOS RHEL

 interests:
-  - "Data Science"
-  - "AI Applications"
-  - "Optimization Problems"
+  - Data Science
+  - AI Applications
+  - Optimization Problems

 languages:
-  - name: "Turkish"
-    level: "Native"
+  - name: Turkish
+    level: Native

-  - name: "English"
-    level: "Professional"
-    certificates: ["YDS: 86.25 - 2018", "TOEFL: 109 - 2021"]
+  - name: English
+    level: Professional
+    certificates:
+      - "YDS: 86.25 - 2018"
+      - "TOEFL: 109 - 2021"

 awards:
-  - name: "Tübitak - Graduation Project"
+  - title: Tübitak - Graduation Project
    date: "2017"
-    details: "A Decision Support System for 3D Cutting Problem"
+    details: |
+      A Decision Support System for 3D Cutting Problem

 certificates:
-  - name: "Supervised Learning: Regression"
+  - title: "Supervised Learning: Regression"
+    subtitle: Coursera
    date: "2020"
-    issued_by: "Coursera"
-    link: "https://xkcd.com/605/"
+    link: https://xkcd.com/605/

-  - name: "Supervised Learning: Classification"
+  - title: "Supervised Learning: Classification"
+    subtitle: Coursera
    date: "2020"
-    issued_by: "Coursera"
-    link: "https://xkcd.com/388/"
-
-
-about:
-  - name: "MERT BAKIR"
-    tagline: "Data Scientist"
-    phone: "5070*4****"
-    linkedin: "/in/mertbakir"
-    email: "yourmail@yourdomain"
-    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."
+    link: https://xkcd.com/388/
--- a/exampleSite/data/projects.yaml
+++ b/exampleSite/data/projects.yaml
@ -1,11 +1,17 @@
- name: "Simulated Annealing for Traveling Salesman Problem"
-  company: "Some University"
-  link: ""
+projects:
+- title: "Simulated Annealing for Traveling Salesman Problem"
+  subtitle: "Some University"
  date: "2016"
-  details: "Lorem ipsum dolor sit amet"
+  details: |
+    Lorem ipsum dolor sit amet

- name: "Resume - A4"
-  company: "mertbakir.gitlab.io/resume"
+- title: "Resume - A4"
+  subtitle: "mertbakir.gitlab.io/resume"
  link: "https://gitlab.com/mertbakir/resume-a4"
  date: "2020"
-  details: "Bring CI/CD to your resume using YAML and Git."
+  details: |
+    Bring CI/CD to your resume using YAML and Git."
+  links:
+  - title: Available in GitLab
+    utl: https://gitlab.com/mertbakir/resume-a4
+    icon: fab fa-gitlab
--- a/layouts/home.html
+++ b/layouts/home.html
@ -1,75 +1,59 @@
-
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}"><!DOCTYPE html>

 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    {{ $style := resources.Get "sass/main.scss" | toCSS | minify | fingerprint }}
+	{{ $style := resources.Get "css/main.scss" | toCSS | minify | fingerprint }}
 	<link rel="stylesheet" href="{{ $style.Permalink }}" />
 	<link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
 	{{ if .Site.Params.useFontAwesome }}
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
 	{{ end }}
+	{{ range .Site.Params.css }}
+	{{ $style := resources.Get (printf "css/%s" .) }}
+		{{ if $style }}
+		<link rel="stylesheet" href="{{ ($style | toCSS | minify | fingerprint).Permalink }}" />
+		{{ end }}
+	{{ end }}
 	<title itemprop="name">{{ .Site.Title }}</title>
 </head>

 <body>
-    <main class="resumeCanvas">
-        <div class="gridParent">
-            <header class="flex-row">{{ partial "header" . }}</header>
+	<main class="paper">
+		<div class="grid">
+			<header class="flex-row">
+				{{ partial "header" (dict "Header" .Site.Params.header "Data" .Site.Data "useFontAwesome" .Site.Params.useFontAwesome) }}
+			</header>

-            <div class="leftSide">
-            {{ if .Site.Params.display.aboutMe }}
-                {{ partial "about-me" . }}
+			{{ range first 1 .Site.Params.pages }}
+			<div class="left-column">
+				{{ range .features }}
+					{{ partial "section" (dict "Feature" . "Data" $.Site.Data "useFontAwesome" $.Site.Params.useFontAwesome) }}
 				{{ end }}
-            
-            {{ if .Site.Params.display.experience }}
-                {{ partial "experience" . }}
-            {{ end }}
-
-            {{ if .Site.Params.display.projects }}
-                {{ partial "projects" . }}
-            {{ end }}
-        
-            {{ if .Site.Params.display.publications }}
-                {{ partial "publications" . }}
-            {{ end }}
-
-            {{ if .Site.Params.display.certificates }}
-            {{ partial "certificates" . }}
-            {{ end }}
-
 			</div>
-
-            <div class="rightSide">
-             {{ if .Site.Params.display.education }}
-                {{ partial "education" . }}
 			{{ end }}

-            {{ if .Site.Params.display.languages }}
-                {{ partial "languages" . }}
-            {{ end }}
-
-            {{ if .Site.Params.display.awards }}
-                {{ partial "awards" . }}
-            {{ end }}
-
-            {{ if .Site.Params.display.skills }}
-                {{ partial "skills" . }}
-            {{ end }}
-
-            {{ if .Site.Params.display.skills_grouped }}
-                {{ partial "skills_grouped" . }}
-            {{ end }}
-
-            {{ if .Site.Params.display.interests }}
-                {{ partial "interests" . }}
+			<div class="right-column">
+				{{ range .Site.Params.side }}
+					{{ partial "section" (dict "Feature" . "Data" $.Site.Data "useFontAwesome" $.Site.Params.useFontAwesome) }}
 				{{ end }}
 			</div>
+		</div>
 	</main>
-    {{ if .Site.Params.display.footer.footer }}
-    <footer>{{ partial "footer" .}}</footer>
+
+	{{ 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 }}
+	<footer>
+		{{ partial "footer" (dict "Footer" .Site.Params.footer "useFontAwesome" .Site.Params.useFontAwesome) }}
+	</footer>
 	{{ end }}
 </body>
 </html>
--- a/layouts/partials/about-me.html
+++ b/layouts/partials/about-me.html
@ -1,8 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.about_me }}</h1>
-    <p>
-        {{ range .Site.Data.features.about }}
-            {{ .details }}
-        {{ end }}
-    </p>
-</div>
--- a/layouts/partials/awards.html
+++ b/layouts/partials/awards.html
@ -1,9 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.awards }}</h1>
-        {{ range .Site.Data.features.awards }}
-        <div class="item">
-            <h3 class="item-title">{{ .name }}</h3>
-            {{ .details | markdownify }} - {{ .date }}
-        </div>
-        {{ end }}
-</div>
--- a/layouts/partials/certificates.html
+++ b/layouts/partials/certificates.html
@ -1,14 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.certificates }}</h1>
-        {{ range .Site.Data.features.certificates }}
-        <div class="item">
-            <h3 class="item-title">{{ .name }}
-                {{ if .link }}<a href="{{ .link }}">
-                    {{ if $.Site.Params.useFontAwesome }}<i class="fas fa-link"></i>
-                    {{else}}&#128279;{{ end }}</a>
-                {{ end }}
-            </h3>
-            {{ .issued_by | markdownify }} - {{ .date }}
-        </div>
-        {{ end }}
-</div>
--- a/layouts/partials/education.html
+++ b/layouts/partials/education.html
@ -1,10 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.education }}</h1>
-    {{ range .Site.Data.education }}
-    <div class="item">
-        <h3 class="item-title">{{ .name }}</h3>
-        <span>{{ .university }}</span><br>
-        <span>{{ .date }} | GPA: {{ .gpa }}</span>
-    </div>
-    {{ end }}
-</div>
--- a/layouts/partials/experience.html
+++ b/layouts/partials/experience.html
@ -1,17 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.experience }}</h1>
-    {{ range .Site.Data.experience }}
-    <div class="item group">
-        <h3 class="item-title">{{ .company }}</h3>
-        {{ range .roles }}
-        <div class="item">
-            <div class="flex-row">
-                <span class="job-title">{{ .role }}</span>
-                <span class="date">{{ .date }}</span>
-            </div>
-            <p>{{ .details | markdownify }}</p>
-        </div>        
-        {{ end }}
-    </div>
-    {{ end }}
-</div>
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,20 +1,27 @@
-{{ if .Site.Params.display.footer.credits }}
-<span class="footer-item" id="credits">
-Resume-A4 project is open-sourced by <a href="https://gitlab.com/mertbakir/resume-A4"><span class="link-text">Mert Bakır </span><i class="fab fa-gitlab"></i></a>
-</span>
-{{ end }}
-
-{{ if .Site.Params.display.footer.links }}
+{{ if .Footer.links }}
 <span class="footer-item">
-    {{ range .Site.Params.footer.links.link }}
-<span id="link">
-    {{ .prefix }} <a href="{{.url}}"><span class="link-text">{{.name}} </span>
-    {{ if $.Site.Params.useFontAwesome }}<i class="{{.icon}}"></i>{{ end }}
-        </a></span>
+	{{ range .Footer.links }}
+	<span class="footer-link">
+		{{ .prefix }}
+		<a href="{{ .url }}" class="no-external-icon">
+			<span>{{ .title }} </span>
+			{{ if and $.useFontAwesome .icon }}<i class="{{ .icon }}"></i>{{ end }}
+		</a>
+	</span>
 	{{ end }}
 </span>
 {{ end }}

 <span class="footer-item">
-    {{ .Site.Params.footer.footnote }}
+	{{ .Footer.footnote }}
 </span>
+
+{{ if .Footer.credits }}
+<span class="footer-item" id="credits">
+	<span>The open-source theme Resume-A4 is designed by</span>
+	<a href="https://gitlab.com/mertbakir/resume-A4" class="no-external-icon"><span>Mert&nbsp;Bakır</span>&nbsp;<i class="fab fa-gitlab"></i></a>
+	<br>
+	<span>and template code by</span>
+	<a href="https://gitlab.com/raphendyr/hugo-theme-resume-A4" class="no-external-icon"><span>Jaakko&nbsp;Kantojärvi</span>&nbsp;<i class="fab fa-gitlab"></i></a>
+</span>
+{{ end }}
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,16 +1,15 @@
-<div class="titleHeader">
-    {{ range .Site.Data.features.about }}
+<div class="title">
+	{{ with .Data.features.about }}
 		<h1 class="name">{{ .name }}</h1>
-    {{ if $.Site.Params.display.tagline }}<h3 class="tagline">{{ .tagline }}</h3>{{end}}
-    {{ if $.Site.Params.display.contact }}<span class="contact">{{ .phone }} | {{ .email }}</span>{{ end }}
-    {{ if $.Site.Params.display.linkedin }}
-    <a href="{{.url}}">
-        {{ if $.Site.Params.useFontAwesome }}<i class="fab fa-linkedin"></i>{{ end }}
-        {{ .linkedin }}
-    </a>
+		{{ if $.Header.tagline }}<h2 class="tagline">{{ .tagline }}</h2>{{end}}
+		{{ if $.Header.contact }}<span class="contact">{{ .phone }} | {{ .email }}</span>{{ end }}
+		{{ if $.Header.links }}
+			{{ range .links }}
+			<a href="{{ .url }}" class="no-external-icon">{{ if and $.useFontAwesome .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ .title }}</a>
+			{{ end }}
 		{{ end }}
 	{{ end }}
 </div>
-{{ if .Site.Params.display.avatar }}
-<div><img class="avatar right" src="{{.Site.Params.avatar}}"></div>
+{{ if .Header.avatar }}
+<div><img class="avatar right" src="{{ .Header.avatar }}"></div>
 {{ end }}
--- a/layouts/partials/interests.html
+++ b/layouts/partials/interests.html
@ -1,8 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.interests }}</h1>
-    <div class="item">
-    {{ range .Site.Data.features.interests }}
-    <li>{{.}}</li>
-    {{ end }}
-    </div>
-</div>
--- a/layouts/partials/languages.html
+++ b/layouts/partials/languages.html
@ -1,12 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.languages }}</h1>
-    {{ range .Site.Data.features.languages }}
-    <div class="item">
-        <h3 class="item-title">{{ .name }}
-            <span class="item-title-span"> - {{ .level }}</span></h3>
-            {{ range .certificates }}
-            <li>{{.}}</li>
-            {{ end }}
-    </div>
-    {{ end }}
-</div>
--- a/layouts/partials/markdown.html
+++ b/layouts/partials/markdown.html
@ -0,0 +1,6 @@
+{{ $markdown := . | markdownify }}
+{{ if strings.Contains $markdown "<p>" }}
+	{{ $markdown }}
+{{ else }}
+	<p>{{ $markdown }}</p>
+{{ end }}
--- a/layouts/partials/projects.html
+++ b/layouts/partials/projects.html
@ -1,15 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.projects }}</h1>
-        {{ range .Site.Data.projects }}
-        <div class="item">
-            <h3 class="item-title">{{ .name }}
-                {{ if .link }}<a href="{{ .link }}">
-                    {{ if $.Site.Params.useFontAwesome }}<i class="fas fa-link"></i>
-                    {{else}}&#128279;{{ end }}</a>
-                {{ end }}
-            </h3>
-            {{ .company | markdownify }} - {{ .date }}
-            <p>{{ .details }}</p>
-        </div>
-        {{ end }}
-</div>
--- a/layouts/partials/publications.html
+++ b/layouts/partials/publications.html
@ -1,56 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.publications }}</h1>
-    {{ range .Site.Data.publications }}
-    <div class="item">
-        {{ if eq $.Site.Params.bib_style "IEEE" }}
-            <span>
-                {{ range .authors }}
-                    {{ substr .first_name 0 1 }}.
-                    {{ with .middle_name}}{{ substr . 0 1 }}.{{end}}
-                    {{ .last_name }},
-                {{ end }}
-            </span> <span>"{{ .title }}",</span>
-            {{ if .journal }}
-            <span>{{ .journal }}</span>, 
-                {{ with .vol }}
-                    <span>vol. {{.}}</span>,
-                {{ end }}
-                {{ with .page }}
-                    <span>pp. {{.}}</span>,
-                {{ end }}
-            {{ end }}
-            <span>{{ .date }}</span>.
-        
-        {{ else if eq $.Site.Params.bib_style "APA" }}
-            <span>
-                {{ $last_index := sub (.authors | len) 1 }}
-                {{ range $i, $e := .authors }}
-                {{ $e.last_name }},
-                {{ substr $e.first_name 0 1 }}.
-                {{- with $e.middle_name -}}{{ substr . 0 1 }}.{{- end -}}
-                {{- if ne $i $last_index -}},{{- end -}}
-                {{ end }}
-                <span>({{ .date }}).</span>
-            </span>
-            <span>{{ .title }}.</span>
-            {{ if .journal }}
-            <span>{{ .journal }}</span>
-                {{- if .vol -}}
-                    <span>, {{.vol}}{{if .issue}}({{.issue}}){{end}}</span>,
-                {{- end -}}
-                {{ with .page }}
-                    <span>{{.}}</span>
-                {{ end }}
-            {{ end }}.
-        
-        {{ else }}
-            {{ range .authors }}
-                {{ .last_name }} {{ substr .first_name 0 1 }}.
-            {{ end }}
-
-            {{ .title }}
-            {{ .date }}.
-        {{ end }}
-    </div>
-    {{ end }}
-</div>
--- a/layouts/partials/section-about.html
+++ b/layouts/partials/section-about.html
@ -0,0 +1 @@
+{{ partial "markdown" .Data.features.about.details }}
--- a/layouts/partials/section-details-list.html
+++ b/layouts/partials/section-details-list.html
@ -0,0 +1,32 @@
+{{- $collection := index .Data (.Feature.collection | default "features" ) -}}
+{{ range (index $collection .Feature.feature) }}
+<div class="item">
+	<h2 class="item-title">
+		{{- if .link -}}
+		<a href="{{ .link }}">{{ .title }}</a>
+		{{- else -}}
+		{{ .title }}
+		{{- end -}}
+	</h2>
+	<span>{{ if and .subtitle .date }}
+		{{- .subtitle | markdownify }} - {{ .date }}
+	{{- else if .subtitle }}
+		{{- .subtitle | markdownify }}
+	{{- else if .date }}
+		{{- .date }}
+	{{- end }}</span>
+	{{ if .details }}
+		{{- partial "markdown" .details }}
+	{{- end }}
+	{{ if .links }}
+	<ul>
+		{{- 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>
+			{{- end -}}
+		</li>
+	</ul>
+	{{ end }}
+</div>
+{{ end }}
--- a/layouts/partials/section-education.html
+++ b/layouts/partials/section-education.html
@ -0,0 +1,7 @@
+{{ range .Data.education }}
+<div class="item">
+	<h2 class="item-title">{{ .name }}</h2>
+	<span>{{ .university }}</span><br>
+	<span>{{ .date }}{{ if .gpa }} | GPA: {{ .gpa }}{{ end }}</span>
+</div>
+{{ end }}
--- a/layouts/partials/section-experience.html
+++ b/layouts/partials/section-experience.html
@ -0,0 +1,16 @@
+{{ range .Data.experience }}
+<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>
+		</div>
+		{{ if .details }}
+		<p>{{ .details | markdownify }}</p>
+		{{ end }}
+	</div>
+	{{ end }}
+</div>
+{{ end }}
--- a/layouts/partials/section-json.html
+++ b/layouts/partials/section-json.html
@ -0,0 +1 @@
+<pre>{{ . | jsonify (dict "indent" "  ") }}</pre>
--- a/layouts/partials/section-languages.html
+++ b/layouts/partials/section-languages.html
@ -0,0 +1,11 @@
+{{ range .Data.features.languages }}
+<div class="item">
+	<h2 class="item-title">
+		{{- .name -}}
+		<span> - {{ .level }}</span>
+	</h2>
+	{{ range .certificates }}
+	<li>{{.}}</li>
+	{{ end }}
+</div>
+{{ end }}
--- a/layouts/partials/section-publications.html
+++ b/layouts/partials/section-publications.html
@ -0,0 +1,63 @@
+{{ range .Data.publications }}
+<div class="item">
+	{{- if .link }}
+	<a href="{{ .link }}">
+	{{- end -}}
+	{{- if eq $.Feature.style "IEEE" }}
+		<span>
+			{{- range .authors -}}
+				{{- substr .first_name 0 1 }}. {{ with .middle_name }}{{ substr . 0 1 }}. {{ end }}{{ .last_name }},
+			{{- end -}}
+		</span>
+		<span>"{{ .title }}",</span>
+		{{- if .journal }}
+		<span>
+			{{- "" -}}
+			<i>{{ .journal }}</i>,
+			{{- with .vol }} vol. {{.}},{{ end -}}
+			{{- with .page }} pp. {{.}},{{ end -}}
+		</span>
+		{{- else if .thesis }}
+		<span>{{ .thesis }},</span>
+		{{- end }}
+		<span>{{ .date }}</span>.
+	{{- else if eq $.Feature.style "APA" }}
+		<span>
+			{{- $last_index := sub (.authors | len) 1 -}}
+			{{- range $i, $e := .authors -}}
+			{{- if and (gt $i 0) (eq $i $last_index) }}& {{ end -}}
+			{{- $e.last_name }}, {{ substr $e.first_name 0 1 }}.{{ with $e.middle_name }} {{ substr . 0 1 }}.{{ end -}}
+			{{- if ne $i $last_index }}, {{ end -}}
+			{{- end -}}
+		</span>
+		<span>({{ .date }}).</span>
+		<span>{{ .title }}.</span>
+		{{- if .journal }}
+		<span>
+			{{- "" -}}
+			<i>{{- .journal -}}</i>
+			{{- if .vol }}, <i>{{.vol}}</i>{{with .issue}}({{.}}){{end}}{{ end -}}
+			{{- with .page }}, pp.{{.}}{{ end -}}
+			.
+			{{- "" -}}
+		</span>
+		{{ end }}
+	{{- else }}
+		<span>
+			{{- $last_index := sub (.authors | len) 1 -}}
+			{{- range $i, $e := .authors -}}
+			{{- if and (gt $i 0) (eq $i $last_index) }}and {{ end -}}
+			{{- $e.last_name }}, {{ substr $e.first_name 0 1 }}.{{ with $e.middle_name }} {{ substr . 0 1 }}.{{ end -}}
+			{{- if ne $i $last_index }}, {{ end -}}
+			{{- end -}}
+			,
+			{{- "" -}}
+		</span>
+		{{ with .date }}<span>{{.}}.</span>{{ end }}
+		<span>{{ .title }}</span>
+	{{- end -}}
+	{{- if .link }}
+	</a>
+	{{- end }}
+</div>
+{{ end }}
--- a/layouts/partials/section-word-list.html
+++ b/layouts/partials/section-word-list.html
@ -0,0 +1,37 @@
+{{- $collection := index .Data (.Feature.collection | default "features" ) -}}
+{{- $data := index $collection .Feature.feature }}
+{{- if eq .Feature.style "list" -}}
+	<div class="item">
+	{{ range $data }}
+		{{- if reflect.IsMap . -}}
+		{{- range .list -}}
+			<li>{{.}}</li>
+		{{- end -}}
+		{{- else -}}
+		<li>{{.}}</li>
+		{{- end -}}
+	{{ end }}
+	</div>
+{{- else if eq .Feature.style "compact" -}}
+	<div class="item">
+		<dl>
+			{{ range $data }}
+			<dt>{{ .groupName }}</dt>
+			<dd>
+				{{- range .list -}}
+				<span>{{.}}</span>
+				{{- end -}}
+			</dd>
+			{{ end }}
+		</dl>
+	</div>
+{{- else -}}
+	{{ range $data }}
+	<div class="item">
+		<h2 class="item-title">{{ .groupName }}</h2>
+		{{ range .list }}
+		<li>{{.}}</li>
+		{{ end }}
+	</div>
+	{{ end }}
+{{- end -}}
--- a/layouts/partials/section.html
+++ b/layouts/partials/section.html
@ -0,0 +1,12 @@
+<div class="section section-{{ .Feature.feature }}">
+	{{- if or (not (isset .Feature "title")) .Feature.title -}}
+	<h1 class="section-title">{{ .Feature.title | default (title .Feature.feature) }}</h1>
+	{{- end -}}
+	{{- $partial := (printf "section-%s.html" (default .Feature.feature .Feature.widget)) -}}
+	{{- $collection := index .Data (default "features" .Feature.collection) -}}
+	{{- if and (not (templates.Exists (printf "partials/%s" $partial))) (isset $collection .Feature.feature) -}}
+	{{ partial "section-details-list.html" . }}
+	{{- else -}}
+	{{ partial $partial . }}
+	{{- end -}}
+</div>
--- a/layouts/partials/skills.html
+++ b/layouts/partials/skills.html
@ -1,8 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.skills }}</h1>
-    <div class="item">
-    {{ range .Site.Data.features.skills }}
-    <li>{{.}}</li>
-    {{ end }}
-    </div>
-</div>
--- a/layouts/partials/skills_grouped.html
+++ b/layouts/partials/skills_grouped.html
@ -1,11 +0,0 @@
-<div class="section">
-    <h1 class="section-title">{{ .Site.Params.title_as.skills }}</h1>
-    {{ range .Site.Data.features.skillsGrouped }}
-    <div class="item">
-        <h3 class="item-title">{{ .groupName }}</h3>
-        {{ range .skills }}
-        <li>{{.}}</li>
-        {{ end }}
-    </div>
-    {{ end }}
-</div>
				`@ -0,0 +1 @@`
				`{{ partial "markdown" .Data.features.about.details }}`
				`@ -0,0 +1 @@`
				`<pre>{{ . \| jsonify (dict "indent" " ") }}</pre>`