-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
255 lines (252 loc) · 20 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html>
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MS2KT2M');</script>
<!-- End Google Tag Manager -->
<script src="https://cdn.jsdelivr.net/gh/virae/[email protected]/badge.js" async></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>nikander100</title>
<meta name="twitter:description" content="Nikander100's Portfolio page!! Here you can find all the info you need about me, my work and my social accounts!">
<meta property="og:title" content="nikander100">
<meta name="twitter:title" content="nikander100">
<meta property="og:description" content="Nikander100's Portfolio page!! Here you can find all the info you need about me, my work and my social accounts!">
<meta name="twitter:image" content="https://nikander100.tk/assets/img/Assets/logos/logoNew.png">
<meta property="og:image" content="">
<meta property="og:type" content="">
<meta name="twitter:card" content="">
<meta name="description" content="This is nikander100's portfolio page, for my work and gaming related info! feel free to have a look around and suggest new features and bug fixes for my site! This is the place to be if you ever need to find info about me!">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Contact-Form-Clean.css">
<link rel="stylesheet" href="assets/css/CustomBS.css">
<link rel="stylesheet" href="assets/css/Footer-with-social-media-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<link rel="stylesheet" href="assets/css/index.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon16x16.png">
<link rel="manifest" href="/assets/favicons/site.webmanifest">
<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#aa00ff">
<link rel="shortcut icon" href="/assets/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#aa00ff">
<meta name="msapplication-TileImage" content="/assets/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#aa00ff">
</head>
<body id="page-top"><!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MS2KT2M"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav class="navbar navbar-light navbar-expand-lg fixed-top bg-secondary text-uppercase" id="mainNav">
<div class="container"><a class="navbar-brand js-scroll-trigger" href="#page-top">nikander100</a><button data-toggle="collapse" data-target="#navbarResponsive" class="navbar-toggler text-white bg-primary navbar-toggler-right text-uppercase rounded" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Portfolio</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="socials.html">Socials</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" data-toggle="modal" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="text-center text-white bg-primary masthead">
<div class="container" style="width: 256;"><img class="img-fluid d-block mx-auto tada animated mb-5" src="assets/img/Assets/logos/logoNew-cropped.png" style="max-height: 393px;">
<h1>Nikander<br>"nikander100"<br> van der Schee</h1>
<hr class="star-light mb-5">
<h2 class="font-weight-light mb-0">Fanatic Gamer - Software Engineering Student @ Codam - Web Developer</h2>
</div>
</header>
<section id="portfolio" class="portfolio">
<div class="container" data-toggle="tooltip" data-bss-tooltip="">
<h2 class="text-uppercase text-center text-secondary">Portfolio</h2>
<hr class="star-dark mb-5">
<div class="row">
<div class="col-md-6 col-lg-4"><a class="d-block mx-auto portfolio-item" data-toggle="modal" href="#portfolio-modal-1">
<div class="d-flex portfolio-item-caption position-absolute h-100 w-100">
<div class="text-center text-white my-auto portfolio-item-caption-content w-100 text-black"><i class="fa fa-search-plus fa-3x"></i></div>
</div><img class="img-fluid align-items-xl-center" src="assets/img/portfolio/ft_printf.png">
</a></div>
<div class="col-md-6 col-lg-4"><a class="d-block mx-auto portfolio-item" data-toggle="modal" href="#portfolio-modal-2">
<div class="d-flex portfolio-item-caption position-absolute h-100 w-100">
<div class="text-center text-white my-auto portfolio-item-caption-content w-100 text-black"><i class="fa fa-search-plus fa-3x"></i></div>
</div><img class="img-fluid" src="assets/img/portfolio/cub3d.png">
</a></div>
</div>
</div>
</section>
<section class="text-white bg-primary mb-0" id="about">
<div class="container">
<h2 class="text-uppercase text-center text-white">About me</h2>
<hr class="star-light mb-5">
<div class="row">
<div class="col col-lg-4 ml-auto" style="text-align: center;padding-top: 20px;padding-bottom: 20px;border-bottom-width: 1px;border-bottom-style: solid;"><img data-aos="fade-right" data-aos-once="true" src="assets/img/Assets/meamsabout.jpg" style="width: 256px;height: 256px;box-shadow: 3px 2px 7px #eac0ff;"></div>
<div class="col-lg-4 ml-auto" style="padding-top: 20px;padding-bottom: 20px;border-bottom-width: 1px;border-bottom-style: solid;">
<p class="lead">Hello my name is Nikander, I am 24 years of age (26 years of experience in coding).<br><br>I am a student @ Codam Coding College in Amsterdam.<br><br>My portfolio website and will slowly but surely change over the years as I learn more!<br></p>
</div>
<div class="col-lg-4 mr-auto" style="padding-top: 20px;padding-bottom: 20px;border-bottom-width: 1px;border-bottom-style: solid;">
<p class="lead">I have a passion for gaming, motorcycles, tech and coding. <br><br>I like to share my passion for gaming with the people out there and try to stream when I can on my twitch!<br><br>I currently ride a 2005 Honda CBR 125R. It's quite a fun bike to ride, it is not the fastest but really agile and playful!<br></p>
</div>
</div>
</div>
</section>
<div class="d-lg-none scroll-to-top position-fixed rounded"><a class="text-center text-white d-block js-scroll-trigger rounded" href="#page-top"><i class="fa fa-chevron-up"></i></a></div>
<div class="modal text-center" role="dialog" tabindex="-1" id="portfolio-modal-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-uppercase text-secondary mb-0">ft_printf</h2>
<hr class="star-dark mb-5"><img class="img-fluid mb-5" src="assets/img/portfolio/ft_printf.png">
<p class="mb-5">Remake of the C library printf.<br>With the aim is to learn how variable size arguments work.<br>This was definitely a fun project to work on and my first bigger project in the C language!<br><a href="https://github.com/nikander100/ft_printf">Github Repo</a></p>
</div>
</div>
</div>
</div>
<div class="modal-footer pb-5"><a class="btn btn-primary btn-lg mx-auto rounded-pill portfolio-modal-dismiss" role="button" data-dismiss="modal"><i class="fa fa-close"></i> Close Project</a></div>
</div>
</div>
</div>
<div class="modal text-center" role="dialog" tabindex="-1" id="portfolio-modal-2">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-uppercase text-secondary mb-0">Cub3d-v2</h2>
<hr class="star-dark mb-5"><img class="img-fluid mb-5" src="assets/img/portfolio/cub3d.png">
<p class="mb-5">This project is inspired by the world-famous Wolfenstein 3D game which was the first real FPS ever.<br>It will enable you to explore ray-casting.<br>Your goal will be to make a dynamic view inside a maze, in which you’ll have to find your way.<br><a href="https://github.com/nikander100/Cub3dV2">Github Repo</a><br></p>
</div>
</div>
</div>
</div>
<div class="modal-footer pb-5"><a class="btn btn-primary btn-lg mx-auto rounded-pill portfolio-modal-dismiss" role="button" data-dismiss="modal"><i class="fa fa-close"></i> Close Project</a></div>
</div>
</div>
</div>
<div class="modal text-center" role="dialog" tabindex="-1" id="portfolio-modal-3">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-uppercase text-secondary mb-0">Project Name</h2>
<hr class="star-dark mb-5"><img class="img-fluid mb-5" src="assets/img/portfolio/circus.png">
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer pb-5"><a class="btn btn-primary btn-lg mx-auto rounded-pill portfolio-modal-dismiss" role="button" data-dismiss="modal"><i class="fa fa-close"></i> Close Project</a></div>
</div>
</div>
</div>
<div class="modal text-center" role="dialog" tabindex="-1" id="portfolio-modal-4">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-uppercase text-secondary mb-0">Project Name</h2>
<hr class="star-dark mb-5"><img class="img-fluid mb-5" src="assets/img/portfolio/game.png">
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer pb-5"><a class="btn btn-primary btn-lg mx-auto rounded-pill portfolio-modal-dismiss" role="button" data-dismiss="modal"><i class="fa fa-close"></i> Close Project</a></div>
</div>
</div>
</div>
<div class="modal text-center" role="dialog" tabindex="-1" id="portfolio-modal-5">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-uppercase text-secondary mb-0">Project Name</h2>
<hr class="star-dark mb-5"><img class="img-fluid mb-5" src="assets/img/portfolio/safe.png">
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer pb-5"><a class="btn btn-primary btn-lg mx-auto rounded-pill portfolio-modal-dismiss" role="button" data-dismiss="modal"><i class="fa fa-close"></i> Close Project</a></div>
</div>
</div>
</div>
<div class="modal text-center" role="dialog" tabindex="-1" id="portfolio-modal-6">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-uppercase text-secondary mb-0">Project Name</h2>
<hr class="star-dark mb-5"><img class="img-fluid mb-5" src="assets/img/portfolio/submarine.png">
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer pb-5"><a class="btn btn-primary btn-lg mx-auto rounded-pill portfolio-modal-dismiss" role="button" data-dismiss="modal"><i class="fa fa-close"></i> Close Project</a></div>
</div>
</div>
</div>
<div class="modal text-center" role="dialog" tabindex="-1" id="contact">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<h3 style="margin-bottom: 0px;font-family: Montserrat, sans-serif;">Contact me!<br><br>through Discord:<br>@nikander100<br><br>by email:<br>[email protected]</h3>
<div class="modal-footer pb-5"><a class="btn btn-primary btn-lg mx-auto rounded-pill portfolio-modal-dismiss" role="button" data-dismiss="modal"><i class="fa fa-close"></i> Close</a></div>
</div>
</div>
</div>
<div class="text-center text-white copyright py-4" id="footer">
<footer id="footerpad" style="padding: 0px;">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-8 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item"><a href="https://www.facebook.com/nikander100"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a></li>
<li class="list-inline-item"><a href="https://twitter.com/nikander100_"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com/nikander100/"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-instagram fa-stack-1x fa-inverse"></i></span></a></li>
<li class="list-inline-item"><a href="https://www.youtube.com/nikander100"><span class="fa-stack fa-lg"><span class="fa fa-circle fa-stack-2x"></span><i class="fa fa-youtube-play fa-stack-1x fa-inverse"></i></span></a></li>
<li class="list-inline-item"><a href="https://www.codam.nl"><span class="fa-stack fa-lg"><span class="fa fa-circle fa-stack-2x"></span><img class="fa-stack-1x fa-inverse" style="width: 42px;height: 42px;margin-left: 1px;" src="assets/img/Assets/logos/codam.svg"></span></a></li>
</ul>
<p class="copyright text-monospace">Copyright © Nikander "nikander100" van der Schee - 2024<br>Web Design by - nikander100</p>
</div>
</div>
</div>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="assets/js/freelancer.js"></script>
</body>
</html>