-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·109 lines (95 loc) · 7.62 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
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="apple-touch-icon" href="apple-touch-icon.png"> -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,400" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header class="header">
<h1>Jonas Haefele</h1>
<a class="typeform-share link" href="https://jonashaefele.typeform.com/to/j8FhmL" data-mode="popup" data-hide-headers=true data-hide-footer=true target="_blank">get in touch </a>
<script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>
<div class="inline-social"> or find me on:
<a class='twitter' href="https://twitter.com/jonashaefele" target="_blank">Twitter</a>
<a class='instagram' href="https://instagram.com/jonashaefele" target="_blank">Instagram</a>
<a class='github' href="https://github.com/jonashaefele" target="_blank">GitHub</a>
<a class='linkedin' href="https://uk.linkedin.com/in/jonashaefele" target="_blank">LinkedIn</a>
</div>
</header>
<main class="main">
<header>
<a href="#co-creating"><h1 class="title co-creating">co-creating</h1></a>
<a href="#mindful"><h1 class="title mindful">mindful</h1></a>
<a href="#experiences"><h1 class="title experiences">experiences</h1></a>
</header>
<aside>
<div class="scroller">
<section id="greetings">
<h2>I'm Jonas. <br>I help people get comfortable with technology and find some calm for themselves.</h2>
<p>To learn what those words mean to me, scroll down the page or tap on them.</p>
</section>
<section>
<h3 id="co-creating">co-creating</h3>
<p>As we move through our lives we create our own narratives, stories that we share with our friends, our colleagues and our customers. In the work I do, I focus on giving you the tools and the space you need to tell your own story. </p>
<p>I develop and facilitate educational experiences at <a href="http://decoded.com" target="_blank">Decoded</a>. We help companies transform their culture by letting their people get hands-on with technology and human-centered design methodologies. </p>
<p>As a yoga teacher I create movement and stillness together with my students. By creating space for you to move and breathe, I give you the opportunity to create space in your body and mind, to reset and recalibrate.</p>
</section>
<section>
<h3 id="mindful">mindful</h3>
<p>Mindfulness is one of the buzzwords of the season and rightfully so. Ever come home after a long day feeling exhausted, but didn’t really know why? Ever feel like you’re chasing something, but don’t really know what?</p>
<p>For me mindfulness is finding calm in the now. When we are more aware of what we are doing and why we become more active and less reactive. </p>
<p>In business being mindful might mean actually listening to your customers and creating products and services that really improve their lives or it might mean designing with the future in mind, creating a world that we want the next generation to inherit.</p>
</section>
<section>
<h3 id="experiences">experiences</h3>
<p>Magic happens when we meet each other as humans and recognise that we all come with a story. A lot of our lives are spent online, on devices with screens and maybe talking to our voice assistants. It’s easy to forget that behing most words and images we find online, there’s a human with a unique story.</p>
<p>With interactive talks and longer educational experiences I can help you figure out how what those stories are and how you can make sure the products and services, the interactions you offer help people write their stories. By doing this you add immense value to the relationship people have with your brand or yourself as a person. When I create something new, I start with the person I want to help and only then start sketching out how I might help them.</p>
<p>On the yoga mat we leave the stress of our jobs and lives behind. We get a rare moment to spend with ourselves only. As a yoga teacher I’m there to help you find that space where you loose yourself in breath and movement. In that space you can look inside, feel your body and connect to what’s important to you.</p>
</section>
</div>
</aside>
</main> <!-- #main -->
<footer class="footer">
<a class="typeform-share link" href="https://jonashaefele.typeform.com/to/j8FhmL" data-mode="popup" data-hide-headers=true data-hide-footer=true target="_blank">get in touch </a>
<script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>
<a class="social-toggle" href="#social">social</a>
</footer>
<div class="veil"></div>
<section id="social" class="social">
<span class="close"></span>
<h2>find me online</h2>
<a class='twitter' href="https://twitter.com/jonashaefele" target="_blank">Twitter</a>
<a class='instagram' href="https://instagram.com/jonashaefele" target="_blank">Instagram</a>
<a class='github' href="https://github.com/jonashaefele" target="_blank">GitHub</a>
<a class='linkedin' href="https://uk.linkedin.com/in/jonashaefele" target="_blank">LinkedIn</a>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/main.js"></script>
<script src="js/vendor/jquery.waypoints.min.js"></script>
<script src="js/vendor/waypoints.inview.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>