-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (156 loc) · 5.63 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
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jani Kraner - Frontend Developer - Interaction Designer</title>
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧑</text></svg>">
<style>
:root {
--color-dark: #212121;
--color-light: #efefef;
--link-dark-color: #48a4f5;
--background: var(--color-dark);
--text-color: var(--color-light);
--link-color: var(--link-dark-color);
}
body {
background: var(--background);
transition: background 500ms ease-in-out, color 200ms ease;
color: var(--text-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.25;
font-size: calc(1rem + 0.2vh + 0.1vw);
padding: 0;
margin: 0;
}
main {
margin: 0 auto;
max-width: 60em;
padding: 2em;
/* legacy ie */
display: block;
}
section {
margin-bottom: 1.5em;
}
article {
margin-bottom: 1.5em;
}
a {
color: var(--link-color);
}
p {
margin: 0 0 0.5em 0;
max-width: 75ch;
}
.heading {
font-weight: 700;
margin: 0;
padding: 0;
}
.heading--xl {
font-size: calc(3rem + 0.2vh + 0.1vw);
margin-bottom: .5em;
}
.heading--l {
font-size: calc(2.25rem + 0.2vh + 0.1vw);
margin-bottom: .5em;
}
.heading--m {
font-size: calc(1.5rem + 0.2vh + 0.1vw);
}
.heading--s {
font-size: calc(1.2rem + 0.2vh + 0.1vw);
}
.heading__caption {
display: block;
font-size: calc(1rem + 0.2vh + 0.1vw);
}
@media print {
body {
color: var(--color-dark);
font-size: 90%;
}
main {
padding: 0;
width: 75%;
margin: 0;
}
a {
font-weight: 700;
text-decoration: none;
display: inline-block;
}
a[href]:after{
content: " (" attr(href) ") ";
font-weight: 400;
}
.heading--s {
margin-top: 1em;
}
}
</style>
</head>
<body>
<main>
<header>
<h1 class="heading heading--xl">
Jani Kraner<em class="heading__caption">Frontend Developer</em>
</h1>
</header>
<article>
<h2 class="heading heading--l">Summary</h2>
<p>Frontend developer, designer, graphic and web design graduate and technology enthusiast.</p>
<p>Several years’ experience working in various industry sectors, on different technology stacks, and working in small and large teams.</p>
<p>I have a passion for user interface design and user experience and aim to deliver accessible and performant digital experiences.</p>
</article>
<article>
<h2 class="heading heading--l">Employment history</h2>
<header>
<h3 class="heading heading--m">Frontend Developer at Government Digital Service</h3>
</header>
<p><em>April 2017 - Present</em></p>
<h4 class="heading heading--s">GOV.UK Notify</h4>
<h4 class="heading heading--s">GOV.UK Platform as a service</h4>
<p>– improving web hosting experience for government services</p>
<h4 class="heading heading--s">GOV.UK Search team</h4>
<p>– improving search experience on GOV.UK</p>
<h4 class="heading heading--s">GDS Expert services team</h4>
<p>– GOV.UK - WCAG 2.1 accessibility work</p>
<p>– BEIS Digital - Frontend architecture & accessibility audits, prototyping, building internal DDAT capabilities</p>
<p>– DIT - UK Trade Helpdesk service - frontend development</p>
<p>– BEIS - UK Emission Trading Registry (alpha) - interaction Design / frontend development</p>
<h4 class="heading heading--s">GOV.UK Design System team</h4>
<p>– developed and maintained GOV.UK Design System and GOV.UK Frontend and GOV.UK Prototype Kit</p>
<h4 class="heading heading--s">GDS Tech Assessor</h4>
<p>– assessing candidate services for GOV.UK at Alpha, Beta and Live service assessments</p>
</article>
<article>
<header>
<h3 class="heading heading--m">Previous employment</h3>
</header>
<h4 class="heading heading--s">Developer at Tui Interactive Media</h4>
<p>– design system & tokens, Vue.js</p>
<h4 class="heading heading--s">UI Developer at Valtech</h4>
<p>– Schroders - Discovery, feasibility and front-end architecture</p>
<p>– Smith & Nephew - component library / living style guide</p>
<h4 class="heading heading--s">Frontend Developer at TUI Group</h4>
<p>– <a href="http://www.crystalski.co.uk/">Crystal Ski</a> development</p>
<h4 class="heading heading--s">UI Developer at Milkround (News UK)</h4>
<p>– .Net C# (Episerver), responsive layout</p>
<h4 class="heading heading--s">Web Developer at BT Expedite (now Aptos)</h4>
<p> – delivering e-commerce solutions to high street brands</p>
<h4 class="heading heading--s">Frontend Developer at Buckinghamshire New University</h4>
<p>– university website & e-Learning development</p>
</article>
<article>
<h2 class="heading heading--l">Education</h2>
<header>
<h3 class="heading heading--s">Cambridge School Of Art</h3>
</header>
<p>BA (Hons), Graphic and Web design, 2008 - 2011</p>
</article>
</main>
</body>
</html>