kraner.dev/index.html at main · kr8n3r/kraner.dev · GitHub

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
<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>Present</em></p>
        <h4 class="heading heading--s">GOV.UK Notify</h4>
        <p>– improving communication experience for government services</p>
        <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 &amp; 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>
  </main>
</body>
</html>