tcharles/cv-online
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

redesigned home page + Tons of minor improvements

Browse Source
This commit is contained in:
Crom (Thibaut CHARLES) 2018-05-16 12:31:51 +02:00
parent 7675c53fe6
commit 636e1145d9
Signed by: tcharles
GPG Key ID: 45A3D5F880B9E6D0
9 changed files with 160 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
css/main.css
View File

@ -1,4 +1,54 @@
@charset "UTF-8"; @charset "UTF-8";
/* noto-serif-regular - latin */
@font-face {
font-family: "Noto Serif";
font-style: normal;
font-weight: 400;
src: url("/fonts/noto-serif-v6-latin-regular.eot");
/* IE9 Compat Modes */
src: local("Noto Serif"), local("NotoSerif"), url("/fonts/noto-serif-v6-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/noto-serif-v6-latin-regular.woff2") format("woff2"), url("/fonts/noto-serif-v6-latin-regular.woff") format("woff"), url("/fonts/noto-serif-v6-latin-regular.ttf") format("truetype"), url("/fonts/noto-serif-v6-latin-regular.svg#NotoSerif") format("svg");
/* Legacy iOS */
}
/* noto-serif-italic - latin */
@font-face {
font-family: "Noto Serif";
font-style: italic;
font-weight: 400;
src: url("/fonts/noto-serif-v6-latin-italic.eot");
/* IE9 Compat Modes */
src: local("Noto Serif Italic"), local("NotoSerif-Italic"), url("/fonts/noto-serif-v6-latin-italic.eot?#iefix") format("embedded-opentype"), url("/fonts/noto-serif-v6-latin-italic.woff2") format("woff2"), url("/fonts/noto-serif-v6-latin-italic.woff") format("woff"), url("/fonts/noto-serif-v6-latin-italic.ttf") format("truetype"), url("/fonts/noto-serif-v6-latin-italic.svg#NotoSerif") format("svg");
/* Legacy iOS */
}
/* noto-serif-700 - latin */
@font-face {
font-family: "Noto Serif";
font-style: normal;
font-weight: 700;
src: url("/fonts/noto-serif-v6-latin-700.eot");
/* IE9 Compat Modes */
src: local("Noto Serif Bold"), local("NotoSerif-Bold"), url("/fonts/noto-serif-v6-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/noto-serif-v6-latin-700.woff2") format("woff2"), url("/fonts/noto-serif-v6-latin-700.woff") format("woff"), url("/fonts/noto-serif-v6-latin-700.ttf") format("truetype"), url("/fonts/noto-serif-v6-latin-700.svg#NotoSerif") format("svg");
/* Legacy iOS */
}
/* noto-serif-700italic - latin */
@font-face {
font-family: "Noto Serif";
font-style: italic;
font-weight: 700;
src: url("/fonts/noto-serif-v6-latin-700italic.eot");
/* IE9 Compat Modes */
src: local("Noto Serif Bold Italic"), local("NotoSerif-BoldItalic"), url("/fonts/noto-serif-v6-latin-700italic.eot?#iefix") format("embedded-opentype"), url("/fonts/noto-serif-v6-latin-700italic.woff2") format("woff2"), url("/fonts/noto-serif-v6-latin-700italic.woff") format("woff"), url("/fonts/noto-serif-v6-latin-700italic.ttf") format("truetype"), url("/fonts/noto-serif-v6-latin-700italic.svg#NotoSerif") format("svg");
/* Legacy iOS */
}
/* croissant-one-regular - latin */
@font-face {
font-family: "Croissant One";
font-style: normal;
font-weight: 400;
src: url("/fonts/croissant-one-v5-latin-regular.eot");
/* IE9 Compat Modes */
src: local("Croissant One"), local("CroissantOne-Regular"), url("/fonts/croissant-one-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/croissant-one-v5-latin-regular.woff2") format("woff2"), url("/fonts/croissant-one-v5-latin-regular.woff") format("woff"), url("/fonts/croissant-one-v5-latin-regular.ttf") format("truetype"), url("/fonts/croissant-one-v5-latin-regular.svg#CroissantOne") format("svg");
/* Legacy iOS */
}
nav#left { nav#left {
position: fixed; position: fixed;
left: -210px; left: -210px;
@ -479,6 +529,20 @@ nav#top:hover, nav#top:active {
#section-main article .center { #section-main article .center {
text-align: center; text-align: center;
} }
#section-main article .canvas-container {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-around;
}
#section-main article .canvas-container > * {
align-self: center;
}
#section-main article img.avatar {
border: none;
border-radius: 100%;
max-height: 200px;
}
body[data-width=small] #section-main article { body[data-width=small] #section-main article {
max-width: 100%; max-width: 100%;

BIN
img/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
img/gitea.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
img/gitlab.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

29
js/main.js
View File

@ -47,7 +47,9 @@ function setPage(path){
if(path === "/" || path === "" || path === "/index.html"){ if(path === "/" || path === "" || path === "/index.html"){
path = "/home"; path = "/home";
} }
const existingPages = [ "/home", "/skills", "/projects", "/experiences", "/hobbies"];
if(existingPages.findIndex(a => a === path) >= 0){
window.scrollTo(0, 0); window.scrollTo(0, 0);
$("#article-container").empty(); $("#article-container").empty();
@ -70,10 +72,15 @@ function setPage(path){
}); });
}) })
.fail((err) => { .fail((err) => {
$("#article-container").html(`<article><h1>Error ${err.status} :'(</h1><p>${err.statusText}<br/>${err.responseText}</p>`); $("#article-container").html(`<article><h1>Error ${err.status}'</h1><p>${err.statusText}<br/>${err.responseText}</p>`);
console.error(err); console.error(err);
}); });
} }
else{
$("#article-container").html(`<article><h1>Error 404</h1><p>Page <code>${path}</code> does not exist</p>`);
}
}
@ -88,9 +95,9 @@ function smoothScrollSetup(){
{ {
$('html,body').animate( $('html,body').animate(
{ {
scrollTop: (target.offset().top-20)//-200 scrollTop: (target.offset().top)
}, 400); }, 400);
return false; return true;
} }
} }
}); });
@ -126,7 +133,7 @@ function skillsPageSetup(){
let ctx = document.getElementById("whatilove_").getContext("2d"); let ctx = document.getElementById("whatilove_").getContext("2d");
let data = [ let data = [
{ value: 5, color: "#ff706a", title: "Low-level programming" }, { value: 5, color: "#ff706a", title: "Low-level programming" },
{ value: 4, color: "#efc26c", title: "Higher-level programming" }, { value: 5, color: "#efc26c", title: "Higher-level programming" },
{ value: 5, color: "#76ef6c", title: "Linux Environment" }, { value: 5, color: "#76ef6c", title: "Linux Environment" },
{ value: 3, color: "#dd8ae5", title: "Project Management" }, { value: 3, color: "#dd8ae5", title: "Project Management" },
{ value: 1, color: "#6cd6ef", title: "Web dev" } { value: 1, color: "#6cd6ef", title: "Web dev" }
@ -152,13 +159,13 @@ function skillsPageSetup(){
{ {
let ctx = document.getElementById("theory").getContext("2d"); let ctx = document.getElementById("theory").getContext("2d");
let data = { let data = {
labels : ["Toolchains","Code generation","Algorithmic","Object-oriented design","Code quality", "Continuous integration"], labels : ["Toolchains", "Code generation", "Algorithmic", "Architecture design", "Quality assurance", "CI / Automation"],
datasets : [{ datasets : [{
fillColor : "rgba(83, 142, 193, 0.5)", fillColor : "rgba(83, 142, 193, 0.5)",
strokeColor : "#6091ff", strokeColor : "#6091ff",
pointColor : "#1a76e2", pointColor : "#1a76e2",
pointStrokeColor : "#fff", pointStrokeColor : "#fff",
data : [70,80,80,90,70,60] data : [80, 80, 80, 90, 70, 80]
},{ },{
strokeColor : "rgba(0,0,0,0)", strokeColor : "rgba(0,0,0,0)",
pointColor : "rgba(0,0,0,0)", pointColor : "rgba(0,0,0,0)",
@ -173,13 +180,13 @@ function skillsPageSetup(){
{ {
var ctx = document.getElementById("proglanguages").getContext("2d"); var ctx = document.getElementById("proglanguages").getContext("2d");
var data = { var data = {
labels : ["C, C++11, D, Java", "Bash", "SQL", "VHDL", "ASM", "Matlab", "HTML5, CSS3, JS, PHP"], labels : ["C, C++17, D, Java", "Bash", "SQL", "VHDL", "ASM", "Matlab", "HTML5, CSS3, JS, PHP"],
datasets : [{ datasets : [{
fillColor : "rgba(83, 142, 193, 0.5)", fillColor : "rgba(83, 142, 193, 0.5)",
strokeColor : "rgb(96, 145, 255)", strokeColor : "rgb(96, 145, 255)",
pointColor : "rgb(26, 118, 226)", pointColor : "rgb(26, 118, 226)",
pointStrokeColor : "#fff", pointStrokeColor : "#fff",
data : [100, 80, 90, 30, 40, 40, 60] data : [100, 90, 80, 40, 40, 70, 60]
},{ },{
strokeColor : "rgba(0,0,0,0)", strokeColor : "rgba(0,0,0,0)",
pointColor : "rgba(0,0,0,0)", pointColor : "rgba(0,0,0,0)",
@ -194,7 +201,7 @@ function skillsPageSetup(){
{ {
var ctx = document.getElementById("linux").getContext("2d"); var ctx = document.getElementById("linux").getContext("2d");
var data = { var data = {
labels : ["Ubuntu/Debian", "Archlinux", "Linux From Scratch", "Server admin", "X11/Graphical architecture", "Kernel"], labels : ["Ubuntu/Debian", "Archlinux", "Linux From Scratch", "Server admin", "X11/Graphical stack", "Kernel"],
datasets : [{ datasets : [{
fillColor : "rgba(83, 142, 193, 0.5)", fillColor : "rgba(83, 142, 193, 0.5)",
strokeColor : "rgb(96, 145, 255)", strokeColor : "rgb(96, 145, 255)",
@ -215,13 +222,13 @@ function skillsPageSetup(){
{ {
var ctx = document.getElementById("network").getContext("2d"); var ctx = document.getElementById("network").getContext("2d");
var data = { var data = {
labels : ["Cisco CCNA1 (Basis)", "Cisco CCNA2 (Routing)", "Cisco CCNA3", "Cisco CCNA4 (VLAN)", "PFSense (Unix distro for routers)"], labels : ["Cisco CCNA1 (Basis)", "Cisco CCNA2 (Routing)", "Cisco CCNA3", "Cisco CCNA4 (VLAN)", "PFSense (Unix distro for routers)", "Linux network daemons"],
datasets : [{ datasets : [{
fillColor : "rgba(83, 142, 193, 0.5)", fillColor : "rgba(83, 142, 193, 0.5)",
strokeColor : "rgb(96, 145, 255)", strokeColor : "rgb(96, 145, 255)",
pointColor : "rgb(26, 118, 226)", pointColor : "rgb(26, 118, 226)",
pointStrokeColor : "#fff", pointStrokeColor : "#fff",
data : [100, 90, 50, 40, 70] data : [100, 90, 50, 40, 70, 80]
},{ },{
strokeColor : "rgba(0,0,0,0)", strokeColor : "rgba(0,0,0,0)",
pointColor : "rgba(0,0,0,0)", pointColor : "rgba(0,0,0,0)",

37
pages/home.md
View File

@ -2,27 +2,40 @@
# Welcome # Welcome
<p style="text-align: center">
<img src="/img/avatar.png" title="My usual profil picture, created by LoadingArtist" class="avatar"/>
</p>
My name is _Thibaut CHARLES_ My name is _Thibaut CHARLES_
I am a French engineer who __love__ computer sciences, especially when it is related to __Linux__ and __low-level__ systems. I am a French engineer who __love__ computer sciences, especially when it is comes to __Linux__ and __low level__ or __performance constrained__ programming.
## Contact me ## Contact me
Mail: ` thibaut.charles.fr@gmail.com` - Mail: thibaut.charles.fr@gmail.com
- On [Matrix](https://matrix.org/blog/home/): https://matrix.to/#/@CromFr:matrix.org
-
```
PGP
8A4B D04D A8BB 3247 20C1
B842 568E 61BB FB6D A047
```
<a href="http://twitter.com/CromFR"><img class="nostyle" src="img/twitter.png" alt="Twitter"/></a> ## Accounts
<a href="http://www.facebook.com/thibaut.charles29"><img class="nostyle" src="img/facebook.png" alt="Facebook"/></a>
<a href="http://www.linkedin.com/pub/thibaut-charles/8a/3b4/2a4"><img class="nostyle" src="img/linkedin.png" alt="LinkedIn"/></a>
<a href="http://github.com/CromFr"><img class="nostyle" src="img/github.png" alt="GitHub"/></a>
<a href="http://git.thibautcharles.net/public/projects"><img class="nostyle" src="img/gitlab.png" alt="GitLab"/>
</a>
</article> <a href="https://twitter.com/CromFR"><img class="nostyle" src="img/twitter.png" alt="Twitter"/></a>
<article> <a href="https://github.com/CromFr"><img class="nostyle" src="img/github.png" alt="GitHub"/></a>
# CV <a href="https://gitlab.com/CromFr"><img class="nostyle" src="img/gitlab.png" alt="GitLab"/></a>
<a href="https://git.thibautcharles.net/explore/repos"><img class="nostyle" src="img/gitea.png" alt="Self hosted Gitea"/></a>
Send me a mail at ` thibaut.charles.fr@gmail.com` and I'll send you my CV as soon as possible ! ## Resume
Send me a mail at thibaut.charles.fr@gmail.com and I'll send you my resume as soon as possible !
## Legacy accounts (abandoned)
<a href="https://www.facebook.com/thibaut.charles29"><img class="nostyle" src="img/facebook.png" alt="Facebook"/></a>
<a href="https://www.linkedin.com/pub/thibaut-charles/8a/3b4/2a4"><img class="nostyle" src="img/linkedin.png" alt="LinkedIn"/></a>
</article> </article>

21
pages/skills.md
View File

@ -16,11 +16,10 @@
<article> <article>
# What I love # What I love
<p style="text-align:center;"> <div class="canvas-container">
<canvas id="whatilove_" width="250" height="400"></canvas> <canvas id="whatilove_" height="400px"></canvas>
&emsp; &emsp; <canvas id="howilearnt" height="400px"></canvas>
<canvas id="howilearnt" width="250" height="400"></canvas> </div>
</p>
<a class="gototop" href="#i-am-"></a> <a class="gototop" href="#i-am-"></a>
</article> </article>
@ -63,20 +62,20 @@ _Following my high school diploma, I wanted to attend an engineering school spec
<article> <article>
<h1 id="programming">Programming</h1> <h1 id="programming">Programming</h1>
<p style="text-align:center;"> <div class="canvas-container">
<canvas id="theory" width="600px" height="300px"></canvas> <canvas id="theory" width="600px" height="300px"></canvas>
<canvas id="proglanguages" width="600px" height="300px"></canvas> <canvas id="proglanguages" width="600px" height="300px"></canvas>
</p> </div>
<a class="gototop" href="#i-am-"></a> <a class="gototop" href="#i-am-"></a>
</article> </article>
<article> <article>
<h1 id="sysadmin">System Admin</h1> <h1 id="sysadmin">System Admin</h1>
<p style="text-align:center;"> <div class="canvas-container">
<canvas id="linux" width="600px" height="300px"></canvas> <canvas id="linux" width="600px" height="300px"></canvas>
<canvas id="network" width="600px" height="300px"></canvas> <canvas id="network" width="600px" height="300px"></canvas>
</p> </div>
<a class="gototop" href="#i-am-"></a> <a class="gototop" href="#i-am-"></a>
</article> </article>
@ -84,9 +83,9 @@ _Following my high school diploma, I wanted to attend an engineering school spec
<article> <article>
<h1 id="projectmgr">Project Management</h1> <h1 id="projectmgr">Project Management</h1>
<p style="text-align:center;"> <div class="canvas-container">
<canvas id="tools" width="600px" height="300px"></canvas> <canvas id="tools" width="600px" height="300px"></canvas>
</p> </div>
<a class="gototop" href="#i-am-"></a> <a class="gototop" href="#i-am-"></a>
</article> </article>

3
scss/main.scss
View File

@ -8,6 +8,9 @@ $ClrTrueBlack: #000000;
$FontTitle: 'Croissant One',cursive; $FontTitle: 'Croissant One',cursive;
$FontText: 'Noto Serif',serif; $FontText: 'Noto Serif',serif;
@import "fonts.scss";
@import "mixins.scss"; @import "mixins.scss";
@import "nav.scss"; @import "nav.scss";
@import "section.scss"; @import "section.scss";

18
scss/section.scss
View File

@ -305,6 +305,24 @@ $ArticleMaxWidth: 800px;
.center{ .center{
text-align: center; text-align: center;
} }
.canvas-container {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-around;
> * {
align-self: center;
}
}
img.avatar {
border: none;
border-radius: 100%;
max-height: 200px;
}
} }