A Pen by Will Butler on CodePen.
Created
May 7, 2021 06:08
-
-
Save whilb/22ff26d42a3933c3469371611b4a8996 to your computer and use it in GitHub Desktop.
whil.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="center"> | |
| <pre> | |
| Welcome to whil.io | |
| * GitHub: <a href="https://github.com/whilb/">https://github.com/whilb</a> | |
| * LinkedIn: <a href="https://www.linkedin.com/in/butlerwill/">https://www.linkedin.com/in/butlerwill</a> | |
| * Keybase: <a href="https://keybase.io/whil">https://www.keybase.io/whil</a> | |
| tags: embedded, ARM, python, automation, linux, firmware, audio | |
| Hey! I'm an engineer with a myriad of interests and a wide range of experience. I love building both hardware and software, and working to design intricate systems. | |
| Are you in need of free web hosting for a good cause? Please send me an <a href="mailto:whilb@riseup.net">email</a> and I'd love to help you build your online presence. | |
| </pre> | |
| <pre id="typewriter"> | |
| <span class="string-highlight">whil@whil.io</span>:~$ ls | |
| projects misc partners <a href="/links">links</a> | |
| <span class="string-highlight">whil@whil.io</span>:~$ cat projects | |
| 127local.net | |
| A small collection of technical writeups | |
| <span class="string-highlight">whil@whil.io</span>:~$ cat partners | |
| <a href="https://siliconvalleysunrise.org" color="grey">siliconvalleysunrise.org</a> | |
| </pre> | |
| </div> | |
| </body> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function setupTypewriter(t) { | |
| var HTML = t.innerHTML; | |
| t.innerHTML = ""; | |
| var cursorPosition = 0, | |
| tag = "", | |
| writingTag = false, | |
| tagOpen = false, | |
| typeSpeed = 25, | |
| tempTypeSpeed = 0; | |
| var type = function() { | |
| if (writingTag === true) { | |
| tag += HTML[cursorPosition]; | |
| } | |
| if (HTML[cursorPosition] === "<") { | |
| tempTypeSpeed = 0; | |
| if (tagOpen) { | |
| tagOpen = false; | |
| writingTag = true; | |
| } else { | |
| tag = ""; | |
| tagOpen = true; | |
| writingTag = true; | |
| tag += HTML[cursorPosition]; | |
| } | |
| } | |
| if (!writingTag && tagOpen) { | |
| tag.innerHTML += HTML[cursorPosition]; | |
| } | |
| if (!writingTag && !tagOpen) { | |
| if (HTML[cursorPosition] === " ") { | |
| tempTypeSpeed = 0; | |
| } | |
| else { | |
| tempTypeSpeed = (Math.random() * typeSpeed) + 50; | |
| } | |
| t.innerHTML += HTML[cursorPosition]; | |
| } | |
| if (writingTag === true && HTML[cursorPosition] === ">") { | |
| tempTypeSpeed = (Math.random() * typeSpeed) + 50; | |
| writingTag = false; | |
| if (tagOpen) { | |
| var newSpan = document.createElement("span"); | |
| t.appendChild(newSpan); | |
| newSpan.innerHTML = tag; | |
| tag = newSpan.firstChild; | |
| } | |
| } | |
| cursorPosition += 1; | |
| if (cursorPosition < HTML.length - 1) { | |
| setTimeout(type, tempTypeSpeed); | |
| } | |
| }; | |
| return { | |
| type: type | |
| }; | |
| } | |
| var typer = document.getElementById('typewriter'); | |
| typewriter = setupTypewriter(typewriter); | |
| typewriter.type(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .var-highlight { | |
| color: #c0ad60; | |
| } | |
| .string-highlight { | |
| color: rgba(0, 255, 0, 0.8); | |
| } | |
| .center { | |
| margin: auto; | |
| width: 50%; | |
| padding: 10px; | |
| } | |
| body { | |
| padding: 40px; | |
| background-color: #121212; | |
| font-size: 2em; | |
| border-right: solid 3px rgba(0, 255, 0, 0.75); | |
| font-family: "Source Code Pro", monospace; | |
| font-size: 28px; | |
| color: lightgrey; | |
| margin: 0 auto; | |
| } | |
| pre { | |
| overflow-x: auto; | |
| white-space: pre-wrap; | |
| white-space: -moz-pre-wrap; | |
| white-space: -pre-wrap; | |
| white-space: -o-pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| #typewriter { | |
| &:after { | |
| content: "|"; | |
| animation: blink 500ms linear infinite alternate; | |
| } | |
| } | |
| a { | |
| background-color: transparent; | |
| text-decoration: underline; | |
| } | |
| a:link { | |
| color: #ccffcc; | |
| } | |
| a:visited { | |
| color: grey; | |
| } | |
| a:hover { | |
| color: #ccffff; | |
| } | |
| a:active { | |
| color: #ccffcc; | |
| } | |
| @-webkit-keyframes blink { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes blink { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes blink { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment