Browse Source

First commit ?

master
HorlogeSkynet 3 years ago
commit
5faf2e8905
26 changed files with 1447 additions and 0 deletions
  1. +8
    -0
      .gitattributes
  2. +4
    -0
      .gitignore
  3. +21
    -0
      _config.yml
  4. +70
    -0
      _layouts/default.html
  5. +9
    -0
      _layouts/post.html
  6. +118
    -0
      about/index.html
  7. +1
    -0
      blog/articles/index.html
  8. +14
    -0
      blog/index.html
  9. +1
    -0
      blog/musics/index.html
  10. +1
    -0
      blog/programming/index.html
  11. +1
    -0
      blog/tutorials/index.html
  12. +49
    -0
      css/reset.css
  13. +529
    -0
      css/style.css
  14. +471
    -0
      css/timeline.css
  15. BIN
      img/background.jpg
  16. BIN
      img/cd-icon-location.svg
  17. BIN
      img/cd-icon-movie.svg
  18. BIN
      img/cd-icon-picture.svg
  19. BIN
      img/favicon.ico
  20. BIN
      img/image.jpg
  21. BIN
      img/portrait.jpg
  22. +7
    -0
      index.html
  23. BIN
      js/jquery-3.0.0.min.js
  24. +90
    -0
      js/main.js
  25. BIN
      js/modernizr-2.7.1.min.js
  26. +26
    -0
      js/timeline.js

+ 8
- 0
.gitattributes View File

@@ -0,0 +1,8 @@
*.ico filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
*.svg filter=lfs diff=lfs merge=lfs -text
*.eot filter=lfs diff=lfs merge=lfs -text
*.ttf filter=lfs diff=lfs merge=lfs -text
*.woff* filter=lfs diff=lfs merge=lfs -text
*.min.* filter=lfs diff=lfs merge=lfs -text

+ 4
- 0
.gitignore View File

@@ -0,0 +1,4 @@
_site/
.sass-cache/
.jekyll-metadata
js/.DS_Store

+ 21
- 0
_config.yml View File

@@ -0,0 +1,21 @@
name: Samuel Forestier's Website

## SEO ##
title: Samuel Forestier
description: Samuel Forestier's new personal website
url: https://horlogeskynet.github.io
author: Samuel FORESTIER
logo: /img/image.jpg
google_site_verification: 6syaHIxjtyn8QuTePL49XEq_xzpcUdlQNR7bH5fz-HQ
## ___ ##

## PLUGINS ##
gems:
- jemoji
- jekyll-seo-tag
- jekyll-sitemap
## _______ ##

## PERMALINK ##
permalink: /blog/:year/:month/:day/:title
## _________ ##

+ 70
- 0
_layouts/default.html View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />

<title>{{ page.title }} | Samuel Forestier</title>

{% seo title=false %}
</head>

<body>
<div id="withoutFooter">
<header class="cd-auto-hide-header">
<span>
<img src="img/portrait.jpg">
</span>
<span>
<p>Samuel Forestier's Website</p>
</span>
<span>
<nav class="cd-primary-nav">
<a href="#cd-navigation" class="nav-trigger">
<span>
<em aria-hidden="true"></em>
PAGES
</span>
</a>
<ul id="cd-navigation">
<li><a href="/"><i class="icon ion-home"></i>Home</a></li>
<li><a href="/blog/"><i class="icon ion-paper-airplane"></i>Blog</a></li>
<li><a href="/about/"><i class="icon ion-information-circled"></i>About...</a></li>
</ul>
</nav>
</span>
</header>

<section class="cd-hero">
<div class="cd-hero-content">
<!-- ... -->
</div>
</section>

<nav class="cd-secondary-nav">
<ul>
<li><a class="active" href="blog/articles/"><i class="icon ion-edit"></i>Articles</a></li>
<li><a href="/blog/programming/"><i class="icon ion-code"></i>Programming</a></li>
<li><a href="/blog/tutorials/"><i class="icon ion-settings"></i>Tutorials</a></li>
<li><a href="/blog/musics/"><i class="icon ion-music-note"></i>Musics</a></li>
</ul>
</nav>

<main class="cd-main-content sub-nav-hero">
{{ content }}
</main>
</div>

<footer>
<span>All rights reserved © &mdash; Samuel FORESTIER &mdash; 2017</span>
</footer>

<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

+ 9
- 0
_layouts/post.html View File

@@ -0,0 +1,9 @@
---
layout: default
---

