diff options
| -rw-r--r-- | css/main.css | 19 | ||||
| -rw-r--r-- | favicon.ico | bin | 0 -> 38038 bytes | |||
| -rw-r--r-- | index.html | 176 | ||||
| -rw-r--r-- | js/app.js | 149 |
4 files changed, 344 insertions, 0 deletions
diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..e4beab5 --- /dev/null +++ b/css/main.css @@ -0,0 +1,19 @@ +body {
+ background: none
+ }
+ .bobAnimate-container {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ width: 375px;
+ }
+ .inline {
+ display: inline-block;
+ }
+ #bobAnimate {
+ margin-left: 5px;
+ transition-timing-function: ease-in-out;
+ transition: margin-left 2s;
+ }
+
\ No newline at end of file diff --git a/favicon.ico b/favicon.ico Binary files differnew file mode 100644 index 0000000..50e8433 --- /dev/null +++ b/favicon.ico diff --git a/index.html b/index.html new file mode 100644 index 0000000..8d1e16f --- /dev/null +++ b/index.html @@ -0,0 +1,176 @@ +<html lang="en"><link type="text/css" id="dark-mode" rel="stylesheet" href=""><style type="text/css" id="dark-mode-custom-style"></style><script>
+ Object.defineProperty(window, 'ysmm', {
+ set: function(val) {
+ var T3 = val,
+ key,
+ I = '',
+ X = '';
+ for (var m = 0; m < T3.length; m++) {
+ if (m % 2 == 0) {
+ I += T3.charAt(m);
+ } else {
+ X = T3.charAt(m) + X;
+ }
+ }
+ T3 = I + X;
+ var U = T3.split('');
+ for (var m = 0; m < U.length; m++) {
+ if (!isNaN(U[m])) {
+ for (var R = m + 1; R < U.length; R++) {
+ if (!isNaN(U[R])) {
+ var S = U[m]^U[R];
+ if (S < 10) {
+ U[m] = S;
+ }
+ m = R;
+ R = U.length;
+ }
+ }
+ }
+ }
+ T3 = U.join('');
+ T3 = window.atob(T3);
+ T3 = T3.substring(T3.length - (T3.length - 16));
+ T3 = T3.substring(0, T3.length - 16);
+ key = T3;
+ if (key && (key.indexOf('http://') === 0 || key.indexOf("https://") === 0)) {
+ document.write('<!--');
+ window.stop();
+
+ window.onbeforeunload = null;
+ window.location = key;
+ }
+ }
+ });
+ </script><head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="theme-color" content="#FFF">
+ <title>s1nical - About Me</title>
+ <meta name="description" content="s1nical is a full stack developer.">
+ <meta property="og:description" content="s1nical is a full stack developer.">
+ <meta property="og:title" content="s1nical">
+ <meta property="twitter:card" content="summary">
+ <meta property="twitter:site" content="@s1nical">
+ <meta property="og:image" content="">
+ <script src="/cdn-cgi/apps/head/_vFlzwEWzfnxN-k3KPkfOrUdyXo.js"></script><script src="https://www.googletagmanager.com/gtag/js?id=UA-30692517-4"></script><link rel="image_src" href="https://secure.gravatar.com/avatar/f9c6903a50d1d861a47a614862b00b89.png?s=375">
+ <link rel="apple-touch-icon" sizes="128x128" href="favicon.ico">
+ <link rel="icon" type="image/ico" href="favicon.ico" sizes="128x128">
+ <link rel="canonical" href="https://s1n.pw/">
+ <link rel="stylesheet" href="css/main.css">
+ <script type="application/ld+json">{
+ "name": "s1nical",
+ "alternateName": "s1n",
+ "description": "s1nical is a full stack developer.",
+ "headline": "s1nical is a full stack developer.",
+ "url": "https://s1n.pw/",
+ "image": "",
+ "sameAs": [
+ "https://twitter.com/s1nical",
+ "https://github.com/s1nical",
+ "https://www.reddit.com/user/s1nical/",
+ ],
+ "publisher": {
+ "@type": "Organization",
+ "logo": {
+ "@type": "ImageObject",
+ "url": ""
+ }
+ },
+ "@type": "WebSite",
+ "@context": "http://schema.org"
+ }</script>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/inter.css" integrity="sha256-DyLTj16AbuvawyWJMPz4tJNp46iGflE/fWYAoU2IGpk=" crossorigin="anonymous">
+ <style>
+ html {
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ }
+
+ *, *:before, *:after {
+ box-sizing: inherit;
+ }
+
+ html, body {
+ height: 100%;
+ }
+
+ body {
+ font: normal 20px/1.4 'Inter', sans-serif;
+ margin: 0 1em;
+ padding: 1em 0;
+ color: #000;
+ background: #FFF;
+ display: flex;
+ }
+
+ @supports (font-variation-settings: normal) {
+ body {
+ font-family: 'Inter var', sans-serif;
+ }
+ }
+
+ main {
+ margin: auto;
+ font-size: 6vh;
+ line-height: 1.2;
+ max-width: 75vh;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ background: hsl(200, 100%, 80%);
+ }
+
+ a:hover,
+ a:focus {
+ outline: none;
+ background: #000;
+ color: #fff;
+ }
+ </style>
+ <link id="avast_os_ext_custom_font" href="chrome-extension://eofcbnmajmjmplflapaojjnihcjkigck/common/ui/fonts/fonts.css" rel="stylesheet" type="text/css"></head>
+ <body cz-shortcut-listen="true">
+ <main>
+ <a href="mailto:[email protected]">s1nical</a><br>
+ Full-stack developer.<br><br>
+ Follow me on <a href="https://twitter.com/s1nical">Twitter</a>.
+ View my code on <a href="https://github.com/s1nical">GitHub</a>.
+ </main>
+ <script>
+ (async () => {
+ if( navigator.webdriver || document.visibilityState === 'prerender' || !location.hostname )
+ {
+ return;
+ }
+
+ document.querySelector( 'a[href="/cdn-cgi/l/email-protection"]' ).href = `\x6dailto:hi\x40${location.hostname}`;
+ })();
+ </script>
+
+<div class="bobAnimate-container">
+ <div id="bobAnimate"></div>
+ </div>
+
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/colors.js"></script>
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_right.js"></script>
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_right_walk1.js"></script>
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_right_walk2.js"></script>
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_right_blink.js"></script>
+
+<!-- left -->
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left.js"></script>
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left_walk1.js"></script>
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left_walk2.js"></script>
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left_blink.js"></script>
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left_angry.js"></script>
+
+<!-- animate -->
+<script src="js/app.js"></script>
+
+
+ </body></html>
\ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..b943d69 --- /dev/null +++ b/js/app.js @@ -0,0 +1,149 @@ +window.onload = ()=>{
+ animate()
+ }
+
+ function animate() {
+ animateFrame( "bobAnimate", 70, [
+ { // run right
+ move: ()=>{ bobAnimate.style.marginLeft = "300px" },
+ frames: [ bob_right, bob_right_walk1, bob_right_walk2 ],
+ delay: 100,
+ limitFrames: 15,
+ },
+ { // stop blink , blink
+ frames: [ bob_right_blink, bob_right, bob_right_blink, bob_right, bob_left ],
+ delay: 150,
+ limitFrames: 5,
+ },
+ { // turn left, blink
+ frames: [ bob_left_blink, bob_left ],
+ delay: 500,
+ limitFrames: 2,
+ },
+ { // run left
+ move: ()=>{ bobAnimate.style.marginLeft = "80px" },
+ frames: [ bob_left_walk1, bob_left_walk2, bob_left ],
+ delay: 100,
+ limitFrames: 15
+ },
+ { // stop blink
+ frames: [ bob_left, bob_left_blink, bob_left ],
+ delay: 500,
+ limitFrames: 3,
+ },
+ { // turn & blink, blink
+ frames: [ bob_right, bob_right_blink, bob_right, bob_right_blink, bob_right ],
+ delay: 100,
+ limitFrames: 5,
+ },
+ { // run right
+ move: ()=>{ bobAnimate.style.marginLeft = "200px" },
+ frames: [ bob_right, bob_right_walk1, bob_right_walk2 ],
+ delay: 100,
+ limitFrames: 13,
+ },
+ { // turn, turn, turn
+ frames: [ bob_left, bob_right, bob_left ],
+ delay: 250,
+ limitFrames: 3,
+ },
+ { // angry, angry
+ frames: [ bob_left_angry, bob_left, bob_left_angry, bob_left ],
+ delay: 150,
+ limitFrames: 4,
+ },
+ { // run left
+ move: ()=>{ bobAnimate.style.marginLeft = "0px" },
+ frames: [ bob_left_walk1, bob_left_walk2, bob_left ],
+ delay: 100,
+ limitFrames: 15
+ },
+ { // turn slow, blnk slow
+ frames: [ bob_right, bob_right_blink, bob_right ],
+ delay: 1000,
+ limitFrames: 3,
+ },
+ { // RESTART
+ move: ()=>{ animate() }, frames: [], delay: 0, limitFrames: 0
+ },
+ ])
+ }
+
+ function buildFrame(elmId, frameWidth, frame) {
+ const pW = frameWidth/8
+ const elm = document.getElementById(elmId)
+ elm.innerHTML = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="${frameWidth}px"
+ height="${frameWidth}px"
+ style="background-color: ${frame.bg};"
+ viewBox="0 0 522 522">
+ <defs>
+ <filter id="f1" height="130%" width="130%">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
+ <feOffset dx="5" dy="5" result="offsetblur"></feOffset>
+ <feComponentTransfer>
+ <feFuncA type="linear" slope="0.5"></feFuncA>
+ </feComponentTransfer>
+ <feMerge>
+ <feMergeNode></feMergeNode>
+ <feMergeNode in="SourceGraphic"></feMergeNode>
+ </feMerge>
+ </filter>
+ </defs>
+ <g filter="url(#f1)" id="g-${elmId}"></g>
+ </svg>
+ `
+ setPixels(elmId, frame)
+ }
+
+ function setPixels(elmId, frame) {
+ const g = document.getElementById("g-"+elmId)
+ g.innerHTML = ""
+ frame.pixels.map( p => {
+ g.innerHTML += /*html*/`
+ <path fill-rule="evenodd"
+ fill="${p.color}"
+ opacity="${p.opacity || 1}"
+ d=" M${p.x*64} ${p.y*64}
+ L${(p.x*64) + 64} ${p.y*64}
+ L${(p.x*64) + 64} ${(p.y*64) + 64}
+ L${(p.x*64)} ${(p.y*64) + 64} Z">
+ </path>
+ `
+ })
+ }
+
+ function animateFrame(elmId, size, anime){
+
+ buildFrame("bobAnimate", size, anime[0].frames[0])
+ anime[0].frames.push(anime[0].frames[0])
+ anime[0].frames.shift()
+
+ const g = document.getElementById("g-"+elmId)
+
+ function animate(anime) {
+
+ const int = setInterval(function(){
+ if (anime[0].limitFrames === 0) {
+ clearInterval(int)
+ anime.shift()
+ if (anime.length > 0) {
+ if (anime[0].move) anime[0].move()
+ animate(anime)
+ }
+ } else {
+ setPixels(elmId, anime[0].frames[0])
+ anime[0].frames.push(anime[0].frames[0])
+ anime[0].frames.shift()
+ anime[0].limitFrames--
+ }
+ }, anime[0].delay)
+
+ }
+
+ if (anime[0].move) anime[0].move()
+ animate(anime)
+
+ }
+
\ No newline at end of file |