First version

.gitignore

@@ -0,0 +1,7 @@
+.bundle
+/build
+/.sass-cache
+/.cache
+.rakeTasks
+Gemfile.lock
+*.iml

Gemfile

@@ -0,0 +1,12 @@
+source 'https://rubygems.org'
+
+gem 'rake'
+gem 'middleman', '~> 3.3.12'
+gem 'middleman-livereload', '~> 3.4.3'
+
+gem 'therubyracer', require: false
+gem 'bootstrap-sass', '~> 3', require: false
+gem 'font-awesome-sass', '~> 4', require: false
+
+gem 'wdm', '~> 0.1.1', platforms: %i(mswin mingw), require: false
+gem 'tzinfo-data', platforms: %i(mswin mingw jruby), require: false

config.rb

@@ -0,0 +1,12 @@
+set :css_dir, 'stylesheets'
+set :js_dir, 'javascripts'
+set :images_dir, 'images'
+
+configure :development do
+	activate :livereload, apply_css_live: true, apply_js_live: true, no_swf: true
+end
+
+configure :build do
+	activate :minify_css
+	activate :minify_javascript
+end

rakefile

@@ -0,0 +1,7 @@
+task :build do
+	system 'middleman build'
+end
+
+task deploy: :build do
+	system 'rsync -axPv build/ server:www/'
+end

source/_conferences.erb

@@ -0,0 +1,170 @@
+<section id="conferences">
+	<div class="container">
+		<div class="row">
+			<div class="col-lg-12 text-center">
+				<h2>Conférences</h2>
+				<hr />
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-sm-12">
+				<ul>
+					<li>
+						<span class="title">Le projet Tor</span>
+						<span class="location">11/16/2013, Ubuntu Party</span>
+						<span class="links">
+							<a href="https://confs.imirhil.fr/20131116_ubuntu-party_tor/">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a>
+							<!--a href="">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a-->
+						</span>
+					</li>
+					<li>
+						<span class="title">OpenSSL Valhalla Rampage</span>
+						<span class="location">26/06/2014, Pas sage en Seine</span>
+						<span class="links">
+							<a href="https://confs.imirhil.fr/20140626_pses_openssl-valhalla-rampage/">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a>
+							<a href="https://confs.imirhil.fr/20140626_pses_openssl-valhalla-rampage.webm">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a>
+						</span>
+					</li>
+					<li>
+						<span class="title">Cryptographie « unplugged »</span>
+						<span class="location">27/06/2014, Pas sage en Seine</span>
+						<span class="links">
+							<a href="https://confs.imirhil.fr/20140627_pses_crypto-unplugged-solitaire.odp">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a>
+							<!--a href="">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a-->
+						</span>
+					</li>
+					<li>
+						<span class="title">Introduction aux chiffrofêtes</span>
+						<span class="location">16/11/2014, Ubuntu Party</span>
+						<span class="links">
+							<!--a href="">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a-->
+							<a href="https://confs.imirhil.fr/20141116_ubuntu-party_introduction-chiffrofetes.webm">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a>
+						</span>
+					</li>
+					<li>
+						<span class="title">Hygiène numérique, applications mobiles et vie privée</span>
+						<span class="location">16/11/2014, Ubuntu Party</span>
+						<span class="links">
+							<a href="https://confs.imirhil.fr/20141116_ubuntu_chiffrofete/privacy.html">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a>
+							<a href="https://confs.imirhil.fr/20141116_ubuntu-party_hygiene-numerique-applications-mobiles-vie-privee.webm">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a>
+						</span>
+					</li>
+					<li>
+						<span class="title">Les aventures d’un petit paquet réseau</span>
+						<span class="location">16/11/2014, Ubuntu Party</span>
+						<span class="links">
+							<a href="https://confs.imirhil.fr/20141116_ubuntu_chiffrofete/paquet.html">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a>
+							<a href="https://confs.imirhil.fr/20141116_ubuntu-party_aventures-petit-paquet-reseau.webm">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a>
+						</span>
+					</li>
+					<li>
+						<span class="title">Comprendre HTTPS</span>
+						<span class="location">16/11/2014, Ubuntu Party</span>
+						<span class="links">
+							<a href="https://confs.imirhil.fr/20141116_ubuntu_chiffrofete/tls.html">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a>
+							<a href="https://confs.imirhil.fr/20141116_ubuntu-party_comprendre-https.webm">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a>
+						</span>
+					</li>
+					<li>
+						<span class="title">Live FAQ</span>
+						<span class="location">16/11/2014, Ubuntu Party</span>
+						<span class="links">
+							<!--a href="">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a-->
+							<a href="https://confs.imirhil.fr/20141116_ubuntu-party_live-faq.webm">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a>
+						</span>
+					</li>
+					<li>
+						<span class="title">La surveillance de masse</span>
+						<span class="location">07/03/2015, Journées Fédérez</span>
+						<span class="links">
+							<a href="https://confs.imirhil.fr/20150307_federez_surveillance/">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a>
+							<a href="https://confs.imirhil.fr/20150307_federez_surveillance.webm">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a>
+						</span>
+					</li>
+					<li>
+						<span class="title">Dégooglisons Internet</span>
+						<span class="location">28/03/2015, Bibliothèque Francophone Multimédia de Limoges</span>
+						<span class="links">
+							<a href="https://confs.imirhil.fr/20150328_bfm-limoges_degooglisons-internet.odp">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a>
+							<a href="https://confs.imirhil.fr/20150328_degooglisons-internet.webm">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a>
+						</span>
+					</li>
+					<li>
+						<span class="title">SSL/TLS pour les nuls</span>
+						<span class="location">20/06/2015, Pas sage en Seine</span>
+						<span class="links">
+							<a href="https://confs.imirhil.fr/20150620_pses_tls.webm">
+								<i class="fa fa-slideshare"></i>
+								Support
+							</a>
+							<a href="https://confs.imirhil.fr/20150620_pses_tls/">
+								<i class="fa fa-video-camera"></i>
+								Vidéo
+							</a>
+						</span>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</section>

