New Timeline interface

author: Navan Chauhan <navanchauhan@gmail.com> 2018-01-26 22:02:37 +0530
committer: GitHub <noreply@github.com> 2018-01-26 22:02:37 +0530
commit: 2c0a9fd5f1ccaf969acf80dd8b60e2224a0a1bfb (patch)
tree: 263f761f679d2fa07547ac3e267efd845da5687e
parent: 878f52542efda0ad25ff6496e36a6baa39225d0d (diff)
3 files changed, 307 insertions, 0 deletions
diff --git a/css/timeline.css b/css/timeline.css
new file mode 100644
index 0000000..20c6d1c
--- /dev/null
+++ b/css/timeline.css
@@ -0,0 +1,163 @@
+@import url("https://fonts.googleapis.com/css?family=Cardo|Pathway+Gothic+One");
+.timeline {
+  display: flex;
+  margin: 0 auto;
+  flex-wrap: wrap;
+  flex-direction: column;
+  max-width: 700px;
+  position: relative;
+}
+.timeline__content-title {
+  font-weight: normal;
+  font-size: 66px;
+  margin: -10px 0 0 0;
+  transition: .4s;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-family: "Pathway Gothic One", sans-serif;
+  color: #fff;
+}
+.timeline__content-desc {
+  margin: 0;
+  font-size: 15px;
+  box-sizing: border-box;
+  color: rgba(255, 255, 255, 0.7);
+  font-family: Cardo;
+  font-weight: normal;
+  line-height: 25px;
+}
+.timeline:before {
+  position: absolute;
+  left: 50%;
+  width: 2px;
+  height: 100%;
+  margin-left: -1px;
+  content: "";
+  background: rgba(255, 255, 255, 0.07);
+}
+@media only screen and (max-width: 767px) {
+  .timeline:before {
+    left: 40px;
+  }
+}
+.timeline-item {
+  padding: 40px 0;
+  opacity: .3;
+  filter: blur(2px);
+  transition: .5s;
+  box-sizing: border-box;
+  width: calc(50% - 40px);
+  display: flex;
+  position: relative;
+  transform: translateY(-80px);
+}
+.timeline-item:before {
+  content: attr(data-text);
+  letter-spacing: 3px;
+  width: 100%;
+  position: absolute;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+  font-family: "Pathway Gothic One", sans-serif;
+  border-left: 2px solid rgba(255, 255, 255, 0.5);
+  top: 70%;
+  margin-top: -5px;
+  padding-left: 15px;
+  opacity: 0;
+  right: calc(-100% - 56px);
+}
+.timeline-item:nth-child(even) {
+  align-self: flex-end;
+}
+.timeline-item:nth-child(even):before {
+  right: auto;
+  text-align: right;
+  left: calc(-100% - 56px);
+  padding-left: 0;
+  border-left: none;
+  border-right: 2px solid rgba(255, 255, 255, 0.5);
+  padding-right: 15px;
+}
+.timeline-item--active {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0px);
+}
+.timeline-item--active:before {
+  top: 50%;
+  transition: .3s all .2s;
+  opacity: 1;
+}
+.timeline-item--active .timeline__content-title {
+  margin: -50px 0 20px 0;
+}
+@media only screen and (max-width: 767px) {
+  .timeline-item {
+    align-self: baseline !important;
+    width: 100%;
+    padding: 0 30px 150px 80px;
+  }
+  .timeline-item:before {
+    left: 10px !important;
+    padding: 0 !important;
+    top: 50px;
+    text-align: center !important;
+    width: 60px;
+    border: none !important;
+  }
+  .timeline-item:last-child {
+    padding-bottom: 40px;
+  }
+}
+.timeline__img {
+  max-width: 100%;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
+}
+.timeline-container {
+  width: 100%;
+  position: relative;
+  padding: 80px 0;
+  transition: .3s ease 0s;
+  background-attachment: fixed;
+  background-size: cover;
+}
+.timeline-container:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(99, 99, 99, 0.8);
+  content: "";
+}
+.timeline-header {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 80px;
+  position: relative;
+}
+.timeline-header__title {
+  color: #fff;
+  font-size: 46px;
+  font-family: Cardo;
+  font-weight: normal;
+  margin: 0;
+}
+.timeline-header__subtitle {
+  color: rgba(255, 255, 255, 0.5);
+  font-family: "Pathway Gothic One", sans-serif;
+  font-size: 16px;
+  letter-spacing: 5px;
+  margin: 10px 0 0 0;
+  font-weight: normal;
+}
+
+.demo-footer {
+  padding: 60px 0;
+  text-align: center;
+}
+.demo-footer a {
+  color: #999;
+  display: inline-block;
+  font-family: Cardo;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0efb8ee
--- /dev/null
+++ b/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+
+<html lang="en" >
+
+<head>
+  <meta charset="UTF-8">
+  <title>Hi!</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
+
+
+      <link rel="stylesheet" href="css/timeline.css">
+
+
+
+</head>
+
+<body>
+
+<div class="timeline-container" id="timeline-1">
+  <div class="timeline-header">
+    <h2 class="timeline-header__title">Hi! I am Navan Chauhan</h2>
+    <h3 class="timeline-header__subtitle">LET ME TELL YOU MORE ABOUT MYSELF</h3>
+  </div>
+  <div class="timeline">
+    <div class="timeline-item" data-text="BIRTH">
+      <div class="timeline__content"><img class="timeline__img" src="https://scontent.fdel4-1.fna.fbcdn.net/v/t1.0-0/p206x206/297865_165857010155103_7383854_n.jpg?oh=3a8554c81190468c9c46dd95c9bbecbc&oe=5B2441D3"/>
+        <h2 class="timeline__content-title">2003</h2>
+        <p class="timeline__content-desc">I was born on the 21<sup>st</sup> of December in 2003</p>
+      </div>
+    </div>
+    <div class="timeline-item" data-text="THE JOURNEY BEGINS">
+      <div class="timeline__content"><img class="timeline__img" src="https://scontent.fdel4-1.fna.fbcdn.net/v/t1.0-0/p206x206/561252_352087498198719_771324434_n.jpg?oh=d4fc8a57e782adf0ca26ba39afcdfe4c&oe=5AF229D3"/>
+        <h2 class="timeline__content-title">2011</h2>
+        <p class="timeline__content-desc">I first learnt C, which was then followed by HTML. I published my first website ClocksandClocks (sadly, it no longer remains anywhere not even in the Internet Archive)</p>
+      </div>
+    </div>
+    <div class="timeline-item" data-text="THE EDUCATION">
+      <div class="timeline__content"><img class="timeline__img" src="https://scontent.fdel4-1.fna.fbcdn.net/v/t31.0-8/326711_384790581595077_1208772753_o.jpg?oh=93387d43ffdc42e55d2e0a3254383ba6&oe=5AE0ACE9"/>
+        <h2 class="timeline__content-title">2012</h2>
+        <p class="timeline__content-desc">I Learnt CSS and DoSed my previous website</p>
+      </div>
+    </div>
+    <div class="timeline-item" data-text="THE EDUCATION">
+      <div class="timeline__content"><img class="timeline__img" src="https://scontent.fdel4-1.fna.fbcdn.net/v/t1.0-9/1385862_542919445782189_1130917142_n.jpg?oh=452bc94a710d31eb3768ccbdf01f83f8&oe=5AF49141"/>
+        <h2 class="timeline__content-title">2013</h2>
+        <p class="timeline__content-desc">Installed Ubuntu 9.04. (I was just 4 years late)</p>
+      </div>
+    </div>
+    <div class="timeline-item" data-text="THE EDUCATION">
+      <div class="timeline__content"><img class="timeline__img" src="https://scontent.fdel4-1.fna.fbcdn.net/v/t1.0-0/r270/p206x206/10455579_667403990000400_1871567683849640327_n.jpg?oh=32e431fde855e1ad355a42ebf8510956&oe=5B21049F"/>
+        <h2 class="timeline__content-title">2013-16</h2>
+        <p class="timeline__content-desc">Started my journey with Android. Bricked 1-2 Phones, rooted 2 phones and made 3-4 Custom ROMs</p>
+      </div>
+    </div>
+    <div class="timeline-item" data-text="THE EDUCATION">
+      <div class="timeline__content"><img class="timeline__img" src="https://scontent.fdel4-1.fna.fbcdn.net/v/t1.0-0/p206x206/22196502_1680321968708592_5684202810002422450_n.jpg?oh=a9ec205185d99ca71aa9423614b385d3&oe=5B1F7C68"/>
+        <h2 class="timeline__content-title">2017</h2>
+        <p class="timeline__content-desc">Completed a Cyber Security Course and got into Open-Source Projects</p>
+      </div>
+    </div>
+    <div class="timeline-item" data-text="REIGN OF GITHUB">
+      <div class="timeline__content"><img class="timeline__img" src="https://lh3.googleusercontent.com/GfZ3EoTYUmrbO2-3MovNIdv-oSnMBLCT1EYtR_-uguiCA0TyG-5UPU9AOzzQAIX83UC3IUJvqnv18528WbG2KtFuQerCXJ3HhoAIf324Mj5_BFD_ugYG8tgUuh6rqZRJzpJ8CegAkNMLPFg0xmXM1w2kPsnqnrzLKywMRx4CbdJRNh8EatnG-QUCFyA4yS29T6T2GQ8RIsjPgdlu3jz_-mv2n-F_QqNnpiZsxTqXJQecC-Yjlthxv77PZ4IBJ6BEFcjNuw6GACup0wR6Hw2AfzceZ0j3vLE6DkNeXuS7zGQIZs_YTj41aMaF_-wCgH5_pD2n91emun-LHmfWDa5NjQUsklQVGHSP-YEcRzxafsz209LOVk4y9_oxSF5z2OW5a2R2XPDuIl63PfBSlOUKq5jrXzgazc5r1vbkDV1HFf4rTAWXE2OauRVAMUyx3UYDRrPMLCevDoa8rLtM9jSe7qSXls9n4r44wHPPhfVQmd3VcS4I7HbjivathKIdcayUpQhTQBEmeyoHXvY5epyP58nqpZaupqIT1QiS80IX1mTXQyL93mJr8YxbxRXbHKQEp6nM4dAyQ1YrX70fWOeOujAVQ_0WJH1p5A17A7Y=w1102-h1468-no"/>
+        <h2 class="timeline__content-title">2017</h2>
+        <p class="timeline__content-desc">Went on a coding spree and created around 23-25 Repositories in 2017</p>
+      </div>
+    </div>
+
+    <div class="timeline-item" data-text="THE FUTURE">
+      <div class="timeline__content"><img class="timeline__img" src="https://lh3.googleusercontent.com/WtTMHH4lV4cFScAKtjtUg7TdMY6W4iS1YTA3_yNkF__e8rT8piiFPk-S0_6y8WpZEr9HR85ganxy6G0S9_cahWOeixkKYqC-QRFJpnJ6sV_i6GmYLt0RX6w5niv5EQVXWVJMQ9aFzFWBgo7pQ9B8xL2rZ14mkEgItAFpTWpnPQQPhTX9-ymb9MiP0jcQoWOLBQCb3Miay2JWO3DYxsVVWxaR-IgpU2fEAExinPAy9HBucpelhIAdoo33CFwjSizIRjoTC94ZfdxrtGuw7A6JFPNZAf_oftj6IFmomhE8eGXSvXrTWpfN7MCh7IbJuLmHqA3aLwH3loka062KEimeUvRjYOG4g9kbKQywHPXFQKyGf2NIUvuelVsSCp9KwkD8CDHAf7cp4WreyksyIy9IO2JakUYX_g0FXiDAKWxB0SPUpC5HaudCVHw2fJ4ecwWfFDApx7G_CSrqUOqN8L4LcnombUUMu9JRrJBgzx_BBw75QVeuLpFt954lDY-thi76ItnzwTEnfYYXYPU2s2HokWv8atubEVE--8j85SQHxm-A6X7ndNLVElICjVZh-C9XhuLgGTagnt2B8k-msVDzOGdm55SLx6cGRpnlXpk=w980-h1468-no"/>
+        <h2 class="timeline__content-title">2018-?</h2>
+        <p class="timeline__content-desc">Freelancing. Specialising in Bash, Python and Website-Developement while also knowing enough about C++, C, Ruby and Perl</p>
+      </div>
+    </div>
+  </div>
+</div>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
+
+
+
+    <script  src="js/timeline.js"></script>
+
+
+
+
+</body>
+
+</html>
diff --git a/js/timeline.js b/js/timeline.js
new file mode 100644
index 0000000..5f5aa7c
--- /dev/null
+++ b/js/timeline.js
@@ -0,0 +1,56 @@
+(function($) {
+  $.fn.timeline = function() {
+    var selectors = {
+      id: $(this),
+      item: $(this).find(".timeline-item"),
+      activeClass: "timeline-item--active",
+      img: ".timeline__img"
+    };
+    selectors.item.eq(0).addClass(selectors.activeClass);
+    selectors.id.css(
+      "background-image",
+      "url(" +
+        selectors.item
+          .first()
+          .find(selectors.img)
+          .attr("src") +
+        ")"
+    );
+    var itemLength = selectors.item.length;
+    $(window).scroll(function() {
+      var max, min;
+      var pos = $(this).scrollTop();
+      selectors.item.each(function(i) {
+        min = $(this).offset().top;
+        max = $(this).height() + $(this).offset().top;
+        var that = $(this);
+        if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
+          selectors.item.removeClass(selectors.activeClass);
+          selectors.id.css(
+            "background-image",
+            "url(" +
+              selectors.item
+                .last()
+                .find(selectors.img)
+                .attr("src") +
+              ")"
+          );
+          selectors.item.last().addClass(selectors.activeClass);
+        } else if (pos <= max - 40 && pos >= min) {
+          selectors.id.css(
+            "background-image",
+            "url(" +
+              $(this)
+                .find(selectors.img)
+                .attr("src") +
+              ")"
+          );
+          selectors.item.removeClass(selectors.activeClass);
+          $(this).addClass(selectors.activeClass);
+        }
+      });
+    });
+  };
+})(jQuery);
+
+$("#timeline-1").timeline();
+\ No newline at end of file
author	Navan Chauhan <navanchauhan@gmail.com>	2018-01-26 22:02:37 +0530
committer	GitHub <noreply@github.com>	2018-01-26 22:02:37 +0530
commit	2c0a9fd5f1ccaf969acf80dd8b60e2224a0a1bfb (patch)
tree	263f761f679d2fa07547ac3e267efd845da5687e
parent	878f52542efda0ad25ff6496e36a6baa39225d0d (diff)