<h1>{{ page.title }}</h1>

<div class="post">
{{ content }}
</div>

+ 118
- 0
about/index.html View File

@@ -0,0 +1,118 @@
---
layout: default
title: About
---

<link rel="stylesheet" type="text/css" href="../css/timeline.css" />


<section id="cd-timeline" class="cd-container">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="../img/cd-icon-picture.svg" alt="Picture">
</div>

<div class="cd-timeline-content">
<h2>Title of section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="cd-date">Jan 14</span>
</div>
</div>

<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="../img/cd-icon-movie.svg" alt="Movie">
</div>

<div class="cd-timeline-content">
<h2>Title of section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
<span class="cd-date">Jan 18</span>
</div>
</div>

<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="../img/cd-icon-picture.svg" alt="Picture">
</div>

<div class="cd-timeline-content">
<h2>Title of section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
<span class="cd-date">Jan 24</span>
</div>
</div>

<div class="cd-timeline-block">
<div class="cd-timeline-img cd-location">
<img src="../img/cd-icon-location.svg" alt="Location">
</div>

<div class="cd-timeline-content">
<h2>Title of section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="cd-date">Feb 14</span>
</div>
</div>

<div class="cd-timeline-block">
<div class="cd-timeline-img cd-location">
<img src="../img/cd-icon-location.svg" alt="Location">
</div>

<div class="cd-timeline-content">
<h2>Title of section 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
<span class="cd-date">Feb 18</span>
</div>
</div>

<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="../img/cd-icon-movie.svg" alt="Movie">
</div>

<div class="cd-timeline-content">
<h2>Final Section</h2>
<p>This is the content of the last section</p>
<span class="cd-date">Feb 26</span>
</div>
</div>
</section> <!-- cd-timeline -->


<script src="../js/mordernizr-2.7.1.min.js"></script>
<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/timeline.js"></script>


<!-- <span>
<div class="github-card" data-github="HorlogeSkynet" data-width="280" data-height="105" data-theme="default"></div>
</span>

<span>
<div class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="fr_FR" data-type="horizontal" data-theme="light" data-vanity="samuelforestier">
<a class="LI-simple-link" href='https://fr.linkedin.com/in/samuelforestier?trk=profile-badge'>
Samuel FORESTIER
</a>
</div>
</span>
<span>
<div class="g-person" data-width="280" data-href="https://plus.google.com/u/0/101188517975634577539" data-layout="landscape" data-rel="author"></div>
</span>

<script src="https://cdn.jsdelivr.net/github-cards/latest/widget.js" async defer></script>

<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.defer = true;
po.src = 'https://apis.google.com/js/platform.js';

var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script> -->

+ 1
- 0
blog/articles/index.html View File

@@ -0,0 +1 @@
Articles page

+ 14
- 0
blog/index.html View File

@@ -0,0 +1,14 @@
---
layout: default
title: Samuel's Blog
---

<h1>{{ page.title }}</h1>

<ul class="posts">
{% for post in site.posts %}
{% if post.type == page.type %}
<li><span>{{ post.date | date_to_string }}</span> » <a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li>
{% endif %}
{% endfor %}
</ul>

+ 1
- 0
blog/musics/index.html View File

@@ -0,0 +1 @@
Musics page

+ 1
- 0
blog/programming/index.html View File

@@ -0,0 +1 @@
Progamming page !

+ 1
- 0
blog/tutorials/index.html View File

@@ -0,0 +1 @@
Tutorials page

+ 49
- 0
css/reset.css View File

@@ -0,0 +1,49 @@

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

+ 529
- 0
css/style.css View File

@@ -0,0 +1,529 @@
/* --------------------------------

Primary style

-------------------------------- */
*, *::after, *::before {
box-sizing: border-box;
}

html {
height: 100%;
font-size: 62.5%;
}

body {
margin: -60px;
height: 100%;
background-color: #708090;
font-size: 1.6rem;
font-family: "Hind", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#withoutFooter {
min-height: calc(100% - 60px);
}

body > footer {
height: 60px;
line-height: 60px;
position: relative;
right: 0;
bottom: 0;
left: 0;
background-color: black;
text-align: center;
}

body > footer > span {
color: #ffffff;
font-style: italic;
font-family: "Hind", sans-serif;
opacity: 0.7;
}

a {
color: #6495ED;
text-decoration: none;
}

h1, h2 {
font-weight: bold;
}

