Added timeline - statred entering entries...

js1972 · May 3, 2016 · 3707447 · 3707447
1 parent 6143362
commit 3707447
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 0 deletions.
diff --git a/webapp/css/style.css b/webapp/css/style.css
@@ -103,3 +103,86 @@ footer .glyphicon:hover {
 .svgico {
   display: inline-block;
 }
+
+#timeline {
+  font-size: 20px;
+  font-weight: 300;
+}
+
+@media (min-width: 768px) {
+  .timelineitem:nth-child(odd) {
+    margin-left: 50%;
+    border-left: 5px solid #333;
+    text-align: left;
+  }
+  .timelineitem:nth-child(even) {
+    margin-right: 50%;
+    margin-left: 5px;
+    border-right: 5px solid #333;
+    text-align: right;
+  }
+  .timelineitem {
+    width: 50%;
+    position: relative;
+    padding: 20px;
+  }
+  .timelineitem:nth-child(odd):before {
+   left: -8px;
+  }
+  .timelineitem:nth-child(even):before {
+    right: -8px;
+  }
+}
+
+.timelineitem:before {
+  width: 11px;
+  height: 11px;
+  background: #333;
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  border-radius: 5px;
+}
+
+@media (max-width: 768px) {
+  .timelineitem {
+    border-left: 5px solid #333;
+    text-align: left;
+    margin-left: 10px;
+    padding: 5px;
+    position: relative;
+  }
+  .timelineitem:before {
+    left: -8px;
+  }
+}
+
+.tdate {
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: -5px;
+  color: rgb(132,0,0);
+}
+.ttitle {
+  font-size: 20px;
+  font-weight: 400;
+}
+.tdesc {
+  font-size: 18px;
+  font-weight: 300;
+}
+@media (max-width: 768px) {
+  .tdate {
+    font-size: 16px;
+  }
+  .ttitle {
+    font-size: 16px;
+  }
+  .tdesc {
+    font-size: 16px;
+  }
+}
+.thigh {
+  color: #070;
+}
diff --git a/webapp/index.html b/webapp/index.html
@@ -75,6 +75,45 @@ <h3>Software Engineer - SAP technologies</h3>
                 </div>
             </div>
         </div>
+
+        <!-- timeline -->
+        <div class="container">
+            <div id="timeline">
+                <div class="timelineitem">
+                    <div class="tdate">Nov 2014 - Now</div>
+                    <div class="ttitle">Synergy - Electricity Generation and Retail Corporation - WA</div>
+                    <div class="tdesc">Fiori / SAPUI5 / Gateway Architecture & Development</div>
+                </div>
+                <div class="timelineitem">
+                    <div class="tdate">2011 - 2014</div>
+                    <div class="ttitle">INPEX</div>
+                    <div class="tdesc">Large-Scale Supervised <span class="thigh">Deep Learning</span> for Videos.</div>
+                </div>
+                <div class="timelineitem">
+                    <div class="tdate">2011-</div>
+                    <div class="ttitle">BHP</div>
+                    <div class="tdesc"><span class="thigh">Deep Learning</span>, Computer Vision, Natural Language Processing. My adviser is <a href="http://vision.stanford.edu/">Fei-Fei Li.</a></div>
+                </div>
+                <div class="timelineitem">
+                    <div class="tdate">Summer 2011</div>
+                    <div class="ttitle">CBH</div>
+                    <div class="tdesc">Large-Scale Unsupervised <span class="thigh">Deep Learning</span> for Videos.</div>
+                </div>
+                <div class="timelineitem">
+                    <div class="tdate">2009-2011</div>
+                    <div class="ttitle">University of British Columbia: Master's Degree</div>
+                    <div class="tdesc">I worked with <a href="https://www.cs.ubc.ca/~van/">Michiel van de Panne</a> on learning Compositional Controllers for Physically-simulated Articulate Figures.</div>
+                </div>
+                <div class="timelineitem">
+                    <div class="tdate">2005-2009
+                    </div>
+                    <div class="ttitle">Woodside</div>
+                    <div class="tdesc">Double major in <span class="thigh">Computer Science and Physics</span>.</div>
+                </div>
+            </div>
+        </div>
+        <!-- /timeline -->
+
     </div>
     <!-- /second section -->