Create Individual Pages for Projects

lexiyutou · Feb 12, 2019 · 8cf92e6 · 8cf92e6
1 parent 23fa252
commit 8cf92e6
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@
    - LICENSE
    - docs/
 1. Change the configuration options in `_config.yml` depending on your needs.
-1. Modify `pages/projects.html`'s [front matter][front-matter] to add  projects.
+1. Add `project-name.md` to `_projects` directory to add a new project.
 1. Add `YYYY-MM-DD-article-name.md` to `_posts` directory to add a new article.
 1. Modify `pages/about.html`'s [front matter][front-matter] to add skills or items to the timeline, modify the markdown body to write your bio.
 1. Set up portfolYOU [locally] or publish it to [GitHub Pages][gh-pages].
@@ -37,7 +37,7 @@ portfolYOU's sections are **independent**, you can remove any section upon your
 | pages/projects.html           | pages/articles.html    | pages/about.md                    |
 | _sass/projects.scss ¹         | _sass/_articles.scss ¹ | _sass/_skills.scss ¹              |
 | assets/js/card_animation.js ² | _layouts/post.html     | _sass/_timeline.scss ¹            |
-|                               | _posts ³               | _layouts/about.html               |
+| _projects ³                   | _posts ⁴               | _layouts/about.html               |
 |                               |                        | _includes/skills-others.html      |
 |                               |                        | _includes/skills-programming.html |
 |                               |                        | _includes/timeline.html           |
@@ -46,7 +46,8 @@ portfolYOU's sections are **independent**, you can remove any section upon your
     <b>If you are deleting any section, please consider the following:</b><br>
     ¹ remove reference from <code> assets/css/custom.scss </code><br>
     ² remove reference from <code> _includes/scripts.html </code><br>
-    ³ remove permalink from <code> _config.yml </code>
+    ³ remove collections and defaults from <code> _config.yml </code>
+    ⁴ remove permalink from <code> _config.yml </code>
 </small>
 
 ## Dependencies

diff --git a/_config.yml b/_config.yml
@@ -17,4 +17,18 @@ author:
   github: portfolYOU
   twitter: portfolYOU
   linkedin: portfolYOU
