This repository has been archived by the owner on Feb 20, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (101 loc) · 6.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="nl">
<head>
<title>HCI | Stijn Slats | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Icon -->
<link rel="icon" href="images/icon/Stijn-Slats_Logo.png">
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Own Css -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="bg main-bg"></div>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html"><span>HCI</span> | Stijn Slats</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Topics
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="html/topics/wearables.html">Wearables</a>
<a class="dropdown-item" href="html/topics/playful.html">Playful Interactions</a>
<a class="dropdown-item" href="html/topics/artificial.html">Artificial Creatures</a>
<a class="dropdown-item" href="html/topics/ar.html">AR&VR</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Workshops
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="html/workshops/arduino.html">Arduino</a>
<a class="dropdown-item" href="html/workshops/vr.html">VR environments</a>
<a class="dropdown-item" href="html/workshops/computer.html">Computer Vision</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="html/excursion.html">Excursion</a>
</li>
<li class="nav-item">
<a class="nav-link" href="html/lab.html">Lab weeks</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Page Content -->
<main class="container">
<div class="card border-0 shadow my-5">
<div class="card-body p-5">
<h1 class="font-weight-light text-center">Introductie</h1>
<h3 class="font-weight-light">Wie ik ben?</h3>
<div class="row">
<p class="col-md-8">
Mijn naam in Stijn Slats, geboren op 23 april 1996 en wonend in Zoetermeer. In 2017 ben ik begonnen aan de opleiding Communicatie & Multimedia Design op De Haagse Hogeschool in Den Haag. In 2018 heb ik mijn propedeuse behaald. Binnen deze fase heb ik leren werken met verschillende programma’s en technieken om vanaf scratch een website te bouwen.
<br><br>
Binnen de opleiding houd ik mij vooral bezig met het ontwerpen van UI/UX Designs die aansluiten op de behoeften van de gebruiker. Naast het ontwerpen ben ik druk bezig met het bouwen van de website zelf. Dit doe ik met talen als HTML5, CSS3, Javascript en jQuery.
</p>
<figure class="col-md-4">
<img src="images/portret/foto-stijn_vierkant.jpg" alt="..." class="rounded img-fluid">
</figure>
</div>
<h3 class="font-weight-light">Wat ik verwacht?</h3>
<div class="row">
<p class="col-md-12">Op het moment heb ik geen idee wat ik moet verwachten van de HCI weken. Wel heb ik gehoord dat de HCI weken erg leuk maar ook zeer pittig zullen zijn.</p>
</div>
<h3 class="font-weight-light">Wat ik wil leren?</h3>
<div class="row">
<p class="col-md-12">Afhankelijk van het onderwerp hoop ik extra informatie over programmeren en designen te leren. Denk hierbij aan het ontwerpen van een VR-ruimte of een game map o.i.d.</p>
</div>
</div>
</div>
</main>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Propper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- Bootstrap 4 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<!-- Own Js -->
<script src="js/fade-in.js"></script>
</body>
</html>