parent
b9c9134a9e
commit
3b0621d335
@ -0,0 +1,103 @@ |
||||
%span.anchor#conferences |
||||
%section.conferences |
||||
%h1 Conférences |
||||
%hr |
||||
%ul |
||||
%li |
||||
%span.title Le projet Tor |
||||
%span.location 11/16/2013, Ubuntu Party |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20131116_ubuntu-party_tor/'} |
||||
%i.fa.fa-slideshare |
||||
Support |
||||
%li |
||||
%span.title OpenSSL Valhalla Rampage |
||||
%span.location 26/06/2014, Pas sage en Seine |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20140626_pses_openssl-valhalla-rampage/'} |
||||
%i.fa.fa-slideshare |
||||
Support |
||||
%a{href: 'https://confs.imirhil.fr/20140626_pses_openssl-valhalla-rampage.webm'} |
||||
%i.fa.fa-video-camera |
||||
Vidéo |
||||
%li |
||||
%span.title Cryptographie « unplugged » |
||||
%span.location 27/06/2014, Pas sage en Seine |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20140627_pses_crypto-unplugged-solitaire.odp'} |
||||
%i.fa.fa-slideshare |
||||
Support |
||||
%li |
||||
%span.title Introduction aux chiffrofêtes |
||||
%span.location 16/11/2014, Ubuntu Party |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20141116_ubuntu-party_introduction-chiffrofetes.webm'} |
||||
%i.fa.fa-video-camera |
||||
Vidéo |
||||
%li |
||||
%span.title Hygiène numérique, applications mobiles et vie privée |
||||
%span.location 16/11/2014, Ubuntu Party |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20141116_ubuntu_chiffrofete/privacy.html'} |
||||
%i.fa.fa-slideshare |
||||
Support |
||||
%a{href: 'https://confs.imirhil.fr/20141116_ubuntu-party_hygiene-numerique-applications-mobiles-vie-privee.webm'} |
||||
%i.fa.fa-video-camera |
||||
Vidéo |
||||
%li |
||||
%span.title Les aventures d’un petit paquet réseau |
||||
%span.location 16/11/2014, Ubuntu Party |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20141116_ubuntu_chiffrofete/paquet.html'} |
||||
%i.fa.fa-slideshare |
||||
Support |
||||
%a{href: 'https://confs.imirhil.fr/20141116_ubuntu-party_aventures-petit-paquet-reseau.webm'} |
||||
%i.fa.fa-video-camera |
||||
Vidéo |
||||
%li |
||||
%span.title Comprendre HTTPS |
||||
%span.location 16/11/2014, Ubuntu Party |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20141116_ubuntu_chiffrofete/tls.html'} |
||||
%i.fa.fa-slideshare |
||||
Support |
||||
%a{href: 'https://confs.imirhil.fr/20141116_ubuntu-party_comprendre-https.webm'} |
||||
%i.fa.fa-video-camera |
||||
Vidéo |
||||
%li |
||||
%span.title Live FAQ |
||||
%span.location 16/11/2014, Ubuntu Party |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20141116_ubuntu-party_live-faq.webm'} |
||||
%i.fa.fa-video-camera |
||||
Vidéo |
||||
%li |
||||
%span.title La surveillance de masse |
||||
%span.location 07/03/2015, Journées Fédérez |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20150307_federez_surveillance/'} |
||||
%i.fa.fa-slideshare |
||||
Support |
||||
%a{href: 'https://confs.imirhil.fr/20150307_federez_surveillance.webm'} |
||||
%i.fa.fa-video-camera |
||||
Vidéo |
||||
%li |
||||
%span.title Dégooglisons Internet |
||||
%span.location 28/03/2015, Bibliothèque Francophone Multimédia de Limoges |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20150328_bfm-limoges_degooglisons-internet.odp'} |
||||
%i.fa.fa-slideshare |
||||
Support |
||||
%a{href: 'https://confs.imirhil.fr/20150328_degooglisons-internet.webm'} |
||||
%i.fa.fa-video-camera |
||||
Vidéo |
||||
%li |
||||
%span.title SSL/TLS pour les nuls |
||||
%span.location 20/06/2015, Pas sage en Seine |
||||
%span.links |
||||
%a{href: 'https://confs.imirhil.fr/20150620_pses_tls.webm'} |
||||
%i.fa.fa-slideshare |
||||
Support |
||||
%a{href: 'https://confs.imirhil.fr/20150620_pses_tls/'} |
||||
%i.fa.fa-video-camera |
||||
Vidéo |
@ -0,0 +1,22 @@ |
||||
%footer |
||||
%p |
||||
La plupart de mes sites utilise |
||||
%a{href: 'http://www.cacert.org/'} CACert |
||||
comme autoritée de certification pour mes certificats TLS. |
||||
%p |
||||
Ces sites étant aussi protégés par |
||||
= succeed ',' do |
||||
%a{href: 'https://fr.wikipedia.org/wiki/HTTP_Strict_Transport_Security'} HSTS |
||||
vous aurez donc sûrement besoin d’installer |
||||
%a{href: 'http://www.cacert.org/index.php?id=3'} leurs certificats |
||||
pour pouvoir y accéder. |
||||
%p |
||||
Pour vous assurez de la validité des certificats utilisés, ils sont aussi protégés par |
||||
= succeed ',' do |
||||
%a{href: 'https://fr.wikipedia.org/wiki/Domain_Name_System_Security_Extensions'} DNSSec |
||||
= succeed ',' do |
||||
%a{href: 'https://fr.wikipedia.org/wiki/DNS_-_based_Authentication_of_Named_Entities'} DANE/TLSA |
||||
et |
||||
= succeed '.' do |
||||
%a{href: 'https://fr.wikipedia.org/wiki/HTTP_Public_Key_Pinning'} HPKP |
||||
|
@ -1,23 +0,0 @@ |
||||
<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> |
@ -0,0 +1,11 @@ |
||||
%span.anchor#identity |
||||
%section.identity |
||||
%img.big{src: 'images/profile.png', alt: 'Tux Debian'} |
||||
%img.small{src: 'images/profile-small.png', alt: 'Tux Debian'} |
||||
%h1 Aeris |
||||
%hr |
||||
%div |
||||
%p Groupe crypto-terroriste individuel auto-radicalisé sur l’Internet digital |
||||
%p Exégète numériste amateur de mauvaise foi |
||||
%p Paysan du réseau et cultivateur d’oignons |
||||
%hr |
@ -1,18 +0,0 @@ |
||||
<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> |
@ -0,0 +1,6 @@ |
||||
%nav |
||||
%div |
||||
%a{href: 'https://blog.imirhil.fr/'} Blog |
||||
%a{href: '#projects'} Projets |
||||
%a{href: '#conferences'} Conférences |
||||
%a{href: '#contact'} Contact |
@ -1,76 +0,0 @@ |
||||
<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> |
@ -0,0 +1,25 @@ |
||||
%span.anchor#projects |
||||
%section.projects |
||||
%h1 Projets |
||||
%hr |
||||
.projects |
||||
.project |
||||
%a{href: 'https//imirhil.fr/tls/'} |
||||
%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/ |
||||
.project |
||||
%a{href: 'https//café-vie-privée.fr/'} |
||||
%img{src: 'images/projects/chiffrofete.png', alt: 'Café vie privée'} |
||||
.project |
||||
%a{href: 'https//nsa.imirhil.fr/'} |
||||
%img{src: 'images/projects/nsa-observer.png', alt: 'NSA Observer'} |
||||
.projects |
||||
.project |
||||
%a{href: 'https//addons.mozilla.org/firefox/addon/enjoy-reading/'} |
||||
%img{src: 'images/projects/enjoy-reading.png', alt: 'Enjoy Reading'} |
||||
.project |
||||
%a{href: 'https//addons.mozilla.org/firefox/addon/shaarli/'} |
||||
%img{src: 'images/projects/shaarli.png', alt: 'Shaarli'} |
@ -0,0 +1,2 @@ |
||||
%header |
||||
= partial '_nav' |
After Width: | Height: | Size: 9.8 KiB |
@ -1,4 +0,0 @@ |
||||
<%= partial 'header' %> |
||||
<%= partial 'projects' %> |
||||
<%= partial 'conferences' %> |
||||
<%= partial 'contact' %> |
@ -0,0 +1,4 @@ |
||||
= partial 'identity' |
||||
= partial 'projects' |
||||
= partial 'conferences' |
||||
= partial 'contact' |
@ -1,13 +1,288 @@ |
||||
@import 'font-awesome'; |
||||
@import "font-awesome/variables"; |
||||
@import "font-awesome/mixins"; |
||||
@import "font-awesome/path"; |
||||
@import "font-awesome/core"; |
||||
@import "font-awesome/icons"; |
||||
|
||||
@import 'mixins'; |
||||
@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'; |
||||
* { |
||||
box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
html { |
||||
font-family: Arial, Helvetica, sans-serif; |
||||
} |
||||
|
||||
body { |
||||
background-color: $primary-bg; |
||||
color: $text-color; |
||||
font-size: $font-size-base; |
||||
padding-top: $navbar-height + 10px; |
||||
|
||||
width: 100%; |
||||
margin: auto; |
||||
|
||||
padding-bottom: 100px; |
||||
} |
||||
|
||||
h1, h2 { |
||||
margin: 0px; |
||||
} |
||||
|
||||
a { |
||||
color: $link-color; |
||||
text-decoration: none; |
||||
|
||||
&:hover { |
||||
color: $link-color-hover; |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
p { |
||||
margin: 0; |
||||
} |
||||
|
||||
header { |
||||
position: fixed; |
||||
right: 0; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100%; |
||||
height: $navbar-height; |
||||
|
||||
background-color: $navbar-bg; |
||||
color: $navbar-color; |
||||
|
||||
font-weight: bold; |
||||
|
||||
display: -webkit-flex; |
||||
display: flex; |
||||
-webkit-align-items: center; |
||||
align-items: center; |
||||
-webkit-justify-content: center; |
||||
justify-content: center; |
||||
|
||||
a { |
||||
color: $navbar-link-color; |
||||
text-transform: uppercase; |
||||
|
||||
&:hover { |
||||
color: $navbar-link-color-hover; |
||||
} |
||||
} |
||||
|
||||
nav { |
||||
width: 100%; |
||||
|
||||
div { |
||||
text-align: right; |
||||
|
||||
a { |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
span.anchor { |
||||
display: block; |
||||
//height: $navbar-height; |
||||
//margin-top: -$navbar-height; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
section { |
||||
h1 { |
||||
text-align: center; |
||||
font-size: 2em; |
||||
} |
||||
} |
||||
|
||||
section.identity { |
||||
text-align: center; |
||||
|
||||
img { |
||||
margin: auto; |
||||
background-color: $secondary-bg; |
||||
|
||||
&.big { |
||||
padding: 10px; |
||||
border-radius: 105px; |
||||
-moz-border-radius: 105px; |
||||
-webkit-border-radius: 105px; |
||||
} |
||||
|
||||
&.small { |
||||
padding: 4px; |
||||
border-radius: 52px; |
||||
-moz-border-radius: 52px; |
||||
-webkit-border-radius: 52px; |
||||
} |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 3em; |
||||
margin: 20px 0; |
||||
} |
||||
|
||||
p { |
||||
margin: 20px 0; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: $screen-xs) { |
||||
header { |
||||
height: $navbar-height / 2; |
||||
|
||||
nav { |
||||
font-size: 10px; |
||||
} |
||||
} |
||||
|
||||
span.anchor { |
||||
height: $navbar-height; |
||||
margin-top: -$navbar-height; |
||||
} |
||||
|
||||
section.identity { |
||||
img.big { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (min-width: $screen-xs) { |
||||
section { |
||||
margin-top: 100px; |
||||
|
||||
&.identity { |
||||
img.small { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
footer { |
||||
margin-top: 50px; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: $body-width) { |
||||
nav { |
||||
padding-right: 10px; |
||||
} |
||||
} |
||||
|
||||
@media (min-width: $body-width) { |
||||
body, nav { |
||||
max-width: $body-width; |
||||
} |
||||
|
||||
header { |
||||
width: 100%; |
||||
|
||||
div { |
||||
width: 100%; |
||||
margin: auto; |
||||
} |
||||
} |
||||
} |
||||
|
||||
section.projects { |
||||
.projects { |
||||
.project { |
||||
margin: 10px; |
||||
padding: 10px; |
||||
border: 1px solid #fff; |
||||
border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
-webkit-border-radius: 10px; |
||||
|
||||
display: -webkit-flex; |
||||
display: flex; |
||||
-webkit-align-items: center; |
||||
align-items: center; |
||||
-webkit-justify-content: center; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (min-width: $screen-sm) { |
||||
section.projects { |
||||
.projects { |
||||
display: -webkit-flex; |
||||
display: flex; |
||||
width: 100%; |
||||
-webkit-align-items: stretch; |
||||
align-items: stretch; |
||||
|
||||
.project { |
||||
-webkit-flex: 1; |
||||
flex: 1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
section.conferences { |
||||
ul { |
||||
list-style: none; |
||||
|
||||
li { |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
|
||||
.title { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.location { |
||||
font-size: 0.8em; |
||||
} |
||||
|
||||
.links a { |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
|
||||
section.contact { |
||||
div:not([class = 'nb']) { |
||||
margin-top: 10px; |
||||
|
||||
display: -webkit-flex; |
||||
display: flex; |
||||
-webkit-align-items: stretch; |
||||
align-items: stretch; |
||||
|
||||
span { |
||||
&.title { |
||||
-webkit-flex: 1; |
||||
flex: 1; |
||||
|
||||
text-align: right; |
||||
font-weight: bold; |
||||
padding-right: 10px; |
||||
} |
||||
|
||||
&.content { |
||||
-webkit-flex: 3; |
||||
flex: 3; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
footer { |
||||
font-size: 0.75em; |
||||
|
||||
p { |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
|
@ -1,90 +1,21 @@ |
||||
@import 'variables'; |
||||
@import 'bootstrap/variables'; |
||||
$primary-bg: #2c3e50; |
||||
$secondary-bg: lighten($primary-bg, 25%); |
||||
|
||||
body { |
||||
padding-top: $navbar-height + 20px; |
||||
} |
||||
$text-color: #fff; |
||||
$link-color: lighten($secondary-bg, 25%); |
||||
$link-color-hover: darken($link-color, 25%); |
||||
|
||||
@media (max-width: 768px) { |
||||
body { |
||||
padding-top: 3*$navbar-height + 20px; |
||||
} |
||||
} |
||||
$navbar-bg: $secondary-bg; |
||||
$navbar-color: $text-color; |
||||
$navbar-link-color: #fff; |
||||
$navbar-link-color-hover: darken($navbar-link-color, 25%); |
||||
$navbar-height: 50px; |
||||
|
||||
header { |
||||
.avatar { |
||||
background-color: $secondary-bg; |
||||
border-radius: 105px; |
||||
padding: 10px; |
||||
} |
||||
} |
||||
$font-size-base: 20px; |
||||
|
||||
@media (min-width: 768px) { |
||||
header { |
||||
margin-top: 100px; |
||||
margin-bottom: 150px; |
||||
} |
||||
} |
||||
$screen-xs: 480px; |
||||
$screen-sm: 768px; |
||||
$screen-md: 992px; |
||||
$screen-lg: 1200px; |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
$body-width: 960px; |
||||
|
@ -1,12 +0,0 @@ |
||||
$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; |
Loading…
Reference in new issue