-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (182 loc) · 9.8 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
<!doctype html>
<html lang="en">
<head>
<title>Marika Könönen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1024, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="portfolio.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Handlee|Risque" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" >
<link rel="stylesheet" href="dist/css/social-share-kit.css" type="text/css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container all-font">
<nav class="navbar navbar-expand-sm bg-light">
<span class="navbar-brand mb-0 h1 all-font" id="up">Marika Könönen</span>
<button class="navbar-toggler na" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#some">Social Media</a></li>
</ul>
</div>
</nav>
</div>
<div class="container border-margin all-font">
<div class="jumbotron" id="jumbotron-main">
<div id="div-about">
<div class="row">
<div class="col-sm-12 d-sm-flex justify-content-center">
<h2 class="bottom-padding" id="about">About</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 d-flex justify-content-center bottom-padding">
<img src="pictures/Marika-Könönen-mustvalk-pieni.jpg" alt="Marika Könönen" class="img-fluid img-thumbnail rounded-circle img-responsive " >
</div>
</div>
<div class="row text-center">
<div class="col-sm-4">
<ul class="list-group text-center">
<li class="list-group-item list-title"><b>GENERAL</b></li>
<li class="list-group-item">Mom of three kids, wife and a dog owner</li>
<li class="list-group-item">Blogger - Coder - Entrepreneur</li>
<li class="list-group-item">I use only own pictures in my blog or work or social media</li>
<li class="list-group-item">Coding is mix of art and math</li>
<li class="list-group-item">I love outdoor life & nature</li>
<li class="list-group-item">Believe in yourself & dreams</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-group text-center">
<li class="list-group-item list-title"><b>TECHNICAL</b></li>
<li class="list-group-item">Bachelor in Software Engineering</li>
<li class="list-group-item">ISTQB-Certified Tester, Foundation Level (CTFL)</li>
<li class="list-group-item">Java - Python - C - C++ Programming</li>
<li class="list-group-item">UML modelling language</li>
<li class="list-group-item">HTML-CSS-Bootstrap-JavaScript</li>
<li class="list-group-item">Machine Learning - Pattern Recognition</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-group text-center">
<li class="list-group-item list-title"><b>WORK EXPERIENCE</b></li>
<li class="list-group-item">Coding teacher - kids, youth and adults</li>
<li class="list-group-item">The author of the teaching material - coding related</li>
<li class="list-group-item">Software Engineer</li>
<li class="list-group-item">R&D Engineer</li>
<li class="list-group-item">Software Verification Engineer</li>
<li class="list-group-item">UI Programmer</li>
</ul>
</div>
</div>
</div>
<div class="jumbotron" id="jumbotron-portfolio">
<div class="row">
<div class="col-sm-12">
<h2 class="text-center bottom-padding" id="portfolio">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-sm-6 text-center img-fluid bottom-padding">
<a href="http://koodielamastani.fi/"><img src="pictures/koodielamastani-webpage.jpg" class="img-thumbnail img-same-height" alt="Koodi Elämästäni"></a>
</div>
<div class="col-sm-6 text-center img-fluid bottom-padding">
<a href="http://codeformylife.com"><img src="pictures/codeformylife-webpage-pict.jpg" class="img-thumbnail img-same-height" alt="Code for My Life"></a>
</div>
</div>
<div class="row">
<div class="col-sm-6 text-center img-fluid bottom-padding">
<a href="https://codepen.io/MarikaK/live/NyPPPV/"><img src="pictures/codepen-nalle.jpg" class="img-thumbnail img-same-height" alt="Koodi Elämästäni"></a>
</div>
<div class="col-sm-6 text-center img-fluid bottom-padding">
<a href="http://www.theseus.fi/bitstream/handle/10024/46866/Kononen_Marika.pdf?sequence=1&isAllowed=y"><img src="pictures/bachelor-thesis.png" class="img-thumbnail img-same-height" alt="Code for My Life"></a>
</div>
</div>
</div>
<div class="jumbotron" id="jumbotron-contact">
<div class="row">
<div class="col-sm-12">
<h2 class="text-center bottom-padding" id="contact">Contact</h2>
</div>
</div>
<div class="row">
<div class="col-sm-4 bottom-padding" id="col-contact">
<form action="mailto:[email protected]" method="post" enctype="text/plain">
<div class="form-group">
<label for="name">Name</label>
<input type="name" class="form-control" id="name" placeholder="Name" name="Name ">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email" placeholder="Email" name="Email ">
</div>
<div class="form-group">
<label for="phone">Phone number</label>
<input type="phone" class="form-control" id="phone" placeholder="Phone Number" name="Phone ">
</div>
<div class="form-group">
<label for="comment">Message</label>
<textarea class="form-control" type="comment" rows="3" id="comment" placeholder="Message" name="Message "></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
<div class="col-sm-6">
<ul class="list-group text-center">
<li class="list-group-item">Would you like to work with me?</li>
<li class="list-group-item">Do you need a quest post to your page/blog?</li>
<li class="list-group-item">Would you like me and/or my kids to test your application?</li>
<li class="list-group-item">Do you need help for creating teaching materials or instruction for your products?</li>
<li class="list-group-item">Would you like me to evaluate or test your product?</li>
<li class="list-group-item">Would you like me to arrange a coding workshop for kids, youth or adults?</li>
<li class="list-group-item">Didn’t find what you were looking for?</li>
<li class="list-group-item">Please don’t hesitate to ask if you need something from me!</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row bottom-padding">
<div class="col-sm-12">
<div class="d-sm-flex justify-content-center ssk-group ssk-rounded ssk-grayscale bottom-padding">
<a href="https://www.instagram.com/codeformylife/" class="ssk ssk-instagram"></a>
<a href="https://www.facebook.com/codeformylife/" class="ssk ssk-facebook"></a>
<a href="https://twitter.com/koodiela" class="ssk ssk-twitter"></a>
<a href="https://www.facebook.com/koodielamastani/" class="ssk ssk-facebook"></a>
</div>
</div>
<div class="col-sm-12 text-center" id="some">
<p>Marika Könönen - Finnmotion Oy © 2018. All Rights Reserved.</p>
</div>
</div>
</div>
<!-- Return to Top -->
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<script>
// ===== Scroll to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
</script>
</body>
</html>