Added borders to screenshots

5 files changed, 171 insertions, 31 deletions

diff --git a/README.md b/README.md
index b9d68d9..e46ab17 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,60 @@
 # MyPortfolio Theme
 
 "MyPortfolio Theme" is a portfolio for developers or creatives to showcase their projects.
-It is based on the [HUGO "Creative" Theme](//github.com/digitalcraftsman/hugo-creative-theme) by [digitalcraftsman](//github.com/digitalcraftsman), itself based on the [original Bootstrap theme](//github.com/IronSummitMedia/startbootstrap-creative) by [David Miller](//github.com/davidtmiller).
+It is based on the [HUGO "Creative" theme](//github.com/digitalcraftsman/hugo-creative-theme) by [digitalcraftsman](//github.com/digitalcraftsman), itself based on the [original Bootstrap theme](//github.com/IronSummitMedia/startbootstrap-creative) by [David Miller](//github.com/davidtmiller).
 
 Noteworthy features of this Hugo theme are:
-- Responsive portfolio grid with hover effects.
-- Possibility to have more than one content sections.
+- Configurable home page (sections order and presence, as well as content).
+- Possibility to have arbitrary number of content sections.
+- Responsive portfolio grids with hover effects.
+- Can be used as a profesional showcase, a personal one, or both.
 - Dynamic generation of pages based on data content.
+- Easy site navigation via header navigation bar.
+- Easy content navigation via sidebars, and taxinomies (tags and categories).
 - Customisable CSS to override default values (such as main theme colours, fonts, etc.).
+- 404 page.
 - ...
 
 ![Hugo MyPortfolio Theme Screenshot](https://github.com/2-REC/hugo-myportfolio-theme/blob/master/images/screenshot.png)
 
+## Theme structure and layout
+
+As in the "Creative" theme, the theme's homepage holds the different sections. Its layout is a typical vertical single page, with a floating navigation bar on top.
+
+The structure and layout of the each section is described hereafter.
+
+
+### HOME
+
+The welcome section, at the top of the homepage.
+
+
+### ABOUT
+
+The introduction/presentation section.
+It is based on the "Biography" section of the ["Academic" theme](//github.com/gcushen/hugo-academic).
+
+
+### SERVICES
+
+Section presenting the services that can be provided, listed in categories and sub-categories.
+
+
+### SKILLS
+
+Section typically providing a link to a downloadable resume, as well as listing the different tags and categories that are found in the different projects sections.
+
+
+### PROJECTS
+
+Section serving as a portfolio, displaying a set of project categories (can be companies, technologies, etc.), linking to individual pages containing projects listing.
+It is based on the "Creative" theme "Portfolio" section, but with links to other pages instead of pop-up windows.
+
+
+### CONTACT
+
+Section providing the contact information.
+
 
 ## Installation
 
@@ -36,6 +79,7 @@ In the [`exampleSite`](//github.com/2-REC/hugo-myportfolio-theme/tree/master/exa
 Copy this file in the root folder of the Hugo site.
 Strings and values can be changed in order to customize the website.
 
+Settings about the different sections in the homepage as well as the navigation menu are defined in this file.
 Details about each parameter and their role can be found in the file itself.
 
 
@@ -43,7 +87,7 @@ Additionally to the configuration file, data files (located in the "data" folder
 The following paragraphs detail the required data for each of the sections.
 
 
-### HOME: Set the homepage
+### HOME: Set the homepage header
 
 The content of the top section of the homepage is fetch from the "home" data file.
 
@@ -59,7 +103,7 @@ All the parameters are optional - if not defined, it will not be added to the pa
 
 ### ABOUT: Introduce yourself
 
-The content of the "about" section of the homepage is fetch from the "about" data file.
+The content of the "ABOUT" section of the homepage is fetch from the "about" data file.
 
 The different parameters that can be used are:
 - "title": The title of the section. Typically "ABOUT" would be used.
@@ -72,7 +116,7 @@ All the parameters are optional - if not defined, it will not be added to the pa
 
 ### SERVICES: Add your services
 
-The content of the "services" section of the homepage is fetch from the "services" data file.
+The content of the "SERVICES" section of the homepage is fetch from the "services" data file.
 
 The different parameters that can be used are:
 - "title": The title of the section. Typically "SERVICES" would be used.
@@ -91,7 +135,7 @@ The "services" list parameter must exist and contain at least one element.
 
 ### SKILLS: Show your skills
 
-The content of the "skills" section of the homepage is fetch from the "skills" data file.
+The content of the "SKILLS" section of the homepage is fetch from the "skills" data file.
 
 The different parameters that can be used are:
 - "title": The title of the section. Typically "SKILLS" would be used.
@@ -105,12 +149,24 @@ The different parameters that can be used are:
     - "icon_pack": The icon package/family (look at icons documentation).
 
 All the parameters except "text" are optional - if not defined, it will not be added to the page content.
-(TODO: "text" should be optional)
+
+
+### PROJECTS: Create a portfolio (or more)
+
+!!!! TODO !!!!
+...
+=> List of companies/categories, linking to individual pages with projects listing.
+- Based on CREATIVE theme, "Portfolio", but with links to other pages.
+- Content: "config.toml" & corresponding "_index.md" file (from section name).
+
+![Section Screenshot](https://github.com/2-REC/hugo-myportfolio-theme/blob/master/images/section.png)
+![List Screenshot](https://github.com/2-REC/hugo-myportfolio-theme/blob/master/images/list.png)
+![Project Screenshot](https://github.com/2-REC/hugo-myportfolio-theme/blob/master/images/project.png)
 
 
 ### CONTACT: Add contact information
 
-The content of the "skills" section of the homepage is fetch from the "skills" data file.
+The content of the "CONTACT" section of the homepage is fetch from the "contact" data file.
 
 The different parameters that can be used are:
 - "title": The title of the section. Typically "CONTACT" would be used.
@@ -130,12 +186,6 @@ The different parameters that can be used are:
 All the parameters are optional - if not defined, it will not be added to the page content.
 
 
-### PROJECTS: Create a portfolio (or more)
-
-!!!! TODO !!!!
-...
-
-
 ### Run the website
 
 In order to see your site in action, run Hugo's built-in local server. 
@@ -147,17 +197,21 @@ In the browser, enter [`localhost:1313`](http://localhost:1313) in the address b
 
 ## Going further
 
-!!!! TODO !!!!
-(css override, ...?)
-...
+### Customise the appearance - CSS Override
+
+A set of CSS rules are used to define the appearance of the website.
+To make the website look more personal or to make it fit with the colour schemes of your company/brand, some CSS variables can be directly overriden using extra custom files (and thus not requiring to change anything in the code or main CSS file).
+
+In order to use custom files, simply add the files in the "static/css" directory, and specify their name (with extension) in the "custom_css" array variable in the "config.toml" file.
+
+The CSS variables that can be overriden are listed in the "custom.css" file (in "static/css"). The file indicates for each variable the default value that will be used. These values are defined either in the "default.css" file, or directly hardcoded in the website's main CSS file ("theme.css") in case they're not defined elsewhere. The provided "custom.css" file can be used as template file, by uncommenting the desired variables.
+
 
 
 ## Contributing
 
-!!!! TODO !!!!
-Did you found a bug or got an idea for a new feature?
-Feel free to use the [issue tracker](//github.com/...theme.../issues) to let me know.
-Or make directly a [pull request](//github.com/...theme.../pulls).
+If you have found a bug, or have an idea for a new feature, please feel free to use the [issue tracker](//github.com/2-REC/hugo-myportfolio-theme/issues) to let me know.
+You can also make directly a [pull request](//github.com/2-REC/hugo-myportfolio-theme/pulls).
 
 Please create a separate branch for your pull request.
 
diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..321e18f
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,62 @@
+TODO - CODE:
+
+- [ ] Check/clean the entire code ...
+
+- [ ] Homepage:
+    - [ ] Set order of sections from order in navigation bar.
+        => Parse menu and add each section in that order (in same order as defined in config.toml).
+
+- [ ] "HOME" section:
+    - [ ] Seems to have a bug with the background in CREATIVE theme: image sometimes not covering the entire screen.
+        => Set size to minimum between width and height, keeping ratio (=> image cropped)
+?        => OK or should fix problem?
+
+- [ ] "SKILLS" section:
+    - [ ] "text" parameter should be optional.
+
+- [ ] "PROJECTS" section:
+    - [ ] Add a vertical scrolling text in the top right corner.
+        => For scrolling text, look at:
+            https://www.quackit.com/css/codes/marquees/
+        => Need to adapt the layout as in AIRSPACE theme, "Contact" form.
+    - [ ] Add a link to "TIMELINE" page (once page ceated).
+        => Look at "NEWSPRINT" theme, "The Library" section for timeline example.
+
+- [ ] "ASIDE" section:
+    => Could add optional section.
+
+- [ ] add Google Analytics:
+        googleAnalytics = "..."
+
+========
+
+TODO - PUBLISH:
+
+Look at:
+gohugo.io/contribute/themes
+
+- [x] check all URLs, & use RELATIVE everywhere (see "relURL")
+
+- [x] check if ".Hugo.Generator" is included somewhere
+
+- [x] test theme
+  - [x] "hugoBasicExample" (https://github.com/gohugoio/hugoBasicExample)
+    => Doesn't work.
+  - [x] Include "exampleSite".
+
+- [x] finish "theme.toml" with all required metadata (add tags!)
+  => check others on "gohugo.io/contribute/themes"
+
+- [ ] finish README.md
+  => look at "Hugo Artists Theme" for ideas
+  - [ ] find and finish "projects" stuff
+  - [ ] add examples?
+  - [ ] add more screenshots?
+    => "list" (company/category) & "single" (project) examples.
+  - [x] add features (404 page, custom css, ...)!
+
+- [x] finish "config.toml"
+
+- [x] add screenshot (1500x1000) & tn (900x600), PNG
+
+- [ ] add theme to "HugoThemes" github => open issue & add link
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 5d5ed1a..9fbbf09 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,4 +1,7 @@
-# For more information take a look at the "README.md".
+# For more information look at "README.md".
+
+# GLOBAL SITE SETTINGS
+# Parameters used by HUGO to configure the site's global settings.
 
 baseurl = "https://example.org/"
 languageCode = "en-us"
@@ -8,12 +11,17 @@ theme = "hugo-myportfolio-theme"
 
 [params]
 
-    # File(s) containing overriden CSS variables (OPTIONAL)
+    # GENERAL SITE PARAMETERS
+    # Parameters used by the site at the global level.
+
+    # File(s) containing overriden CSS variables (can have more than 1) (OPTIONAL)
     custom_css = [ "custom.css" ]
 
     # ----------
 
-    # HTML HEAD METADATA
+    # SITE METADATA
+    # Parameters used to configure metadata in the HTML "head" section.
+
     [params.meta]
         # To provide some metadata for search engines (OPTIONAL)
         author = "<AUTHOR>"
@@ -25,12 +33,14 @@ theme = "hugo-myportfolio-theme"
     # ----------
 
     # HOMEPAGE
+    # Define the sections and the order in which they appear (MANDATORY)
     [params.homepage]
         sections = [ "home", "about", "services", "skills", "projects", "contact" ]
 
     # ----------
 
-    # NAVIGATION MENU (OPTIONAL)
+    # NAVIGATION MENU
+    # Define the navigation bar entries and the order in which they appear (OPTIONAL)
     [params.navigation]
 
         # Brand (OPTIONAL - but required if want HOME button)
@@ -57,7 +67,7 @@ theme = "hugo-myportfolio-theme"
         #    projects = [ { section = "<SECTION_DIRECTORY>", label = "<VALUE>" }, ... ]
         # ! - Values for "sections" in "projects" must be the same as used in "projects.params".
         # (& must correspond to the section directories)
-		[params.navigation.links]
+        [params.navigation.links]
             about    = "ABOUT"
             services = "SERVICES"
             skills   = "SKILLS"
@@ -75,6 +85,21 @@ theme = "hugo-myportfolio-theme"
         # (& must correspond to the section directories)
         categories = [ "pro", "perso" ]
 
+        # Post orders:
+        # - list of posts:
+        #    - default: date.
+        #    - common to all, defined globally here.
+        #    - can be overriden at page level (in "_index.md").
+        # - list of brothers:
+        #    - default: from parent (if no parent => title).
+        #        - list: parent.sections_order
+        #        - single: parent.posts_order
+        # - list of sections:
+        #    - default: title.
+        #    - common to all, efined globally here.
+        #    - can be overriden at page level
+        #        - list: in "_index.md"
+        #        - single: in "index.md" (or "post.md" if post is not a bundle)
         # Required as default values.
         sections_order = "title"
         sections_order_reverse = false
diff --git a/static/css/custom.css b/static/css/custom.css
index d156da3..47c68b9 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -59,15 +59,14 @@
     --HOME-TITLE-COLOR: var(--GENERAL-FONT-COLOR-3);
     --HOME-TEXT-COLOR: var(--GENERAL-FONT-COLOR-2);
 */
-    --HOME-TEXT-COLOR: var(--GENERAL-FONT-COLOR-4);
 
 
     /* ABOUT */
 /*
     --ABOUT-IMAGE-BORDER-RADIUS: var(--GENERAL-IMAGE-BORDER-RADIUS);
     --ABOUT-LINK-COLOR: var(--GENERAL-LINK-COLOR-2);
+    --ABOUT-LINK-COLOR-ACTIVE: var(--GENERAL-LINK-ACTIVE-COLOR-2);
 */
-    --ABOUT-LINK-COLOR-ACTIVE: var(--GENERAL-FONT-COLOR-3);
 
 
     /* SERVICES */
diff --git a/theme.toml b/theme.toml
index a500294..46c709a 100644
--- a/theme.toml
+++ b/theme.toml
@@ -3,8 +3,8 @@ license = "Apache License 2.0"
 licenselink = "//github.com/2-REC/hugo-myportfolio-theme/blob/master/LICENSE"
 description = "A portfolio HUGO theme for developers and creatives."
 homepage = "//github.com/2-REC/hugo-myportfolio-theme"
-tags = ["portfolio"]
-features = ["responsive", "portfolio", "substitutable strings"]
+tags = ["portfolio", "blog", "responsive", "personal", "business", "projects", "bootstrap"]
+features = ["blog", "responsive", "dynamic content", "substitutable strings"]
 min_version = 0.44
 
 [author]