Browse Source

add: about and contact

master
KerelOlivier 3 years ago
parent
commit
2391701826
  1. 77
      index.html
  2. 34
      styles.css

77
index.html

@ -1,5 +1,6 @@ @@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,6 +9,7 @@ @@ -8,6 +9,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
@ -22,11 +24,12 @@ @@ -22,11 +24,12 @@
<section class="content">
<section class="headbox">
<section class="profile">
<img class="picture" src="./images/profile.jpg" alt="Profile picture">
<img class="picture" src="./images/profile.jpg" alt="Profile picture">
<h3>Olivier Boeren</h3>
<h4>Software developer</h4>
<div class="socials">
<a href="https://www.linkedin.com/in/olivier-boeren-39a4a316b/"><img src="./images/linkedin.svg" alt="linkedin"></a>
<a href="https://www.linkedin.com/in/olivier-boeren-39a4a316b/"><img src="./images/linkedin.svg"
alt="linkedin"></a>
<a href="https://github.com/KerelOlivier"><img src="./images/github.svg" alt="github"></a>
</div>
</section>
@ -35,7 +38,16 @@ @@ -35,7 +38,16 @@
<section class="info">
<h1 id="about">ABOUT</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus.
Hi, I am Olivier. I am a 3rd-year computer science honours student at Utrecht University. Currently, I
am on an exchange to Oslo. Here I will follow a few courses at the computer science department of the
University of Oslo. In my free time, I like to learn more about computer science. I, for example, learn
a new framework, algorithm or the basics of a new area I have not explored yet. I also like to
participate in game-jams.
</p>
<p>
My interests in computer science are rather broad. My main focus lies in game development, web development and computer
graphics. But I also have a keen interest in algorithms and artificial intelligence. Next year I will
start a master's degree in artificial intelligence at the TU Delft or TU Eindhoven
</p>
<hr>
<h1 id="skills">SKILLS</h1>
@ -49,50 +61,59 @@ @@ -49,50 +61,59 @@
</p>
<h2>Tools</h2>
<p>
Unity 3D • Linux • Docker • Git
Unity 3D • Linux • Docker • Git
</p>
<hr>
<h1 id="education">EDUCATION</h1>
<div>
<h2>University</h2>
<div class="education">
<img src="./images/uu.svg" alt="University of Utrecht">
<div>
<h3>University of Utrecht</h3>
<span>Computer science • honours program • 2019-2022</span>
</div>
<div>
<h2>University</h2>
<div class="education">
<img src="./images/uu.svg" alt="University of Utrecht">
<div>
<h3>Utrecht University</h3>
<span>Computer science • honours program • 2019-2022</span>
</div>
<div class="education">
<img src="./images/UiO.png" alt="University of Oslo">
<div>
<h3>University of Oslo</h3>
<span>Computer science • Erasmus+ exchange • 2022</span>
</div>
</div>
<div class="education">
<img src="./images/UiO.png" alt="University of Oslo">
<div>
<h3>University of Oslo</h3>
<span>Computer science • Erasmus+ exchange • 2022</span>
</div>
</div>
<div>
<h2>Certification</h2>
<div class="education">
<img src="./images/coursera.png" alt="coursera">
<div>
<h3>Machine learning</h3>
<span>Stanford University Online • 2021 • <a href="https://coursera.org/share/4ae87d580d430567dbfee88408a4806f">certificate</a></span>
</div>
</div>
<div>
<h2>Certification</h2>
<div class="education">
<img src="./images/coursera.png" alt="coursera">
<div>
<h3>Machine learning</h3>
<span>Stanford University Online • 2021 • <a
href="https://coursera.org/share/4ae87d580d430567dbfee88408a4806f">certificate</a></span>
</div>
</div>
</div>
<hr>
<h1 id="projects">PROJECTS</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel
dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent
ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus.
Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor
fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus.
</p>
<hr>
<h1 id="contact">CONTACT</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus.
If you would like to contact me, please do not hesitate to send me a message on <a
href="https://www.linkedin.com/in/olivier-boeren-39a4a316b/">Linkedin</a> or email me at <a
href="mailto:olivierboeren@live.nl">olivierboeren@live.nl</a>. I will try to respond as soon as
possible.
</p>
</section>
</section>
</body>
</html>

34
styles.css

@ -8,6 +8,16 @@ body{ @@ -8,6 +8,16 @@ body{
margin: 0;
margin-top: 50px;
}
a{
text-decoration: none;
color: #155d77;
}
a:hover{
color: #424242;
}
h1{
color:#212121;
font-size: 2rem;
@ -123,10 +133,24 @@ nav a:hover{ @@ -123,10 +133,24 @@ nav a:hover{
.education h3{
margin: 0;
}
.education a{
text-decoration: none;
color: #424242;
form{
display: flex;
flex-direction: column;
width: 50%;
margin: auto;
}
.education a:hover{
color: #155d77;
input{
width: 100%;
height: 25px;
border: 2px solid #e0e0e0;
padding: 5px;
margin-bottom: 10px;
}
textarea{
width: 100%;
height: 100px;
border: 2px solid #e0e0e0;
padding: 2px;
margin-bottom: 10px;
}
Loading…
Cancel
Save