-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
224 lines (219 loc) · 16.2 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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-134235510-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-134235510-1');
function toggle(x, sectionId) {
var classes = document.querySelector(x).classList;
classes.toggle('expand--closed');
if(classes.contains('expand--closed')){
document.querySelector(sectionId + " > button span").innerHTML = 'more';
document.querySelector(sectionId + " > button ").setAttribute("aria-expanded", false)
}
else{
document.querySelector(sectionId + " > button span").innerHTML = 'less';
document.querySelector(sectionId + " > button ").setAttribute("aria-expanded", true)
}
}
</script>
<meta charset="utf-8">
<meta name="description" content="Helene Kassandra is a Norwegian Front-end Developer and UX-Designer. She has a passion for web-development and UX-design, loves music and hates pineapple.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Helene Kassandra</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Staatliches" rel="stylesheet">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<div id="start-section">
<svg viewBox="0 0 105 117" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:1.5" aria-hidden="true"><title>Logo for Helene Kassandra</title><path d="M59.434 61.595L86.413 91.42" style="fill:none;stroke:url(#_Linear1);stroke-width:6.66px"/><path d="M11.095 83.232C42.47 72.728 67.148 53.993 90.746 29.065" style="fill:none;stroke:url(#_Linear2);stroke-width:6.66px;stroke-linecap:round"/><circle cx="52.068" cy="58.222" r="48.74" style="fill:none;stroke:url(#_Linear3);stroke-width:6.66px;stroke-linecap:round"/><path d="M31.193 4.707l-1.71 106.653" style="fill:none;stroke:url(#_Linear4);stroke-width:6.66px"/><path d="M58.841 4.707l-1.71 106.653" style="fill:none;stroke:url(#_Linear5);stroke-width:6.66px"/><defs><linearGradient id="_Linear1" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(97.4805 0 0 106.653 -.428 65.801)"><stop offset="0" style="stop-color:#2bd563;stop-opacity:1"/><stop offset="1" style="stop-color:#0082d5;stop-opacity:1"/></linearGradient><linearGradient id="_Linear2" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(97.4805 0 0 106.653 3.328 58.033)"><stop offset="0" style="stop-color:#2bd563;stop-opacity:1"/><stop offset="1" style="stop-color:#0082d5;stop-opacity:1"/></linearGradient><linearGradient id="_Linear3" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(97.4805 0 0 106.653 3.328 58.033)"><stop offset="0" style="stop-color:#2bd563;stop-opacity:1"/><stop offset="1" style="stop-color:#0082d5;stop-opacity:1"/></linearGradient><linearGradient id="_Linear4" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(97.4805 0 0 106.653 -1.148 70.436)"><stop offset="0" style="stop-color:#2bd563;stop-opacity:1"/><stop offset="1" style="stop-color:#0082d5;stop-opacity:1"/></linearGradient><linearGradient id="_Linear5" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(97.4805 0 0 106.653 26.5 70.436)"><stop offset="0" style="stop-color:#2bd563;stop-opacity:1"/><stop offset="1" style="stop-color:#0082d5;stop-opacity:1"/></linearGradient></defs></svg>
<h1>Helene Kassandra</h1>
<h2>Front-End Developer <br>& UX-designer</h2>
</div>
<div class="intro-gradient-box">
<p class="intro-text">
Hi! I'm a 28 year old tech geek/gamer from Norway who has a passion for web-development and UX-design. I love music and hate pineapples. <span>Seriously, I don't like pineapple</span>
</p>
</div>
<section class="content-section" id="experience-section">
<h3>Work experience</h3>
<h4>Where & what have I been working with?</h4>
<article>
<h5><span>June 2020 - Present:</span> Front-End Developer</h5>
<strong class="location-text">Designsystem team @ Sparebank 1 Utvikling</strong>
<p>
Part of the fairly new designsystem team at Sparebank 1 Utvikling, where we work on improving and maintaining the designsystem.
Work includes code improvements, design, documentation and co-operation with designers, editors and developers.
</p>
</article>
<article>
<h5><span>June 2018 - May 2020:</span> Front-End Developer & UX-designer</h5>
<strong class="location-text">Front-end team @ Posten Norge</strong>
<p>
Working as an UX-designer and front-end developer in the front-end team at Posten Norge.
The front-end team work with improving MyBring UI, and help other departments to make better UI decisions.
Previously I worked in the Innovation Division, where I used my skills in UX-design and programming, to be a link between the design and development team.
</p>
</article>
<article>
<h5><span>Feb 2016 - June 2018:</span> Front-End Developer</h5>
<strong class="location-text">@ ProTeria AS</strong>
<p>Fulltime Front-End developer at ProTeria AS. I took part in the development of their freight system.
The work included: Designing and prototyping different user-interfaces, and Front-End programming in languages such as: HTML, CSS, ZPL, C# and Javascript (including Typescript, Knockout JS and JQuery).
</p>
</article>
</section>
<section class="content-section" id="education-section">
<h3>Education</h3>
<h4>What have I been studying?</h4>
<article>
<h5><span>Feb 2023 - May 2023:</span> Personalledelse</h5>
<strong class="location-text">@ Handelshøyskolen BI</strong>
<p>Took a single subject at bachelor level within HR mangement. The course covered different HR approaches, HR activities and worker rights.</p>
</article>
<article>
<h5><span>2013-2016:</span> Bachelor's Degree in Applied Computer Science</h5>
<strong class="location-text">@ HiOA (now renamed OsloMet)</strong>
<p>Graduated June 2016, with top grade on final bachelor project.
Studied subjects like Human Computer Interaction, Universal design, Web-programming, Information architecture,
Prototyping, Android and System Development.
During my studies I also CO-lead the student organisation HiOA Gaming, and volunteered at a student pub called
Samfunnet Bislet.
</p>
</article>
</section>
<section class="content-section" id="projects-section">
<h3>My Projects</h3>
<h4>Things I've made outside of work</h4>
<article>
<div>
<h5>The Daemon Army - Website </h5>
<strong class="location-text"><a href="https://helenekassandra.com/tda-website/" target="_blank">See it live</a></strong>
<p>
I created a website for the gaming community I used to lead. The site was created in React, using sanity.io to update and store all the content, which was then fetched through their API.
In addition to host a blog and basic information about the community, the site also fetch all the events from the calendar bot on Discord. Allowing admins to create events in Discord, and have it automatically
show on the website. The site also messaged the right channel on Discord, whenever a potential member would request a in-game invitation by filling in their username.
</p>
</div>
</article>
<article>
<div>
<h5>Posten Dictionary </h5>
<strong class="location-text"><a href="https://bring.github.io/posten-dictionary/" target="_blank">See it live</a></strong>
<p>
I took the initiative of creating a dictionary for searching up difficult terms and abbreviations used at Posten.
The goal was to make it easier for myself and my co-workers to search up terms, that we might come across in documents etc.
The site has been shared with different departments, and other people have contributed with their own words and explanations.
Created in React.
</p>
</div>
</article>
<article>
<div>
<h5>The Daily Helper - GW2 </h5>
<strong class="location-text"><a href="https://helenekassandra.com/gw2-daily-helper/" target="_blank">See it live</a></strong>
<p>
My first ever React application, and a re-write of my "Daily gatherer helper" project.
The site help Guild Wars 2 players find the best locations to do their daily quests, and it's used by approximately 80 users every day.
Created in React, with the help of Guild Wars 2 Official API.
</p>
</div>
</article>
<div id="projects_toggle-content" class="expand--closed">
<article>
<div>
<h5>Rock-Paper-Scissors</h5>
<strong class="location-text"><a href="https://helenekassandra.com/thedaemonarmy/RockPaperScissors/" target="_blank">See it live</a></strong>
<p>
A Rock-Paper-Scissors game made with PHP, Javascript, HTML & CSS. I made this game for the members of Alpha Revolver Gaming Community.
The idea was that they could play against the community mascot: Cleaver the Beaver. The Illustration is made by me in Affinity Designer.
</p>
</div>
</article>
<article>
<div>
<h5>The Daily Gatherer Helper</h5>
<strong class="location-text"><a href="https://www.helenekassandra.com/thedaemonarmy/GW2DailyGathererHelper/" target="_blank">See it live</a></strong>
<p>
A website that shows users the best locations to finish their daily gathering quests in Guild Wars 2.
Created in HTML, CSS, Javascript (including JQuery and Knockout), with help of Materialize and the official Guild Wars 2 API.
</p>
</div>
</article>
</div>
<button class="show_more-btn" onClick="toggle('#projects_toggle-content', '#projects-section')" aria-expanded="false">Show <span>more</span></button>
</section>
<section class="content-section" id="writing-section">
<h3>Writing</h3>
<h4>Articles and other texts I've written</h4>
<article>
<h5><a href="https://medium.com/sparebank1-digital/playwright-vs-cypress-1e127d9157bd" target="_blank">Playwright vs Cypress
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="external-link-alt" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20px">
<path fill="currentColor"
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z">
</path>
</svg></a></h5>
<p>
This article compare the two frameworks, and hopefully make it clearer which testing framework suits your needs the most, by making you aware of their similarities, differences, strengths and weaknesses.
</p>
</article>
<article>
<h5><a href="https://developer.bring.com/blog/testing-with-cypress/" target="_blank">Testing with Cypress
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="external-link-alt" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20px">
<path fill="currentColor"
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z">
</path>
</svg></a></h5>
<p>
Cypress.io is a tool for setting up, writing, running and debugging tests. Compared to many other testing tools, Cypress allow you see the state of your user-interface during different stages of interaction.
In this article I quickly go through the progress of getting started, writing and running your first tests, along with my personal opinion on why you should use Cypress.
</p>
</article>
<div id="writing_toggle-content" class="expand--closed">
<article>
<h5><a href="https://developer.bring.com/blog/avoid-wall-of-frustration/" target="_blank">How to avoid the wall of frustration
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="external-link-alt" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20px">
<path fill="currentColor"
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z">
</path>
</svg></a></h5>
<p>
Regardless of how enthusiastic you are laying the first bricks of a project, at some point you’ll realise that the stack
of bricks, look suspiciously like a wall, or something different than originally pictured. In this article I cover some of the stages and challenges
I faced while I rewriting an application.
</p>
</article>
<article>
<h5><a href="writing/wcag-poem.html">WCAG Poem</a></h5>
<p>
WCAG is a set of guidelines, required by law to make the web more accessible.
I decided to create a poem, summarizing
some of the guidelines, and why it is important to follow
</p>
</article>
</div>
<button class="show_more-btn" onClick="toggle('#writing_toggle-content', '#writing-section')" aria-expanded="false">Show <span>more</span></button>
</section>
<footer>
<div class="footer-content">
<h5>Reach me at</h5>
<a href="https://www.linkedin.com/in/helenejuterud/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24">
<title>Linkedin</title>
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
</a>
</div>
</footer>
</div>
</body>
</html>