4lun/index.html

## 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>