-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
219 lines (214 loc) · 13.8 KB
/
index.html
File metadata and controls
219 lines (214 loc) · 13.8 KB
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
<!DOCTYPE html>
<html lang="da-DK">
<head>
<title>Brian Stefan Jensen - Design Systems, UX and more - Doing Product Design at Frigg</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="Description" content="I work with the internet, create digital concepts and solve problems while viewing the world through the eyes of the user" />
<link media="all" rel="stylesheet" href="/assets/css/fullpage.css" />
<link media="all" rel="stylesheet" href="/assets/css/styles.css" />
<link rel="preload" href="/assets/fonts/bitter-v12-latin-regular.woff2" as="font" crossorigin />
<link rel="preload" href="/assets/fonts/bitter-v12-latin-700.woff2" as="font" crossorigin />
<link rel="preload" href="/assets/fonts/raleway-v14-latin-light.woff2" as="font" crossorigin />
<link rel="preload" href="/assets/fonts/raleway-v14-latin-regular.woff2" as="font" crossorigin />
<link rel="preload" href="/assets/fonts/raleway-v14-latin-bold.woff2" as="font" crossorigin />
<link rel="stylesheet" href="//unpkg.com/fullpage.js/dist/fullpage.min.css" />
<link rel="stylesheet" href="//unpkg.com/aos@next/dist/aos.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" />
<link rel="manifest" href="/assets/favicon/site.webmanifest" />
</head>
<body>
<div id="app">
<ul id="navigation" class="navigation">
<li data-menuanchor="home" class="active"><a href="#home" title="Home">Home</a></li>
<li data-menuanchor="work"><a href="#work" title="Work">Work</a></li>
<li data-menuanchor="about"><a href="#about" title="About">About</a></li>
<li data-menuanchor="contact"><a href="#contact" title="Contact">Contact</a></li>
</ul>
<div class="logo" data-aos="fade-down" data-aos-delay="500">
<a href="#home" title="Brian Stefan Jensen - Home">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 60 52.857">
<path id="b-path" data-name="b-path" d="M21.328-74.025H29.25q7.621,0,12.11,3.246t4.489,9.662q0,9.476-9.054,12.311,10.79,3.059,10.79,11.938,0,15.445-19.618,15.445H9.914l-.055-43.8L4.2-67.459v-6.193ZM25.7-44.7H21.328v14.549H27.59a8.927,8.927,0,0,0,6-1.791,6.162,6.162,0,0,0,2.075-4.924q0-4.029-2.414-5.932T25.7-44.7ZM21.328-65.221v12.684H25.7q8.451,0,8.451-6.939a5.227,5.227,0,0,0-1.773-4.29,7.082,7.082,0,0,0-4.64-1.455Z" transform="translate(-4.2 74.025)" />
<path id="dot-path" data-name="dot-path" d="M76.242-11.217A6.424,6.424,0,0,1,78.166-16.1a6.4,6.4,0,0,1,4.565-1.828,6.108,6.108,0,0,1,4.716,1.753,7.037,7.037,0,0,1,1.622,4.962,6.588,6.588,0,0,1-1.886,4.962,6.365,6.365,0,0,1-4.6,1.828A6.108,6.108,0,0,1,77.864-6.18,7.152,7.152,0,0,1,76.242-11.217Z" transform="translate(-29.069 57.284)" />
</svg>
</a>
</div>
<full-page ref="fullpage" :options="options" id="fullpage">
<div class="section section--home">
<section class="masthead">
<div class="masthead--inner">
<h1 class="masthead--headline" data-aos="fade-down" data-aos-duration="1000">
Hi I'm Brian,<br />
I work with the internet.
</h1>
<div class="masthead--content">
<p class="masthead--lead" data-aos="fade-down" data-aos-duration="1000">I collaborate with people to create enjoyable digital experiences that bring value to users and clients alike.</p>
<p class="masthead--lead" data-aos="fade-down" data-aos-duration="1000">Besides my work, I spend my time with my wife and daughter, our cat and geckos in a small town south of Aarhus.</p>
</div>
<div class="masthead--image" data-aos="fade-up" data-aos-duration="1000">
<img src="/assets/images/brian-laptop-cropped.svg" alt="" />
</div>
<div class="masthead--action" data-aos="fade-down" data-aos-duration="1000">
<a href="#work" class="button--primary button--down">Work</a>
</div>
</div>
<div class="masthead--clouds">
<img src="/assets/images/clouds.svg" alt="" />
</div>
<div class="family-background" data-aos="" data-aos-duration="">
<img src="/assets/images/background-family-reversed.svg" alt="" />
</div>
</section>
</div>
<div class="section section--work">
<div class="slide">
<section class="page page--work">
<div class="page--inner">
<h1 class="page--headline" data-aos="fade-left" data-aos-duration="1000">Design and collaboration</h1>
<div class="page--content" data-aos="fade-left" data-aos-duration="1000">
<p class="page--lead">I create digital experiences, with a holistic and structured approach. Drawing on my experience from multiple roles and disciplines I bring people and technology together through visual communication and create results that bring value.</p>
<p class="page--lead">Since I started working with the web over twenty years ago, I have worked with more or less every step of the process. In my day-to-day work I part of the great team at <a href="https://www.friggtech.dk" title="Frigg" class="link--external" target="_blank">Frigg</a> and responsible for our platforms design and more.</p>
</div>
<div class="page--action" data-aos="fade-left" data-aos-duration="1000"><a href="#about" class="button--primary button--down">About me</a> <a href="#work/1" class="button--secondary button--right">Design Systems</a></div>
<div class="page--image" data-aos="fade-right" data-aos-duration="1000">
<img src="/assets/images/square-app.svg" alt="" />
</div>
</div>
</section>
<div class="page--clouds">
<img src="/assets/images/clouds.svg" alt="" />
</div>
</div>
<div class="slide">
<section class="page">
<div class="page--inner">
<h1 class="page--headline" data-aos="fade-down" data-aos-duration="1000">Design systems</h1>
<div class="page--content" data-aos="fade-down" data-aos-duration="1000">
<p class="page--lead">If our professional paths have crossed at some point in the past years, you know about my passion for design systems and Atomic Design. Fractal has been one of my tools lately, and the one I used to <em>make this site:</em> <a href="https://ds.brianstefan.dk" title="brianstefan.dk made using Fractal" class="link--external" target="_blank">ds.brianstefan.dk</a></p>
<p class="page--lead">While I was at Novicell, I wrote a <a href="https://www.novicell.dk/blog/designsystemer-ux-og-frontend-kode-paa-lager/" title="Read my blog post about design systems" class="link--external" target="_blank">blog post</a> (in Danish) about how we worked with Atomic Design and Fractal. I also did a webinar about design systems late 2020.</p>
<p class="page--lead">Apart from being a collection of guides, standards and reusable components, a design system is also a great tool for collaboration and communication. Furthermore it can help create better user experiences, testing and more. <a href="#contact" title="Let's talk about design systems!" class="link">Let's talk about design systems!</a></p>
</div>
<div class="page--action" data-aos="fade-down" data-aos-duration="1000">
<a href="#work" class="button--secondary button--left">Back</a>
</div>
<div class="page--image" data-aos="fade-up" data-aos-duration="1000">
<img src="/assets/images/design-systems.png" alt="" />
</div>
</div>
</section>
</div>
</div>
<div class="section section--about">
<section class="page page--about">
<div class="page--inner">
<h1 class="page--headline" data-aos="fade-left" data-aos-duration="1000">Familiy life, web and reptiles</h1>
<div class="page--content" data-aos="fade-left" data-aos-duration="1000">
<p class="page--lead">I live with my my wife <a href="https://www.jannilangholz.dk/" title="Janni Langholz - Kommunikation, web og sprog" class="link--external" target="_blank">Janni</a> our daughter and cat in a small town south of Aarhus in Denmark. I am so fortunate that my hobby came with a job, so when I'm not with my family, I read up on work related topics and fiddle with some personal projects.</p>
<p class="page--lead">I also spend time on one of my other passions, reptiles, and did try to become a zookeeper. That didn’t pan out, but fortunately the internet was here to stay.</p>
<p class="page--lead">And as many others, I am a Rick & Morty fan, did you know <a href="https://www.youtube.com/watch?v=SWMGd_rzRdY" title="Plumbus" class="link--external" target="_blank">How a Plumbus is Made</a>?</p>
</div>
<div class="page--action-float" data-aos="fade-left" data-aos-duration="1000" data-aos-anchor-placement="bottom" data-aos-offset="">
<a href="#contact" class="button--primary button--down">Contact</a>
</div>
<div class="page--figure" data-aos="fade-right" data-aos-duration="1000">
<img src="/assets/images/brian-plumbus-cropped.svg" alt="" />
</div>
</div>
</section>
<div class="page--clouds">
<img src="/assets/images/clouds.svg" alt="" />
</div>
<div class="family-background" data-aos="" data-aos-duration="">
<img src="/assets/images/background-family-reversed.svg" alt="" />
</div>
</div>
<div class="section section--contact">
<section class="page page--contact">
<div class="page--inner">
<h1 class="page--headline" data-aos="fade-up" data-aos-duration="1000">Wanna grab a cup of coffee?</h1>
<div class="page--content" data-aos="fade-up" data-aos-duration="1000">
<p class="page--lead">... and talk about design systems, UX, Geckos, Rick & Morty or something else?<br /></p>
<p class="page--lead"><strong>Email:</strong> <a href="mailto:hej@brianstefan.dk" title="Say hi" class="link">hej@brianstefan.dk</a></p>
<p class="page--lead"><strong>Phone:</strong> <a href="tel:004520917720" title="Say hi" class="link">+45 20 91 77 20</a></p>
<p class="page--lead"><strong>LinkedIn:</strong> <a href="https://linkedin.com/in/brianstefanjensen" title="brianstefanjensen @ LinkedIn" class="link">brianstefanjensen</a><br /></p>
<p class="page--lead">Wanna work together or connect? Add me on LinkedIn!</p>
</div>
<div class="page--action-float" data-aos="fade-up" data-aos-duration="1000" data-aos-anchor-placement="bottom" data-aos-offset="">
<a href="https://linkedin.com/in/brianstefanjensen" class="button--primary button--right">LinkedIn</a>
</div>
<div class="page--figure" data-aos="fade-up" data-aos-duration="1000">
<img src="/assets/images/brian-coffee-cropped.svg" alt="" />
</div>
</div>
</section>
<div class="page--clouds">
<img src="/assets/images/clouds.svg" alt="" />
</div>
</div>
</full-page>
</div>
<script src="//cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script async>
const gaID = "UA-96894412-1";
function addAnalytics() {
(function (i, s, o, g, r, a, m) {
i["GoogleAnalyticsObject"] = r;
(i[r] =
i[r] ||
function () {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, "script", "https://www.google-analytics.com/analytics.js", "ga");
ga("create", gaID, "auto");
ga("send", "pageview");
}
window.cookieconsent.initialise({
onInitialise: function (status) {
if (this.hasConsented()) {
addAnalytics();
}
},
onStatusChange: function (status) {
if (this.hasConsented()) {
addAnalytics();
}
if (!this.hasConsented()) {
window["ga-disable-" + gaID] = true;
}
},
palette: {
popup: {
background: "rgba(0, 0, 0, 0.7)",
text: "#ffffff",
},
button: {
background: "transparent",
border: "#f38f9b",
text: "#f38f9b",
},
},
position: "bottom-right",
type: "opt-in",
content: {
message: "My website uses cookies for insights and statistics on how you use my site. But do feel free to opt-out. :)",
link: "Read more",
},
});
</script>
<script src="//unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="/assets/scripts/vue-fullpage.min.js"></script>
<script src="/assets/scripts/index.js"></script>
</html>