source/_contact.erb

@@ -0,0 +1,54 @@
+<section id="contact">
+	<div class="container">
+		<div class="row">
+			<div class="col-lg-12 text-center">
+				<h2>Me contacter</h2>
+				<hr />
+				<div class="container">
+					<div class="row">
+						<div class="col-xs-4 text-right">Blog</div>
+						<div class="col-xs-8 text-left">
+							<a href="https://blog.imirhil.fr/">https://blog.imirhil.fr/</a>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-xs-4 text-right">Email & Jabber</div>
+						<div class="col-xs-8 text-left">aeris@imirhil.fr</div>
+					</div>
+					<div class="row">
+						<div class="col-xs-4 text-right">GPG</div>
+						<div class="col-xs-8 text-left">
+							6A68&nbsp;B761&nbsp;2629&nbsp;7666&nbsp;ECF4<br/>
+							8F03&nbsp;<strong>EFB7&nbsp;4277&nbsp;ECE4&nbsp;E222</strong>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-xs-4 text-right">OTR</div>
+						<div class="col-xs-8 text-left">
+							F643&nbsp;5CE0 300F&nbsp;3236&nbsp;62DA<br/>
+							3C0E&nbsp;<strong>5769&nbsp;616D 2D3D&nbsp;AC72</strong>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-xs-4 text-right">GNU Social</div>
+						<div class="col-xs-8 text-left">
+							<a href="https://status.imirhil.fr/">https://status.imirhil.fr/</a>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-xs-4 text-right">Twitter</div>
+						<div class="col-xs-8 text-left">
+							<a href="https://twitter.com/aeris22">@aeris22</a>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-xs-4 text-right">IRC</div>
+						<div class="col-xs-8 text-left">
+							_aeris_ (Freenode, Geeknode, OFTC)
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

source/_header.erb

@@ -0,0 +1,23 @@
+<header>
+	<div class="container text-center">
+		<div class="row">
+			<div class="col-lg-12">
+				<img class="avatar" src="images/profile.png" alt="Tux Debian">
+				<div class="intro-text">
+					<h1>Aeris</h1>
+					<hr />
+					<p class="skills">
+						Groupe crypto-terroriste individuel auto-radicalisé sur l’Internet digital
+					</p>
+					<p class="skills">
+						Exégète numériste amateur de mauvaise foi
+					</p>
+					<p class="skills">
+						Paysan du réseau et cultivateur d’oignons
+					</p>
+					<hr />
+				</div>
+			</div>
+		</div>
+	</div>
+</header>

source/_nav.erb

@@ -0,0 +1,18 @@
+<nav class="navbar navbar-default navbar-fixed-top">
+	<div class="container">
+		<ul class="nav navbar-nav navbar-right">
+			<li class="page-scroll">
+				<a href="https://blog.imirhil.fr/">Blog</a>
+			</li>
+			<li class="page-scroll">
+				<a href="#projects">Projets</a>
+			</li>
+			<li class="page-scroll">
+				<a href="#conferences">Conférences</a>
+			</li>
+			<li class="page-scroll">
+				<a href="#contact">Contact</a>
+			</li>
+		</ul>
+	</div>
+</nav>

source/_projects.erb

