redesigned home page + Tons of minor improvements
This commit is contained in:
parent
7675c53fe6
commit
636e1145d9
GPG key ID:
45A3D5F880B9E6D0
9 changed files with 160 additions and 56 deletions
64
css/main.css
64
css/main.css
|
|
@ -1,4 +1,54 @@
|
|||
@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 {
|
||||
position: fixed;
|
||||
left: -210px;
|
||||
|
|
@ -479,6 +529,20 @@ nav#top:hover, nav#top:active {
|
|||
#section-main article .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 {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
BIN
img/avatar.png
Normal file
BIN
img/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
img/gitea.png
Normal file
BIN
img/gitea.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
img/gitlab.png
BIN
img/gitlab.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.3 KiB |
69
js/main.js
69
js/main.js
|
|
@ -47,32 +47,39 @@ function setPage(path){
|
|||
if(path === "/" || path === "" || path === "/index.html"){
|
||||
path = "/home";
|
||||
}
|
||||
const existingPages = [ "/home", "/skills", "/projects", "/experiences", "/hobbies"];
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
$("#article-container").empty();
|
||||
if(existingPages.findIndex(a => a === path) >= 0){
|
||||
window.scrollTo(0, 0);
|
||||
$("#article-container").empty();
|
||||
|
||||
$.ajax("/pages"+path+".md")
|
||||
.done((res) => {
|
||||
$("#article-container").html(res);
|
||||
$.ajax("/pages"+path+".md")
|
||||
.done((res) => {
|
||||
$("#article-container").html(res);
|
||||
|
||||
const len = $("#article-container > article").length;
|
||||
let cnt = 0;
|
||||
$("#article-container > article").each((i, elmt) => {
|
||||
$(elmt).html(marked($(elmt).html(), markedOpt, (err, res) => {
|
||||
cnt++;
|
||||
if(cnt === len){
|
||||
if(path == "/skills"){
|
||||
skillsPageSetup();
|
||||
const len = $("#article-container > article").length;
|
||||
let cnt = 0;
|
||||
$("#article-container > article").each((i, elmt) => {
|
||||
$(elmt).html(marked($(elmt).html(), markedOpt, (err, res) => {
|
||||
cnt++;
|
||||
if(cnt === len){
|
||||
if(path == "/skills"){
|
||||
skillsPageSetup();
|
||||
}
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}));
|
||||
return res;
|
||||
}));
|
||||
});
|
||||
})
|
||||
.fail((err) => {
|
||||
$("#article-container").html(`<article><h1>Error ${err.status}'</h1><p>${err.statusText}<br/>${err.responseText}</p>`);
|
||||
console.error(err);
|
||||
});
|
||||
})
|
||||
.fail((err) => {
|
||||
$("#article-container").html(`<article><h1>Error ${err.status} :'(</h1><p>${err.statusText}<br/>${err.responseText}</p>`);
|
||||
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(
|
||||
{
|
||||
scrollTop: (target.offset().top-20)//-200
|
||||
scrollTop: (target.offset().top)
|
||||
}, 400);
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -126,7 +133,7 @@ function skillsPageSetup(){
|
|||
let ctx = document.getElementById("whatilove_").getContext("2d");
|
||||
let data = [
|
||||
{ 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: 3, color: "#dd8ae5", title: "Project Management" },
|
||||
{ value: 1, color: "#6cd6ef", title: "Web dev" }
|
||||
|
|
@ -152,13 +159,13 @@ function skillsPageSetup(){
|
|||
{
|
||||
let ctx = document.getElementById("theory").getContext("2d");
|
||||
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 : [{
|
||||
fillColor : "rgba(83, 142, 193, 0.5)",
|
||||
strokeColor : "#6091ff",
|
||||
pointColor : "#1a76e2",
|
||||
pointStrokeColor : "#fff",
|
||||
data : [70,80,80,90,70,60]
|
||||
data : [80, 80, 80, 90, 70, 80]
|
||||
},{
|
||||
strokeColor : "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 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 : [{
|
||||
fillColor : "rgba(83, 142, 193, 0.5)",
|
||||
strokeColor : "rgb(96, 145, 255)",
|
||||
pointColor : "rgb(26, 118, 226)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : [100, 80, 90, 30, 40, 40, 60]
|
||||
data : [100, 90, 80, 40, 40, 70, 60]
|
||||
},{
|
||||
strokeColor : "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 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 : [{
|
||||
fillColor : "rgba(83, 142, 193, 0.5)",
|
||||
strokeColor : "rgb(96, 145, 255)",
|
||||
|
|
@ -215,13 +222,13 @@ function skillsPageSetup(){
|
|||
{
|
||||
var ctx = document.getElementById("network").getContext("2d");
|
||||
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 : [{
|
||||
fillColor : "rgba(83, 142, 193, 0.5)",
|
||||
strokeColor : "rgb(96, 145, 255)",
|
||||
pointColor : "rgb(26, 118, 226)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : [100, 90, 50, 40, 70]
|
||||
data : [100, 90, 50, 40, 70, 80]
|
||||
},{
|
||||
strokeColor : "rgba(0,0,0,0)",
|
||||
pointColor : "rgba(0,0,0,0)",
|
||||
|
|
|
|||
|
|
@ -2,27 +2,40 @@
|
|||
|
||||
# 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_
|
||||
|
||||
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
|
||||
|
||||
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>
|
||||
<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>
|
||||
## Accounts
|
||||
|
||||
</article>
|
||||
<article>
|
||||
# CV
|
||||
<a href="https://twitter.com/CromFR"><img class="nostyle" src="img/twitter.png" alt="Twitter"/></a>
|
||||
<a href="https://github.com/CromFr"><img class="nostyle" src="img/github.png" alt="GitHub"/></a>
|
||||
<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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,11 +16,10 @@
|
|||
<article>
|
||||
# What I love
|
||||
|
||||
<p style="text-align:center;">
|
||||
<canvas id="whatilove_" width="250" height="400"></canvas>
|
||||
   
|
||||
<canvas id="howilearnt" width="250" height="400"></canvas>
|
||||
</p>
|
||||
<div class="canvas-container">
|
||||
<canvas id="whatilove_" height="400px"></canvas>
|
||||
<canvas id="howilearnt" height="400px"></canvas>
|
||||
</div>
|
||||
<a class="gototop" href="#i-am-"></a>
|
||||
|
||||
</article>
|
||||
|
|
@ -63,20 +62,20 @@ _Following my high school diploma, I wanted to attend an engineering school spec
|
|||
<article>
|
||||
<h1 id="programming">Programming</h1>
|
||||
|
||||
<p style="text-align:center;">
|
||||
<canvas id="theory" width="600px" height="300px"></canvas>
|
||||
<canvas id="proglanguages" width="600px" height="300px"></canvas>
|
||||
</p>
|
||||
<div class="canvas-container">
|
||||
<canvas id="theory" width="600px" height="300px"></canvas>
|
||||
<canvas id="proglanguages" width="600px" height="300px"></canvas>
|
||||
</div>
|
||||
<a class="gototop" href="#i-am-"></a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<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="network" width="600px" height="300px"></canvas>
|
||||
</p>
|
||||
</div>
|
||||
<a class="gototop" href="#i-am-"></a>
|
||||
</article>
|
||||
|
||||
|
|
@ -84,9 +83,9 @@ _Following my high school diploma, I wanted to attend an engineering school spec
|
|||
<article>
|
||||
<h1 id="projectmgr">Project Management</h1>
|
||||
|
||||
<p style="text-align:center;">
|
||||
<div class="canvas-container">
|
||||
<canvas id="tools" width="600px" height="300px"></canvas>
|
||||
</p>
|
||||
</div>
|
||||
<a class="gototop" href="#i-am-"></a>
|
||||
</article>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ $ClrTrueBlack: #000000;
|
|||
$FontTitle: 'Croissant One',cursive;
|
||||
$FontText: 'Noto Serif',serif;
|
||||
|
||||
|
||||
|
||||
@import "fonts.scss";
|
||||
@import "mixins.scss";
|
||||
@import "nav.scss";
|
||||
@import "section.scss";
|
||||
|
|
|
|||
|
|
@ -305,6 +305,24 @@ $ArticleMaxWidth: 800px;
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue