-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
212 lines (186 loc) · 8.99 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This is the portfolio website exhibiting my projects as a web developer. It contains of a landing page with testimonials about my work as a developer. It also contains an about page showcasing my programming skills, my unique softskills, my ideal future employer, and hobbies. Another page gives an overview over my web dev projects and the last page is a contact page.">
<title>Lisa Pape - About Me</title>
<link rel="icon"
type="image/svg"
href="img/Favicon_Homepage2-min.png"
sizes="32x32">
<link rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
<nav class="page-header">
<div class="nav-list">
<a href="./index.html" class="brand-name-wrapper">
<h2 class="brand-name">Lisa Pape</h2>
</a>
<label for="hamburger">
☰
</label>
<input type="checkbox" id="hamburger"/>
<div class="ham-items" role="menubar">
<a href="index.html" class="ham-item" target="_self" role="menuitem" aria-label="nav item">
Home
</a>
<a href="about.html" class="ham-item--active" target="_self" role="menuitem" aria-label="nav item">
About
</a>
<a href="projects.html" class="ham-item" target="_self" role="menuitem" aria-label="nav item">
Projects
</a>
<a href="blog.html" class="ham-item" target="_self" role="menuitem" aria-label="nav item">
Blog
</a>
<a href="contact.html" class="ham-item" target="_self" role="menuitem" aria-label="nav item">
Contact
</a>
</div>
</div>
</nav>
<main class="main--wideview">
<section class="content-inside-main">
<div>
<h1>More about Me.</h1>
</div>
<!-- <div class="about-wrapper">-->
<!-- <div class="dev-skills" aria-label="These are my main skills as a full-stack web developer">-->
<!-- <span class="dev-skill-tag">JavaScript</span>-->
<!-- <span class="dev-skill-tag">TypeScript</span>-->
<!-- <span class="dev-skill-tag">HTML5</span>-->
<!-- <span class="dev-skill-tag">CSS3</span>-->
<!-- <span class="dev-skill-tag">SASS/SCSS</span>-->
<!-- <span class="dev-skill-tag">Bootstrap</span>-->
<!-- <span class="dev-skill-tag">SQL</span>-->
<!-- <span class="dev-skill-tag">jQuery</span>-->
<!-- <span class="dev-skill-tag">node</span>-->
<!-- <span class="dev-skill-tag">React</span>-->
<!-- <span class="dev-skill-tag">Angular</span>-->
<!-- <span class="dev-skill-tag">postgreSQL</span>-->
<!-- <span class="dev-skill-tag">MongoDB</span>-->
<!-- <span class="dev-skill-tag">serverless</span>-->
<!-- <span class="dev-skill-tag">Firebase</span>-->
<!-- </div>-->
<div class="soft-skills" aria-label="These are my unique softskills">
<h2>What do I bring to the table as a developer?</h2>
<div class="soft-skill-wrapper" aria-label="my unique soft skills as a web developer">
<div class="skill-detail__card">
<img src="./img/about-icon_communication.png" class="skill-detail__icon" alt="skill icon communication"/>
<h3 class="skill-detail__header">communicator</h3>
<p class="skill-detail__content">
As a former project manager and market research, I have
a good sense how to communicate align interests with different levels of colleagues, stakeholders and customers.
</p>
</div>
<div class="skill-detail__card">
<img src="./img/about-icon_learning.png" class="skill-detail__icon" alt="skill icon learning"/>
<h3 class="skill-detail__header">life-long-learner</h3>
<p class="skill-detail__content">
I want to continuously improve my craft and expand my horizon. If something is outside my current scope, the better. I am willing to study intensely to learn.
</p>
</div>
<div class="skill-detail__card">
<img src="./img/about-icon_diploma.png" class="skill-detail__icon" alt="skill icon diploma"/>
<h3 class="skill-detail__header">diploma</h3>
<p class="skill-detail__content">
My academic background has taught me to self-reliantly find solutions and continue trying when encountering an obstacle. Having studied business and Chinese coined my drive and attention to detail.
</p>
</div>
<div class="skill-detail__card">
<img src="./img/about-icon_hard-worker.png" class="skill-detail__icon" alt="skill icon tools of a worker"/>
<h3 class="skill-detail__header">hard worker</h3>
<p class="skill-detail__content">
I take ownership for my projects, and I am highly invested to produce clean code, find solutions for bugs and to realize theoretical concepts. I strive to deliver projects that exceed expectations.
</p>
</div>
</div>
</div>
<div class="work-goals" aria-label="This is what I look for in an employer">
<h2>What I am looking for? - aka "my wishlist"</h2>
<div class="employer-attributes">
<div class="employer-attributes-item">
<span class="checkmark-container">
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</span>
full-time position
</div>
<div class="employer-attributes-item">
<span class="checkmark-container">
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</span>
remote-first company</div>
<div class="employer-attributes-item">
<span class="checkmark-container">
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</span>
buddy / mentor</div>
<div class="employer-attributes-item">
<span class="checkmark-container">
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</span>
personal development</div>
</div>
</div>
<div class="hobbies" aria-label="This is what I like to do in my free time">
<h2>What I enjoy doing - apart from coding?</h2>
<div class="hobbies__image-masonry--row">
<div class="hobbies__image-masonry--column">
<img class="shadowed-image"
src="./img/hobbies_walkwithdog_unsplash_coral-ouellette.jpg"
alt="dog walking image from unsplash"/>
<img class="shadowed-image"
src="./img/hobbies_yoga_unsplash_avrielle-suleiman.jpg"
alt="image yoga from unsplash"/>
</div>
<div class="hobbies__image-masonry--column">
<img class="shadowed-image"
src="./img/hobbies_drawing_unsplash_victoria-bilsborough.jpg"
alt="drawing image from unsplash"/>
<img class="shadowed-image"
src="./img/hobbies_gardening_unsplash_annie-spratt.jpg"
alt="image gardening from unsplash"/>
</div>
<div class="hobbies__image-masonry--column">
<img class="shadowed-image"
src="./img/hobbies_readingChildren_unsplash_mark-zamora.jpg"
alt="image reading to children from unsplash"/>
<img class="shadowed-image"
src="./img/hobbies_climbing_unsplash%10_rahadiansyah.jpg"
alt="image climbing woman from unsplash"/>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__content-wrapper">
<div class="footer__social-media">
<span class="call-to-action">Visit me?</span>
<a href="https://github.com/LisaPMunich"
target="_blank">
<img class="icon-github" alt="github icon"/>
</a>
<a href="https://www.linkedin.com/in/lisa-pape-329b7a22/" target="_blank">
<img class="icon-linkedin" alt="linkedin icon"/>
</a>
</div>
<div class="impressum-link-wrapper">
<span class="call-to-action">Legal issues?</span>
<img src="./img/icon_arrow-right.png" class="icon_arrow-right" alt="icon arrow right"/>
<a href="./impressum.html" class="impressum-link" target="_self">Impressum</a>
</div>
</div>
</footer>
<script src="dist/main.js"></script>
<!--<script src="dist/tota11y.min.js"></script>-->
</body>
</html>