-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (185 loc) · 11.9 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
---
---
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Jan Janiczek" />
<meta name="description" content="Personal portfolio page of Jan Janiczek" />
<meta name="keywords" content="data engineer, machine learning, developer, database" />
<meta name="google-site-verification" content="DNQ9oT_sExXt-dOMZAngxoVqa0aPbaJZ1nkPllsPCGo" />
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
<link rel="stylesheet" href="./janiczek.css" />
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans:300|Raleway|Ubuntu:300" />
<script src="./assets/jquery-3.1.1.min.js"></script>
<title>Jan Janiczek</title>
</head>
<body lang="en-US">
<div class="cover-page">
<a href="#navbar" id="hamburger" aria-label="jump to menu">
<i class="fa fa-bars fa-3x"></i>
</a>
<div class="caption grad">
<h1>I'm Jan Janiczek</h1>
<h4>a passionate data / machine learning engineer</p>
</div>
<div class="button-list">
<a href="https://github.com/Hattivat" class="fa-stack fa-2x" aria-label="Github account">
<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
<i class="fa fa-github fa-stack-1x" aria-hidden="true"></i>
</a>
<a href="https://www.goodreads.com/user/show/5013331-hattivat" class="fa-stack fa-2x" aria-label="Goodreads account">
<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
<i class="fa fa-book fa-stack-1x" aria-hidden="true"></i>
</a>
<a href="https://rateyourmusic.com/~hattivat" class="fa-stack fa-2x" aria-label="Rateyourmusic account">
<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
<i class="fa fa-music fa-stack-1x" aria-hidden="true"></i>
</a>
<a href="https://www.linkedin.com/in/jan-janiczek-b8784a55/" class="fa-stack fa-2x" aria-label="LinkedIn account">
<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
<i class="fa fa-linkedin fa-stack-1x" aria-hidden="true"></i>
</a>
<a href="mailto:janek.janiczek@gmail.com" class="fa-stack fa-2x" aria-label="Send me an email">
<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
<i class="fa fa-envelope fa-stack-1x" aria-hidden="true"></i>
</a>
</div>
</div>
<nav id="navbar">
<ul>
<a href="#projects"><li class="grad">PROJECTS</li></a>
<a href="#skills"><li class="grad">SKILLS</li></a>
<li id="logo"><span id="first">J</span>J</li>
<a href="#about-me"><li class="grad">ABOUT ME</li></a>
<a href="#contact"><li class="grad">CONTACT</li></a>
</ul>
</nav>
<section class="section-container" id="projects">
<header>
<h1 class="section-title">Example projects</h1>
<h3 class="section-subtitle">I believe in choosing the right tools for the right job, which is why you'll see a lot of different technologies mentioned below</h3>
</header>
<div class="displaybox scroll-animated bounce-up">
{% for project in site.data.projects %}
<div class="box-item shadowed">
<img src="{{ project[1].image }}" alt="project screenshot" />
<a class="hidden-info" href="{{ project[1].url }}" target="_blank">
<h4>{{ project[0] }}</h4>
<p>{{ project[1].description }}</p>
<p><i class="fa fa-cogs" aria-hidden="true"></i> {{ project[1].technologies }}</p>
</a>
</div>
{% endfor %}
</div>
</section>
<section class="section-container" id="skills">
<header>
<h1 class="section-title">My skills</h1>
<h3 class="section-subtitle">I'm always excited to learn new things, both computer and human-related.</h3>
</header>
{% for skillset in site.data.skills %}
<div class="displaybox">
<h2 class="subsection-title">{{ skillset[0] }}</h2>
{% for skill in skillset[1] %}
<div class="circle-container">
<div class="circle scroll-animated circle-load" data-name="{{ skill[0] }}" data-percent="{{ skill[1] }}%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="12" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="{{ skill[1] | times:6.29 | round }}"></path>
</svg>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</section>
<section class="section-container" id="about-me">
<header>
<h1 class="section-title">About me</h1>
</header>
<div class="portrait-text">
<img id="ascii" src="./assets/ascii.png" alt="ASCII art portrait" />
<p class="long-text">My name is Jan Janiczek, and I hold a combined "human languages plus computer science" (Linguistics and Information Science) degree from the Adam Mickiewicz University in Poznań. I consider myself a "full-stack" data engineer, capable of everything from data science, through machine learning, backend development, data processing and database optimization, to IT infrastructure administration. I possess extensive experience putting machine learning-based applications in production (REST API wrappers, Docker and Kubernetes configs, CI/CD, monitoring solutions). <br /><br />I have a wide variety of interests that I love to discuss with others, among them rocketry, astronomy, computer history, military history, and linguistics. In addition to my native Polish, I can speak fluent English, intermediate Indonesian, and some very basic Russian, Chinese and German. In my free time I enjoy cooking (my specialty is Indonesian cuisine), playing strategy games (Paradox Interactive <3), tweaking with my operating system (I use Manjaro Linux with the i3 tiling window manager), traveling "on a shoestring", reading books related to my interests, and listening to all sorts of obscure music (with a special focus on traditional music from Asia). I used to be an avid sailor and amateur calligrapher, and would very much like to resume both in the future should time and budget ever permit it again.</p>
</div>
</section>
<section class="section-container" id="contact">
<header>
<h1 class="section-title">Contact</h1>
<h3 class="section-subtitle">Whether you would like to hire me, provide some constructive criticism, or discuss rocket technology trivia, feel free to use the contact box below.</h3>
</header>
<form action="https://formspree.io/janek.janiczek@gmail.com" method="POST">
<input type="text" name="name" placeholder="Your name" required /><br />
<input type="email" name="_replyto" placeholder="Your e-mail" required /><br />
<input type="text" name="_subject" placeholder="Subject" /><br />
<textarea name="message" placeholder="Type your message here..." required></textarea><br />
<input type="submit" value="Send" /><br />
<input type="hidden" name="_next" value="hattivat.github.io/index.html#contact" />
</form>
</section>
<footer>
<div class="social">
<a href="https://github.com/Hattivat" aria-label="Github account">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a href="https://www.goodreads.com/user/show/5013331-hattivat" aria-label="Goodreads account">
<i class="fa fa-book" aria-hidden="true"></i>
</a>
<a href="https://rateyourmusic.com/~hattivat" aria-label="Rateyourmusic account">
<i class="fa fa-music" aria-hidden="true"></i>
</a>
<a href="https://www.linkedin.com/in/jan-janiczek-b8784a55/" aria-label="LinkedIn account">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="http://indonezjada.blogspot.com/" aria-label="My old travel blog">
<i class="fa fa-suitcase" aria-hidden="true"></i>
</a>
<a href="http://hattivat.imgur.com/" aria-label="Imgur account">
<i class="fa fa-rocket" aria-hidden="true"></i>
</a>
</div>
<p>Hand-written by Jan Janiczek.<br />© Copyright 2017-2020. All rights reserved.</p>
<!-- DEFINITIONS FOR CIRCLE-LOADING ANIMATION STYLING -->
<svg id="hidden-svg">
<defs>
<linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#618099"/>
<stop offset="100%" stop-color="#8e6677"/>
</linearGradient>
<linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#8e6677"/>
<stop offset="100%" stop-color="#9b5e67"/>
</linearGradient>
<linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
<stop stop-color="#9b5e67"/>
<stop offset="100%" stop-color="#9c787a"/>
</linearGradient>
<linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
<stop stop-color="#9c787a"/>
<stop offset="100%" stop-color="#817a94"/>
</linearGradient>
<linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
<stop stop-color="#817a94"/>
<stop offset="100%" stop-color="#498a98"/>
</linearGradient>
<linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
<stop stop-color="#498a98"/>
<stop offset="100%" stop-color="#618099"/>
</linearGradient>
</defs>
</svg>
</footer>
</body>
<script src="./janiczek.js"></script>
</html>