adds portfolio guide in README and revises template

README.md

@@ -1,6 +1,6 @@
-# hyde-hyde
+# Hyde-hyde
 
-__`Hyde-hyde`__ is a [Hugo](https://gohugo.io)'s theme inspired and derived from @spf13's [Hyde](https://github.com/spf13/hyde.git) and its variant [Nate Finch's blog](https://npf.io). 
+__`Hyde-hyde`__ is a [Hugo](https://gohugo.io)'s theme inspired and derived from @spf13's [Hyde](https://github.com/spf13/hyde.git) and [Nate Finch's blog](https://npf.io). 
 
 ## Breaking Changes
 
@@ -11,25 +11,11 @@ Since version 2.0, __`hyde-hyde`__ has been overhauled and, therefore, might cau
 * Adding '[_Portfolio_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/portfolio)' page inspired by Xiaoying Riley (@3rdwave_themes) [Developer-Theme](https://github.com/xriley/developer-theme)
 * Switching to use system fonts instead of Web fonts (e.g. privacy issues)
 
-For more details, please refer to [CHANGELOG](https://github.com/htr3n/hyde-hyde/blob/master/CHANGELOG.md). 
+For more details, please refer to [CHANGELOG](https://github.com/htr3n/hyde-hyde/blob/master/CHANGELOG.md).  A real site in action can be found [here](https://htr3n.github.io) and its [WIP source](https://github.com/htr3n/htr3n-blog) for reference.
 
-A real site in action can be found [here](https://htr3n.github.io) and its [WIP source](https://github.com/htr3n/htr3n-blog) for reference.
+## Usage
 
-## Some Screenshots
+#### Installation
-
-### Main page
-
-![hyde-hyde main screen](https://github.com/htr3n/hyde-hyde/raw/master/images/main.png)
-
-### Post
-
-![A post in hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/post.png)
-
-### Portfolio
-
-![Portfolio hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/portfolio.png)
-
-## Installation
 
 __`Hyde-hyde`__ can be easily installed as many other Hugo themes:
 
@@ -57,24 +43,99 @@ theme = "hyde-hyde"
 theme : "hyde-hyde"
 ```
 
-That's all. You can render your site using `hugo` and see the template in action.
+That's all. You can render your site using `hugo` and see `hyde-hyde` in action.
 
-## Options
+#### Options
 
 * __`Hyde-hyde`__ essentially inherits most of Hyde's [options](https://github.com/spf13/hyde#options).
 
-## Customisations
+#### Customisations
+
+* Most of the customisable SCSS styles in [_static-src/scss/hyde-hyde_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde) and Hugo templates in [_hyde-hyde/layouts_](https://github.com/htr3n/hyde-hyde/blob/master/layouts) are modularised and can be altered/adapted easily.
+
+## Portfolio
+
+Since version 2.0+, I added a portfolio page just in case. If you need it, simply add a menu section '_Portfolio_' in `config.toml` as following.
+
+```toml
+[[menu.main]]
+    name = "Portfolio"
+    identifier = "portfolio"
+    weight = xxx
+    url = "/portfolio/"
+```
+
+In the folder `content` , create a subfolder `portfolio` and use the following folder/content structure as reference.
+
+```
+$ tree portfolio
+portfolio
+├── _index.md
+├── p1.md
+├── p1.png
+├── p2.md
+├── p2.png
+    ...
+├── pn.md
+└── pn.png
+```
+
+As I design the section _portfolio_ to be rendered as _list_,  `_index.md` can be used to set the title for your portfolio (you can read more about `_index.md` [here](https://gohugo.io/content-management/organization/#index-pages-index-md)). For instance, when I want to set the title of my portfolio "_Projects_", the front matter of `_index.md` will be:
+
+```markdown
+---
+title: 'Projects'
+---
+```
+
+For each project, just create a Markdown file with the following parameters in the front matter:
+
+```markdown
+---
+title: "Project P1's Title"
+description: "A short description"
+date: '2018-01-02'
+link: 'https://project-p1.com'
+screenshot: 'p1.png'
+layout: 'portfolio'
+featured: true
+---
+Here is a longer summary of the project. You can write as long as you wish.
+```
+
+> __Note__:
+>
+> * `date` is important to sort the project chronologically
+> * `layout 'portfolio'` is important as you don't want your project's page appear in the list of posts in the main page of your Web site but only in the _Portfolio_ ;)
+> * `featured: true` : when you want to show a project as featured project. It is default to `false`. Note that only one project should be marked `featured: true` , otherwise, the result could be random as [the Hugo template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/portfolio/content.html) will take the first one.
+> * The body of the Markdown file will be the summary of the project.
+
+If you want to adjust the portfolio page to your needs, please have a look at the [main template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/portfolio/list.html), that uses this [partial template](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/portfolio/content.html) and [this SCSS style](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_project.scss).
+
+## Some Screenshots
+
+#### Main page
+
+![hyde-hyde main screen](https://github.com/htr3n/hyde-hyde/raw/master/images/main.png)
+
+#### A post
+
+![A post in hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/post.png)
+
+#### Portfolio
+
+![Portfolio hyde-hyde](https://github.com/htr3n/hyde-hyde/raw/master/images/portfolio.png)
+
 
-* Most of the customisable SCSS styles in [_static-src/scss/hyde-hyde_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde) and layouts in [_hyde-hyde/layouts_](https://github.com/htr3n/hyde-hyde/blob/master/layouts) are modularised and can be altered/adapted easily.
 
 ## Author(s)
 
-### Original Developed by Mark Otto
+#### Original Developed by Mark Otto
 
 - <https://github.com/mdo>
 - <https://twitter.com/mdo>
 
-### Hugo's Hyde Ported by Steve Francia
+#### Hugo's Hyde Ported by Steve Francia
 - <https://github.com/spf13>
 - <https://twitter.com/spf13>
 

layouts/partials/portfolio/content.html

@@ -1,4 +1,4 @@
-<span class="section__title">{{ .Title }}</span>    
+<span class="section__title">{{ .Title | default "Projects" }}</span>
 <div class="portfolio__content">
     {{ range first 1 (where .Data.Pages "Params.featured" "==" "true") }}
         <section class="portfolio__featured-project">