-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (150 loc) · 6.57 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Santtu Niskala">
<title>Santtu Niskala's Portfolio</title>
<!-- <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/album/"> -->
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- <style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style> -->
<!-- Custom styles for this template -->
<link href="album.css" rel="stylesheet">
<!-- in your header -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@master/devicon.min.css">
<script src="https://kit.fontawesome.com/0a6c7bf19c.js" crossorigin="anonymous"></script>
</head>
<body class="bg-darker">
<div class="mw-75 d-flex w-100 p-3 mx-auto flex-column text-center">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">Santtu Niskala</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#Projects">Projects</a>
<a class="nav-link" href="#Contact">Contact</a>
</nav>
</div>
</header>
</div>
<div class="jumbotron text-center">
<div class="container">
<img src="media/avatar1.jpg" class="rounded avatar" alt="Profile picture">
<h1 class="display-3">Hello!</h1>
<p class="lead text-muted">
I'm a <span id="age"></span> year old programmer currently living in Oulu, Finland.
</p>
<h3 class="text-center display-5 text-muted">Languages</h3>
<div class="container">
<div class="row" id="skills-container">
<div class="col p-1">
<div class="p-0 bg-secondary rounded">
<h3 class="bg-info rounded display-5"><i class="devicon-csharp-plain" title="C#"></i></h3>
<p class="p-2 text-left font-weight-light">My primary programming language since 2014.</p>
</div>
</div>
<div class="col p-1">
<div class="p-0 bg-secondary rounded">
<h3 class="bg-info rounded display-5"><i class="devicon-javascript-plain" title="JavaScript"></i></h3>
<p class="p-2 text-left">My secondary programming language.</p>
</div>
</div>
<div class="col p-1">
<div class="p-0 bg-secondary rounded">
<h3 class="bg-info rounded display-5"><i class="devicon-java-plain" title="Java"></i></h3>
<p class="p-2 text-left">We used Java to make simple apps at University.</p>
</div>
</div>
<div class="w-100"></div>
<div class="col p-1">
<div class="p-0 bg-secondary rounded">
<h3 class="bg-info rounded display-5"><i class="devicon-html5-plain" title="HTML5"></i>+<i class="devicon-css3-plain" title="CSS3"></i></h3>
<p class="p-2 text-left">I learned the basics of HTML and CSS at University.</p>
</div>
</div>
<div class="col p-1">
<div class="p-0 bg-secondary rounded">
<h3 class="bg-info rounded display-5"><i class="devicon-php-plain" title="PHP"></i></h3>
<p class="p-2 text-left">We used PHP at University to make simple websites that utilized databases.</p>
</div>
</div>
<div class="col p-1">
<div class="p-0 bg-secondary rounded">
<h3 class="bg-info rounded display-5"> <i class="devicon-mysql-plain" title="MySQL"></i></h3>
<p class="p-2 text-left">We learned about databases with MySQL at University.</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3 class="text-center display-5 text-muted">Software</h3>
<div class="row" id="software-container">
<div class="col p-1">
<div class="p-0 bg-secondary rounded">
<h3 class="bg-info rounded display-5"><i class="fab fa-unity" title="Unity"></i></h3>
<p class="p-2 text-left">My primary game engine since 2013.<br><br></p>
</div>
</div>
<div class="col p-1">
<div class="p-0 bg-secondary rounded">
<h3 class="bg-info rounded display-5">3DS Max</h3>
<p class="p-2 text-left">I've occasionally modeled low-poly 3D models for games over the last 10 years.</p>
</div>
</div>
<div class="col p-1">
<div class="p-0 bg-secondary rounded">
<h3 class="bg-info rounded display-5"><i class="devicon-photoshop-plain" title="Photoshop"></i></h3>
<p class="p-2 text-left">I've used Photoshop to make and edit textures for 3D models.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="Projects" class="container-fluid">
<h1 class="text-center display-3">Projects</h1>
<div class="row" id="projects-container">
</div>
</div>
<div class="jumbotron text-center">
<div id="Contact" class="container">
<h1 class="display-3">Contact</h1>
<p class="lead text-muted">
I can be reached at
</p>
<div class="p-2">
<!--Email-->
<a class="btn btn-secondary" href="mailto:[email protected]" role="button"><i class="far fa-lg fa-envelope"></i></a>
<!--Linkedin-->
<a class="btn btn-secondary" href="https://www.linkedin.com/in/santtu-niskala-abb890156" role="button"><i class="fab fa-lg fa-linkedin-in"></i></a>
</div>
</div>
</div>
<footer class="mastfoot mt-auto text-center">
<div class="inner">
<a class="btn btn-outline-primary" href="#" role="button">Back to top</a>
<!-- <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> -->
</div>
<p class="text-muted pt-5">Santtu Niskala 2021</p>
</footer>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/projects.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>