@@ -0,0 +1,76 @@
+<section id="projects">
+	<div class="container">
+		<div class="row">
+			<div class="col-lg-12 text-center">
+				<h2>Projets</h2>
+				<hr />
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-sm-4 project-container">
+				<div class="project">
+					<a href="https://imirhil.fr/tls/" data-toggle="modal">
+						<i class="fa fa-search-plus fa-3x"></i>
+						<img src="images/projects/sslcheck.png" alt="SSL Check" />
+						<!--
+						Image by Sean MacEntee
+						CC-BY 2.0 https://creativecommons.org/licenses/by/2.0/
+						https://www.flickr.com/photos/smemon/15944989872/
+						/-->
+					</a>
+				</div>
+			</div>
+			<div class="col-sm-4 project-container">
+				<div class="project">
+					<a href="https://café-vie-privée.fr/" data-toggle="modal">
+						<div class="caption">
+							<div class="caption-content">
+								<i class="fa fa-search-plus fa-3x"></i>
+							</div>
+						</div>
+						<img src="images/projects/chiffrofete.png" alt="Café vie privée">
+					</a>
+				</div>
+			</div>
+			<div class="col-sm-4 project-container">
+				<div class="project">
+					<a href="https://nsa.imirhil.fr/" data-toggle="modal">
+						<div class="caption">
+							<div class="caption-content">
+								<i class="fa fa-search-plus fa-3x"></i>
+							</div>
+						</div>
+						<img src="images/projects/nsa-observer.png" alt="NSA Observer">
+					</a>
+				</div>
+			</div>
+		</div>
+		<br/>
+		<div class="row">
+			<div class="col-sm-4 project-container">
+				<div class="project">
+					<a href="https://addons.mozilla.org/firefox/addon/enjoy-reading/" data-toggle="modal">
+						<div class="caption">
+							<div class="caption-content">
+								<i class="fa fa-search-plus fa-3x"></i>
+							</div>
+						</div>
+						<img src="images/projects/enjoy-reading.png" alt="Enjoy Reading">
+					</a>
+				</div>
+			</div>
+			<div class="col-sm-4 project-container">
+				<div class="project">
+					<a href="https://addons.mozilla.org/firefox/addon/shaarli/" data-toggle="modal">
+						<div class="caption">
+							<div class="caption-content">
+								<i class="fa fa-search-plus fa-3x"></i>
+							</div>
+						</div>
+						<img src="images/projects/shaarli.png" alt="Shaarli">
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

source/index.erb

@@ -0,0 +1,4 @@
+<%= partial 'header' %>
+<%= partial 'projects' %>
+<%= partial 'conferences' %>
+<%= partial 'contact' %>

source/javascripts/all.coffee

@@ -0,0 +1 @@
+#= require_tree .

source/layouts/layout.erb

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
+	<meta name=viewport content="width=device-width, initial-scale=1" />
+	<link rel="shortcut icon" type="image/png" href="images/favicon.png" />
+	<title><%= current_page.data.title || 'Extrémiste inside' %></title>
+	<%= stylesheet_link_tag 'all', media: :all %>
+</head>
+	<body>
+		<%= partial 'nav' %>
+		<%= yield %>
+	</body>
+</html>

source/stylesheets/all.scss

@@ -0,0 +1,13 @@
+@import 'font-awesome';
+@import 'theme';
+
+@import 'bootstrap/variables';
+@import 'bootstrap/mixins';
+@import 'bootstrap/normalize';
+@import 'bootstrap/scaffolding';
+@import 'bootstrap/type';
+@import 'bootstrap/grid';
+@import 'bootstrap/forms';
+@import 'bootstrap/navs';
+@import 'bootstrap/navbar';
+

source/stylesheets/theme.scss

@@ -0,0 +1,90 @@
+@import 'variables';
+@import 'bootstrap/variables';
+
+body {
+	padding-top: $navbar-height + 20px;
+}
+
+@media (max-width: 768px) {
+	body {
+		padding-top: 3*$navbar-height + 20px;
+	}
+}
+
+header {
+	.avatar {
+		background-color: $secondary-bg;
+		border-radius: 105px;
+		padding: 10px;
+	}
+}
+
+@media (min-width: 768px) {
+	header {
+		margin-top: 100px;
+		margin-bottom: 150px;
+	}
+}
+
+.navbar {
+	text-transform: uppercase;
+	font-weight: 700;
+	.navbar-nav {
+		letter-spacing: 1px;
+	}
+}
+
+section {
+	margin-bottom: 100px;
+}
+
+#projects {
+	.project-container {
+		height: 200px;
+
+		.project {
+			height: 100%;
+			width: 100%;
+			border: 1px solid $text-color;
+			border-radius: 10px;
+
+			img, i.fa-search-plus {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translateX(-50%) translateY(-50%);
+			}
+
+			i.fa-search-plus {
+				z-index: 2;
+				opacity: 0;
+				transition: all ease 0.5s;
+				-webkit-transition: all ease 0.5s;
+				-moz-transition: all ease 0.5s;
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+
+	}
+}
+
+#conferences {
+	ul {
+		list-style-type: none;
+	}
+
+	.title {
+		font-weight: bold;
+	}
+
+	.location {
+		font-size: 0.75em;
+	}
+
+	.links a {
+		margin-left: 10px;
+	}
+}

source/stylesheets/variables.scss

@@ -0,0 +1,12 @@
+$primary-bg: #2c3e50;
+$secondary-bg: lighten($primary-bg, 25%);
+
+$body-bg: $primary-bg;
+$text-color: #fff;
+$navbar-default-bg: $secondary-bg;
+$navbar-default-color: #fff;
+$navbar-default-link-color: #fff;
+$navbar-default-link-hover-color: darken($navbar-default-link-color, 10%);
+$link-color: lighten($secondary-bg, 25%);
+
+$font-size-base: 20px;