.cd-auto-hide-header img {
top: 50%;
position: relative;
border: 1px solid #708090;
border-radius: 75%;
max-height: 95%;
max-width: 95%;
margin-left: 5px;
display: inline-block;
vertical-align: middle;
transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cd-auto-hide-header img:hover {
opacity: 0.5;
}

.cd-auto-hide-header p {
margin-left: 10px;
color: black;
font-family: "Hind", sans-serif;
display: inline-block;
vertical-align: middle;
line-height: normal;
}

.cd-primary-nav > ul a i, .cd-secondary-nav > ul a i {
margin-right: 5px;
}


/* --------------------------------

1. Auto-Hiding Navigation - Simple

-------------------------------- */
.cd-auto-hide-header {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.cd-auto-hide-header::after {
clear: both;
content: "";
display: block;
}
.cd-auto-hide-header.is-hidden {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
@media only screen and (min-width: 1024px) {
.cd-auto-hide-header {
height: 80px;
}
}

.cd-auto-hide-header .logo,
.cd-auto-hide-header .nav-trigger {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.cd-auto-hide-header .logo {
left: 5%;
}
.cd-auto-hide-header .logo a, .cd-auto-hide-header .logo img {
display: block;
}

.cd-auto-hide-header .nav-trigger {
/* vertically align its content */
display: table;
height: 100%;
padding: 0 1em;
font-size: 1.2rem;
text-transform: uppercase;
color: #25283D;
font-weight: bold;
right: 0;
border-left: 1px solid #f2f2f2;
}
.cd-auto-hide-header .nav-trigger span {
/* vertically align inside parent element */
display: table-cell;
vertical-align: middle;
}
.cd-auto-hide-header .nav-trigger em, .cd-auto-hide-header .nav-trigger em::after, .cd-auto-hide-header .nav-trigger em::before {
/* this is the menu icon */
display: block;
position: relative;
height: 2px;
width: 22px;
background-color: #25283D;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-auto-hide-header .nav-trigger em {
/* this is the menu central line */
margin: 6px auto 14px;
-webkit-transition: background-color .2s;
transition: background-color .2s;
}
.cd-auto-hide-header .nav-trigger em::before, .cd-auto-hide-header .nav-trigger em::after {
position: absolute;
content: '';
left: 0;
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s;
}
.cd-auto-hide-header .nav-trigger em::before {
/* this is the menu icon top line */
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
.cd-auto-hide-header .nav-trigger em::after {
/* this is the menu icon bottom line */
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
}
@media only screen and (min-width: 1024px) {
.cd-auto-hide-header .nav-trigger {
display: none;
}
}

.cd-auto-hide-header.nav-open .nav-trigger em {
/* transform menu icon into a 'X' icon */
background-color: rgba(255, 255, 255, 0);
}
.cd-auto-hide-header.nav-open .nav-trigger em::before {
/* rotate top line */
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cd-auto-hide-header.nav-open .nav-trigger em::after {
/* rotate bottom line */
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

.cd-primary-nav {
display: inline-block;
float: right;
height: 100%;
padding-right: 5%;
}
.cd-primary-nav > ul {
position: absolute;
z-index: 2;
top: 60px;
left: 0;
width: 100%;
background-color: #ffffff;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
}
.cd-primary-nav > ul a {
/* target primary-nav links */
display: block;
height: 50px;
line-height: 50px;
padding-left: 5%;
color: black;
font-size: 1.8rem;
border-top: 1px solid black;
}
.cd-primary-nav > ul a:hover, .cd-primary-nav > ul a.active {
background-color: black;
color: white;
}
@media only screen and (min-width: 1024px) {
.cd-primary-nav {
/* vertically align its content */
display: table;
}
.cd-primary-nav > ul {
/* vertically align inside parent element */
display: table-cell;
vertical-align: middle;
/* reset mobile style */
position: relative;
width: auto;
top: 0;
padding: 0;
background-color: transparent;
box-shadow: none;
}
.cd-primary-nav > ul::after {
clear: both;
content: "";
display: block;
}
.cd-primary-nav > ul li {
display: inline-block;
float: left;
margin-right: 1.5em;
}
.cd-primary-nav > ul li:last-of-type {
margin-right: 0;
}
.cd-primary-nav > ul a {
/* reset mobile style */
height: auto;
line-height: normal;
padding: 2px;
border: none;
}
.cd-primary-nav > ul a:hover, .cd-primary-nav > ul a.active {
border-radius: 15%;
}
}

.nav-open .cd-primary-nav ul,
.cd-primary-nav ul:target {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
@media only screen and (min-width: 1024px) {
.nav-open .cd-primary-nav ul,
.cd-primary-nav ul:target {
display: table-cell;
}
}

/* --------------------------------

2. Auto-Hiding Navigation - with Sub Nav

-------------------------------- */
.cd-secondary-nav {
position: relative;
z-index: 1;
clear: both;
width: 100%;
height: 50px;
right: 0;
display: flex;
justify-content: center;
background-color: black;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.cd-secondary-nav::after {
/* gradient on the right - to indicate it's possible to scroll */
content: '';
position: absolute;
z-index: 1;
top: 0;
right: 0;
height: 100%;
width: 35px;
background: transparent;
background: -webkit-linear-gradient(right, black, rgba(37, 40, 61, 0));
background: linear-gradient(to left, black, rgba(37, 40, 61, 0));
pointer-events: none;
-webkit-transition: opacity .2s;
transition: opacity .2s;
}
.cd-secondary-nav.nav-end::after {
opacity: 0;
}
.cd-secondary-nav ul, .cd-secondary-nav li, .cd-secondary-nav a {
height: 100%;
}
.cd-secondary-nav ul {
/* enables a flex context for all its direct children */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cd-secondary-nav ul::after {
clear: both;
content: "";
display: block;
}
.cd-secondary-nav li {
display: inline-block;
float: left;
/* do not shrink - elements float on the right of the element */
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.cd-secondary-nav li:last-of-type {
padding-right: 20px;
}
.cd-secondary-nav a {
display: block;
color: #ffffff;
opacity: .6;
line-height: 50px;
padding: 0 1em;
}
.cd-secondary-nav a:hover, .cd-secondary-nav a.active {
opacity: 1;
}
@media only screen and (min-width: 1024px) {
.cd-secondary-nav {
height: 70px;
overflow: visible;
}
.cd-secondary-nav li {
/* reset mobile style */
float: none;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.cd-secondary-nav a {
line-height: 70px;
}
.cd-secondary-nav a.active {
box-shadow: inset 0 -3px #4169E1;
}
}

/* --------------------------------

3. Auto-Hiding Navigation - with Sub Nav + Hero Image

-------------------------------- */
.cd-secondary-nav.fixed {
position: fixed;
top: 60px;
}
.cd-secondary-nav.slide-up {
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
}
@media only screen and (min-width: 1024px) {
.cd-secondary-nav.fixed {
top: 80px;
/* fixes a bug where nav and subnab move with a slight delay */
box-shadow: 0 -6px 0 #25283D;
}
.cd-secondary-nav.slide-up {
-webkit-transform: translateY(-80px);
-ms-transform: translateY(-80px);
transform: translateY(-80px);
}
}

/* --------------------------------

Main content

-------------------------------- */
.cd-main-content {
padding: 60px 5% 2em;
overflow: hidden;
}
.cd-main-content.sub-nav {
/* to be used if there is sub nav */
padding-top: 110px;
}
.cd-main-content.sub-nav-hero {
/* to be used if there is hero image + subnav */
padding-top: 0;
}
.cd-main-content.sub-nav-hero.secondary-nav-fixed {
margin-top: 50px;
}
.cd-main-content p {
max-width: 1024px;
line-height: 1.6;
margin: 2em auto;
font-family: "David Libre", serif;
color: white;
opacity: 0.8;
}
@media only screen and (min-width: 1024px) {
.cd-main-content {
padding-top: 80px;
}
.cd-main-content.sub-nav {
padding-top: 150px;
}
.cd-main-content.sub-nav-hero.secondary-nav-fixed {
margin-top: 70px;
}
.cd-main-content p {
font-size: 2.4rem;
}
}

/*
adjust the positioning of in-page links
http://nicolasgallagher.com/jump-links-and-viewport-positioning/
*/
.cd-main-content.sub-nav :target::before,
.cd-main-content.sub-nav-hero :target::before {
display: block;
content: "";
margin-top: -50px;
height: 50px;
visibility: hidden;
}
@media only screen and (min-width: 1024px) {
.cd-main-content.sub-nav :target::before,
.cd-main-content.sub-nav-hero :target::before {
margin-top: -70px;
height: 70px;
}
}

/* --------------------------------

Intro Section

-------------------------------- */
.cd-hero {
/* vertically align its content */
display: table;
width: 100%;
margin-top: 60px;
height: 300px;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.cd-hero .cd-hero-content {
/* vertically align inside parent element */
display: table-cell;
vertical-align: middle;
text-align: center;
}
@media only screen and (min-width: 768px) {
.cd-hero {
height: 400px;
}
}
@media only screen and (min-width: 1024px) {
.cd-hero {
height: 600px;
margin-top: 80px;
}
}

+ 471
- 0
css/timeline.css View File

@@ -0,0 +1,471 @@
/* --------------------------------

Primary style

-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

/*body {
font-size: 100%;
font-family: "Droid Serif", serif;
color: #7f8c97;
background-color: #e9f0f5;
}*/

h1, h2 {
font-weight: bold;
}

/* --------------------------------

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 1170px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}

/* --------------------------------

Main components

-------------------------------- */
/*header {
height: 200px;
line-height: 200px;
text-align: center;
background: #303e49;
}
header h1 {
color: white;
font-size: 18px;
font-size: 1.125rem;
}
@media only screen and (min-width: 1170px) {
header {
height: 300px;
line-height: 300px;
}
header h1 {
font-size: 24px;
font-size: 1.5rem;
}
}*/

#cd-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 2em;
}
#cd-timeline::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
#cd-timeline {
margin-top: 3em;
margin-bottom: 3em;
}
#cd-timeline::before {
left: 50%;
margin-left: -2px;
}
}

.cd-timeline-block {
position: relative;
margin: 2em 0;
}
.cd-timeline-block:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block {
margin: 4em 0;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
}

.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
}
.cd-timeline-img.cd-picture {
background: #75ce66;
}
.cd-timeline-img.cd-movie {
background: #c03b44;
}
.cd-timeline-img.cd-location {
background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
-moz-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
}

@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}

60% {
opacity: 1;
-webkit-transform: scale(1.2);
}

100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes cd-bounce-1 {
0% {
opacity: 0;
-moz-transform: scale(0.5);
}

60% {
opacity: 1;
-moz-transform: scale(1.2);
}

100% {
-moz-transform: scale(1);
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}

60% {
opacity: 1;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
margin-left: 60px;
background: white;
border-radius: 0.25em;
padding: 1em;
box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-content h2 {
color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px;
font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0;
line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
color: white;
border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
}
.cd-timeline-content .cd-date {
float: left;
padding: .8em 0;
opacity: .7;
}
.cd-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
.cd-timeline-content h2 {
font-size: 20px;
font-size: 1.25rem;
}
.cd-timeline-content p {
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 14px;
font-size: 0.875rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: white;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: white;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
-moz-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
}

@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
-webkit-animation: cd-bounce-2-inverse 0.6s;
-moz-animation: cd-bounce-2-inverse 0.6s;
animation: cd-bounce-2-inverse 0.6s;
}
}
@-webkit-keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
}

60% {
opacity: 1;
-webkit-transform: translateX(20px);
}

100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2 {
0% {
opacity: 0;
-moz-transform: translateX(-100px);
}

60% {
opacity: 1;
-moz-transform: translateX(20px);
}

100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
}

60% {
opacity: 1;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}

100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}

60% {
opacity: 1;
-webkit-transform: translateX(-20px);
}

100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-moz-transform: translateX(100px);
}

60% {
opacity: 1;
-moz-transform: translateX(-20px);
}

100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}

60% {
opacity: 1;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}

100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}

BIN
img/background.jpg (Stored with Git LFS) View File

oid sha256:3872bbd204821946f7af864a97f0ffd6a719deac4ee5dd15e3078f25796b3128
size 351578

BIN
img/cd-icon-location.svg (Stored with Git LFS) View File

oid sha256:30cd930c9009a9a77f9959f8098fd06d0e69451d80883345729648477fcc1b56
size 394

BIN
img/cd-icon-movie.svg (Stored with Git LFS) View File

oid sha256:06ac8b7ec1d5c81b800ae8538a23b6916119b808c0046c07f407b26465b3ab25
size 442

BIN
img/cd-icon-picture.svg (Stored with Git LFS) View File

oid sha256:46d87121f1cac381a624408a76da507b1ebd4cbb0ffaa806e94329196dfe93a8
size 507

BIN
img/favicon.ico (Stored with Git LFS) View File

oid sha256:380f5a49e327f10406a594e1692d23d55a42026fd5386039f3a474f831b253b8
size 15086

BIN
img/image.jpg (Stored with Git LFS) View File

oid sha256:d4ccfe379df4c37d114527a7512f780dc5f5901e975e0a6e347c5164617a5cf0
size 960245

BIN
img/portrait.jpg (Stored with Git LFS) View File

oid sha256:0fbe8127acbb7a6346fe8926cab72ba9629480c78f7633c4e1026416f3f9a290
size 104028

+ 7
- 0
index.html View File

@@ -0,0 +1,7 @@
---
layout: default
title: Home
---

<p>HELLO THERE !
<br />... it looks like you ended up on my website !<br />It's one among many others, but, thanks to Jekyll, this one is static. Thus, you don't have to attack it :smile:</p>

BIN
js/jquery-3.0.0.min.js (Stored with Git LFS) View File

oid sha256:266bcea0bb58b26aa5b16c5aee60d22ccc1ae9d67daeb21db6bad56119c3447d
size 86341

+ 90
- 0
js/main.js View File

@@ -0,0 +1,90 @@
jQuery(document).ready(function($){
var mainHeader = $('.cd-auto-hide-header'),
secondaryNavigation = $('.cd-secondary-nav'),
//this applies only if secondary nav is below intro section
belowNavHeroContent = $('.sub-nav-hero'),
headerHeight = mainHeader.height();
//set scrolling variables
var scrolling = false,
previousTop = 0,
currentTop = 0,
scrollDelta = 10,
scrollOffset = 150;

mainHeader.on('click', '.nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
mainHeader.toggleClass('nav-open');
});

$(window).on('scroll', function(){
if( !scrolling ) {
scrolling = true;
(!window.requestAnimationFrame)
? setTimeout(autoHideHeader, 250)
: requestAnimationFrame(autoHideHeader);
}
});

$(window).on('resize', function(){
headerHeight = mainHeader.height();
});

function autoHideHeader() {
var currentTop = $(window).scrollTop();

( belowNavHeroContent.length > 0 )
? checkStickyNavigation(currentTop) // secondary navigation below intro
: checkSimpleNavigation(currentTop);

previousTop = currentTop;
scrolling = false;
}

function checkSimpleNavigation(currentTop) {
//there's no secondary nav or secondary nav is below primary nav
if (previousTop - currentTop > scrollDelta) {
//if scrolling up...
mainHeader.removeClass('is-hidden');
} else if( currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
//if scrolling down...
mainHeader.addClass('is-hidden');
}
}

function checkStickyNavigation(currentTop) {
//secondary nav below intro section - sticky secondary nav
var secondaryNavOffsetTop = belowNavHeroContent.offset().top - secondaryNavigation.height() - mainHeader.height();
if (previousTop >= currentTop ) {
//if scrolling up...
if( currentTop < secondaryNavOffsetTop ) {
//secondary nav is not fixed
mainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('fixed slide-up');
belowNavHeroContent.removeClass('secondary-nav-fixed');
} else if( previousTop - currentTop > scrollDelta ) {
//secondary nav is fixed
mainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('slide-up').addClass('fixed');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
} else {
//if scrolling down...
if( currentTop > secondaryNavOffsetTop + scrollOffset ) {
//hide primary nav
mainHeader.addClass('is-hidden');
secondaryNavigation.addClass('fixed slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
} else if( currentTop > secondaryNavOffsetTop ) {
//once the secondary nav is fixed, do not hide primary nav if you haven't scrolled more than scrollOffset
mainHeader.removeClass('is-hidden');
secondaryNavigation.addClass('fixed').removeClass('slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
}

}
}
});

BIN
js/modernizr-2.7.1.min.js (Stored with Git LFS) View File

oid sha256:ac1873c758533ab333e00a766e2aba95cb9e8f2629598ba539a3c31545e4850b
size 11074

+ 26
- 0
js/timeline.js View File

@@ -0,0 +1,26 @@
jQuery(document).ready(function($){
var timelineBlocks = $('.cd-timeline-block'),
offset = 0.8;

//hide timeline blocks which are outside the viewport
hideBlocks(timelineBlocks, offset);

//on scolling, show/animate timeline blocks when enter the viewport
$(window).on('scroll', function(){
(!window.requestAnimationFrame)
? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
: window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
});

function hideBlocks(blocks, offset) {
blocks.each(function(){
( $(this).offset().top > $(window).scrollTop()+$(window).height()*offset ) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
});
}

function showBlocks(blocks, offset) {
blocks.each(function(){
( $(this).offset().top <= $(window).scrollTop()+$(window).height()*offset && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
});
}
});

Loading…
Cancel
Save