Skip to content

Instantly share code, notes, and snippets.

@manuhabitela

manuhabitela/index.html

Last active February 15, 2017 08:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manuhabitela/c40d3abdaebda8a7b8c68e7643853899 to your computer and use it in GitHub Desktop.
Save manuhabitela/c40d3abdaebda8a7b8c68e7643853899 to your computer and use it in GitHub Desktop.
Download ZIP
azdazdazd
Raw
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.6.1/css/tachyons.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<style>
p { margin: 0; }
.stripes-neon-cyan {
background: repeating-linear-gradient(-135deg, #000 0px, #000 10px, #136c6c 12px, #136c6c 11px);
}
.stripes-neon-miami {
background: repeating-linear-gradient(-225deg, #000 0px, #000 10px, #5d2845 12px, #5d2845 11px);
}
.yellow { color: #FFD600; }
.bg-shadow { background: linear-gradient(to top, #1c1c1c, black 100%); }
.bg-yellow { background-color: #FFD600; }
.b--yellow { border-color: #FFD600; }
.b--cyan { border-color: #2effff; }
.bl--cyan { border-left-color: #2effff; }
.bg-cyan { background-color: #2effff; }
.cyan { color: #2effff; }
.b--miami { border-color: #fe6dbc; }
.br--miami { border-right-color: #fe6dbc; }
.bg-miami { background-color: #fe6dbc; }
.ts-purple { text-shadow: 2px 2px 1px rgba(0,0,0,0.5), 0 0 20px #fe6dbc, 0 0 10px #7d26cd, 0 0 50px #7d26cd; }
.ts-yellow { text-shadow: 2px 2px 1px rgba(0,0,0,0.5), 0 0 20px #FFD600; }
.shadow-purple { box-shadow: 0 0 10px 2px #7d26cd; }
.shadow-yellow { box-shadow: 0 0 10px 2px #FFD600; }
.dshadow-purple { -webkit-filter: drop-shadow(0px 0px 50px #7d26cd); }
.dshadow-yellow { -webkit-filter: drop-shadow(0px 0px 50px #FFD600); }
.miami { color: #fe6dbc; }
.pa05 { padding: .125rem; }
.mla { margin-left: auto; }
.lh-copy { line-height: 1.5; }
.shadow-light { box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.4); }
.text-shadow-neon {
text-shadow:
2px 2px 1px rgba(0,0,0,0.5),
0 0 20px #fff,
0 0 10px #7d26cd,
0 0 50px #7d26cd;
}
.bw0 { border-width: 0; }
.bw1 { border-width: 1px; }
.bw2 { border-width: 2px; }
.bw3 { border-width: 4px; }
.bw4 { border-width: 6px; }
.bw5 { border-width: 10px; }
.righteous { font-family: 'Righteous', cursive; }
.blink { animation: blink 0.01s 3s infinite; }
.turnlighton { animation: turnlighton 3s; }
.bug { animation: bug 18s 7s infinite; }
.bugturnlighton { animation: bug 20s 5s infinite alternate, turnlighton 3s; }
@keyframes blink {
70% {
opacity: 0.8;
}
}
@keyframes bug {
10%, 11%, 11.25%, 70%, 70.5% {
opacity: 1;
}
10.15%, 11.15%, 70.25% {
opacity: 0.1;
}
}
@keyframes turnlighton {
0%, 20% {
opacity: 0.1;
}
38% {
opacity: 0.7;
}
40% {
opacity: 0.6;
}
62%, 64%, 66%, 100% {
opacity: 0.7;
}
63%, 65% {
opacity: 0.2;
}
}
</style>
</head>
<body class="relative lh-copy f6 bg-black">
<!-- <div class="absolute top-0 bottom-0 left-0 w-50 h-100 stripes-neon-cyan"></div> -->
<svg id="bg-left" class="absolute top-0 bottom-0 left-0" style="transform: rotate(180deg);" xmlns="http://www.w3.org/2000/svg"></svg>
<div class="absolute top-0 bottom-0 right-0 w-50 h-100 stripes-neon-miami"></div>
<div class="bl br bw2 bl--cyan br--miami shadow-light z-1 relative bg-shadow washed-yellow center mw100 pa3 flex flex-column min-vh-100" style="width: 600px;">
<div class="flex mb4 righteous">
<header>
<h1 class="relative h-100 ma0 mr3 br3 f1 ph3 pv2 miami" style="padding-top: 12px">
<div class="absolute z-1 top-0 bottom-0 left-0 w-100 h-100 ba br3 bw2 shadow-purple bugturnlighton"></div>
<a href="/" class="relative z-2 no-underline miami dshadow-purple ts-purple turnlighton">
<span class="bug">manu</span> habite <span class="blink">la</span>
</a>
</h1>
</header>
<nav class="">
<ul class="h-100 yellow ma0 pl4 pr2 db f5 br3 dshadow-yellow shadow-yellow ts-yellow ba bw2 b--yellow">
<li class=""><a class="db no-underline yellow b--yellow" href="/">Accueil</a></li>
<li class=""><a class="db no-underline yellow b--yellow" href="/projets">Projets</a></li>
<li class=""><a class="db no-underline yellow b--yellow" href="/talks">Présentations</a></li>
<li class=""><a class="db no-underline yellow b--yellow" href="/contact">Contact</a></li>
</ul>
</nav>
</div>
<main class="flex-auto">
<p class="mb3">Vous vous êtes perdu sur le net, vous vous demandez ce que vous faites là ? Ce n'est pas grave. Restez un peu, tant qu'à faire.</p>
<p class="mb3">Je me présente : <strong class="bg-yellow black pa05 normal">Emmanuel Pelletier</strong>, homme, <del class="strike">corps d'athlète, beau brun, 1m90, yeux marrons…</del>, <strong class="bg-yellow black pa05 normal">développeur web</strong> sur <strong class="bg-yellow black pa05 normal">Angers</strong> et, accessoirement, type super cool.</p>
<p class="mb3"><em class="fs-normal bg-yellow black pa05 normal">Au boulot</em>, mes collègues et moi travaillons à construire des sites de qualité et accessibles. En ce moment, c'est à l'aide de React, Sass et de divers design patterns ARIA qu'on fait ça.</p>
<p class="mb3"><em class="fs-normal bg-yellow black pa05 normal">À la maison</em>, je code aussi parfois, des trucs moins sérieux et surtout très inutiles.</p>
</main>
<footer>
<p>Je suis un footer. Je sers à rien.</p>
</footer>
</div>
<div id="svg-container">
</div>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
$(function() {
var svgSize = {width: $(document).width() / 2, height: $(document).height()};
var leftSvg = document.querySelector('#bg-left');
leftSvg.setAttribute('viewBox', '0 0 ' + svgSize.width + ' ' + svgSize.height);
leftSvg.setAttribute('width', svgSize.width);
leftSvg.setAttribute('height', svgSize.height);
var pathsCountX = Math.round(svgSize.width / 15);
var pathsCountY = Math.round(svgSize.height / 15);
function createPath(d) {
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', d);
path.style.stroke = "#136c6c";
path.style.strokeWidth = "1";
leftSvg.appendChild(path);
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var lastX = 0;
var lastY = 0;
for (var i = 0; i < pathsCountX; i++) {
var x = svgSize.width - (i * 15);
var y = i * 15;
var d = "M " + x + " 0 L " + (svgSize.width) + " " + y;
lastX = x;
createPath(d);
}
for (var i = 0; i < pathsCountY; i++) {
var x = svgSize.height - (i * 15);
var y = i * 15;
var d = "M 0 " + y + " L " + x + " " + svgSize.height;
createPath(d);
}
var paths = document.querySelectorAll('#bg-left path');
var halfIndex = paths.length / 2;
paths.forEach(function(path, n) {
var indexDiff = Math.abs(n - halfIndex);
var transitionDuration = 2 + (indexDiff * getRandomArbitrary(0.01, 0.1));
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset ' + transitionDuration + 's cubic-bezier(0.19, 1, 0.22, 1)';
// Go!
//path.style.strokeDashoffset = '0';
});
paths.forEach(function(path) {
path.style.strokeDashoffset = '0';
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment