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