Portfolio

_data/projects.yml

@@ -0,0 +1,7 @@
+- name: Intelligent Flight System
+  date: 2013-11-01
+  duration: "Nov. 2013 - February"
+  header_image: "/images/projects/ai-flight/shortest-flight.png"      
+  purpose: "The purpose was to solve complex problems with the use of AI through inferencing on a model."
+  description: "An intelligent flight system used to assist persons in reaching their destination from various airports using Prolog programming language"
+  more_details: ""

_drafts/todo.md

@@ -8,6 +8,63 @@ introduction:
 
 [Markdown syntax](https://sourceforge.net/p/jekyllc/bugs/markdown_syntax)
 
+I Want To Present At Ted Talk
+=============================
+	- Introduction
+		- I see Ted Talk as the pelican of all presentation.
+		- As Einstein use to say: IF you can't explain it you truly don't understand it.
+		- My goal for the next 3 years is to do it.
+
+	- Why This Goal
+		- Being good at Technology is not enough
+		- Communicating effectively across multiple domains is an important skill.
+		- I grew up listening to Ted Talk presentations.
+		- I learn alot form their presentation and it has shaped my life.
+		- Giving back is the leat I can do.
+		- Having read Chris Anderson Ted Talk book, I can't help but wanting to apply the lessons he has taught.
+
+	- My Current Progress
+		- So I'm yet to master the basicis of presentations. 
+		- However I continue to practise. Both in the professional context and personal/meetups.
+		- Here are the list of presentations I've done thus far:
+		- 	
+	- I've Got Work To Do
+		- Areas I need to improve upon.
+		- How does my blog fit into this bigger picture.
+		- 
+
+Secret In Living Could Be Minimalist Lifestyle
+=======================
+	- Introduction
+		- We need to get back to the basics of life.
+		- 
+
+		- Care about my carbon footprint.
+		- I grew up with little or nothing.
+		- Having read the book, The Go Giver, I'm more motivated to give more than I take.
+		- Living a minimalism list style is counter to the current narrative. Get the latest gadget, 
+
+	- My Understanding
+		- It is a lifestlye.
+		- Allows you to live a meaningful life by removing the unnecessary clutter.
+		- It doesn't mean you should sell all your belonging and live on crackers and water.
+		- More a call to action, questioning how you can reduce your consumption of goods & services.
+
+	- Needs vs Want
+		- As you turn on the TV you're being bombarded with the lastest products.
+		- It is positioned as something that you'll need..
+
+
+	- How I'm Declutting My Life
+		- As a lover of nature, I try to live a sustainable lifestyle.
+		- That indirectly nudges me into the direction of only getting what is nessary.
+		- My house in the country side is fully off grid.
+		- I did an exploration project of understanding the feasibility of biodigester plant.
+		- Sharing the things I've done has been more rewarding than I've thought.
+		- 
+
+	-  
+
 GoodBye Jason :(
 ==============================
 	- Introduction

_includes/footer.html

@@ -3,21 +3,18 @@
   <p>
     <a href="/index">Home</a>
   </p>
-  <!-- <p>
-    <a href="#">Projects</a>
-  </p> -->
   <p>
     <a href="/about">About Me</a>
   </p>
+  <p>
+    <a class="anchor" href="/projects" aria-hidden="true">Projects</a>
+  </p>
   <p>
     <a href="/blog">Blog</a>
   </p>
   <p>
     <a class="anchor" href="/writing+speaking" aria-hidden="true">Writing+Speaking</a>
   </p>
-  <!-- <p>
-    <a class="anchor" href="/projects" aria-hidden="true">Projects</a>
-  </p> -->
   <p>
     <a class="anchor" href="/books" aria-hidden="true">Books</a>
   </p>  
@@ -86,7 +83,7 @@
 {% endif %}
 
 {% if page.meta == "projects" %}
-<script type="text/javascript" src="{{ site.baseurl }}/javascripts/vertical-timeline.js"></script>
+<!-- <script type="text/javascript" src="{{ site.baseurl }}/javascripts/vertical-timeline.js"></script> -->
 {% endif %}
 
 {% if page.meta == "books" %}

about.html

@@ -6,7 +6,20 @@
 ---
 <h2>About Me</h2>
 
-<p>Hi there, I'm a Software Engineer, Administrator & advocate for Jamaica Cultural Alliance, and a local farmer. Always questioning the status quo in search of better alternatives.</p>
+<p>Hi there, welcome to my multifaceted life as a:
+<ul>
+ <li>Husband & Father</li>
+<li>Software Engineer</li>
+<li>Mentor</li>
+<li>Quality Assurance Engineer</li>
+<li>Administrator</li>
+<li>Renewable Energy Advocate</li>
+<li>Open Source Advocate</li>
+<li>Jamaica Cultural Alliance member</li>
+<li><strike>Local Farmer</strike></li>
+</ul>
+
+I'm always questioning the status quo in search of better alternatives.</p>
 
 <p>Motto: "Love your life perfect your life, beautify all things in your life - Tecumseh"</p>
 
@@ -21,10 +34,10 @@ <h2>Interest Level</h2>
 <div id="body" class="chart_wrapper">
 	<div id="chart" style="position:top:10px; left:1px;" ></div>
 
-	<h2>Writing Skills</h2>
+	<!-- <h2>Writing Skills</h2>
 	<p>One of the main purpose of this blog is to improve my writing skills. This data will help me keep track of how far I've come and to identify areas of improvement going forward.</p>
 
-	<div id="writing_skills_chart"/>
+	<div id="writing_skills_chart"/> -->
 
 </div>
 

projects.html

@@ -7,39 +7,22 @@
 <h2>Projects</h2>
 
 <section class="projects">
+	<ul class="timeline">
+		{% for project in site.data.projects reversed %}
+			{% assign currentdate = project.date | date: "%Y" %}
+			{% assign postdate = project.date | date: "%Y-%m-%d" %}
 
-	<div class="project">
-		<div class="project-visual-wrapper">
-			<img class="image" src="/images/blog/the-healing-wonders-of-herbs-book.jpeg" alt="The name of item">
-		</div>
-		<div class="project-meta">
-			<p class="project-intro">This project is about</p>
-			<small class="project-date">Dec 12, 2015</small>
-
-		</div>
-	</div>
-
-	<div class="project">
-		<div class="project-visual-wrapper">
-			<img class="image" src="/images/blog/the-healing-wonders-of-herbs-book.jpeg" alt="The name of item">
-		</div>
-		<div class="project-meta">
-			<p class="project-intro">This project is about</p>
-			<small class="project-date">Dec 12, 2015</small>
-
-		</div>
-
-	</div>
-
-	<div class="project">
-		<div class="project-visual-wrapper">
-			<img class="image" src="/images/blog/the-healing-wonders-of-herbs-book.jpeg" alt="The name of item">
-		</div>
-		<div class="project-meta">
-			<p class="project-intro">This project is abouta doas foasn dfaosn dfaosdn fsado</p>
-			<small class="project-date">Dec 12, 2015</small>
-
-		</div>
-	</div>
 
+		  <li class="timeline-event">
+		  	<label class="timeline-event-icon"></label>
+		    <div class="timeline-event-copy">
+		      <p class="timeline-event-thumbnail">{{ project.duration }}</p>
+			  <img class="header-image" src="{{ project.header_image }}" alt="{{ project.name }}"/>
+		      <p class="project-headline"><strong>{{ project.name }}</strong></p>
+		      <p><span>{{ project.purpose }}</span></p>
+		      <p>{{ project.description }}</p>
+		    </div>
+		  </li>
+		{% endfor %}
+	</ul>  
 </section>

stylesheets/projects.css

@@ -1,39 +1,118 @@
-.projects{
-	padding: 0;
-	margin: 0;
-	position: relative;
 
-	display: -moz-box;
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: -webkit-flex;
-	display: flex;
-
-	-webkit-flex-flow: row wrap;
-	flex-flow: row wrap;
-	justify-content: space-around;
+/* Styling */
+.timeline {
+  margin: 4em auto;
+  position: relative;
+  max-width: 46em;
 }
 
-.project {
-	max-width: 230px;
-	max-height: 300px;
-	/*padding: 2%;*/
-	flex-grow: 1;
-	flex-basis: 1;
-	border: 1px solid;
+.timeline::before {
+	background-color: #2879d0;
+	content: '';
+	margin-left: -1px;
+	position: absolute;
+	top: 0;
+	left: 2em;
+	width: 2px;
+	height: 100%;
+}
 
-	/*display: flex;*/
+.timeline-event {
+  position: relative;
+  list-style-type: none;
+  overflow: hidden;
+  -webkit-transition: -webkit-transform 0.8s ease-in-out;
+  transition: transform 0.8s ease-in-out;
 }
 
+.timeline-event-icon {
+  -webkit-transition: -webkit-transform 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out;
 
-.project-visual-wrapper {
-	padding: 2%;
 }
-.project-visual-wrapper img.image {
-	border:none !important;
-	padding: none !important;
+
+.timeline-event:hover .timeline-event-icon {
+	-webkit-transform: rotate(-45deg);
+  	transform: rotate(-45deg);
 }
 
-.project-meta {
+.timeline-event-copy {
+  padding: 2em;
+  padding-left: 3em;
+  position: relative;
+  top: -1.875em;
+  left: 0.8em;
+  width: 80%;
+  /*border-left: 1px solid #2879d0;*/
+}  
+
+.timeline-event-copy:last {
+	padding-bottom: 0em;
+}
 
+.timeline-event-copy h3 {
+    font-size: 1.75em;
+  }
+
+.timeline-event-copy h4 {
+    font-size: 1.2em;
+    margin-bottom: 1.2em;
+  }
+
+.timeline-event-copy strong {
+    font-weight: 700;
+  }
+
+.timeline-event-copy p:not(.timeline-event-thumbnail) {
+    padding-bottom: 1.2em;
 }
+
+.timeline-event-icon {
+ /* @include transition(transform 0.2s ease-in);
+  @include rotate (45deg);
+ */ 
+  background-color: #2879d0;
+  outline: 15px solid white;
+  display: block;
+  margin: 0.5em 0.5em 0.5em -0.5em;
+  position: absolute;
+  top: 0;
+  left: 0.8em;
+  width: 1em;
+  height: 1em;
+  z-index: 10;
+}
+
+.timeline-event-thumbnail {
+  @include transition(box-shadow 0.5s ease-in 0.1s);
+  color: white;
+  font-size: 0.75em;
+
+  background-color: #2879d0;
+  @include box-shadow(inset 0 0 0 0em #ef795a);
+  display: inline-block;
+  margin-bottom: 1.2em;
+  padding: 0.25em 1em 0.2em 1em;
+}
+
+.header-image {
+	display: block;
+	border-bottom: 1px solid #2879d0;
+}
+
+.project-headline {
+	color: #2879d0;
+	padding-top: 1em;
+}
+
+/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
+@media only screen and (max-width: 479px) {
+	.timeline {
+		margin: 2em auto;
+		maxx-width: 70em;
+	}
+	.timeline-event-copy {
+		padding-left: 2em;
+		width: 80%;
+	}
+}