Skip to content

Commit 6bf7a13

Browse files
author
Senne Deproost
committed
Timeline
1 parent d46c67a commit 6bf7a13

File tree

4 files changed

+246
-61
lines changed

4 files changed

+246
-61
lines changed

‎graphics.html

Lines changed: 63 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,72 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
4-
<title>W3.CSS Template</title>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
8-
<link href="fonts/gotham.otf" rel="stylesheet">
9-
<link rel="stylesheet" href="style.css">
5+
<title>W3.CSS Template</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10+
<link href="/fonts/gotham.otf" rel="stylesheet" type="otf">
11+
<link rel="stylesheet" href="style.css">
12+
<script src="/js/navbar.js"></script>
1013
</head>
14+
1115
<body>
1216

13-
<div class="w3-top">
17+
<!-- Navbar -->
18+
<div class="">
19+
<header class="w3-container w3-xlarge w3-padding-24 w3-black w3-left-align">
20+
<a href="/index.html" class="w3-bar-item">
21+
<img src="img/signature.svg" class="w3-image w3-animate-opacity w3-padding-12" id="logo" alt="logo"></a>
22+
<a class="w3-button w3-hide-large w3-right w3-xlarge w3-hover-black w3-animate-right" id="hamburger"
23+
style="max-width:60px" href="javascript:void(0);" onclick="openNav(this)">
24+
<i class="fa fa-bars"></i>
25+
</a>
26+
<a href="/contact.html" class="w3-right w3-button w3-hide-medium w3-hide-small">Contact</a>
27+
<a href="/blog.html" class="w3-right w3-button w3-hide-medium w3-hide-small">Blog</a>
28+
<a href="/graphics.html" class="w3-right w3-button w3-hide-medium w3-hide-small">Graphics</a>
29+
<a href="/research.html" class="w3-right w3-button w3-hide-medium w3-hide-small">Research</a>
30+
</header>
1431

15-
<!-- Header -->
16-
<header class="w3-container w3-xlarge w3-padding-24 w3-black">
17-
<a href="/index.html" class="w3-left">
18-
<img src="img/logo.svg" class="w3-image" alt="logo" style="width:100%;max-width:400px">
19-
</a>
20-
<a href="/contact.html" class="w3-right w3-button">Contact</a>
21-
<a href="/graphics.html" class="w3-right w3-button">Graphics</a>
22-
<a href="/research.html" class="w3-right w3-button">Research</a>
23-
<a href="/about.html" class="w3-right w3-button">About</a>
24-
</header>
32+
<!-- Navbar on small screens -->
33+
<div id="sidenav" class="w3-bar-block w3-black w3-left-align w3-hide w3-hide-large">
34+
<a href="/research.html" class="w3-bar-item w3-button w3-animate-left w3-large gotham">Research</a>
35+
<a href="/graphics.html" class="w3-bar-item w3-button w3-animate-left w3-large gotham">Graphics</a>
36+
<a href="/blog.html" class="w3-bar-item w3-button w3-animate-left w3-large gotham">Blog</a>
37+
<a href="/contact.html" class="w3-bar-item w3-button w3-animate-left w3-large gotham">Contact</a>
38+
</div>
39+
</div>
2540

41+
<div class="w3-container w3-padding-16">
42+
<div class="w3-row w3-black w3-container w3-padding-16">
43+
<h1 class="w3-hide-small"><b>About</b></h1>
44+
<h1 class="w3-center w3-hide-medium w3-hide-large"><b>About</b></h1>
45+
<hr>
46+
<div class="w3-col w3-center s12 m6 l4 w3-hide-large w3-hide-medium">
47+
<img src="img/self_1.png" style="width:70%; max-width: 600px; padding: 20px;">
48+
</div>
49+
<div class="w3-col s12 m6 l8">
50+
<h4>In pursuit of discovering and expanding the artificial intelligence domain. Specializing in model-free reinforcement learning. Improving interpretability and explainability of the black box nature of the DRL methodology.
51+
<br>
52+
<br>Having a creative outlet in graphical design and digital drawing. Creating stories worth telling. Enjoying both the small and the big things in life.
53+
<br>
54+
<br>Moving further in the unknown, because you never know what’s next.</h4>
55+
</div>
56+
<div class="w3-col w3-right-align s12 m6 l4 w3-hide-small">
57+
<img src="img/self_1.png" style="width:60%; max-width: 400px; padding: 0px;">
58+
</div>
59+
</div>
60+
</div>
2661

27-
</div>
28-
29-
</body>
30-
</html>
62+
<div class="w3-container w3-padding-16 w3-right-align">
63+
<div class="w3-row w3-white w3-container w3-padding-16">
64+
<h1><b></b>About</h1>
65+
<div class="w3-col s12 m4 l8">
66+
<p>tralalalala</p>
67+
</div>
68+
<div class="w3-col w3-center s12 m8 l4">
69+
<p>Blabla</p>
70+
</div>
71+
</div>
72+
</div>