-  facebook: portfolYOU
+  facebook: portfolYOU
+
+# Collections
+collections:
+  projects:
+    output: true
+    permalink: /projects/:name
+
+# Default values for collections
+defaults:
+  - scope:
+      path: ""
+      type: "projects"
+    values:
+      layout: "page"
diff --git a/_posts/2018-02-06-download.md b/_posts/2018-02-06-download.md
@@ -24,7 +24,7 @@ Created by [@YoussefRaafatNasry](https://github.com/YoussefRaafatNasry)
    - LICENSE
    - docs/
 1. Change the configuration options in `_config.yml` depending on your needs.
-1. Modify `pages/projects.html`'s [front matter][front-matter] to add  projects.
+1. Add `project-name.md` to `_projects` directory to add a new project.
 1. Add `YYYY-MM-DD-article-name.md` to `_posts` directory to add a new article.
 1. Modify `pages/about.html`'s [front matter][front-matter] to add skills or items to the timeline, modify the markdown body to write your bio.
 1. Set up portfolYOU [locally] or publish it to [GitHub Pages][gh-pages].
@@ -44,7 +44,7 @@ portfolYOU's sections are **independent**, you can remove any section upon your
 | pages/projects.html           | pages/articles.html    | pages/about.md                    |
 | _sass/projects.scss ¹         | _sass/_articles.scss ¹ | _sass/_skills.scss ¹              |
 | assets/js/card_animation.js ² | _layouts/post.html     | _sass/_timeline.scss ¹            |
-|                               | _posts ³               | _layouts/about.html               |
+| _projects ³                   | _posts ⁴               | _layouts/about.html               |
 |                               |                        | _includes/skills-others.html      |
 |                               |                        | _includes/skills-programming.html |
 |                               |                        | _includes/timeline.html           |
@@ -53,7 +53,8 @@ portfolYOU's sections are **independent**, you can remove any section upon your
     <b>If you are deleting any section, please consider the following:</b><br>
     ¹ remove reference from <code> assets/css/custom.scss </code><br>
     ² remove reference from <code> _includes/scripts.html </code><br>
-    ³ remove permalink from <code> _config.yml </code>
+    ³ remove collections and defaults from <code> _config.yml </code>
+    ⁴ remove permalink from <code> _config.yml </code>
 </small>
 
 ## Dependencies

diff --git a/_projects/project-a.md b/_projects/project-a.md
@@ -0,0 +1,21 @@
+---
+name: Project A
+tools: [C#, XML, WPF]
+direct_link: 
+image: https://thenextscoop.com/wp-content/uploads/2019/01/web-design-2019.jpg
+description: This project has an individual showcase page, not just a direct link to the project site or repo. Now you have more space to describe your awesome project!
+---
+
+# Project A
+
+Projects A is an awesome project! Just remove the direct link from the project's front matter and you will have an individual page like this for your project.
+
+![](https://techcrunch.com/wp-content/uploads/2018/05/screen-shot-2018-05-01-at-11-30-23-am.png?w=1390&crop=1)
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+![](https://techcrunch.com/wp-content/uploads/2018/05/screenshot-materialio.png)
+
+<div class="col text-center">
+<a href="https://www.google.com" class="btn btn-outline-primary mx-2">Learn More</a>
+</div>
diff --git a/_projects/project-b.md b/_projects/project-b.md
@@ -0,0 +1,7 @@
+---
+name: Project B
+tools: [HTML5, CSS3]
+direct_link: https://www.google.com
+image: https://www.infotyke.com/wp-content/uploads/2018/02/web-development-service-infotyke.png
+description: Have nothing to say about the project? just use a direct link to the project site or repo.
+---
diff --git a/_projects/project-c.md b/_projects/project-c.md
@@ -0,0 +1,7 @@
+---
+name: Project C
+tools: [Android]
+direct_link: https://www.google.com
+image: https://www.sketchappsources.com/resources/source-image/coo-app-concept-subgaurav.jpg
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+---
diff --git a/_projects/project-x.md b/_projects/project-x.md
@@ -0,0 +1,9 @@
+---
+name: Project X
+tools: [Arduino Uno, Electronics]
+direct_link: https://www.google.com
+image: https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1143356/1160/772/m1/fpnw/wm0/creativemarket_image_front-.png?1459611806&s=04d4f811ceed88ca4716fd2551e93a36
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+---
+
+# My awesome Project
diff --git a/_projects/project-y.md b/_projects/project-y.md
@@ -0,0 +1,7 @@
+---
+name: Project Y
+tools: [Java]
+direct_link: https://www.google.com
+image: https://www.sketchappsources.com/resources/source-image/project-neon-groove-music-ui.png
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+---
diff --git a/_projects/project-z.md b/_projects/project-z.md
@@ -0,0 +1,7 @@
+---
+name: Project Z
+tools: [JavaScript]
+direct_link: https://www.google.com
+image:
+description: This project has no image, but it is still a beautiful project inside out!
+---
diff --git a/pages/projects.html b/pages/projects.html
@@ -2,57 +2,21 @@
 layout: default
 title: projects
 permalink: /projects/
-
-projects:
-
-    - name: Project A
-      tools: [C#, XML, WPF]
-      link: https://www.google.com
-      image: https://thenextscoop.com/wp-content/uploads/2019/01/web-design-2019.jpg
-      description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-    - name: Project B
-      tools: [HTML5, CSS3]
-      link: https://www.google.com
-      image: https://www.infotyke.com/wp-content/uploads/2018/02/web-development-service-infotyke.png
-      description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-    - name: Project C
-      tools: [Android]
-      link: https://www.google.com
-      image: https://www.sketchappsources.com/resources/source-image/coo-app-concept-subgaurav.jpg
-      description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-    - name: Project X
-      tools: [Arduino Uno, Electronics]
-      link: https://www.google.com
-      image: https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1143356/1160/772/m1/fpnw/wm0/creativemarket_image_front-.png?1459611806&s=04d4f811ceed88ca4716fd2551e93a36
-      description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-    - name: Project Y
-      tools: [Java]
-      link: https://www.google.com
-      image: https://www.sketchappsources.com/resources/source-image/project-neon-groove-music-ui.png
-      description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-    - name: Project Z
-      tools: [JavaScript]
-      link: https://www.google.com
-      image:
-      description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 ---
 
 <div class="card-columns m-3 mt-5">
 
-    {% for project in page.projects %}
+    {% for project in site.projects %}
+
+        <!-- Determine project link -->
+        {% if project.direct_link %}
+            {% assign project_link = project.direct_link %}
+        {% else %}
+            {% assign project_link = project.url | relative_url %}
+        {% endif %}
+
     <div class="wow animated fadeIn" data-wow-delay=".15s">
-        <a href="{{ project.link }}" class="project card text-dark">
+        <a href="{{ project_link }}" class="project card text-dark">
             {% if project.image %}
             <img class="card-img-top" src="{{ project.image }}" alt="Card image cap">
             {% endif %}
@@ -67,6 +31,7 @@ <h5 class="card-title">{{ project.name }}</h5>
             </div>
         </a>
     </div>
+
     {% endfor %}
 
 </div>