initial attempt at typing effect

www/style.css

@@ -0,0 +1,31 @@
+:root {
+  --text-color: solid orange;
+}
+
+/* =========================================================== *
+ *                      Type Writer Effect                     *
+ * Ref: https://css-tricks.com/snippets/css/typewriter-effect/ *
+/* =========================================================== */
+
+.typewriter {
+  overflow: hidden;                 /* Crop everything that hasn't been "typed" yet */
+  border-right: .15em solid orange; /* Cursor                                       */
+  white-space: nowrap;              /* Keeps the content on a single line           */
+  margin: 0 auto;                   /* Scrolling effect while "typing"              */
+  letter-spacing: .15em;            /* Adjustable                                   */
+  animation: 
+    typewriter-typing 3.5s steps(40, end),
+    typewriter-cursor-blink .75s step-end infinite;
+}
+
+/* .typewriter typing effect */
+@keyframes typerwriter-typing {
+  from { width: 0 }
+  to { width: 100% }
+}
+
+/* .typewriter cursor blink effect */
+@keyframes typerwriter-cursor-blink {
+  from, to { border-color: transparent }
+  50% { border-color: orange; }
+}