-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
298 lines (265 loc) · 14.6 KB
/
index.html
File metadata and controls
298 lines (265 loc) · 14.6 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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Icon: https://www.flaticon.com/premium-icon/galaxy_1734167# -->
<!-- Generated with: https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, minimum-scale=1" />
<meta name="description" content="Resume made with three.js." />
<meta name="keywords" content="resume, webgl, 3d, exploding, threejs , animation, javascript" />
<meta name="author" content="Maciej Piaseczny" />
<title>Dev Style Resume</title>
</head>
<!--
___ ___ ___ ___ ___ ___ ___
/\__\ /\ \ /\__\ /\ \ /\ \ /\__\ /\ \
/:/ _/_ /::\ \ /:/ / /::\ \ /::\ \ /::| | /::\ \
/:/ /\__\ /:/\:\ \ /:/ / /:/\:\ \ /:/\:\ \ /:|:| | /:/\:\ \
/:/ /:/ _/_ /::\~\:\ \ /:/ / /:/ \:\ \ /:/ \:\ \ /:/|:|__|__ /::\~\:\ \
/:/_/:/ /\__\ /:/\:\ \:\__\ /:/__/ /:/__/ \:\__\ /:/__/ \:\__\ /:/ |::::\__\ /:/\:\ \:\__\
\:\/:/ /:/ / \:\~\:\ \/__/ \:\ \ \:\ \ \/__/ \:\ \ /:/ / \/__/~~/:/ / \:\~\:\ \/__/
\::/_/:/ / \:\ \:\__\ \:\ \ \:\ \ \:\ /:/ / /:/ / \:\ \:\__\
\:\/:/ / \:\ \/__/ \:\ \ \:\ \ \:\/:/ / /:/ / \:\ \/__/
\::/ / \:\__\ \:\__\ \:\__\ \::/ / /:/ / \:\__\
\/__/ \/__/ \/__/ \/__/ \/__/ \/__/ \/__/
-->
<body>
<div id="loadOverlay"
style="background-color:rgb(0, 0, 0); position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:2;">
</div>
<div id="loading-screen">
<pre id="loader-text"></pre>
<div id="loader-prompt">
<div id="loader-loaded">
<span id="loader-loading">Loading</span>
<span id="loader-start">Click to continue</span>
</div>
<pre id="loader-landscape">[ Use landscape for better experience ]</pre>
</div>
<div id="loader"></div>
</div>
<canvas id="bg"></canvas>
<div id="chevron" class="chevron-container">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
</div>
<main id="main">
<header>
<span id="header1">d</span>
<span id="header2">e</span>
<span id="header3">v</span> 
<span id="header4">s</span>
<span id="header5">t</span>
<span id="header6">Y</span>
<span id="header7">l</span>
<span id="header8">e</span> 
<span id="header9">r</span>
<span id="header10">e</span>
<span id="header11">s</span>
<span id="header12">u</span>
<span id="header13">m</span>
<span id="header14">e</span>
</header>
<blockquote class="left">
<p><span>Nature never appeals to intelligence until habit and instinct are useless. There is no intelligence
where there is no need of change.</span></p>
<br />
<p class="author"><span>The Time Machine - H.G Wells</span></p>
</blockquote>
<section class="right">
<h1 id="label1" tooltip>Meaning - WHY?</h1>
<scifi-popup id="popup1" opener="label1">
<h2>Meaning - WHY?</h2>
<p>
There are three main reasons why I made this page:
<ul>
<li>BECAUSE I CAN</li>
<li>IT WAS FUN</li>
<li>I COULD LEARN SOMETHING NEW</li>
</ul>
</p>
<p>
Do you know what quaternions are? Maybe you do, but I did not (if you feel the same, do not worry, just check
links at the bottom). Neither did I know how four dimensional matrix can help me create this webpage!
This is best in trying new things: you can expect the unexpected! So if you ever wished to learn, try, or
just read about something, just do it! Do not let your curiosity wait any longer.
</p>
<p>
Below there is a short list of things that I learned about while making this webpage:
three.js, basics of computer graphics, WebGL, shaders;
typescript, javascript, css, scss;
vite; npm;
blender;
rotation matrices, quaternions.
You wonder what is the point of learning all of this? I doubt it is a good question. The main idea is to
learn. If you try - you simply accomplish this objective. Attempting to solve a problem is a great training
even
if you fail. However, a reward for making things work as you planned - that is just addictive!
</p>
</scifi-popup>
</section>
<section class="left">
<h1 id="label2" tooltip>Entity - WHO?</h1>
<scifi-popup opener="label2">
<h2>Entity - WHO?</h2>
<p>
Well, it is complicated... Let me try: fullstack SQL devops. Wait, what?<br />
It all started when I graduated Control Engineering and Robotics studies on the University of Technology in
Wrocław,
Poland. It was a great time with differential equations, robots and industry controlers. Nethertheless, with
good C
programming skills I started to work as a developer. I spent a few years developing and maintaning C software
with
embedded SQL responsible for daily replication of data change for national Social Insurance Instituton.
Durring
this period I advanced in fields of: SQL, databases (especially DB2 z/OS) and analytic skills. I became the
main
developer responsible for designing new features and 24h SLA maintenance. However, with high responsibilities
I
had not many opportunities to learn new things.
That is why I found a new job that provides me with multifunctional assignments such as: team leader,
angular/spring developer, database engineer, system designer and devops. Since then I worked with: Db2 zOS/DB2
LUW/MS SQL, Angular/Material/RxJS, Java/Spring/JSP/JSF, Apache Tomcat/Openshift, npm/gradle/Maven,
Jenkins/Artifactory/Nexus and more.
That is a lot and I know that it is impossible to master so many topics, however, this kind of versatility is
invaluable in many projects.
What is my weakness? Since I rearly have opportunity to stick to one technology and master it, I am rather
terrible on a technical interview... Yet, I have mastered one crucial skill:
<h3>getting things done!</h3>
</p>
</scifi-popup>
</section>
<section class="right">
<h1 id="label3" tooltip>Reminiscence - WHAT?</h1>
<scifi-popup opener="label3">
<h2>Reminiscence - WHAT?</h2>
<h3>Projects</h3>
<h4>Data change replication system</h4>
<p>
Description: developement/maintanance of system designed to replicate up to a few millions of
selected/agregated
rows per day from DB2 z/OS to Informix.
<br>Role: one-man team, C developer/designer/analyst, DB2 z/OS expert.
</p>
<h4>Multiple development projects for national Social Insurance Instituton</h4>
<p>
Description: analysis, design, development, deployment and maintanance of various functional requirements in
projects worth over $10 millions.
<br>Role: DB2 zOS/SQL expert, devops, C/Angular/Java/Python developer, developers team leader.
</p>
<h4>System decomposition - preparation for maintenance </h4>
<p>
Description: identification of system components, requirements, procedures, schedules and monitoring necessary
to prepare for 24h SLA maintenance.
<br>Role: team leader, analyst, designer.
</p>
<h4>PoC: separating one of the main components from monolith architecture system</h4>
<p>
Description: analysis, design, development in proof of concept project to prepare plan of migrating one of the
main
system components from z/OS to x86 architecture.
<br>Role: DB2 zOS/database expert, system analyst.
</p>
<h3>Certificates</h3>
<li>IBM DB2 11 Application Developer for z/OS</li>
<li>IBM DB2 10.1 Fundamentals</li>
<li>COSMIC Software Functional Size Measurer</li>
</scifi-popup>
</section>
<blockquote class="left">
<p><span>A common mistake that people make when trying to design something completely foolproof is to
underestimate the ingenuity of complete fools.</span></p>
<p class="author"><span>-Douglas Adams</span></p>
</blockquote>
<section class="left">
<h1 id="label5" tooltip>Creation - HOW?</h1>
<scifi-popup opener="label5" style="--max-modal-width:100%; --max-modal-height: 100%; --modal-overflow: hidden;">
<h2 class="gallery-header">Behind-the-scenes:</h2>
<div class="gallery">
<input type="checkbox" id="btnControl1" /><label for="btnControl1"><img class='first'
src='assets/makingOf/stars.webp' alt='' title="Volumetric stars attempt - abandoned"> <img class='second'
src='assets/makingOf/stars.webp' alt='' title="Volumetric stars attempt - abandoned"></label>
<input type="checkbox" id="btnControl2" /><label for="btnControl2"><img class='first'
src='assets/makingOf/stars2.webp' alt='' title="Volumetric stars mixed with sprites - abandoned"> <img
class='second' src='assets/makingOf/stars2.webp' alt=''
title="Mixed with sprites attempt - abandoned"></label>
<input type="checkbox" id="btnControl3" /><label for="btnControl3"><img class='first'
src='assets/makingOf/plane.webp' alt='' title="3D skybox trick"> <img class='second'
src='assets/makingOf/plane.webp' alt='' title="3D skybox trick"></label>
<input type="checkbox" id="btnControl4" /><label for="btnControl4"><img class='first'
src='assets/makingOf/blender_nebula.webp' alt='' title="Procedural nebula in Blender"> <img class='second'
src='assets/makingOf/blender_nebula.webp' alt='' title="Procedural nebula in Blender"></label>
<input type="checkbox" id="btnControl5" /><label for="btnControl5"><img class='first'
src='assets/makingOf/blender_rock.webp' alt='' title="Exploding geometry in Blender"> <img class='second'
src='assets/makingOf/blender_rock.webp' alt='' title="Exploding geometry in Blender"></label>
<input type="checkbox" id="btnControl6" /><label for="btnControl6"><img class='first'
src='assets/makingOf/shader.webp' alt='' title="Fragment shader problem"> <img class='second'
src='assets/makingOf/shader.webp' alt='' title="Fragment shader problem"></label>
</div>
</scifi-popup>
</section>
<section class="right">
<h1 id="label4" tooltip>Credits - WHOM?</h1>
<scifi-popup opener="label4">
<h2>Credits - WHOM?</h2>
<p><a href="https://youtu.be/d4EgbgTm0Bg" target="_blank">3Blue1Brown</a> - quaternions explained and visualised
</p>
<p><a href="https://www.youtube.com/channel/UCEwhtpXrg5MmwlH04ANpL8A" target="_blank">SimonDev</a> - helpful
three.js tutorials
</p>
<p><a href="https://robertsspaceindustries.com/starmap/" target="_blank">ARK Starmap</a> - scene layout, light
speed effect inspiration</p>
<p><a href="https://vilapereira.artstation.com/projects/Ka1eeB" target="_blank">Vila 3D Artist</a> - adopted
procedural nebula shader for Blender</p>
<p><a href="https://tympanus.net/codrops/2019/03/26/exploding-3d-objects-with-three-js/"
target="_blank">Exploding
3D Objects with Three.js</a> - article by Yuriy Artyukh with adopted exploding object algorithm</p>
<p><a href="https://www.shadertoy.com/view/lslXRS" target="_blank">Noise animation - Lava</a> - Shadertoy by
nimitz with adopted lava shader</p>
<p><a href="https://www.clicktorelease.com/blog/vertex-displacement-noise-3d-webgl-glsl-three-js/"
target="_blank">Vertex
displacement</a> - article by Jaume Sanchez Elias with adopted displacement vertex shader</p>
<p><a href="https://mixkit.co/" target="_blank">Mixkit</a> - free video/audio assets</p>
<p><i>Suitable license information is provided in associated files on Github: <a
href="https://github.com/Seg0r/devStyleResume" target="_blank">devStyleResume</a></i></p>
<h3>Inspirations:</h3>
<p><a href="https://www.youtube.com/c/Fireship" target="_blank">Fireship.io</a> - wisdom in 100 seconds? Jeff
Delaney summarizes many topics in best posibble way. It is his tutorial about three.js that inspired me to
make this website</p>
<p><a href="https://www.youtube.com/c/smartereveryday" target="_blank">Smarter Every Day</a> - Destins curiosity
to science is just contagious</p>
<p><a href="https://www.youtube.com/c/inanutshell" target="_blank">Kurzgesagt</a> - <i>explaining things with
optimistic nihilism</i></p>
</scifi-popup>
</section>
<footer class="right">
<p>Find me on:
<a href="https://www.linkedin.com/in/maciej-piaseczny-257652110/" target="_blank">
<img src="https://github.githubassets.com/images/modules/site/icons/footer/linkedin.svg" width="19"
height="18" loading="lazy" decoding="async" alt="Linkedin icon">
</a>
<a href="https://github.com/Seg0r" target="_blank">
<img src="https://github.githubassets.com/images/modules/site/icons/footer/github-mark.svg" width="20"
height="20" loading="lazy" decoding="async" alt="GitHub mark">
</a>
</p>
<p>Thanks for watching!</p>
<p>Click <a id="exploreLink" title="Click to 🔍" href="javascript:;">HERE</a> to explore more!</p>
</footer>
</main>
<exploreTooltip id="exploreTooltip">
<p>Use mouse to explore!<br>Click <a id="unExploreLink" title="Click to stop exploring" href="javascript:;">HERE</a>
to exit.
</p>
</exploreTooltip>
<script type="module" src="/src/main.ts"></script>
</body>
</html>