‎index2.html

Lines changed: 55 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div class="">
1919
<header class="w3-container w3-xlarge w3-padding-24 w3-black w3-left-align">
2020
<a href="/index.html" class="w3-bar-item">
21-
<img src="img/logo.svg" class="w3-image w3-animate-opacity w3-padding-12" id="logo" alt="logo"></a>
21+
<img src="img/logo.svg" class="w3-image w3-animate-left w3-padding-12" id="logo" alt="logo"></a>
2222
<a class="w3-button w3-hide-large w3-right w3-xlarge w3-hover-black w3-animate-right" id="hamburger"
2323
style="max-width:60px" href="javascript:void(0);" onclick="openNav(this)">
2424
<i class="fa fa-bars"></i>
@@ -38,29 +38,67 @@
3838
</div>
3939
</div>
4040

41-
<div class="w3-container w3-padding-16">
41+
<div class="w3-container w3-padding-16 w3-animate-opacity">
4242
<div class="w3-row w3-black w3-container w3-padding-16">
43-
<h1><b></b>About</h1>
44-
<div class="w3-col s12 m4 l8">
45-
<p>This is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is
46-
textThis is textThis is textThis is textThis is text</p>
43+
<h1 class="w3-hide-small"><b>About</b></h1>
44+
<h1 class="w3-center w3-hide-medium w3-hide-large"><b>About</b></h1>
45+
<hr>
46+
<div class="w3-col w3-center s12 m6 l4 w3-hide-large w3-hide-medium">
47+
<img src="img/self_1.png" style="width:70%; max-width: 600px; padding: 20px;">
4748
</div>
48-
<div class="w3-col w3-right-align s12 m8 l4">
49-
<img src="img/self_1.png" style="width:50%; max-width: 500px;">
49+
<div class="w3-col s12 m6 l8">
50+
<h4>PhD student in pursuit of expanding the artificial intelligence domain. Focusing on model-free reinforcement learning, at the intersection with classical control theory. Exploring new ways of increasing the black box nature of deep learning models and exploiting the state of the art.
51+
<br>
52+
<br>Someone with a creative outlet, practicing graphical design and digital drawing. Enjoyer of music and an adventurous traveler.
53+
<br>
54+
<br>Moving further in the unknown, not knowing what would be next.</h4>
55+
</div>
56+
<div class="w3-col w3-right-align s12 m6 l4 w3-hide-small">
57+
<img src="img/self_1.png" style="width:60%; max-width: 400px; padding-top: 20px;">
5058
</div>
5159
</div>
5260
</div>
5361

54-
<div class="w3-container w3-padding-16 w3-right-align">
62+
<div class="w3-container w3-padding-16 w3-animate-opacity">
5563
<div class="w3-row w3-white w3-container w3-padding-16">
56-
<h1><b></b>About</h1>
57-
<div class="w3-col s12 m4 l8">
58-
<p>This is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is
59-
textThis is textThis is textThis is textThis is text</p>
60-
</div>
61-
<div class="w3-col w3-center s12 m8 l4">
62-
<p>Blabla</p>
63-
</div>
64+
<h1 class="w3-hide-small w3-right-align"><b>Education & career</b></h1>
65+
<h1 class="w3-center w3-hide-medium w3-hide-large"><b>Education & career</b></h1>
66+
<hr>
67+
<div class="w3-col s12 m6 l8">
68+
<div class="timeline">
69+
<div class="container left">
70+
<div class="content">
71+
<h2>2017</h2>
72+
<p>Lorem ipsum..</p>
73+
</div>
74+
</div>
75+
<div class="container right">
76+
<div class="content">
77+
<h2>2016</h2>
78+
<p>Lorem ipsum..</p>
79+
</div>
80+
</div>
81+
<div class="container left">
82+
<div class="content">
83+
<h2>2017</h2>
84+
<p>Lorem ipsum..</p>
85+
</div>
86+
</div>
87+
<div class="container right">
88+
<div class="content">
89+
<h2>2016</h2>
90+
<p>Lorem ipsum..</p>
91+
</div>
92+
</div>
93+
</div>
94+
95+
</div>
96+
<div class="w3-col s12 m6 l4">
97+
<h4>PhD student in pursuit of expanding the artificial intelligence domain. Focusing on model-free reinforcement learning, at the intersection with classical control theory. Exploring new ways of increasing the black box nature of deep learning models and exploiting the state of the art.
98+
<br>
99+
<br>Someone with a creative outlet, practicing graphical design and digital drawing. Enjoyer of music and an adventurous traveler.
100+
<br>
101+
<br>Moving further in the unknown, not knowing what would be next.</h4>
64102
</div>
65103
</div>
66104

