Created
March 30, 2018 19:00
-
-
Save planetrobbie/9cae0c6a72ad7c037601d08a9f77e74a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Sébastien Braun</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/><style>@font-face { | |
| font-family: 'icomoon'; | |
| src: url('fonts/icomoon.eot?9yug7q'); | |
| src: url('fonts/icomoon.eot?9yug7q#iefix') format('embedded-opentype'), | |
| url('fonts/icomoon.ttf?9yug7q') format('truetype'), | |
| url('fonts/icomoon.woff?9yug7q') format('woff'), | |
| url('fonts/icomoon.svg?9yug7q#icomoon') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| [class^="icon-"], [class*=" icon-"] { | |
| /* use !important to prevent issues with browser extensions that change fonts */ | |
| font-family: 'icomoon' !important; | |
| speak: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| /* Better Font Rendering =========== */ | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-instagram:before { | |
| content: "\e905"; | |
| } | |
| .icon-trophy:before { | |
| content: "\e605"; | |
| } | |
| .icon-office:before { | |
| content: "\e606"; | |
| } | |
| .icon-clock:before { | |
| content: "\e60a"; | |
| } | |
| .icon-reddit:before { | |
| content: "\e609"; | |
| } | |
| .icon-telegram:before { | |
| content: "\e904"; | |
| } | |
| .icon-flickr:before { | |
| content: "\f16e"; | |
| } | |
| .icon-medium:before { | |
| content: "\f23a"; | |
| } | |
| .icon-heart:before { | |
| content: "\f004"; | |
| } | |
| .icon-book:before { | |
| content: "\f02d"; | |
| } | |
| .icon-linkedin:before { | |
| content: "\f08c"; | |
| } | |
| .icon-twitter:before { | |
| content: "\f099"; | |
| } | |
| .icon-github:before { | |
| content: "\f09b"; | |
| } | |
| .icon-link:before { | |
| content: "\f0c1"; | |
| } | |
| .icon-bars:before { | |
| content: "\f0c9"; | |
| } | |
| .icon-pinterest:before { | |
| content: "\f0d2"; | |
| } | |
| .icon-googleplus:before { | |
| content: "\f0d5"; | |
| } | |
| .icon-circle:before { | |
| content: "\f111"; | |
| } | |
| .icon-code:before { | |
| content: "\f121"; | |
| } | |
| .icon-youtube:before { | |
| content: "\f167"; | |
| } | |
| .icon-stackoverflow:before { | |
| content: "\f16c"; | |
| } | |
| .icon-bitbucket:before { | |
| content: "\f171"; | |
| } | |
| .icon-tumblr:before { | |
| content: "\f173"; | |
| } | |
| .icon-dribbble:before { | |
| content: "\f17d"; | |
| } | |
| .icon-skype:before { | |
| content: "\f17e"; | |
| } | |
| .icon-foursquare:before { | |
| content: "\f180"; | |
| } | |
| .icon-gittip:before { | |
| content: "\f184"; | |
| } | |
| .icon-gratipay:before { | |
| content: "\f184"; | |
| } | |
| .icon-stackexchange:before { | |
| content: "\f18d"; | |
| } | |
| .icon-vimeo:before { | |
| content: "\f194"; | |
| } | |
| .icon-graduation-cap:before { | |
| content: "\f19d"; | |
| } | |
| .icon-language:before { | |
| content: "\f1ab"; | |
| } | |
| .icon-child:before { | |
| content: "\f1ae"; | |
| } | |
| .icon-behance:before { | |
| content: "\f1b5"; | |
| } | |
| .icon-spotify:before { | |
| content: "\f1bc"; | |
| } | |
| .icon-soundcloud:before { | |
| content: "\f1be"; | |
| } | |
| .icon-codepen:before { | |
| content: "\f1cb"; | |
| } | |
| .icon-hackernews:before { | |
| content: "\f1d4"; | |
| } | |
| .icon-lastfm:before { | |
| content: "\f202"; | |
| } | |
| .icon-angellist:before { | |
| content: "\f209"; | |
| } | |
| .icon-facebook:before { | |
| content: "\f230"; | |
| } | |
| .icon-meetup .path1:before { | |
| content: "\e901"; | |
| color: rgb(255, 255, 255); | |
| } | |
| .icon-meetup .path2:before { | |
| content: "\e902"; | |
| margin-left: -1.5em; | |
| color: rgb(240, 1, 1); | |
| } | |
| .icon-meetup .path3:before { | |
| content: "\e903"; | |
| margin-left: -1.5em; | |
| color: rgb(3, 3, 3); | |
| } | |
| .icon-blogger:before { | |
| content: "\e900"; | |
| } | |
| .icon-exercism:before { | |
| content: "\e601"; | |
| } | |
| .icon-profile:before { | |
| content: "\e600"; | |
| } | |
| .icon-tools:before { | |
| content: "\e034"; | |
| } | |
| .icon-location:before { | |
| content: "\e602"; | |
| } | |
| .icon-mail:before { | |
| content: "\e603"; | |
| } | |
| .icon-phone:before { | |
| content: "\e03f"; | |
| } | |
| .icon-newspaper:before { | |
| content: "\e607"; | |
| } | |
| .icon-dots-three-horizontal:before { | |
| content: "\e60b"; | |
| } | |
| .icon-thumbs-up:before { | |
| content: "\e604"; | |
| } | |
| .icon-chevron-down:before { | |
| content: "\e60c"; | |
| } | |
| .icon-chevron-up:before { | |
| content: "\e60d"; | |
| } | |
| .icon-dots-three-horizontal:before { | |
| content: "\e60b"; | |
| } | |
| .icon-thumbs-up:before { | |
| content: "\e604"; | |
| } | |
| .icon-board:before { | |
| content: "\e608"; | |
| } | |
| .relative { | |
| position: relative; | |
| } | |
| .clear-margin { | |
| margin: 0; | |
| } | |
| .space-top { | |
| margin-top: 10px; | |
| } | |
| .space-right { | |
| margin-right: 10px; | |
| } | |
| .space-bottom { | |
| margin-bottom: 10px; | |
| } | |
| .mr-5 { | |
| margin-right: 5px; | |
| } | |
| .mr-10 { | |
| margin-right: 10px; | |
| } | |
| .ml-5 { | |
| margin-left: 5px; | |
| } | |
| .labels { | |
| line-height: 2; | |
| } | |
| .label-keyword { | |
| display: inline-block; | |
| background: #7eb0db; | |
| color: white; | |
| font-size: 0.9em; | |
| padding: 5px; | |
| border: 1px solid #357ebd; | |
| margin-right: 5px; | |
| } | |
| .label-keyword:last-child { | |
| margin-right: 0; | |
| } | |
| .link-disguise { | |
| color: inherit; | |
| } | |
| .link-disguise:hover { | |
| color: inherit; | |
| } | |
| .clear-margin { | |
| margin: 0; | |
| } | |
| @media (max-width: 992px) { | |
| .clear-margin-sm { | |
| margin-bottom: 0; | |
| } | |
| } | |
| .fs-lg { | |
| font-size: 1.33333333em; | |
| line-height: .75em; | |
| vertical-align: -15%; | |
| } | |
| .fs-2x { | |
| font-size: 2em; | |
| } | |
| .fs-3x { | |
| font-size: 3em; | |
| } | |
| .fs-4x { | |
| font-size: 4em; | |
| } | |
| .btn-circle-sm { | |
| width: 28px; | |
| height: 28px; | |
| line-height: 28px; | |
| border-radius: 50%; | |
| text-align: center; | |
| padding: 0; | |
| outline: none !important; | |
| } | |
| @font-face { | |
| font-family: 'jst-elegant'; | |
| src: url("//unpkg.com/[email protected]/assets/icomoon/fonts/icomoon.eot?f218wo"); | |
| src: url("//unpkg.com/[email protected]/assets/icomoon/fonts/icomoon.eot?f218wo#iefix") format('embedded-opentype'), url("//unpkg.com/[email protected]/assets/icomoon/fonts/icomoon.ttf?f218wo") format('truetype'), url("//unpkg.com/[email protected]/assets/icomoon/fonts/icomoon.woff?f218wo") format('woff'), url("//unpkg.com/[email protected]/assets/icomoon/fonts/icomoon.svg?f218wo#icomoon") format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| [class^="icon-"], | |
| [class*=" icon-"] { | |
| /* use !important to prevent issues with browser extensions that change fonts */ | |
| font-family: 'jst-elegant' !important; | |
| } | |
| body { | |
| font-family: 'Lato'; | |
| background: #f0f0f0; | |
| color: #333; | |
| } | |
| .main { | |
| padding: 5px; | |
| } | |
| .card { | |
| background: white; | |
| border: 1px solid #e6e6e6; | |
| border-radius: 3px; | |
| min-height: 300px; | |
| padding: 10px 0; | |
| } | |
| .card-nested { | |
| min-height: 0; | |
| border-width: 1px 0 0 0; | |
| } | |
| .card-nested:before, | |
| .card-nested:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .card-nested:after { | |
| clear: both; | |
| } | |
| @media (max-width: 480px) { | |
| .card-nested { | |
| padding: 5px 0; | |
| } | |
| } | |
| .background-card { | |
| padding: 10px 20px; | |
| } | |
| .card-wrapper { | |
| padding: 5px; | |
| } | |
| @media (max-width: 992px) { | |
| .card-wrapper { | |
| float: none !important; | |
| } | |
| } | |
| .background-details .detail { | |
| display: table; | |
| } | |
| .background-details .detail .icon { | |
| min-width: 45px; | |
| max-width: 45px; | |
| text-align: center; | |
| } | |
| .background-details .detail .info { | |
| width: 100%; | |
| } | |
| .background-details .detail .title, | |
| .background-details .detail .icon { | |
| color: #707070; | |
| } | |
| .background-details .detail .mobile-title { | |
| display: none; | |
| } | |
| @media (max-width: 480px) { | |
| .background-details .detail .mobile-title { | |
| display: inline-block; | |
| margin-left: 5px; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| vertical-align: middle; | |
| } | |
| } | |
| .background-details .detail .icon, | |
| .background-details .detail .info { | |
| display: table-cell; | |
| padding: 0 10px; | |
| } | |
| @media (max-width: 480px) { | |
| .background-details .detail { | |
| display: block; | |
| } | |
| .background-details .detail .icon { | |
| max-width: inherit; | |
| min-width: inherit; | |
| text-align: left; | |
| } | |
| .background-details .detail .icon, | |
| .background-details .detail .info { | |
| display: block; | |
| padding: 10px 0; | |
| } | |
| .background-details .detail .title { | |
| display: none; | |
| } | |
| } | |
| .info .content.has-sidebar { | |
| width: 80%; | |
| box-sizing: border-box; | |
| float: left; | |
| padding: 0 10px; | |
| border-right: 1px solid #cdcdcd; | |
| } | |
| @media (max-width: 992px) { | |
| .info .content.has-sidebar { | |
| width: 100%; | |
| border-right: 0; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .info .content.has-sidebar { | |
| padding: 0 2px; | |
| } | |
| } | |
| .info .sidebar { | |
| margin-left: 80%; | |
| box-sizing: border-box; | |
| padding: 10px; | |
| } | |
| @media (max-width: 480px) { | |
| ul { | |
| padding-left: 25px; | |
| } | |
| } | |
| .current-event { | |
| font-size: 8px; | |
| color: #5ACE24; | |
| position: absolute; | |
| right: 100%; | |
| top: 4px; | |
| left: -10px; | |
| } | |
| .mop-wrapper > p:last-child { | |
| margin: 0; | |
| } | |
| /* | |
| Credits: http://codyhouse.co/demo/smart-fixed-navigation/index.html | |
| */ | |
| .floating-nav-trigger { | |
| width: 50px; | |
| height: 50px; | |
| -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); | |
| -webkit-transition: background-color 0.5s ease; | |
| -o-transition: background-color 0.5s ease; | |
| transition: background-color 0.5s ease; | |
| display: block; | |
| border-radius: 50%; | |
| text-align: center; | |
| background-color: white; | |
| font-size: 1.5em; | |
| color: #357ebd; | |
| z-index: 100; | |
| position: fixed; | |
| bottom: 10px; | |
| right: 10px; | |
| text-decoration: none !important; | |
| } | |
| .floating-nav-trigger > [class^="icon-"], | |
| .floating-nav-trigger [class*=" icon-"], | |
| .floating-nav-trigger > .close-icon { | |
| line-height: 50px; | |
| } | |
| .floating-nav-trigger .close-icon { | |
| display: none; | |
| } | |
| .floating-nav-trigger:hover { | |
| color: #1f496e; | |
| background-color: #e6e6e6; | |
| } | |
| .floating-nav-trigger.is-open { | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .floating-nav-trigger.is-open .close-icon { | |
| display: inherit; | |
| } | |
| .floating-nav-trigger.is-open .icon-bars { | |
| display: none; | |
| } | |
| .floating-nav-trigger.is-open:hover { | |
| background-color: white; | |
| } | |
| .floating-nav { | |
| -webkit-transform: scale(0); | |
| -ms-transform: scale(0); | |
| -o-transform: scale(0); | |
| transform: scale(0); | |
| -webkit-transform-origin: 100% 100%; | |
| -moz-transform-origin: 100% 100%; | |
| -ms-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| -webkit-transition: transform 0.3s, visibility 0s 0.3s; | |
| -o-transition: transform 0.3s, visibility 0s 0.3s; | |
| transition: transform 0.3s, visibility 0s 0.3s; | |
| -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); | |
| position: fixed; | |
| z-index: 50; | |
| right: 10px; | |
| bottom: 10px; | |
| background-color: white; | |
| width: 90%; | |
| max-width: 400px; | |
| visibility: hidden; | |
| overflow: hidden; | |
| } | |
| .floating-nav ul { | |
| font-size: 1.2em; | |
| margin: 0; | |
| } | |
| .floating-nav ul li { | |
| border-bottom: 1px solid #eff2f6; | |
| } | |
| .floating-nav ul li a { | |
| padding: 20px; | |
| text-decoration: none; | |
| color: #357ebd; | |
| display: block; | |
| } | |
| .floating-nav ul li a:hover { | |
| color: #1f496e; | |
| } | |
| .floating-nav ul li:last-child { | |
| border-bottom: 0; | |
| } | |
| .floating-nav.is-visible { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); | |
| -webkit-transition: transform 0.3s, visibility 0s 0s; | |
| -o-transition: transform 0.3s, visibility 0s 0s; | |
| transition: transform 0.3s, visibility 0s 0s; | |
| visibility: visible; | |
| } | |
| @media (max-width: 992px) { | |
| .profile-card-wrapper { | |
| position: relative; | |
| } | |
| } | |
| .profile-card-wrapper .profile-card { | |
| padding: 10px; | |
| } | |
| .profile-pic { | |
| padding: 20px 0; | |
| } | |
| @media (max-width: 992px) { | |
| .profile-pic { | |
| padding: 10px 0; | |
| } | |
| } | |
| .profile-pic img { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| @media (max-width: 992px) { | |
| .name { | |
| margin-top: 10px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .contact-details { | |
| text-align: center; | |
| } | |
| } | |
| .contact-details .detail { | |
| display: table; | |
| padding: 10px 0; | |
| } | |
| .contact-details .detail .icon { | |
| padding: 0 10px; | |
| color: #707070; | |
| } | |
| @media (max-width: 992px) { | |
| .contact-details .detail .icon { | |
| padding: 0 5px 0 0; | |
| } | |
| } | |
| .contact-details .detail .info { | |
| font-size: 0.8em; | |
| } | |
| .contact-details .detail .icon, | |
| .contact-details .detail .info { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| @media (max-width: 768px) { | |
| .contact-details .detail { | |
| position: relative; | |
| float: left; | |
| width: 100%; | |
| min-height: 1px; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| } | |
| } | |
| @media (max-width: 992px) { | |
| .contact-details .detail { | |
| position: relative; | |
| min-height: 1px; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| padding: 10px; | |
| } | |
| .contact-details .detail .icon, | |
| .contact-details .detail .info { | |
| display: inline-block; | |
| } | |
| } | |
| @media (max-width: 992px) and (min-width: 768px) { | |
| .contact-details .detail { | |
| float: left; | |
| width: 25%; | |
| } | |
| } | |
| .social-links { | |
| line-height: 2.5; | |
| } | |
| .social-link { | |
| margin-left: 5px; | |
| min-width: 35px; | |
| display: inline-block; | |
| } | |
| .social-link:first-child { | |
| margin-left: 0; | |
| } | |
| .social-link:hover { | |
| text-decoration: none; | |
| } | |
| .link-github { | |
| color: #454545; | |
| } | |
| .link-github:hover, | |
| .link-github:focus { | |
| text-decoration: none; | |
| color: #2b2b2b; | |
| } | |
| .link-twitter { | |
| color: #33ccff; | |
| } | |
| .link-twitter:hover, | |
| .link-twitter:focus { | |
| text-decoration: none; | |
| color: #00bfff; | |
| } | |
| .link-blog { | |
| color: #f36f24; | |
| } | |
| .link-blog:hover, | |
| .link-blog:focus { | |
| text-decoration: none; | |
| color: #d8560c; | |
| } | |
| .link-linkedin { | |
| color: #007bb6; | |
| } | |
| .link-linkedin:hover, | |
| .link-linkedin:focus { | |
| text-decoration: none; | |
| color: #005983; | |
| } | |
| .link-skype { | |
| color: #12A5F4; | |
| } | |
| .link-skype:hover, | |
| .link-skype:focus { | |
| text-decoration: none; | |
| color: #0986ca; | |
| } | |
| .link-instagram { | |
| color: #e4405f; | |
| } | |
| .link-instagram:hover, | |
| .link-instagram:focus { | |
| text-decoration: none; | |
| color: #d31e40; | |
| } | |
| .link-stackoverflow { | |
| color: #f48024; | |
| } | |
| .link-stackoverflow:hover, | |
| .link-stackoverflow:focus { | |
| text-decoration: none; | |
| color: #c3661c; | |
| } | |
| .link-stackexchange { | |
| color: #62b0df; | |
| } | |
| .link-stackexchange:hover, | |
| .link-stackexchange:focus { | |
| text-decoration: none; | |
| color: #389bd6; | |
| } | |
| .link-lastfm { | |
| color: #d12127; | |
| } | |
| .link-lastfm:hover, | |
| .link-lastfm:focus { | |
| text-decoration: none; | |
| color: #a51a1f; | |
| } | |
| .link-soundcloud { | |
| color: #e8822d; | |
| } | |
| .link-soundcloud:hover, | |
| .link-soundcloud:focus { | |
| text-decoration: none; | |
| color: #cc6916; | |
| } | |
| .link-googleplus { | |
| color: #dd4b39; | |
| } | |
| .link-googleplus:hover, | |
| .link-googleplus:focus { | |
| text-decoration: none; | |
| color: #c23321; | |
| } | |
| .link-youtube { | |
| color: #dd4b39; | |
| } | |
| .link-youtube:hover, | |
| .link-youtube:focus { | |
| text-decoration: none; | |
| color: #c23321; | |
| } | |
| .link-pinterest { | |
| color: #bd091f; | |
| } | |
| .link-pinterest:hover, | |
| .link-pinterest:focus { | |
| text-decoration: none; | |
| color: #8c0717; | |
| } | |
| .link-gratipay { | |
| color: #630; | |
| } | |
| .link-gratipay:hover, | |
| .link-gratipay:focus { | |
| text-decoration: none; | |
| color: #331a00; | |
| } | |
| .link-vimeo { | |
| color: #17b3e8; | |
| } | |
| .link-vimeo:hover, | |
| .link-vimeo:focus { | |
| text-decoration: none; | |
| color: #128fba; | |
| } | |
| .link-behance { | |
| color: #2c98cf; | |
| } | |
| .link-behance:hover, | |
| .link-behance:focus { | |
| text-decoration: none; | |
| color: #2379a5; | |
| } | |
| .link-codepen { | |
| color: #1c1c1c; | |
| } | |
| .link-codepen:hover, | |
| .link-codepen:focus { | |
| text-decoration: none; | |
| color: #020202; | |
| } | |
| .link-foursquare { | |
| color: #fa4778; | |
| } | |
| .link-foursquare:hover, | |
| .link-foursquare:focus { | |
| text-decoration: none; | |
| color: #f91554; | |
| } | |
| .link-reddit { | |
| color: #545454; | |
| } | |
| .link-reddit:hover, | |
| .link-reddit:focus { | |
| text-decoration: none; | |
| color: #3b3b3b; | |
| } | |
| .link-spotify { | |
| color: #acd200; | |
| } | |
| .link-spotify:hover, | |
| .link-spotify:focus { | |
| text-decoration: none; | |
| color: #829f00; | |
| } | |
| .link-tumblr { | |
| color: #2d4661; | |
| } | |
| .link-tumblr:hover, | |
| .link-tumblr:focus { | |
| text-decoration: none; | |
| color: #1d2d3e; | |
| } | |
| .link-dribbble { | |
| color: #ce366f; | |
| } | |
| .link-dribbble:hover, | |
| .link-dribbble:focus { | |
| text-decoration: none; | |
| color: #a82959; | |
| } | |
| .link-facebook { | |
| color: #4b6daa; | |
| } | |
| .link-facebook:hover, | |
| .link-facebook:focus { | |
| text-decoration: none; | |
| color: #3b5687; | |
| } | |
| .link-angellist { | |
| color: black; | |
| } | |
| .link-angellist:hover, | |
| .link-angellist:focus { | |
| text-decoration: none; | |
| color: #000000; | |
| } | |
| .link-bitbucket { | |
| color: #205081; | |
| } | |
| .link-bitbucket:hover, | |
| .link-bitbucket:focus { | |
| text-decoration: none; | |
| color: #163758; | |
| } | |
| .link-hackernews { | |
| color: #ff6600; | |
| } | |
| .link-hackernews:hover, | |
| .link-hackernews:focus { | |
| text-decoration: none; | |
| color: #cc5200; | |
| } | |
| .link-exercism { | |
| color: #d81d4e; | |
| } | |
| .link-exercism:hover, | |
| .link-exercism:focus { | |
| text-decoration: none; | |
| color: #ab173e; | |
| } | |
| .link-blogger { | |
| color: #FF9234; | |
| } | |
| .link-blogger:hover, | |
| .link-blogger:focus { | |
| text-decoration: none; | |
| color: #ff7701; | |
| } | |
| .link-medium { | |
| color: #00AB6C; | |
| } | |
| .link-medium:hover, | |
| .link-medium:focus { | |
| text-decoration: none; | |
| color: #00784c; | |
| } | |
| .link-flickr { | |
| color: black; | |
| } | |
| .link-flickr:hover, | |
| .link-flickr:focus { | |
| text-decoration: none; | |
| color: #000000; | |
| } | |
| .link-telegram { | |
| color: #3BABDD; | |
| } | |
| .link-telegram:hover, | |
| .link-telegram:focus { | |
| text-decoration: none; | |
| color: #2291c3; | |
| } | |
| .card-skills { | |
| position: relative; | |
| } | |
| .skill-level { | |
| border-radius: 3px; | |
| position: absolute; | |
| top: 10px; | |
| bottom: 10px; | |
| left: 0; | |
| width: 10px; | |
| box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2); | |
| } | |
| .skill-level .skill-progress { | |
| position: absolute; | |
| border-radius: 3px; | |
| bottom: 0; | |
| width: 100%; | |
| -webkit-transition: height 1s ease; | |
| } | |
| .skill-level .skill-progress.beginner { | |
| height: 50%; | |
| background: #e74c3c; | |
| } | |
| .skill-level .skill-progress.intermediate { | |
| height: 70%; | |
| background: #f1c40f; | |
| } | |
| .skill-level .skill-progress.advanced { | |
| height: 80%; | |
| background: #428bca; | |
| } | |
| .skill-level .skill-progress.master { | |
| height: 95%; | |
| background: #5cb85c; | |
| } | |
| .skill-info { | |
| margin-left: 15px; | |
| } | |
| @media (max-width: 480px) { | |
| .skill-info { | |
| margin-left: 20px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .quote { | |
| font-size: inherit; | |
| } | |
| } | |
| .icon-meetup .path2:before { | |
| margin-left: 0; | |
| } | |
| @media print { | |
| a[href]:after { | |
| content: none !important; | |
| } | |
| .profile-card { | |
| text-align: center; | |
| } | |
| .profile-pic { | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .profile-pic img { | |
| border-radius: 0; | |
| } | |
| .name-and-profession { | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin-left: 15px; | |
| } | |
| .contact-details .detail { | |
| position: relative; | |
| float: left; | |
| width: 25%; | |
| min-height: 1px; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| padding: 0; | |
| } | |
| .floating-nav, | |
| .floating-nav-trigger { | |
| display: none; | |
| } | |
| .pagebreak { | |
| page-break-before: always; | |
| } | |
| } | |
| </style></head><body itemscope="itemscope" itemtype="http://schema.org/Person"><div class="container-fluid"><div class="row main clearfix"><a class="js-floating-nav-trigger floating-nav-trigger" href="#"><i class="icon-bars"></i><span class="close-icon">×</span></a><nav class="floating-nav js-floating-nav"><ul class="list-unstyled"><li><a href="#about"><i class="mr-10 icon-board"></i>About</a></li><li><a href="#work-experience"><i class="mr-10 icon-office"></i>Work Experience</a></li><li><a href="#skills"><i class="mr-10 icon-tools"></i>Skills</a></li><li><a href="#education"><i class="mr-10 icon-graduation-cap"></i>Education</a></li><li><a href="#interests"><i class="mr-10 icon-heart"></i>Interests</a></li></ul></nav><section class="col-md-3 card-wrapper profile-card-wrapper affix"><div class="card profile-card"><span class="profile-pic-container"><div class="profile-pic"><img class="media-object img-circle center-block" data-src="holder.js/100x100" alt="Sébastien Braun" src="https://s.gravatar.com/avatar/623240d557231ffc8e10c2ef758841c2?s=100&r=pg&d=mm" itemprop="image"/></div><div class="name-and-profession text-center"><h3 itemprop="name"><b>Sébastien Braun</b></h3><h5 class="text-muted" itemprop="jobTitle">Infrastructure Engineer</h5></div></span><hr/><div class="contact-details clearfix"><div class="detail"><span class="icon"><i class="icon fs-lg icon-location"></i></span><span class="info">1 rue rue Jardin école 93100 Montreuil, FR</span></div><div class="detail"><span class="icon"><i class="icon fs-lg icon-phone"></i></span><span class="info" itemprop="telephone">+33 (0)7 83 89 90 21</span></div><div class="detail"><span class="icon"><i class="icon fs-lg icon-mail"></i></span><span class="info"><a class="link-disguise" href="mailto:[email protected]" itemprop="email">[email protected]</a></span></div><div class="detail"><span class="icon"><i class="icon fs-lg icon-link"></i></span><span class="info"><a href="http://www.yet.org" target="_blank">http://www.yet.org</a></span></div><div class="detail"><span class="icon" title="Languages I speak"><i class="icon fs-lg icon-language"></i></span><span class="info">French, English</span></div></div><hr/><div class="social-links text-center"><div><a class="fs-2x social-link link-twitter icon-twitter" href="http://twitter.com/planetrobbie" target="_blank" data-toggle="tooltip" title="Sébastien Braun on Twitter"></a><a class="fs-2x social-link link-linkedin icon-linkedin" href="http://linkedin.com/in/planetrobbie" target="_blank" data-toggle="tooltip" title="Sébastien Braun on linkedin"></a><a class="fs-2x social-link link-github icon-github" href="http://github.com/planetrobbie" target="_blank" data-toggle="tooltip" title="Sébastien Braun on github"></a></div></div></div></section><section class="col-md-9 card-wrapper pull-right"><div class="card background-card"><h4 class="text-uppercase">Background</h4><hr/><div class="background-details"><div class="detail" id="about"><div class="icon"><i class="fs-lg icon-board"></i><span class="mobile-title">About</span></div><div class="info"><h4 class="title text-uppercase">About</h4><div class="card card-nested"><div class="content mop-wrapper" itemprop="description"><p>I currently focus on infrastructure as code, OpenStack and Kubernetes at Mirantis. Mirantis is a leading contributor to both OpenStack and Kubernetes. Our focus is to help customers win in the software economy. Mirantis Cloud Platform, a webscale OpenStack and Kubernetes Distribution offers the best of breed to innovate faster, on your terms with zero vendor lock-in, it's 100% Open Source.</p> | |
| </div></div></div></div><div class="detail" id="work-experience"><div class="icon"><i class="fs-lg icon-office"></i><span class="mobile-title">Work Experience</span></div><div class="info"><h4 class="title text-uppercase">Work Experience</h4><ul class="list-unstyled clear-margin"><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><i class="icon-circle current-event" rel="tooltip" title="Currently Working" data-placement="left"></i><strong>Cloud Sales Engineer</strong>, <a href="https://google.com" target="_blank">Google</a></p><p class="text-muted"><small><span class="space-right">Sep, 2017 - Present</span></small></p><div class="mop-wrapper space-bottom"><p>Create and develop solutions which address customer requirements and bring Google innovation into their IT infrastructures.</p> | |
| </div><ul><li class="mop-wrapper"><p>Promote Google Cloud portfolio in both customer-facing meetings or public events.</p> | |
| </li><li class="mop-wrapper"><p>Work closely with our Product, Support, Engineering and Sales teams to stay on top of industry trends, and devise enhancements for Google Cloud products.</p> | |
| </li><li class="mop-wrapper"><p>Prepare and present demonstrations of Google products, and address technical questions that arise throughout the sales process.</p> | |
| </li><li class="mop-wrapper"><p>Take responsibility for technical aspects of solutions to include activities such as bid responses, product and solution briefings, proof-of-concept work and the coordination of supporting technical resources.</p> | |
| </li></ul></div></li><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><i class="icon-circle current-event" rel="tooltip" title="Currently Working" data-placement="left"></i><strong>OPENSTACK/KUBERNETES PRE-SALES ENGINEER EMEA</strong>, <a href="https://mirantis.com" target="_blank">Mirantis</a></p><p class="text-muted"><small><span class="space-right">May, 2015 - Present</span></small></p><div class="mop-wrapper space-bottom"><p>Advisor in accelerating software development using private cloud</p> | |
| </div><ul><li class="mop-wrapper"><p>Startup environment, first and only pre-sales engineer based in France.</p> | |
| </li><li class="mop-wrapper"><p>Pre-Sales engagement at Volkswagen - $15M+ contract signed in 2016</p> | |
| </li><li class="mop-wrapper"><p>OpenStack Architecture Design Assessment at 2nd world retailer.</p> | |
| </li><li class="mop-wrapper"><p>OpenStack CI/CD software delivery pipeline deployed at cloudvps.com and Intel lab.</p> | |
| </li><li class="mop-wrapper"><p>Mirantis worldwide best pre-sales award in February 2017</p> | |
| </li><li class="mop-wrapper"><p>Solution promotion over corporate blogging and events.</p> | |
| </li></ul></div></li><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><strong>NETWORK VIRTUALIZATION PRE-SALES ENGINEER</strong>, <a href="http://vmware.com" target="_blank">VMware</a></p><p class="text-muted"><small><span class="space-right">Jan, 2012 - Apr, 2015</span><span><i class="icon-clock mr-5"></i>3 years 3 months</span></small></p><div class="mop-wrapper space-bottom"><p>Software Defined Networking Specialist</p> | |
| </div><ul><li class="mop-wrapper"><p>Pre-Sales engagement at EDF - $20M+ 3-year ELA deal signed in 2015.</p> | |
| </li><li class="mop-wrapper"><p>Pre-Sales engagement at BNP Paribas - $500k+ for 1st private cloud with NSX.</p> | |
| </li><li class="mop-wrapper"><p>Network Virtualization & Security (NSX) Workshops at Axa, Airbus, Orange, SFR.</p> | |
| </li><li class="mop-wrapper"><p>SDDC Impact Swat Award 2014</p> | |
| </li><li class="mop-wrapper"><p>Q3 Best VMware EPIC2 Value Contributor 2013 - Passion</p> | |
| </li><li class="mop-wrapper"><p>Most Successful Value Contributor 2012 SEMEA - Innovation</p> | |
| </li><li class="mop-wrapper"><p>Wrote internal techforce.vmware.com Grails Application to track partners enablement and case studies in EMEA.</p> | |
| </li></ul></div></li><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><strong>SYSTEMS ENGINEER EMEA</strong>, <a href="https://www.barracuda.com/" target="_blank">Barracuda Networks</a></p><p class="text-muted"><small><span class="space-right">Jul, 2010 - Jan, 2012</span><span><i class="icon-clock mr-5"></i>1 year 6 months</span></small></p><div class="mop-wrapper space-bottom"><p>IP infrastructure solutions. Delivering of scalable and secure solution for data protection, firewalling, mail, web and more generally IP traffic with the recent acquisition of Phion AG.</p> | |
| </div></div></li><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><strong>FOUNDER</strong>, aucoindujeu</p><p class="text-muted"><small><span class="space-right">Jan, 2003 - Jul, 2010</span><span><i class="icon-clock mr-5"></i>7 years 6 months</span></small></p><div class="mop-wrapper space-bottom"><p>Online sales of entertainment products. Design and development of e-commerce platform using Open source technologies : Linux, Apache, Perl, MySQL (LAMP).</p> | |
| </div><ul><li class="mop-wrapper"><p>Development and maintenance of e-commerce front and back office including data mining code for yearly financial reporting [Perl/Subversion]</p> | |
| </li><li class="mop-wrapper"><p>Heavy computing pages like month and today hits based on complex log processing are cached server side to increase hit per second processing capability and to reach a good vertical scalability.</p> | |
| </li><li class="mop-wrapper"><p>February 2010, new node deployed at cloud computing facility in London based on Open Source cloud computing technologies : Linux, KVM and VMware for staging servers.</p> | |
| </li><li class="mop-wrapper"><p>Open Source based service monitoring [Munin, RRDTool]</p> | |
| </li></ul></div></li><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><strong>EUROPEAN CHANNEL PRE-SALES ENGINEER</strong>, <a href="https://en.wikipedia.org/wiki/Inktomi" target="_blank">Inktomi</a></p><p class="text-muted"><small><span class="space-right">Jan, 2000 - Jan, 2003</span><span><i class="icon-clock mr-5"></i>3 years</span></small></p><div class="mop-wrapper space-bottom"><p>Content Distribution Network engineering. Pre-Sales European Channel Support.</p> | |
| </div><ul><li class="mop-wrapper"><p>Deployment of Internet real-time broadcasting technology based on FastForward Overlay Network technology acquisition at Sun Microsystems Demo Center.</p> | |
| </li><li class="mop-wrapper"><p>Deployment at Cegetel/SFR of wireless caching/compressing technologies for 3G Networks.</p> | |
| </li><li class="mop-wrapper"><p>Training of IBM global services engineering team on the Traffic Server platform.</p> | |
| </li></ul></div></li><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><strong>INTERNET ARCHITECT</strong>, <a href="https://en.wikipedia.org/wiki/Sun_Microsystems" target="_blank">Sun Microsystems</a></p><p class="text-muted"><small><span class="space-right">Jan, 1997 - Jan, 2000</span><span><i class="icon-clock mr-5"></i>3 years</span></small></p><div class="mop-wrapper space-bottom"><p>Internet Advanced Practice. Design and implementation of highly scalable architectures : global and local load balancing, HA-Firewalls, failover.</p> | |
| </div><ul><li class="mop-wrapper"><p>Deployment of a worldwide infrastructure of HA-Firewalls at AXA using custom Perl development.</p> | |
| </li><li class="mop-wrapper"><p>Integration of multiple vendor LDAP (netscape & SunDS) solution based on Perl scripts at France Telecom Rennes.</p> | |
| </li></ul></div></li><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><strong>UNIX SYSADMIN</strong>, Fédération de l'Education Nationale (Federation of National Education)</p><p class="text-muted"><small><span class="space-right">Jan, 1997 - Dec, 1997</span><span><i class="icon-clock mr-5"></i>1 year</span></small></p><div class="mop-wrapper space-bottom"><p>Management of Unix OS and TCP/IP services : HTTP, SMTP, POP, IMAP, DNS, FTP.</p> | |
| </div><ul><li class="mop-wrapper"><p>Corporate web site development based on Perl CGI.pm and Mason templating system.</p> | |
| </li><li class="mop-wrapper"><p>Development of the Internet dial-up connection kit based on Microsoft technologies.</p> | |
| </li></ul></div></li><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><strong>RESPONSIBLE FOR DATABASE TRAINING</strong>, University of Ulan Bator (Mongolia)</p><p class="text-muted"><small><span class="space-right">Jan, 1996 - Mar, 1996</span><span><i class="icon-clock mr-5"></i>2 months</span></small></p><div class="mop-wrapper space-bottom"><p>Microsoft Access training for 25 researchers and teachers of Mongolia. Development of the database of the University.</p> | |
| </div></div></li><li class="card card-nested clearfix"><div class="content"><p class="clear-margin relative"><strong>C++ DEVELOPER </strong>, Pierre et Marie Curie University Junior Enterprise</p><p class="text-muted"><small><span class="space-right">Jan, 1992 - Jan, 1996</span><span><i class="icon-clock mr-5"></i>4 years</span></small></p><div class="mop-wrapper space-bottom"><p>Design and realization of Borland C++ software.</p> | |
| </div><ul><li class="mop-wrapper"><p>Design and realization of a weighing and accountancy software (desorption calculated on eight balances simultaneously, in real time).</p> | |
| </li><li class="mop-wrapper"><p>Plotting engine and UI</p> | |
| </li></ul></div></li></ul></div></div><div class="detail" id="skills"><div class="icon"><i class="fs-lg icon-tools"></i><span class="mobile-title">Skills</span></div><div class="info"><h4 class="title text-uppercase">Skills</h4><div class="content"><ul class="list-unstyled clear-margin"><li class="card card-nested card-skills"><div class="skill-info"><strong>Infrastructure as a Service</strong><div class="space-top labels"><span class="label label-keyword">OpenStack</span><span class="label label-keyword">Kubernetes (coreos, rkt, tectonic)</span><span class="label label-keyword">AWS Certified Solutions Architect</span></div></div></li><li class="card card-nested card-skills"><div class="skill-info"><strong>Infrastructure as Code</strong><div class="space-top labels"><span class="label label-keyword">SaltStack</span><span class="label label-keyword">Ansible</span><span class="label label-keyword">Mirantis Cloud Platform (CI/CD pipeline for OpenStack & k8s built on top of salt, git, reclass, jenkins and gerrit).</span></div></div></li><li class="card card-nested card-skills"><div class="skill-info"><strong>Monitoring</strong><div class="space-top labels"><span class="label label-keyword">ElasticSearch</span><span class="label label-keyword"> InfluxDB</span><span class="label label-keyword">Grafana</span><span class="label label-keyword">Kibana</span><span class="label label-keyword">Heka</span><span class="label label-keyword">collectd</span></div></div></li><li class="card card-nested card-skills"><div class="skill-info"><strong>Networking</strong><div class="space-top labels"><span class="label label-keyword">Software Defined Networking (Neutron OVS ML2 Plugin, vSphere/NSX, OpenContrail, AWS VPC, Calico, Flannel)</span><span class="label label-keyword">Cloud networking architecture and troubleshooting</span><span class="label label-keyword">LBaaS</span><span class="label label-keyword">VPNaaS</span></div></div></li><li class="card card-nested card-skills"><div class="skill-info"><strong>Development</strong><div class="space-top labels"><span class="label label-keyword">Go</span></div></div></li></ul></div></div></div><div class="detail" id="education"><div class="icon"><i class="fs-lg icon-graduation-cap"></i><span class="mobile-title">Education</span></div><div class="info"><h4 class="title text-uppercase">Education</h4><div class="content"><ul class="list-unstyled clear-margin"><li class="card card-nested"><div class="content"><p class="clear-margin relative"><strong>Mathematics, Probability, </strong>Université Pierre et Marie Curie – Paris VI</p><p class="text-muted"><small>Jan, 1989 - Jan, 1997</small></p><i></i><div class="space-top labels"><span class="label label-keyword">ENSEIGNANT-CHERCHEUR - Research on Brownian Motion - 6 & 7 year</span><span class="label label-keyword">DEA - Stochastic Process - 5th year</span><span class="label label-keyword">MAITRISE Mathematics - 4th year</span><span class="label label-keyword">LICENCE Mathematics - 3rd year</span><span class="label label-keyword">DEUG - Sciences and structure of the matter - 1st, 2nd year</span></div></div></li><li class="card card-nested"><div class="content"><p class="clear-margin relative"><strong>Baccalaureat C (mention AB) - Montaigne College, Science, </strong>Lycée Montaigne</p><p class="text-muted clear-margin"><small>Jan, 1988 - Jan, 1988</small></p><i></i></div></li></ul></div></div></div><div class="detail" id="interests"><div class="icon"><i class="fs-lg icon-heart"></i><span class="mobile-title">Interests</span></div><div class="info"><h4 class="title text-uppercase">Interests</h4><div class="content"><ul class="list-unstyled clear-margin"><li class="card card-nested"><p><strong>Science fiction</strong></p></li><li class="card card-nested"><p><strong>Boardgames</strong></p></li></ul></div></div></div></div></div></section></div></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script><script>$(function () { | |
| var toggleFloatingMenu = function() { | |
| $( '.js-floating-nav' ).toggleClass( 'is-visible' ); | |
| $( '.js-floating-nav-trigger' ).toggleClass( 'is-open' ); | |
| }; | |
| $( ".background-card" ).css( "min-height", window.screen.availHeight + "px" ); | |
| $( "[data-toggle=tooltip]" ).tooltip(); | |
| $( '.js-floating-nav-trigger' ).on( 'click', function(e) { | |
| e.preventDefault(); | |
| toggleFloatingMenu(); | |
| }); | |
| $( '.js-floating-nav a' ).on( 'click', toggleFloatingMenu ); | |
| $("#remaining-profiles").on('show.bs.collapse', function() { | |
| $( '.js-profiles-collapse > i' ) | |
| .removeClass( 'icon-chevron-down' ) | |
| .addClass( 'icon-chevron-up' ); | |
| }); | |
| $("#remaining-profiles").on('hidden.bs.collapse', function() { | |
| $( '.js-profiles-collapse > i' ) | |
| .removeClass( 'icon-chevron-up' ) | |
| .addClass( 'icon-chevron-down' ); | |
| }); | |
| }); | |
| </script><script>WebFontConfig = { | |
| google: { families: [ 'Lato:300,400,700:latin' ] } | |
| }; | |
| (function() { | |
| var wf = document.createElement('script'); | |
| wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + | |
| '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; | |
| wf.type = 'text/javascript'; | |
| wf.async = 'true'; | |
| var s = document.getElementsByTagName('script')[0]; | |
| s.parentNode.insertBefore(wf, s); | |
| })();</script></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment