Move portfolio to the local repository

static/portfolio/css/timeline.css

@@ -0,0 +1,119 @@
+#timeline {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  background: url(../img/timelinebg.webp);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: white;
+}
+
+.checkpoint {
+  max-width: 34em;
+  margin: 0;
+  padding: 1rem;
+}
+
+.checkpoint:first-child {
+  margin-top: 2rem;
+}
+
+.checkpoint p {
+  line-height: 27px;
+  color: #ccc;
+  background: #00000073;
+  border-radius: 0.6rem;
+  margin-top: 1rem;
+  margin-bottom: 0;
+  padding: 1rem;
+  text-decoration: none;
+}
+
+.checkpoint .timeline-item {
+  position: relative;
+  width: 100%;
+  background-color: #ffffff54;
+  border-radius: 1.2rem;
+  padding: 1rem;
+  margin: 0;
+  -webkit-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
+  box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
+}
+
+.checkpoint:nth-child(odd) {
+  border-left: 3px solid #ffffff64;
+  padding-left: 3em;
+  transform: translateX(17em);
+}
+
+.checkpoint:nth-child(even) {
+  border-right: 3px solid #ffffff64;
+  padding-right: 3em;
+  transform: translateX(-16.83em);
+}
+
+.checkpoint:nth-child(even)::before,
+.checkpoint:nth-child(odd)::before {
+  content: "";
+  background: #ffffff64;
+  width: 3em;
+  height: 3px;
+  position: absolute;
+  top: 50%;
+}
+
+.checkpoint:nth-child(even)::before {
+  right: 0;
+}
+
+.checkpoint:nth-child(odd)::before {
+  left: 0;
+}
+
+.checkpoint-item-bubble {
+  height: 2rem;
+  background: rgba(0, 0, 0, 0.298);
+  border-radius: 99rem;
+  text-align: center;
+  padding: 0.4rem 0;
+  color: white;
+  z-index: 9;
+}
+
+@media screen and (max-width: 1150px) {
+  .timeline {
+    width: 80vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .timeline .checkpoint {
+    width: 100%;
+    transform: none;
+    padding-left: 0;
+    padding-right: 0;
+    border: none;
+    transform: translateX(0);
+  }
+
+  .timeline .checkpoint::before {
+    height: 2em;
+    width: 3px;
+    top: -1em;
+    left: 50%;
+  }
+
+  .checkpoint:first-child {
+    margin-top: 0;
+  }
+
+  .checkpoint:first-child::before {
+    display: none;
+  }
+}