portfolyou-jekyll-theme 2.2.0

data/_sass/_404.scss

@@ -0,0 +1,257 @@
+.cls-1 {
+  fill: #ffc541;
+}
+
+.cls-2 {
+  fill: #4e4066;
+}
+
+.cls-3 {
+  fill: #6f5b92;
+}
+
+.cls-4 {
+  fill: #f78d5e;
+}
+
+.cls-5 {
+  fill: #fa976c;
+}
+
+.cls-6 {
+  fill: #b65c32;
+  opacity: 0.6;
+}
+
+.cls-7 {
+  fill: #b65c32;
+  opacity: 0.4;
+}
+
+.cls-8 {
+  fill: #b65c32;
+}
+
+.cls-9 {
+  fill: #f4b73b;
+}
+
+.cls-10 {
+  opacity: 0.6;
+}
+
+.cls-11 {
+  fill: #f9c358;
+}
+
+.cls-12 {
+  fill: #9b462c;
+}
+
+.cls-13 {
+  fill: #aa512e;
+}
+
+.cls-14 {
+  fill: #7d6aa5;
+}
+
+/* animations */
+
+.wheel {
+  animation: wheel-rotate 6s ease infinite;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+@keyframes wheel-rotate {
+  50% {
+    transform: rotate(360deg);
+    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  }
+  100% {
+    transform: rotate(960deg);
+  }
+}
+
+.clock-hand-1 {
+  animation: clock-rotate 3s linear infinite;
+  transform-origin: bottom;
+  transform-box: fill-box;
+}
+
+.clock-hand-2 {
+  animation: clock-rotate 6s linear infinite;
+  transform-origin: bottom;
+  transform-box: fill-box;
+}
+
+@keyframes clock-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#box-top {
+  animation: box-top-anim 2s linear infinite;
+  transform-origin: right top;
+  transform-box: fill-box;
+}
+
+@keyframes box-top-anim {
+  50% {
+    transform: rotate(-5deg);
+  }
+}
+
+#umbrella {
+  animation: umbrella-anim 6s linear infinite;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+@keyframes umbrella-anim {
+  25% {
+    transform: translateY(10px) rotate(5deg);
+  }
+  75% {
+    transform: rotate(-5deg);
+  }
+}
+
+#cup {
+  animation: cup-rotate 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
+  transform-origin: top left;
+  transform-box: fill-box;
+}
+
+@keyframes cup-rotate {
+  50% {
+    transform: rotate(-5deg);
+  }
+}
+
+#pillow {
+  animation: pillow-anim 3s linear infinite;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+@keyframes pillow-anim {
+  25% {
+    transform: rotate(10deg) translateY(5px);
+  }
+  75% {
+    transform: rotate(-10deg);
+  }
+}
+
+#stripe {
+  animation: stripe-anim 3s linear infinite;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+@keyframes stripe-anim {
+  25% {
+    transform: translate(10px, 0) rotate(-10deg);
+  }
+  75% {
+    transform: translateX(10px);
+  }
+}
+
+#bike {
+  animation: bike-anim 6s ease infinite;
+}
+
+@keyframes bike-anim {
+  0% {
+    transform: translateX(-1300px);
+  }
+  50% {
+    transform: translateX(0);
+    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
+  }
+  100% {
+    transform: translateX(1300px);
+  }
+}
+
+#rucksack {
+  animation: ruck-anim 3s linear infinite;
+  transform-origin: top;
+  transform-box: fill-box;
+}
+
+@keyframes ruck-anim {
+  50% {
+    transform: rotate(5deg);
+  }
+}
+
+.circle {
+  animation: circle-anim ease infinite;
+  transform-origin: center;
+  transform-box: fill-box;
+  perspective: 0px;
+}
+
+.circle.c1 {
+  animation-duration: 2s;
+}
+
+.circle.c2 {
+  animation-duration: 3s;
+}
+
+.circle.c3 {
+  animation-duration: 1s;
+}
+
+.circle.c4 {
+  animation-duration: 1s;
+}
+
+.circle.c5 {
+  animation-duration: 2s;
+}
+
+.circle.c6 {
+  animation-duration: 3s;
+}
+
+@keyframes circle-anim {
+  50% {
+    transform: scale(0.2) rotateX(360deg) rotateY(360deg);
+  }
+}
+
+.four,
+#ou {
+  animation: four-anim cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
+}
+
+.four.a {
+  transform-origin: bottom left;
+  animation-duration: 3s;
+  transform-box: fill-box;
+}
+
+.four.b {
+  transform-origin: bottom right;
+  animation-duration: 3s;
+  transform-box: fill-box;
+}
+
+#ou {
+  animation-duration: 6s;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+@keyframes four-anim {
+  50% {
+    transform: scale(0.98);
+  }
+}

data/_sass/_base.scss

@@ -0,0 +1,7 @@
+body {
+  font-family: "Poppins", sans-serif;
+}
+
+.badge {
+  font-weight: 500;
+}

data/_sass/_blog.scss

@@ -0,0 +1,144 @@
+.search-box {
+  box-shadow: none !important;
+}
+
+.post.card {
+  border-radius: $rounded-borders;
+  text-decoration: none !important;
+  padding: 15px;
+  height: 100%;
+
+  .card-footer {
+    font-size: 14px;
+    margin: 0 -15px -15px -15px;
+    padding: 15px 35px;
+  }
+}
+
+.post {
+  .post-metadata {
+    font-size: 14px;
+    margin-top: -6px;
+  }
+
+  .tag:hover {
+    background-color: $primary;
+    color: white !important;
+  }
+
+  footer {
+    font-size: 10px;
+    color: #6c757d;
+    text-decoration: underline;
+    text-decoration-color: yellow;
+    text-align: right;
+    margin-top: 4em;
+    margin-right: 2em;
+  }
+
+  h1,
+  h2 {
+    margin-top: 32px;
+  }
+
+  hr {
+    background: $secondary;
+  }
+
+  img:not(.emoji) {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 1rem auto;
+  }
+
+  .video {
+    position: relative;
+    padding-bottom: 56.25%;
+    margin-bottom: 1rem;
+    width: 100%;
+    iframe {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):not(.no-underline) {
+    display: inline-block;
+    text-decoration: none;
+
+    &:hover {
+      color: $primary;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      height: 0.15em;
+      margin-top: -0.15em;
+      width: 0;
+      background: $primary;
+      transition: width 0.35s;
+    }
+
+    &:hover::after {
+      width: 100%;
+    }
+  }
+
+  pre {
+    background: $light;
+    border: 1px solid #ddd;
+    color: $dark;
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 1.6em;
+    max-width: 100%;
+    padding: 1em 1.5em;
+    display: block;
+    page-break-inside: avoid;
+    overflow: auto;
+    word-wrap: break-word;
+  }
+
+  code.highlighter-rouge {
+    background-color: $light;
+    color: $dark;
+    border-radius: 3px;
+    margin: 0;
+    padding: 0.2em 0.65em;
+  }
+
+  blockquote {
+    border-left: 0.25em solid $primary;
+    color: $secondary;
+    padding: 0 1em;
+  }
+
+  table {
+    display: block;
+    overflow-x: auto;
+    margin: 1rem 0;
+
+    td {
+      border: 1px solid #ddd;
+      padding: 8px 16px;
+    }
+
+    th {
+      @extend td;
+      padding-top: 12px;
+      padding-bottom: 12px;
+      font-weight: 500;
+      text-align: left;
+      background-color: $primary;
+      color: white;
+    }
+
+    tr:nth-child(even) {
+      background-color: $light;
+    }
+  }
+}

data/_sass/_footer.scss

@@ -0,0 +1,21 @@
+.social {
+  text-decoration: none !important;
+}
+
+#attribution {
+  opacity: 0.5;
+  a {
+    text-decoration: none;
+    font-weight: bold;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  #attribution {
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    position: fixed;
+    bottom: 56px;
+    right: 22px;
+  }
+}

data/_sass/_landing.scss

@@ -0,0 +1,28 @@
+// Fine Circle Responsive Image
+// Inspired by https://stackoverflow.com/a/6615994/10194811
+
+#container {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+}
+
+#dummy {
+  padding-top: 100%; /* 1:1 aspect ratio */
+}
+
+#element {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.circle-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+}