Site updated/Cập nhật lúc: 2024-11-28 18:02:45

CNAME

@@ -0,0 +1 @@
+thiennguyen.dev

about/css/qr.css

@@ -0,0 +1,194 @@
+.qr-card {
+  width: 200px;
+  height: 294px;
+}
+
+.qr-content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transition: transform 1s;
+  transform-style: preserve-3d;
+}
+
+/* .qr-card:hover .qr-content, */
+.qr-card.hover .qr-content {
+  transform: rotateY(180deg);
+  transition: transform 0.5s;
+}
+
+.front,
+.back {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 5px;
+  backface-visibility: hidden;
+}
+
+.back {
+  transform: rotateY(180deg);
+}
+
+.img-reset-brightness {
+  filter: brightness(1) !important;
+  -webkit-filter: brightness(1) !important;
+}
+
+.qr-box {
+  display: inline-block;
+}
+
+.qr-show-label {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.short-link-btn {
+  position: absolute;
+  right: 10px;
+}
+
+.qr-logo {
+  -webkit-filter: drop-shadow(1px 1px 1px #2d2d2d) !important;
+  filter: drop-shadow(1px 1px 1px #2d2d2d) !important;
+}
+
+/* WAVE EFFECT CREDIT: https://uiverse.io/MikeAndrewDesigner/fast-octopus-78 */
+
+.e-card {
+  margin: 0px auto;
+  background: transparent;
+  -webkit-box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.45);
+  box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.45);
+  position: relative;
+  width: 200px;
+  height: 270px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.e-card .wave {
+  position: absolute;
+  width: 540px;
+  height: 700px;
+  opacity: 0.6;
+  left: 0;
+  top: 0;
+  margin-left: -50%;
+  margin-top: -70%;
+}
+
+.e-card .wave0 {
+  background: linear-gradient(744deg, #af40ff, #5b42f3 60%, #00ddeb);
+}
+
+.e-card .wave1 {
+  background: linear-gradient(519deg, #d16ba5, #86a8e7 60%, #5ffbf1);
+}
+
+.e-card .wave2 {
+  background: linear-gradient(195deg, #c6ffdd, #fbd786 60%, #f7797d);
+}
+
+.e-card .icon {
+  width: 3em;
+  margin-top: -1em;
+  padding-bottom: 1em;
+}
+
+.e-card .infotop {
+  text-align: center;
+  font-size: 20px;
+  position: absolute;
+  top: 5.6em;
+  left: 0;
+  right: 0;
+  color: rgb(255, 255, 255);
+  font-weight: 600;
+}
+
+.e-card .name {
+  font-size: 14px;
+  font-weight: 300;
+  text-shadow: 2px 2px 2px black;
+  position: relative;
+  top: 1em;
+}
+
+.e-card .wave:nth-child(2),
+.e-card .wave:nth-child(3) {
+  top: 210px;
+}
+
+.e-card.playing .wave {
+  border-radius: 40%;
+  -webkit-animation: wave 3000ms infinite linear;
+  animation: wave 3000ms infinite linear;
+}
+
+.e-card .wave {
+  border-radius: 40%;
+  -webkit-animation: wave 55s infinite linear;
+  animation: wave 55s infinite linear;
+}
+
+.e-card.playing .wave:nth-child(2) {
+  -webkit-animation-duration: 4000ms;
+  animation-duration: 4000ms;
+}
+
+.e-card .wave:nth-child(2) {
+  -webkit-animation-duration: 50s;
+  animation-duration: 50s;
+}
+
+.e-card .playing .wave:nth-child(3) {
+  -webkit-animation-duration: 5000ms;
+  animation-duration: 5000ms;
+}
+
+.e-card .wave:nth-child(3) {
+  -webkit-animation-duration: 45s;
+  animation-duration: 45s;
+}
+
+body:not(.light) .card-action-nav {
+  background-color: rgba(40, 44, 52, 1);
+}
+body:not(.light) .card-action-nav:hover {
+  background-color: rgba(40, 44, 52, 1);
+}
+
+.card-action-nav {
+  position: relative;
+  bottom: 20px;
+  /* Temporarily disable copy & download button */
+  /* display: none !important; */
+}
+
+@-webkit-keyframes wave {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes wave {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

about/css/styles.css

@@ -0,0 +1,41 @@
+.custom-page-about .custom-page-about-cover {
+      height: 251px
+  }
+
+  .custom-page-about .about-avatar {
+      position: relative;
+      margin: -7rem auto 0rem;
+      width: 10rem;
+      height: 10rem;
+      z-index: 3;
+  }
+
+  .custom-page-about .about-avatar img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: transparent;
+      object-fit: cover;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+      border: 3px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .custom-page-about-cover img {
+      left: 45px !important;
+      transform: scale(1.25);
+      top: 15px !important;
+  }
+
+  .custom-page-about .about-avatar p {
+      display: none;
+  }
+
+  .custom-page-about-title {
+      display: none;
+  }
+
+  @media only screen and (max-width: 768px) {
+      .custom-page-about .about-avatar {
+          margin: -10rem auto 0rem;
+      }
+  }