-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (150 loc) · 6.18 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mikaela Grundin | Front End & Design</title>
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do|Quicksand:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style/style.css" type="text/css">
</head>
<body id="top">
<header>
<div id="header-text">
<h1>Mikaela Grundin</h1><h2>Front End & Design</h2>
</div>
<nav>
<ul>
<li><a href="#about" class="scroll">About</a></li>
<li><a href="#projects" class="scroll">Projects</a></li>
<li><a href="#contact" class="scroll">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<div class="container">
<div class="row">
<div class="twelve columns">
<h3>This is me</h3>
</div>
</div>
<div class="row">
<div class="four columns">
<img src="img/portrait.png">
</div>
<div class="five columns">
My name is Mikaela, I am <span class="pink sub-title">22 years old </span>from<span class="blue sub-title"> Stockholm, Sweden</span>.
<p>I have always been creative, and love seeing ideas come to life.
I've dabbled in everything from 3D and art to programming, and have currently found a great mixture of those elements in Front End development.</p>
<p>Other than making stuff at the computer I love video games, music and cooking.</p>
</div>
<div class="three columns skills">
<ul>
<li class="badge strong">JavaScript</li>
<li class="badge strong">CSS</li>
<li class="badge strong">Design</li>
<li class="badge strong">3D</li>
<li class="badge strong">HTML</li>
<li class="badge strong">SASS</li>
<li class="badge medium">Illustration</li>
<li class="badge medium">Git</li>
<li class="badge medium">AngularJS</li>
<li class="badge weak">jQuery</li>
<li class="badge weak">Gulp</li>
<li class="badge weak">Wordpress</li>
<li class="badge weak">PHP</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="projects">
<div class="container">
<div class="row">
<div class="twelve columns">
<h3>Things I've made</h3>
</div>
</div>
<div class="projects">
<a href="http://fof.mikaelagrundin.com/" target="_blank">
<div class="fof">
<div class="info">
<h4>Friend or Fraud</h4>
<p>This game was made as a group project at Nackademin. You use your phones as controllers and face off in a quiz about each other.</p>
</div>
</div>
<a href="http://school.mikaelagrundin.com/tp" target="_blank">
<div class="tp">
<div class="info">
<h4>Twin Peaks</h4>
<p>Work in Progress of a tribute to the show Twin Peaks. Made with Illustrator and jQuery/JavaScript.</p>
</div>
</div>
</a>
<a href="http://rhythm.mikaelagrundin.com/" target="_blank">
<div class="rhythm">
<div class="info">
<h4>Rhythm Game</h4>
<p>Inspired by Dance Dance Revolution, this game is automatically generated from a song using Web Audio API and Canvas.</p>
</div>
</div>
</a>
</a>
</div>
<div class="projects">
<a href="http://wordpress.mikaelagrundin.com/photomenu" target="_blank">
<div class="pmenu">
<div class="info">
<h4>Picture Menu</h4>
<p>A Wordpress theme created for a PHP-course, using Flexbox and Transitions.</p>
</div>
</div>
</a>
<a href="http://snake.mikaelagrundin.com/" target="_blank">
<div class="snake">
<div class="info">
<h4>Snake</h4>
<p>One of my first JavaScript projects. Utilising only tables and vanilla JS I made a simple game of Snake.</p>
</div>
</div>
</a>
<a href="http://vintage.mikaelagrundin.com/" target="_blank">
<div class="vintage">
<div class="info">
<h4>Vintage Portfolio</h4>
<p>My previous portfolio built during a HTML/CSS course. Pages are retrieved with AJAX.</p>
</div>
</div>
</a>
</div>
<p>If you're interested in the code and development of these projects, most of them can be found on my <a href="https://github.com/Zatine" target="_blank">GitHub</a>.</p></div>
</section>
<section id="contact">
<div class="container">
<div class="row">
<div class="twelve columns">
<h3>Get in touch</h3>
</div>
</div>
<div class="row">
<div class="four columns">
<a href="mailto:[email protected]" target="_blank"><div class="contact-icon mail"></div></a>
<p>[email protected]</p>
</div>
<div class="four columns"><a href="https://github.com/Zatine" target="_blank"><div class="contact-icon git" title="GitHub"></div></a>
<p>GitHub</p>
</div>
<div class="four columns"><a href="https://www.linkedin.com/pub/mikaela-grundin/41/44/936" target="_blank"><div class="contact-icon li" title="LinkedIn"></div></a>
<p>LinkedIn</p></div>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>© Mikaela Grundin 2016</p>
</footer>
<script src="script/script.js"></script>
</body>
</html>