Initial commit
This commit is contained in:
commit
81afcbd15e
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2018 Michael Dao
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
5
README.md
Normal file
5
README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# CV website
|
||||||
|
|
||||||
|
Small static website for exposing our CV and email address.
|
||||||
|
|
||||||
|
Based on [this GitHub project](https://github.com/MichaelDao/Minimal-Website-Template).
|
||||||
38
index.html
Normal file
38
index.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||||
|
|
||||||
|
<!-- include compass css translation -->
|
||||||
|
<link href="stylesheets/style.css" type="text/css" rel="stylesheet" >
|
||||||
|
|
||||||
|
<!-- fonts -->
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- import icons -->
|
||||||
|
<script src="https://unpkg.com/ionicons@6.0.3/dist/ionicons.js"></script>
|
||||||
|
|
||||||
|
<!-- Import favicons -->
|
||||||
|
<link rel="shortcut icon" type="image/png" href="resources/favicon.png"/>
|
||||||
|
|
||||||
|
<title>Alexandre CATTEAU</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<div class="outer">
|
||||||
|
<div class="inner">
|
||||||
|
<section class = "gap loadanimation">
|
||||||
|
<!--<img src="resources/avatar.jpg" class="avatar">-->
|
||||||
|
<h1 class="padDown">Alexandre CATTEAU</h1>
|
||||||
|
<!--<p>I can code <span id="spin"></span></p>-->
|
||||||
|
<p>Ingénieur en informatique - Computing Engineer</p>
|
||||||
|
<p>Consultant en cybersécurité - Cybersecurity Consultant</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<ul class="gap social">
|
||||||
|
<li class="icon-resume-fr tile li-nonwhite"><a href="resources/cv/fr.pdf"><ion-icon name="document"></ion-icon><br><br>CV Français</a></li>
|
||||||
|
<li class="icon-email tile li-white"><a href="mailto: alexandre@catteau.pro"><ion-icon name="mail"></ion-icon><br><br>Email me</a></li>
|
||||||
|
<li class="icon-resume-en tile li-nonwhite"><a href="resources/cv/en.pdf"><ion-icon name="document"></ion-icon><br><br>English CV</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</html>
|
||||||
BIN
resources/favicon.png
Normal file
BIN
resources/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 841 B |
231
stylesheets/style.css
Normal file
231
stylesheets/style.css
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
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: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption, th, td {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: normal;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
q, blockquote {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:before, q:after, blockquote:before, blockquote:after {
|
||||||
|
content: "";
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a img {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #fafafa;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
background: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.25em;
|
||||||
|
padding: 0 1em;
|
||||||
|
font-style: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-icon {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap {
|
||||||
|
padding: 1em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padDown {
|
||||||
|
padding: 0.5em 0em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer {
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
-moz-box-shadow: 0 0 0px 3px #fff, 0 0 0 4px #ccc, 0 4px 6px #333;
|
||||||
|
-webkit-box-shadow: 0 0 0px 3px #fff, 0 0 0 4px #ccc, 0 4px 6px #333;
|
||||||
|
box-shadow: 0 0 0px 3px #fff, 0 0 0 4px #ccc, 0 4px 6px #333;
|
||||||
|
-moz-border-radius: 100px;
|
||||||
|
-webkit-border-radius: 100px;
|
||||||
|
border-radius: 100px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadanimation {
|
||||||
|
animation: 1s ease-in-out both fadeInRight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInRight {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translateX(300px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
animation: .4s ease-in-out both fade-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:nth-child(1) {
|
||||||
|
animation-delay: 1.35s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:nth-child(2) {
|
||||||
|
animation-delay: 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:nth-child(3) {
|
||||||
|
animation-delay: 1.65s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:nth-child(4) {
|
||||||
|
animation-delay: 1.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:nth-child(5) {
|
||||||
|
animation-delay: 1.95s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:nth-child(6) {
|
||||||
|
animation-delay: 2.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.social li {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
*vertical-align: auto;
|
||||||
|
*zoom: 1;
|
||||||
|
*display: inline;
|
||||||
|
margin: .5em;
|
||||||
|
-moz-transition: all 0.15s ease;
|
||||||
|
-o-transition: all 0.15s ease;
|
||||||
|
-webkit-transition: all 0.15s ease;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.li-white:hover {
|
||||||
|
-moz-transform: scale(1.25, 1.25);
|
||||||
|
-ms-transform: scale(1.25, 1.25);
|
||||||
|
-webkit-transform: scale(1.25, 1.25);
|
||||||
|
transform: scale(1.25, 1.25);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .social li:hover { */
|
||||||
|
.li-nonwhite:hover {
|
||||||
|
-moz-transform: scale(1.25, 1.25);
|
||||||
|
-ms-transform: scale(1.25, 1.25);
|
||||||
|
-webkit-transform: scale(1.25, 1.25);
|
||||||
|
transform: scale(1.25, 1.25);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social li:before {
|
||||||
|
position: absolute;
|
||||||
|
width: 2em;
|
||||||
|
margin-left: -1em;
|
||||||
|
top: 1.5em;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social li a {
|
||||||
|
display: block;
|
||||||
|
color: inherit;
|
||||||
|
padding: 1em 1em 1em;
|
||||||
|
width: 6em;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-resume-fr {
|
||||||
|
color: #0414b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-resume-fr:hover {
|
||||||
|
background: #0414b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-email {
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-email:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-resume-en {
|
||||||
|
color: #ec0c0c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-resume-en:hover {
|
||||||
|
background: #ec0c0c;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user