-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
202 lines (182 loc) · 11.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-155390310-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-155390310-1');
</script>
<script>
/**
* Function that registers a click on an outbound link in Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label. Setting the transport method to 'beacon' lets the hit be sent
* using 'navigator.sendBeacon' in browser that support it.
*/
var getOutboundLink = function(url) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': url,
'transport_type': 'beacon',
'event_callback': function(){document.location = url;}
});
}
</script>
<script>
!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
posthog.init('phc_vJDyplm7ULd01s4aVhg3AhO0AN402q7JoLqJNlU5a8b',{api_host:'https://app.posthog.com'})
</script>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kate Klink Website</title>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/80385988bb.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<header>
<nav class="nav" id="navbar">
<ul class="nav-list">
<li><a href="#welcome" class="nav-link"> <main> </a></li>
<li><a href="#prerequisites" class="nav-link"> <coding> </a></li>
<li><a href="#about-me" class="nav-link"> <about me> </a></li>
<li><a href="#projects" class="nav-link"> <projects> </a></li>
</ul>
</nav>
</header>
<!-- Introduction -->
<section class="intro" id="welcome">
<div class="intro-text">
<h1 class="title-main"> Hi, I am <strong>Kate 🙋♀️</strong> </h1>
<p class="section-subtitle section-subtitle-intro">A tech enthusiast who loves building digital products.</p>
<p>I built my first website in 2003. It was a simple page displaying my photos and poems using a template. Later I taught myself some Photoshop and made custom design and backgrounds using custom HTML and CSS. Since then, I’ve built a couple of my own digital products and helped venture-backed startups to launch and grow theirs. Among them are companies backed by 500 Startups, Seedcamp and featured on Product Hunt. </p>
<p>Lately I’ve been training myself in responsive design (HTML, CSS) and Javascript.</p>
</div>
<img src="./images/kk-01.jpeg" alt="Kate smiling picture." class="main-image">
</section>
<!-- prerequisites -->
<section class="my-prerequisites" id="prerequisites">
<h2 class="section-title section-title-prerequisites">What I've learnt</h2>
<div class="prerequisites">
<div class="prerequisite">
<h3>freeCodeCamp</h3>
<p>Learnt the basics of responsive Web Design and JavaScript Algorithms and Data Structures. Got from almost 0
programming knowledge to a working understanding of the main concepts. </p>
<a href="https://www.freecodecamp.org/klink" onclick="getOutboundLink('https://www.freecodecamp.org/klink'); return false;"
target="blank" class="btn">view portfolio</a>
</div>
<div class="prerequisite">
<h3>Codewars</h3>
<p>I deepened my knowledge of methods of various objects and focused on writing practical code to solve different
challenges. I’ve enjoyed refactoring my solutions later with a more elegant and efficient code. </p>
<a href="https://www.codewars.com/users/klink" onclick="getOutboundLink('https://www.codewars.com/users/klink'); return false;"
target="blank" class="btn">check progress</a>
</div>
<div class="prerequisite">
<h3>Github</h3>
<p>I've created this one-page website in HTML and CSS and hosted it on GitHub Pages. I made custom design for it in
Adobe XD and used a mobile-first responsive layout. An image carousel is built using Vanilla JS.</p>
<a href="https://github.com/klink/klink.github.io" onclick="getOutboundLink('https://github.com/klink/klink.github.io'); return false;"
target="blank" class="btn">Go to repo</a>
</div>
</div>
</section>
<!-- About -->
<section class="about" id="about-me">
<h2 class="section-title section-title-about">About me</h2>
<div class="about-grid">
<img src="images/kk-02.jpeg" alt="Kate with a MacBook" class="about-img">
<div class="about-text">
<p class="section-subtitle section-subtitle-about">product maker from London</p>
<p>Hi, my name is Kate Klink. I've had a somewhat unconventional path to finding my career in the tech sector, having previously worked in investment funds as an associate and analyst.
When I started working with online projects through a VC fund, I quickly got hooked and decided to switch to a career in tech.
</p>
<p>In my spare time I create and experiment with bootstrapped online side projects.</p>
<p>My other interests include sustainability, minimalism, DIY and yoga.</p>
</div>
</div>
</section>
<!-- My work -->
<section class="work" id="projects">
<h2 class = "section-title section-title-projects"> Selected Projects </h2>
<div class="project-grid">
<button class="carousel-button carousel-button-left">
<i class="fas fa-angle-left"></i>
</button>
<div class="carousel-container">
<!-- Portfolio item 01 -->
<div class="project">
<img class="project-image" src="./images/project1.jpg" alt="Artour">
<div class="project-description" >
<h3 class="project-title">Artour</h3>
<p class="project-text">Chatbot for finding art</p>
</div>
</div>
<!-- Portfolio item 02 -->
<div class="project">
<img class="project-image" src="./images/project2.jpg" alt="Lini">
<div class="project-description" >
<h3 class="project-title">Lini</h3>
<p class="project-text">Smart Linkedin contacts app</p>
</div>
</div>
<!-- Portfolio item 03 -->
<div class="project">
<img class="project-image" src="./images/project3.jpg" alt="PH Meetup">
<div class="project-description" >
<h3 class="project-title">Product Hunt</h3>
<p class="project-text">Meetup in Copenhagen</p>
</div>
</div>
</div>
<button class="carousel-button carousel-button-right">
<i class="fas fa-angle-right"></i>
</button>
</div>
<div class="carousel-nav">
<div class="carousel-toggle-container">
<button class="carousel-toggle" id="carousel-play"><i class="fas fa-play"></i></button>
<button class="carousel-toggle" id="carousel-pause"><i class="fas fa-pause"></i></button>
</div>
<div class="carousel-indicator-container">
<button class="carousel-indicator current-slide"><i class="fas fa-circle"></i></button>
<button class="carousel-indicator"><i class="fas fa-circle"></i></button>
<button class="carousel-indicator"><i class="fas fa-circle"></i></button>
</div>
</div>
</section>
<!--Footer -->
<footer class="footer">
<ul class="social-list">
<li class="social-list-item">
<a class="profile-link" href="https://github.com/klink" onclick="getOutboundLink('https://github.com/klink'); return false;"
target="_blank">
<i class="fab fa-github"></i> </a>
</li>
<li class="social-list-item">
<a class="profile-link" href="https://twitter.com/ekaterinaklink" onclick="getOutboundLink('https://twitter.com/ekaterinaklink'); return false;"
target="_blank">
<i class="fab fa-twitter"></i> </a>
</li>
<li class="social-list-item">
<a class="profile-link" href="https://linkedin.com/in/kateklink" onclick="getOutboundLink('https://linkedin.com/in/kateklink'); return false;"
target="_blank">
<i class="fab fa-linkedin"></i> </a>
</li>
<li class="social-list-item">
<a class="profile-link" href="https://medium.com/@klink" onclick="getOutboundLink('https://medium.com/@klink'); return false;"
target="_blank">
<i class="fab fa-medium"></i> </a>
</li>
</ul>
</footer>
<script src="carousel.js"></script>
</body>
</html>