.

connar · Dec 2, 2024 · 410e7c8 · 410e7c8
1 parent 2d3469d
commit 410e7c8
Show file tree

Hide file tree

Showing 2 changed files with 129 additions and 1 deletion.
diff --git a/content/about.md b/content/about.md
@@ -50,6 +50,70 @@ unknown@kali:~# cat /home/unknown/identity.json
 }
 
 ```
+<style>
+.glitch-wrapper {
+   width: 100%;
+   height: 100%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   text-align: center;
+}
+
+.glitch {
+   position: relative;
+   font-size: 120%;
+   letter-spacing: 1px;
+   z-index: 1;
+}
+
+.glitch:before,
+.glitch:after {
+   display: block;
+   content: attr(data-text);
+   position: absolute;
+   top: 0;
+   left: 0;
+   opacity: 0.8;
+}
+
+.glitch:before {
+   animation: glitch-it 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
+   color: #00FFFF;
+   z-index: -1;
+}
+
+.glitch:after {
+   animation: glitch-it 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
+   color: #FF00FF;
+   z-index: -2;
+}
+
+tr {
+  color: #a072b7;
+}
+
+@keyframes glitch-it {
+   0% {
+      transform: translate(0);
+   }
+   20% {
+      transform: translate(-0.6px, 0.6px);
+   }
+   40% {
+      transform: translate(-0.6px, -0.6px);
+   }
+   60% {
+      transform: translate(0.6px, 0.6px);
+   }
+   80% {
+      transform: translate(0.6px, -0.6px);
+   }
+   to {
+      transform: translate(0);
+   }
+}
+</style>
 
 <div class="glitch-wrapper">
   <h2><div class="glitch" data-text="whoami" style="color: #46473e;">whoami</div></h2>

diff --git a/public/about/index.html b/public/about/index.html
@@ -187,7 +187,71 @@ <h3 id="connarlocalhost-whoami">connar@localhost:~$ whoami<a hidden class="ancho
 </span></span><span style="display:flex;"><span>    <span style="color:#f92672">]</span>,
 </span></span><span style="display:flex;"><span>    <span style="color:#e6db74">&#34;Age&#34;</span>: <span style="color:#e6db74">&#34;23&#34;</span>
 </span></span><span style="display:flex;"><span><span style="color:#f92672">}</span>
-</span></span></code></pre></div><div class="glitch-wrapper">
+</span></span></code></pre></div><style>
+.glitch-wrapper {
+   width: 100%;
+   height: 100%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   text-align: center;
+}
+
+.glitch {
+   position: relative;
+   font-size: 120%;
+   letter-spacing: 1px;
+   z-index: 1;
+}
+
+.glitch:before,
+.glitch:after {
+   display: block;
+   content: attr(data-text);
+   position: absolute;
+   top: 0;
+   left: 0;
+   opacity: 0.8;
+}
+
+.glitch:before {
+   animation: glitch-it 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
+   color: #00FFFF;
+   z-index: -1;
+}
+
+.glitch:after {
+   animation: glitch-it 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
+   color: #FF00FF;
+   z-index: -2;
+}
+
+tr {
+  color: #a072b7;
+}
+
+@keyframes glitch-it {
+   0% {
+      transform: translate(0);
+   }
+   20% {
+      transform: translate(-0.6px, 0.6px);
+   }
+   40% {
+      transform: translate(-0.6px, -0.6px);
+   }
+   60% {
+      transform: translate(0.6px, 0.6px);
+   }
+   80% {
+      transform: translate(0.6px, -0.6px);
+   }
+   to {
+      transform: translate(0);
+   }
+}
+</style>
+<div class="glitch-wrapper">
   <h2><div class="glitch" data-text="whoami" style="color: #46473e;">whoami</div></h2>
 </div>
 <div style="text-align: center;">