‎js/navbar.js

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
// Script for side navigation
22
function w3_open() {
3-
var x = document.getElementById("sidebar");
4-
x.style.width = "300px";
5-
x.style.paddingTop = "10%";
6-
x.style.display = "block";
3+
var x = document.getElementById("sidebar");
4+
x.style.width = "300px";
5+
x.style.paddingTop = "10%";
6+
x.style.display = "block";
7+
}
8+
9+
// Close side navigation
10+
function w3_close() {
11+
document.getElementById("sidebar").style.display = "none";
12+
}
13+
14+
// Used to toggle the menu on smaller screens when clicking on the menu button
15+
function openNav(anchor) {
16+
var x = document.getElementById("sidenav");
17+
if (x.className.indexOf("w3-show") == -1) {
18+
x.className += " w3-show";
19+
} else {
20+
x.className = x.className.replace(" w3-show", "");
721
}
8-
9-
// Close side navigation
10-
function w3_close() {
11-
document.getElementById("sidebar").style.display = "none";
12-
}
13-
14-
// Used to toggle the menu on smaller screens when clicking on the menu button
15-
function openNav(anchor) {
16-
var x = document.getElementById("sidenav");
17-
if (x.className.indexOf("w3-show") == -1) {
18-
x.className += " w3-show";
19-
} else {
20-
x.className = x.className.replace(" w3-show", "");
21-
}
22-
var icon = anchor.querySelector("i");
23-
icon.classList.toggle('fa-bars');
24-
icon.classList.toggle('fa-close');
25-
}
22+
var icon = anchor.querySelector("i");
23+
icon.classList.toggle('fa-bars');
24+
icon.classList.toggle('fa-close');
25+
}

‎style.css

Lines changed: 106 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,111 @@ html{
1010
header{
1111
font-family: Gotham;
1212
max-height: 10%;
13-
13+
14+
}
15+
16+
h4{
17+
text-align: justify;
18+
}
19+
20+
* {
21+
box-sizing: border-box;
22+
}
23+
24+
/* The actual timeline (the vertical ruler) */
25+
.timeline {
26+
position: relative;
27+
max-width: 1200px;
28+
margin: 0 auto;
29+
color: black;
30+
}
31+
32+
/* The actual timeline (the vertical ruler) */
33+
.timeline::after {
34+
content: '';
35+
position: absolute;
36+
width: 6px;
37+
background-color: black;
38+
top: 0;
39+
bottom: 0;
40+
left: 50%;
41+
margin-left: -3px;
42+
}
43+
44+
/* Container around content */
45+
.container {
46+
padding: 10px 40px;
47+
position: relative;
48+
background-color: inherit;
49+
width: 50%;
50+
}
51+
52+
/* The circles on the timeline */
53+
.container::after {
54+
content: '';
55+
position: absolute;
56+
width: 25px;
57+
height: 25px;
58+
right: -17px;
59+
background-color: white;
60+
border: 4px solid #202020;
61+
top: 15px;
62+
border-radius: 50%;
63+
z-index: 1;
64+
}
65+
66+
/* Place the container to the left */
67+
.left {
68+
left: 0;
69+
}
70+
71+
/* Place the container to the right */
72+
.right {
73+
left: 50%;
1474
}
1575

76+
77+
/* Fix the circle for containers on the right side */
78+
.right::after {
79+
left: -16px;
80+
}
81+
82+
/* The actual content */
83+
.content {
84+
padding: 20px 30px;
85+
background-color: white;
86+
position: relative;
87+
border-width: 10px;
88+
border-color: black;
89+
border-radius: 6px;
90+
}
91+
92+
/* Media queries - Responsive timeline on screens less than 600px wide */
93+
@media screen and (max-width: 600px) {
94+
/* Place the timelime to the left */
95+
.timeline::after {
96+
left: 50px;
97+
}
98+
99+
/* Full-width containers */
100+
.container {
101+
width: 100%;
102+
padding-left: 70px;
103+
padding-right: 25px;
104+
}
105+
106+
/* Make sure all circles are at the same spot */
107+
.left::after, .right::after {
108+
left: 15px;
109+
}
110+
111+
/* Make all right containers behave like the left ones */
112+
.right {
113+
left: 0%;
114+
}
115+
}
116+
117+
16118
.gotham{
17119
font-family: Gotham;
18120
}
@@ -30,6 +132,9 @@ header{
30132
max-width: 400px;
31133
}
32134

135+
hr{
136+
border-top: 6px solid;
137+
}
33138

34139
@keyframes fadeIn {
35140
from {

0 commit comments

Comments
 (0)