initial commit

6 files changed, 942 insertions, 0 deletions

diff --git a/static/css/highlight.css b/static/css/highlight.css
new file mode 100644
index 0000000..04c4204
--- /dev/null
+++ b/static/css/highlight.css
@@ -0,0 +1 @@
+.hljs-comment,.hljs-quote{color:#8e908c}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#c82829}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#f5871f}.hljs-attribute{color:#eab700}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#718c00}.hljs-title,.hljs-section{color:#4271ae}.hljs-keyword,.hljs-selector-tag{color:#8959a8}.hljs{display:block;overflow-x:auto;background:white;color:#4d4d4c;padding:0.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
new file mode 100644
index 0000000..f4171cd
--- /dev/null
+++ b/static/css/styles.css
@@ -0,0 +1,438 @@
+a:hover {
+  text-decoration: none;
+}
+
+.sidebar {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  right: 552px;
+  bottom: 0px;
+  z-index: 1;
+  width: 40%;
+  height: 100%;
+}
+
+.sidebar .main-info * {
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  opacity: 0;
+  -webkit-transform: translateX(-40px);
+          transform: translateX(-40px);
+}
+
+.sidebar .main-info *.bs {
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  opacity: 1;
+}
+
+.main-content {
+  position: relative;
+  overflow: visible;
+  width: 60%;
+  max-width: 1200px;
+  margin-left: 40%;
+  float: none;
+  clear: none;
+}
+
+.main-content:after {
+  position: absolute;
+  content: '';
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  -webkit-transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);
+  transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);
+  background-color: #fff;
+}
+
+.main-content.active:after {
+  position: absolute;
+  content: '';
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+  background-color: #fff;
+}
+
+article {
+  font-size: 18px !important;
+  line-height: 1.8rem;
+}
+
+article p {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+article img {
+  max-width: 100%;
+}
+
+article code {
+  background-color: #fbfbfb !important;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+article mark {
+  background-color: white;
+  color: #c80000;
+}
+
+.heading,
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Montserrat', sans-serif !important;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.heading {
+  font-size: 38px;
+}
+
+.highlight {
+  background-color: #ededed;
+  padding: 4px 8px;
+  /*display: inline-block;*/
+}
+
+.form-control {
+  border: none;
+  background-color: #e8ebef !important;
+}
+
+.primaryMenu {
+  -webkit-transform: translateY(-90px);
+          transform: translateY(-90px);
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
+  position: absolute;
+  margin-left: 35px;
+}
+
+.primaryMenu.active {
+  -webkit-transform: translateY(0px);
+          transform: translateY(0px);
+}
+
+.secondaryMenu {
+  position: absolute;
+  widows: 100%;
+  -webkit-transform: translateY(-90px);
+          transform: translateY(-90px);
+  margin-left: 25px;
+  padding-left: 0;
+  z-index: 2;
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
+}
+
+.secondaryMenu.active {
+  -webkit-transform: translateY(0px);
+          transform: translateY(0px);
+}
+
+.btn {
+  border-radius: 6px;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.btn.btn-primary {
+  background-color: #31E7B6;
+  border-color: #31E7B6;
+}
+
+.btn.btn-primary:hover {
+  background-color: #32d2a7;
+  border-color: #32d2a7;
+}
+
+.btn.btn-primary:active {
+  -webkit-transform: scale(0.95);
+          transform: scale(0.95);
+  background-color: #32d2a7;
+  border-color: #32d2a7;
+}
+
+.btn-dark-faded {
+  font-weight: 300;
+  font-family: 'Montserrat', sans-serif !important;
+  /*text-transform: uppercase;*/
+  background-color: rgba(0, 0, 0, 0.07);
+  color: black;
+}
+
+.social:hover a {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.social a {
+  color: black;
+  font-size: 28px;
+  margin-right: 12px;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.social a:hover {
+  color: black;
+}
+
+.social a:hover i {
+  -webkit-transform: scale(1.3);
+          transform: scale(1.3);
+}
+
+section {
+  padding: 10%;
+}
+
+section .heading {
+  margin-bottom: 30px;
+}
+
+section.yellow {
+  background-color: #ffd061;
+  color: #000 !important;
+}
+
+section.yellow .progress .bg-blue {
+  background-color: #c19c43;
+}
+
+section.voilet {
+  background-color: #4768FD;
+}
+
+section.blue {
+  background-color: #cadfdf;
+}
+
+section.orange {
+  color: #fff;
+  background-color: #fb7833;
+}
+
+section.green {
+  background-color: #aaffa7;
+}
+
+section.skin {
+  background-color: #fdead2;
+}
+
+section.aqua {
+  background-color: #00fefe;
+  color: #000 !important;
+}
+
+section.pink {
+  background-color: #fff1f1;
+}
+
+.progress {
+  height: 0.6rem;
+  background-color: #fff;
+}
+
+.progress .bg-blue {
+  background-color: #2e96a5;
+}
+
+.card {
+  border-radius: 6px;
+  border: none;
+}
+
+#timeline {
+  width: 100%;
+  position: relative;
+  -webkit-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+}
+
+#timeline:before {
+  content: "";
+  width: 3px;
+  height: 100%;
+  background: #000;
+  left: 50%;
+  -webkit-transform: translate(-50%);
+          transform: translate(-50%);
+  top: 0;
+  position: absolute;
+}
+
+#timeline:after {
+  content: "";
+  clear: both;
+  display: table;
+  width: 100%;
+}
+
+#timeline .timeline-item {
+  margin-bottom: 50px;
+  position: relative;
+  text-align: right;
+}
+
+#timeline .timeline-item .timeline-icon {
+  background: #000;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  overflow: hidden;
+  margin-left: -10px;
+  border-radius: 50%;
+}
+
+#timeline .timeline-item .timeline-content {
+  width: 45%;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+#timeline .timeline-item .timeline-content p {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+#timeline .timeline-item .timeline-content .date {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  border-radius: 3px;
+}
+
+#timeline .timeline-item .timeline-content.right {
+  float: right;
+  text-align: left;
+}
+
+.pagination .page-item.active .page-link {
+  background-color: black;
+  border-color: black !important;
+  color: #fff !important;
+}
+
+.pagination .page-link {
+  border: none;
+  color: #000 !important;
+}
+
+.skill {
+  margin-bottom: 20px;
+}
+
+@media (max-width: 767px) {
+  .sidebar {
+    position: static;
+    width: 100%;
+    padding-left: 65px;
+  }
+  .main-content {
+    width: 100%;
+    margin-left: 0%;
+  }
+  #timeline {
+    margin: 30px;
+    padding: 0px;
+    width: 90%;
+  }
+  #timeline:before {
+    left: 0;
+  }
+  #timeline .timeline-item .timeline-content {
+    width: 90%;
+    float: right;
+    text-align: left;
+  }
+  #timeline .timeline-item .timeline-content:before,
+  #timeline .timeline-item .timeline-content .right:before {
+    left: 10%;
+    margin-left: -6px;
+    border-left: 0;
+    border-right: 7px solid #ee4d4d;
+  }
+  #timeline .timeline-item .timeline-icon {
+    left: 0;
+  }
+}
+
+.hamburger-menu,
+.hamburger-menu:after,
+.hamburger-menu:before {
+  width: 24px;
+  height: 4px;
+}
+
+.hamburger-menu {
+  position: relative;
+  -webkit-transform: translateY(8px);
+          transform: translateY(8px);
+  background: black;
+  -webkit-transition: all 0ms 300ms;
+  transition: all 0ms 300ms;
+}
+
+.hamburger-menu.animate {
+  background: rgba(255, 255, 255, 0);
+}
+
+.hamburger-menu:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  background: black;
+  -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.hamburger-menu:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 8px;
+  background: black;
+  -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.hamburger-menu.animate:after {
+  top: 0;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.hamburger-menu.animate:before {
+  bottom: 0;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+  -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
+  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
diff --git a/static/css/styles.css.map b/static/css/styles.css.map
new file mode 100644
index 0000000..53994ed
--- /dev/null
+++ b/static/css/styles.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "styles.scss"
+    ],
+    "names": [],
+    "file": "styles.css"
+}
\ No newline at end of file
diff --git a/static/css/styles.scss b/static/css/styles.scss
new file mode 100644
index 0000000..b2bb78a
--- /dev/null
+++ b/static/css/styles.scss
@@ -0,0 +1,439 @@
+a{
+  &:hover{
+    text-decoration: none;
+  }
+}
+.sidebar{
+	position: fixed;
+  left: 0px;
+  top: 0px;
+  
+  right: 552px;
+  bottom: 0px;
+  z-index: 1;
+  width: 40%;
+  
+  height: 100%;
+  
+
+  .main-info *{
+    transition: all 0.3s ease;
+    opacity: 0;
+    transform: translateX(-40px);
+
+    &.bs{
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+
+  }
+}
+
+.main-content{
+  position: relative;
+  overflow: visible;
+  width: 60%;
+  max-width: 1200px;
+  margin-left: 40%;
+  float: none;
+  clear: none;
+
+  &:after{
+    position: absolute;
+    content: '';
+    top: 0; bottom: 0;
+    left: 0; right: 0;
+    transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);;
+    background-color: #fff;
+  }
+
+  &.active{
+    &:after{
+      position: absolute;
+      content: '';
+      top: 0; bottom: 0;
+      left: 0; right: 0;
+      transform: translateX(100%);
+      background-color: #fff;
+    }
+  }
+}
+
+
+
+article{
+  font-size: 18px !important;
+  line-height: 1.8rem;
+  p{
+    color: rgba(0,0,0,0.8);
+  }
+
+  img{
+    max-width: 100%;
+  }
+
+  code{
+    background-color: #fbfbfb !important;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  mark{
+    background-color: white;
+    color: rgb(200,0,0);
+  }
+
+}
+
+.heading,
+h1,h2,h3,h4,h5,h6{
+
+	font-family: 'Montserrat', sans-serif !important;
+	font-weight: 800;
+	text-transform: uppercase;
+	
+}
+
+.heading{
+  font-size: 38px;
+}
+
+.highlight{
+	background-color: #ededed;
+	padding: 4px 8px;
+	/*display: inline-block;*/
+}
+
+.form-control{
+  border: none;
+  background-color: #e8ebef !important; 
+}
+
+.primaryMenu{
+  // margin-top: -90px;
+  transform: translateY(-90px);
+  transition: transform 0.3s ease;
+  position: absolute;
+  margin-left: 35px;
+
+  &.active{
+    transform: translateY(0px);
+  }
+}
+
+.secondaryMenu{
+  position: absolute;
+  widows: 100%;
+  // margin-top: -90px;
+  transform: translateY(-90px);
+  margin-left: 25px;
+  padding-left: 0;
+  z-index: 2;
+  transition: transform 0.3s ease;
+
+  &.active{
+    // margin-top: 0px;
+    transform: translateY(0px);
+  }
+}
+
+// styles for buttons
+.btn{
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  
+  &.btn-primary{
+    background-color : #31E7B6;
+    border-color: #31E7B6;
+
+    &:hover{
+      background-color : #32d2a7;
+      border-color: #32d2a7;
+    }
+
+    &:active{
+      transform: scale(0.95);
+      background-color : #32d2a7;
+      border-color: #32d2a7;
+    }
+  }
+}
+
+.btn-dark-faded{
+  font-weight: 300;
+  font-family: 'Montserrat', sans-serif !important;
+  /*text-transform: uppercase;*/
+  background-color: rgba(0,0,0,0.07);
+  color: black;
+}
+// Styles for social icons
+.social{
+  &:hover{
+    a{
+      color: rgba(0,0,0,0.4);
+    }
+  }
+
+  a{
+    color: rgba(0,0,0,1);
+    font-size: 28px;
+    margin-right: 12px;
+    transition: all 0.3s ease;
+
+    &:hover{
+      color: rgba(0,0,0,1);
+      i{
+        transform: scale(1.3);
+      }
+    }
+  }
+}
+
+section{
+  padding: 10%;
+  
+  .heading{
+    margin-bottom: 30px;
+  }
+
+  &.yellow{
+    background-color: #ffd061;
+    color: #000 !important;
+
+    .progress .bg-blue{
+      background-color: #c19c43;
+    }
+  }
+  
+  &.voilet{
+    background-color: #4768FD;
+  }
+  
+  &.blue{
+    background-color: #cadfdf;
+  }
+
+  &.orange{
+    color: #fff;
+    background-color: #fb7833;
+  }
+
+  &.green{
+    background-color: #aaffa7;
+  }
+
+  &.skin{
+    background-color: #fdead2;
+  }
+
+  &.aqua{
+    background-color: #00fefe;
+    color: #000 !important;
+  }
+
+  &.pink{
+    background-color: #fff1f1;
+  }
+}
+
+// styles for progress bar
+.progress{
+	height: 0.6rem;
+  background-color: #fff;
+  
+  .bg-blue{
+    background-color: #2e96a5;
+  }
+}
+
+.card{
+  border-radius: 6px;
+  border: none;
+}
+
+// styles for timeline
+
+#timeline {
+  width: 100%;
+  
+  position: relative;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  -ms-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+
+  &:before {
+    content: "";
+    width: 3px;
+    height: 100%;
+    background: #000;
+    left: 50%;
+    transform: translate(-50%);
+    top: 0;
+    position: absolute;
+  }
+  &:after {
+    content: "";
+    clear: both;
+    display: table;
+    width: 100%;
+  }
+
+  .timeline-item {
+    margin-bottom: 50px;
+    position: relative;
+    text-align: right;
+
+    .timeline-icon {
+      background: #000;
+      width: 20px;
+      height: 20px;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      overflow: hidden;
+      margin-left: -10px;
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      -ms-border-radius: 50%;
+      border-radius: 50%;
+    }
+
+    .timeline-content {
+      width: 45%;
+      -webkit-transition: all 0.3s ease;
+      -moz-transition: all 0.3s ease;
+      -ms-transition: all 0.3s ease;
+      transition: all 0.3s ease;
+
+      p {
+        color: rgba(0,0,0,0.7);
+      }
+
+      .date{
+        display: inline-block;
+        background-color: rgba(0,0,0,0.1);
+        padding: 10px;
+        border-radius: 3px;
+      }
+
+      &.right {
+        float: right;
+        text-align: left;
+      }
+    }
+  }
+}
+
+.pagination{
+  .page-item.active{
+    .page-link{
+      background-color: black;
+      border-color: black !important;
+      color: #fff !important;
+    }
+  }
+  .page-link{
+    border: none;
+    color: #000 !important;
+  }
+}
+
+.skill{
+	margin-bottom: 20px;
+}
+
+@media (max-width: 767px){
+	.sidebar {
+    position: static;
+    width: 100%;
+    padding-left: 65px;
+	}
+	.main-content{
+		width: 100%;
+    margin-left: 0%;
+	}
+
+	#timeline {
+    margin: 30px;
+    padding: 0px;
+    width: 90%;
+
+    &:before {
+      left: 0;
+    }
+
+    .timeline-item{
+      .timeline-content {
+        width: 90%;
+        float: right;
+        text-align: left;
+
+        &:before,
+        .right:before{
+          left: 10%;
+          margin-left: -6px;
+          border-left: 0;
+          border-right: 7px solid #ee4d4d;
+        }
+      }
+      .timeline-icon {
+        left: 0;
+      }
+    }
+  }
+}
+
+$bar-width: 24px;
+$bar-height: 4px;
+$bar-spacing: 8px;
+
+.hamburger-menu,
+.hamburger-menu:after,
+.hamburger-menu:before {
+  width: $bar-width;
+	height: $bar-height;
+}
+
+.hamburger-menu {
+	position: relative;
+	transform: translateY($bar-spacing);
+	background: rgba(0, 0, 0, 1);
+	transition: all 0ms 300ms;
+  
+  &.animate {
+    background: rgba(255, 255, 255, 0); 
+  }
+}
+
+.hamburger-menu:before {
+	content: "";
+	position: absolute;
+	left: 0;
+	bottom: $bar-spacing;
+	background: rgba(0, 0, 0, 1);
+	transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.hamburger-menu:after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: $bar-spacing;
+	background: rgba(0, 0, 0, 1);
+	transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.hamburger-menu.animate:after {
+	top: 0;
+	transform: rotate(45deg);
+	transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);;
+}
+
+.hamburger-menu.animate:before {
+	bottom: 0;
+	transform: rotate(-45deg);
+	transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);;
+}
\ No newline at end of file
diff --git a/static/images/avatar.jpg b/static/images/avatar.jpg
new file mode 100644
index 0000000..0645e6b
--- /dev/null
+++ b/static/images/avatar.jpg
diff --git a/static/js/main.js b/static/js/main.js
new file mode 100644
index 0000000..6b23157
--- /dev/null
+++ b/static/js/main.js
@@ -0,0 +1,55 @@
+/*
+*=================================
+* Hugo UILite Portfolio v0.6
+*=================================
+*
+* Free version https://uicard.io/products/<product_slug>
+* Pro version https://uicard.io/products/<product_slug>
+* Free Demo https://demo.uicard.io/hugo-uilite-free/
+*
+* Coded By UICardio
+*
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*
+*/
+
+
+let menuBtn = $("#menuBar");
+
+menuBtn.click(function(){
+
+  $('.hamburger-menu').toggleClass('animate');
+
+  if($(".secondaryMenu").hasClass("active")){
+    
+    $(".secondaryMenu").removeClass("active");
+    setTimeout(function(){
+      $(".primaryMenu").addClass("active");
+    },400);
+
+    
+  } else {
+    $(".primaryMenu").removeClass("active");
+  
+    setTimeout(function(){
+      $(".secondaryMenu").addClass("active");
+    },350);
+  }
+});
+
+$(document).ready(function(){
+  var elements = $(".sidebar > .main-info *");
+
+  console.log(elements);
+
+  for(let i = 0; i < elements.length; i++){
+    setTimeout(function(){
+      $(elements[i].tagName).addClass("bs");
+    }, (400 * i) - 90 * i );
+  }
+
+  setTimeout(function(){
+    $(".main-content").addClass("active");
+  }, 1900);
+
+});
\ No newline at end of file