4lun · September 17, 2019 17:24
diff --git a/index.html b/index.html
 <html>
 <head>
 <title>~alun</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 body {
 	box-sizing: border-box;
 	margin: 0;
 	padding: 2vh 5vh 4vh;
 	background: #050505;
 	color: #fff;
 	font-family: monospace;
 	font-size: 14px;
 	line-height: 1.4;
 	overflow: hidden;
 	position: fixed;
 	height: 100vh;
 	width: 100vw;
 	border-top: 2vh solid #222;
 }

 h1, h2, h3, h4, h5, h6 {
 	color: #ccc;
 	line-height: 1.3;
 	margin: 0 0 15px;
 	padding: 0;
 }

 h1 {
 	font-weight: 400;
 	font-size: 48px;
 }

 h1:before,
 h1:after {
 	content: attr(data-x);
 	position: absolute;
 	top: 0vh;
 	left: -25vh;
 	font-size: 150vh;
 	letter-spacing: -35vh;
 	line-height: 1;
 	color: inherit;	
 	opacity: 0.1;
 }

 h1:after {
 	top: -50vh;
 	left: -60vh;
 	filter: invert(1);
 }

 p {
 	font-size: 16px;
 	margin: 0 0 15px;
 	padding: 0;
 }
 </style>
 </head>
 <body>
 <h1 data-x="//">~alun</h1>
 <p>smile. be better. distraction is the enemy.</p>
 <script>

 var randomRGBValue = function(min, max) {
 	min = min || 0;
 	max = max || 255;
 	
 	return Math.round(Math.max(min, Math.min(max, Math.random() * 255)));
 }; 

 var cycleColor = function(elem) {
 	elem.style.color = "rgb(" + randomRGBValue() + "," + randomRGBValue() + "," + randomRGBValue() + ")";
 };

 var h1Elem = document.querySelector('h1');
 var cycle = null;

 var xChars = ["/", "#", "-", "!", "0", "$", "%", "A", "L", "U", "N"];
 var randomXChar = function() {
 	return xChars[Math.floor(Math.random() * xChars.length)];
 }

 function move() {
 	cycleColor(h1Elem);
 	h1Elem.dataset.x = randomXChar() + "" + randomXChar() + "" + randomXChar() + "" + randomXChar() + "" + randomXChar() + "" + randomXChar();
 }

 function start() {
 	if (cycle !== null) return;
 	cycle = setInterval(move, 50);
 }

 function stop() {
 	clearInterval(cycle);
 	cycle = null;
 }

 h1Elem.addEventListener('click', function() {
 	(cycle === null) ? start() : stop()
 });

 var timeout = null;
 var listener = function() {
 	clearTimeout(timeout);
 	start();
 	timeout = setTimeout(function() {
 		stop();
 	}, 150);
 };

 window.addEventListener('mousemove', listener);
 window.addEventListener('touchmove', listener);

 start();

 </script>
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-1272815-12"></script>
 <script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-1272815-12');
 </script>
 </body>
 </html>
	<html>
	<head>
	<title>~alun</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	box-sizing: border-box;
	margin: 0;
	padding: 2vh 5vh 4vh;
	background: #050505;
	color: #fff;
	font-family: monospace;
	font-size: 14px;
	line-height: 1.4;
	overflow: hidden;
	position: fixed;
	height: 100vh;
	width: 100vw;
	border-top: 2vh solid #222;
	}

	h1, h2, h3, h4, h5, h6 {
	color: #ccc;
	line-height: 1.3;
	margin: 0 0 15px;
	padding: 0;
	}

	h1 {
	font-weight: 400;
	font-size: 48px;
	}

	h1:before,
	h1:after {
	content: attr(data-x);
	position: absolute;
	top: 0vh;
	left: -25vh;
	font-size: 150vh;
	letter-spacing: -35vh;
	line-height: 1;
	color: inherit;
	opacity: 0.1;
	}

	h1:after {
	top: -50vh;
	left: -60vh;
	filter: invert(1);
	}

	p {
	font-size: 16px;
	margin: 0 0 15px;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<h1 data-x="//">~alun</h1>
	<p>smile. be better. distraction is the enemy.</p>
	<script>

	var randomRGBValue = function(min, max) {
	min = min \|\| 0;
	max = max \|\| 255;

	return Math.round(Math.max(min, Math.min(max, Math.random() * 255)));
	};

	var cycleColor = function(elem) {
	elem.style.color = "rgb(" + randomRGBValue() + "," + randomRGBValue() + "," + randomRGBValue() + ")";
	};

	var h1Elem = document.querySelector('h1');
	var cycle = null;

	var xChars = ["/", "#", "-", "!", "0", "$", "%", "A", "L", "U", "N"];
	var randomXChar = function() {
	return xChars[Math.floor(Math.random() * xChars.length)];
	}

	function move() {
	cycleColor(h1Elem);
	h1Elem.dataset.x = randomXChar() + "" + randomXChar() + "" + randomXChar() + "" + randomXChar() + "" + randomXChar() + "" + randomXChar();
	}

	function start() {
	if (cycle !== null) return;
	cycle = setInterval(move, 50);
	}

	function stop() {
	clearInterval(cycle);
	cycle = null;
	}

	h1Elem.addEventListener('click', function() {
	(cycle === null) ? start() : stop()
	});

	var timeout = null;
	var listener = function() {
	clearTimeout(timeout);
	start();
	timeout = setTimeout(function() {
	stop();
	}, 150);
	};

	window.addEventListener('mousemove', listener);
	window.addEventListener('touchmove', listener);

	start();

	</script>
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1272815-12"></script>
	<script>
	window.dataLayer = window.dataLayer \|\| [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());

	gtag('config', 'UA-1272815-12');
	</script>
	</body>
	</html>