diff --git a/_config.yml b/_config.yml
index ea99a0a05..b34479d1d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -24,3 +24,6 @@ per_page: 20
 paginate_path: "/page:num/"
 markdown: kramdown
 gems: [jekyll-paginate, jekyll-gist]
+collections:
+  projects:
+    output: true
diff --git a/_includes/project_tags_collection.html b/_includes/project_tags_collection.html
new file mode 100644
index 000000000..1ba939c5d
--- /dev/null
+++ b/_includes/project_tags_collection.html
@@ -0,0 +1,25 @@
+{% if site.enableTags ==  true %} 
+	<div id="tag-filter" class="col-md-12 col-xs-12 tag-group">
+		<span class="label tag-filter tag-cloud all">Reset</span>
+        {% assign tagarray = site.tagarray %}
+        {% for project in site.projects %}
+            {% for tag in project.tags %}
+                {% assign tagarray = tagarray | push: tag %}
+            {% endfor %}
+        {% endfor %}
+
+        {% assign tags = tagarray[1] %}
+        {% for item in tagarray %}
+            {% assign tagDown = item | downcase %}
+            {% assign tagComp = tags | downcase %}
+            {% unless tagComp contains tagDown %}
+                {% capture tags %}{{ tags }}|{{ item }}{% endcapture %}
+            {% endunless %}
+        {% endfor %}
+
+        {% assign taglist = tags | split: '|' | sort %}
+        {% for tag in taglist %}
+            <span class="label tag-filter tag-cloud" data-tag="{{ tag | downcase }}">{{ tag }}</span>
+        {% endfor %}
+	</div>
+{% endif %}
diff --git a/_layouts/project_collection.html b/_layouts/project_collection.html
new file mode 100644
index 000000000..7ee4d0695
--- /dev/null
+++ b/_layouts/project_collection.html
@@ -0,0 +1,46 @@
+---
+layout: default
+---
+<article class="post">
+
+  <div class="post-content">
+    {{ content }}
+
+    <div class="projects row">
+    {% include project_tags_collection.html %}
+    {% for i in site.projects %}
+    <div class="project-item col-md-4 col-sm-6 col-xs-12" data-tags='{{ i.tags | jsonify | downcase }}'>
+    	<div class="well project-outer">
+    		<div class="project-inner">
+    			<a href="/static/projects/{{ i.image }}" class="thickbox">
+    			<div class="project-img bordered" style="background-image: url('/static/projects/{{ i.image }}');"></div>
+                </a>
+                {% if i.url %} <a href="{{ site.baseurl }}/{{ i.url }}"> {% endif %}
+    			<h3 class="project-headlines">{{ i.title }}</h3>
+    			{% if i.url %} </a> {% endif %}
+    			<div class="project-content">
+    				<div class="tag-holder">
+    				{% if i.tags %} 
+    					{% for j in i.tags %}
+    					<span class="label tags tag-filter" data-tag="{{ j | downcase }}">{{ j }}</span>
+    					{% endfor %}
+    				{% endif %}
+    				</div>
+    				
+    			</div>
+    			<div class="project-footer"> 
+    				{% if i.url %} 
+    				<a href="{{ i.url }}" class="btn btn-info btn-raised btn-sm project-link">View</a>
+    				{% endif %}
+    				<span class="project-timeline">{{ i.date }}</span>
+    			</div>
+    		</div>
+    	</div>
+    </div>
+    {% cycle '', '', '<div class="clearfix visible-lg-block visible-md-block"></div>' %}
+    {% cycle '', '<div class="clearfix visible-sm-block"></div>' %}
+    {% endfor %}
+    </div>
+  </div>
+
+</article>
diff --git a/_projects/myproject.markdown b/_projects/myproject.markdown
new file mode 100644
index 000000000..983e253eb
--- /dev/null
+++ b/_projects/myproject.markdown
@@ -0,0 +1,30 @@
+---
+layout: post
+title: Test Page
+date:   2015-06-04 13:50:39
+categories: others
+tags: [test, page]
+image: placeholder.jpg
+---
+
+This is a test project page where we can explore how to embedd images in the page. 
+
+## Image example 1
+
+Here, I will embedd image from local assets which goes into `assets` directory in project's `root` directory. Choose a specific image, related to particular post. I chose to name the image `test-page-image-1.jpg`, which I will embedd as:
+
+```markdown
+![my alternate text](/assets/test-page-image-1.jpg);
+``` 
+
+![my alternate text](/assets/test-page-image-1.jpg);
+
+Ofcourse, you can load images from web as well. Just point to image direct URL. For ex, here is one placeholder image:
+
+```markdown
+![my alternate text](http://lorempixel.com/400/200);
+``` 
+
+![my alternate text](http://lorempixel.com/400/200);
+
+One cool thing about this is the fact that images adapt themselves to the screen size of device. Try to resize your browser window and check for yourself, Have fun.
diff --git a/projects-collections.md b/projects-collections.md
new file mode 100644
index 000000000..b4304aa20
--- /dev/null
+++ b/projects-collections.md
@@ -0,0 +1,7 @@
+---
+layout: project_collection
+title: Collection-based projects
+permalink: /projects-collections/
+---
+
+Projects that are composed of pages in the website, rather than linking to external sites, so that all metadata is in one place.