-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 8.87 KB
/
index.html
1
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="robots" content="index, follow"/> <title>Yan Sun</title> <style>/* LAYOUT */ body{padding: 0; margin: 0; border: 0; background-color: #FAFAFA;}.content{box-sizing: border-box; min-width: 769px; padding: 8em;}/* up to iPad */ @media only screen and (max-width: 768px){.content{min-width: 457px; padding: 6em;}}/* up to iPhone XS Max */ @media only screen and (max-width: 456px){.content{min-width: 320px; padding: 1em;}}/* TEXT */ header h1{color: #111; display: inline-block; font-family: helvetica neue,helvetica,sans-serif; font-size: 3em; font-weight: 500; margin: 48px 0px 48px 0px; text-rendering: optimizeLegibility; text-transform: uppercase;}.content p{color: #111; display: inline-block; font-family: helvetica neue,helvetica,sans-serif; font-size: 1em; letter-spacing: 0.1em; line-height: 2.5em; margin: 16px 0px 16px 0px; text-rendering: optimizeLegibility; text-transform: uppercase;}footer{display: flex; flex-direction: column; gap: 1em; margin: 48px 0px 48px 0px;}footer div{color: #111; font-family: helvetica neue,helvetica,sans-serif; font-size: 0.5em;}/* LINKS */ a{color: #777; text-decoration: underline; text-decoration-color: #777;}a:hover{color: #AAA; cursor: pointer; text-decoration-color: #AAA;}a.robinhood:hover{color: rgb(0,200,5); text-decoration-color: rgb(0,200,5);}a.party{color: #EB334F; text-decoration-color: #EB334F;}a.party:hover{color: #e60023; text-decoration-color: #e60023;}button{background: none; border: none; display: inline-block; font-size: 1em; line-height: 1; letter-spacing: -0.05em; margin: 0; padding: 0;}button:hover:not([disabled]){cursor: pointer;}button:disabled{outline: none;}#email-section{display: flex; flex-direction: row; gap: 0.25em;}#code-window{border-radius: 0.25em; overflow: hidden;}#code-terminal{display: flex; flex-direction: column; font-size: 1em; height: 2em; line-height: 1; max-height: 2em; min-height: 2em; transition-duration: 250ms; transition-timing-function: ease-out;}.code-terminal-scrolled{transform: translateY(-100%);}code{box-sizing: border-box; display: flex; flex-direction: row; font-size: 1em; line-height: 1; min-height: 100%; max-height: 100%; background: #2c292d; padding: 0.5em; font-family: Monaco, monospace; transition-property: height; transition-duration: 250ms;}code .function{color: #908e8f;}code .string{color: #ffd866;}code .keyword{color: #78dce8;}code .punctuation{color: #cb4b16;}code .code{color: #fdf9f3;}code .green{color: #a9dc76;}code .purple{color: #78dce8;}code .orange{color: #fc9867;}.code-row{display: flex;}.code-tabs{display: none;}/* up to iPhone XS Max */ @media only screen and (max-width: 456px){code{flex-direction: column !important;}#code-terminal{height: 4em !important; line-height: 1 !important; max-height: 4em !important; min-height: 4em !important;}.code-tabs{display: block !important;}#email-section{flex-direction: column !important;}}#run-button{box-sizing: border-box; font-size: 1rem; line-height: 1; background-color: #DDD; border-radius: 0.25em; color: #111; height: 2em; padding: 0.5em;}#run-button:hover:not([disabled]){background-color: #999;}/* up to iPad */ @media only screen and (max-width: 768px){#run-button{padding: 0.25em;}}#loading-spinner{width: 1em; height: 1em; border: 2px solid #FFF; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite;}@keyframes rotation{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style> </head> <body> <article> <div class="content"> <header> <h1>Yan Sun</h1> </header> <p> Engineering at <a class="robinhood" href="https://www.robinhood.com">Robinhood</a></br> <a href="/yan-sun-resume.pdf">Resume</a> as of mid 2024<br>Run code for email: </p><div id="email-section"> <div id="code-window"> <div id="code-terminal"> <code id="code-input"> <span class="code-row"> <span class="function">></span> <span class="string">`contact@</span> <span class="punctuation">${</span> </span> <span class="code-row"> <span class="code-tabs"> </span> <span class="code-tabs"> </span> <span class="keyword">window</span> <span class="code">.location.hostname</span> </span> <span class="code-row"> <span class="code-tabs"> </span> <span class="punctuation">}</span> <span class="string">`</span> </span> </code> <code> <span class="code-row" id="code-result"> <span class="function">></span> <span id="code-result-output" class="string"></span> </span> </code> </div></div><button id="run-button"><span>RUN ⏎</span></button> </div><footer> <div>Here for <a class="party" target="_blank" href="https://kelly.and.yan.co">❤</a>?</div><div>Last updated: <a href="https://github.com/yans/yans.github.io/commit/master">July 2024</a></div></footer> </div></article> <script type="text/javascript">const d="0123456789qwertyuiopasdfghjklzxcvbnm!?></a`~+*=@#$%".split(""),sy=["function","string","keyword","punctuation","code","green","purple","orange"],t=document.getElementById("code-terminal"),rb=document.getElementById("run-button"),r=document.getElementById("code-result"),ro=document.getElementById("code-result-output"),c=["d","9","b","6","5","2","d","6","0","f","1","6","a","a"],e=["c","o","n","t","a","c","t","@","y","a","n",".","c","o"];rb.addEventListener("click",onClickRun);let hasRan=!1;function onClickRun(){if(hasRan)return;hasRan=!0;const o=document.createElement("span");o.setAttribute("id","loading-spinner"),rb.replaceChild(o,rb.firstChild),rb.disabled=!0,c.forEach((e,t)=>{const o=document.createElement("span");o.appendChild(document.createTextNode(e)),o.classList.add("code-email-output"),o.classList.add(rC(sy)),0===t&&o.classList.add("next-code-email-output"),r.appendChild(o)}),t.classList.add("code-terminal-scrolled");let n=0;const a=window.setInterval(()=>{const t=document.getElementsByClassName("code-email-output");c.forEach((o,a)=>{if(a<n)return;const r=a-n;if(a==n&&Math.random()<=easeOutCirc(1/(c.length-1))){const o=e.slice(0,a+1).join(""),c=document.createTextNode(o);ro.firstChild?ro.replaceChild(c,ro.firstChild):ro.appendChild(c),n+=1,t[r].remove()}else{const e=rC(d),o=t[r];o.replaceChild(document.createTextNode(e),o.firstChild),o.removeAttribute("class"),o.classList.add("code-email-output"),o.classList.add(rC(sy))}}),n===e.length&&(window.clearInterval(a),rb.removeEventListener("click",onClickRun),rb.replaceChild(document.createTextNode("COPY"),rb.firstChild),rb.disabled=!1,rb.addEventListener("click",onClickCopy))},100)}function onClickCopy(){navigator.clipboard.writeText(e.join(""));const t=copy(e.join(""));rb.replaceChild(document.createTextNode(t?"COPIED":"OOPS"),rb.firstChild),rb.removeEventListener("click",onClickCopy),rb.disabled=!0}function rC(e){return e[Math.floor(Math.random()*e.length)]}function easeOutCirc(e){return Math.sqrt(1-Math.pow(e-1,2))}function copy(e,t){var o,n,a,r,c,l,i=!1;t||(t={}),o=t.debug||!1;try{if(a=toggleSelection(),r=document.createRange(),c=document.getSelection(),(l=document.createElement("span")).textContent=e,l.ariaHidden="true",l.style.all="unset",l.style.position="fixed",l.style.top=0,l.style.clip="rect(0, 0, 0, 0)",l.style.whiteSpace="pre",l.style.webkitUserSelect="text",l.style.MozUserSelect="text",l.style.msUserSelect="text",l.style.userSelect="text",l.addEventListener("copy",function(n){if(n.stopPropagation(),t.format)if(n.preventDefault(),void 0===n.clipboardData){o&&console.warn("unable to use e.clipboardData"),o&&console.warn("trying IE specific stuff"),window.clipboardData.clearData();var a=clipboardToIE11Formatting[t.format]||clipboardToIE11Formatting.default;window.clipboardData.setData(a,e)}else n.clipboardData.clearData(),n.clipboardData.setData(t.format,e);t.onCopy&&(n.preventDefault(),t.onCopy(n.clipboardData))}),document.body.appendChild(l),r.selectNodeContents(l),c.addRange(r),!document.execCommand("copy"))throw new Error("copy command was unsuccessful");i=!0}catch(a){o&&console.error("unable to copy using execCommand: ",a),o&&console.warn("trying IE specific stuff");try{window.clipboardData.setData(t.format||"text",e),t.onCopy&&t.onCopy(window.clipboardData),i=!0}catch(a){o&&console.error("unable to copy using clipboardData: ",a),o&&console.error("falling back to prompt"),n=format("message"in t?t.message:defaultMessage),window.prompt(n,e)}}finally{c&&("function"==typeof c.removeRange?c.removeRange(r):c.removeAllRanges()),l&&document.body.removeChild(l),a()}return i}function toggleSelection(){var e=document.getSelection();if(!e.rangeCount)return function(){};for(var t=document.activeElement,o=[],n=0;n<e.rangeCount;n++)o.push(e.getRangeAt(n));switch(t.tagName.toUpperCase()){case"INPUT":case"TEXTAREA":t.blur();break;default:t=null}return e.removeAllRanges(),function(){"Caret"===e.type&&e.removeAllRanges(),e.rangeCount||o.forEach(function(t){e.addRange(t)}),t&&t.focus()}}</script> </body></html>