Skip to content

Commit b4890fa

Browse files
JumperOnJavaJumperOnJava
committed
ua translation
1 parent 0ebf783 commit b4890fa

File tree

2 files changed

+704
-64
lines changed

2 files changed

+704
-64
lines changed

‎portfolio/index.html‎

Lines changed: 87 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -146,21 +146,44 @@
146146
.tablerIcon {
147147
filter: invert(76%) sepia(10%) saturate(1386%) hue-rotate(39deg) brightness(86%) contrast(90%);
148148
}
149+
149150
.tablerIconInv {
150151
filter: invert() invert(76%) sepia(10%) saturate(1386%) hue-rotate(39deg) brightness(86%) contrast(90%);
151152
}
153+
152154
a {
153155
display: flex;
154156
flex-direction: row;
155157
gap: .25rem;
156158
margin: 5px 0;
157-
158159
}
159160

160161
#nemt {
161162
filter: invert(39%) sepia(26%) saturate(2459%) hue-rotate(280deg) brightness(84%) contrast(82%);
162163
;
163164
}
165+
166+
.project_description {
167+
display: flex;
168+
width: 90%;
169+
max-width: 1024px;
170+
gap: 5rem;
171+
}
172+
173+
.screenshot_panel {
174+
width: 100%;
175+
display: flex;
176+
flex-direction: column;
177+
overflow-x: auto;
178+
align-items: center;
179+
}
180+
181+
.screenshots_inner_box {
182+
display: flex;
183+
flex-direction: row;
184+
gap: 1rem;
185+
align-items: center;
186+
}
164187
</style>
165188
</head>
166189

@@ -169,41 +192,40 @@
169192
<span class="close-btn">[X]</span>
170193
<img src="" alt="Fullscreen preview">
171194
</div>
172-
173-
174-
195+
<span style="display: flex; flex-direction: row;">
196+
<a href="index.html">EN</a><a>&nbsp;/&nbsp;</a><a href="ua.html">UA</a>
197+
</span>
175198
</div>
176199
<div style="display: flex; justify-content: center; flex: 1; height: 100%;">
177200
<div class="projects">
178201
<div class="projectbox">
179-
<div style="display:flex;align-items: center; flex-direction: column; width: 50%;">
202+
<div style="display:flex;align-items: center; flex-direction: column; width: 90%; max-width: 1024px;">
180203
<h2> Hi, i'm Vyacheslav Vandalovich</h2>
181204
<h2>About me</h2>
182205
<p>
183206
I'm 19 years old developer from Ukraine. I spent last 6 years of my life learning programming.
184-
First i did this for fun, and later i decided this will be my career.
207+
First i did this for fun, and later i decided this will be my career.<br>
185208
I have learned a lot of technologies and programming languages, but most of my experience is
186209
with C#, Java and JavaScript/TypeScript.
187-
This page contains projects that i'm most proud of,
188-
My hobbies include 3d modeling in blender, electronics, and gaming.
210+
This page contains projects that i'm most proud of.<br>
189211
</p>
190212
<div style="width: 100%; flex-direction: row;display: flex">
191213
<div style="flex:1; display: flex; justify-content: center;">
192214
<img class="tablerIcon" src="icons/brand-react-native.svg" title="React/React Native">
193-
</div>
215+
</div>
194216
<div style="flex:1; display: flex; justify-content: center;">
195217
<img class="tablerIcon" src="icons/brand-javascript.svg" title="JavaScript">
196-
</div>
218+
</div>
197219
<div style="flex:1; display: flex; justify-content: center;">
198220
<img class="tablerIcon" src="icons/brand-typescript.svg" title="TypeScript">
199-
</div>
221+
</div>
200222
<div style="flex:1; display: flex; justify-content: center;">
201223
<img class="tablerIcon" src="icons/brand-c-sharp.svg" title="C#/Dotnet">
202-
</div>
224+
</div>
203225
<div style="flex:1; display: flex; justify-content: center;">
204226
<img class="tablerIcon" src="icons/coffee.svg" alt="Java"
205-
title="Java (i haven't found icon in pack so i just used coffee)">
206-
</div>
227+
title="Java (i haven't found icon in pack so i just used coffee)">
228+
</div>
207229
</div>
208230
<div style="display: flex; align-items: center;">
209231
<p style="min-width: 400px;">
@@ -212,7 +234,7 @@ <h2>About me</h2>
212234
Telegram: @slyveek<br>
213235
Discord: @javajumper<br>
214236
</p>
215-
237+
216238
</div>
217239

218240
</div>
@@ -232,7 +254,7 @@ <h1 style="flex:0">My Portfolio</h1>
232254
<h2 class="header">ChatApp (Internal name)</h2>
233255
<img class="center-icon" src="icons/chat.png">
234256
</div>
235-
<div style="display: flex;width: 1024px; gap: 5rem;">
257+
<div class="project_description">
236258
<div style="max-width: 50%;">
237259
<p>About:</p>
238260
<p>A chat application inspired by <strong>Discord</strong>, focused on community features.<br>
@@ -264,9 +286,9 @@ <h2 class="header">ChatApp (Internal name)</h2>
264286

265287
</div>
266288
</div>
267-
<div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
289+
<div class="screenshot_panel">
268290
<h3>Screenshots</h3>
269-
<div style="display: flex; flex-direction: row; gap: 1rem; align-items: center;">
291+
<div class="screenshots_inner_box">
270292
<img src="images/chatapp_blog2.png" alt="Blog" class="wide_image fullscreen_trigger"
271293
height="400">
272294
<img src="images/chatapp_chat.png" alt="Chat" class="wide_image fullscreen_trigger"
@@ -281,7 +303,7 @@ <h3>Screenshots</h3>
281303
<h2 class="header">Password11 Manager</h2>
282304
<img class="center-icon" src="icons/lock.png">
283305
</div>
284-
<div style="display: flex;width: 1024px; gap: 5rem;">
306+
<div class="project_description">
285307
<div style="max-width: 50%;">
286308
<p>About:</p>
287309
<p>A secure password manager with a modern interface and optional encrypted synchronization.<br>
@@ -321,9 +343,9 @@ <h2 class="header">Password11 Manager</h2>
321343
</p>
322344
</div>
323345
</div>
324-
<div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
346+
<div class="screenshot_panel">
325347
<h3>Screenshots</h3>
326-
<div style="display: flex; flex-direction: row; gap: 1rem; align-items: center;">
348+
<div class="screenshots_inner_box">
327349
<img src="images/password_home.png" class="fullscreen_trigger" alt="Password Manager Home"
328350
height="400">
329351
<img src="images/password_add.png" class="fullscreen_trigger" alt="Password Add" height="400">
@@ -336,7 +358,7 @@ <h3>Screenshots</h3>
336358
<h2 class="header">ManageNEMT Mobile</h2>
337359
<img class="center-icon" src="icons/app.png">
338360
</div>
339-
<div style="display: flex;width: 1024px; gap: 5rem;">
361+
<div class="project_description">
340362
<div style="max-width: 50%;">
341363
<p>About:</p>
342364
<p>A mobile app designed for <strong>non-emergency medical transportation (NEMT)</strong>
@@ -353,7 +375,8 @@ <h2 class="header">ManageNEMT Mobile</h2>
353375
<p><strong>My responsibilities:</strong></p>
354376
<ul>
355377
<li>- Developing and testing the app</li>
356-
<li>- Integrating with dispatcher system + external services (Firebase, Sentry, Google
378+
<li>- Integrating with internal dispatcher system + external services (Firebase Cloud
379+
Messaging, Sentry, Google
357380
Maps/Apple Maps)</li>
358381
<li>- Publishing to App Store and Google Play Store</li>
359382
</ul>
@@ -386,7 +409,7 @@ <h2 class="header">ManageNEMT Mobile</h2>
386409

387410
</div>
388411
</div>
389-
<div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
412+
<div class="screenshot_panel">
390413
<h3>Screenshots</h3>
391414
<div style="display: flex; justify-content: center; gap:1rem">
392415
<img src="images/NEMT-1.png" alt="NEMT 1" class="fullscreen_trigger" height="500">
@@ -411,7 +434,7 @@ <h1 class="header" style="text-align: center;" cl>Side projects</h1>
411434
<h2 class="header">ElectroCart (Unity)</h2>
412435
<img class="center-icon" src="icons/car.png">
413436
</div>
414-
<div style="display: flex;width: 1024px; gap: 5rem;">
437+
<div class="project_description">
415438
<div style="max-width: 50%;">
416439
<p>About:</p>
417440
<p>Video game made for a local competition. Inspired by the mobile
@@ -430,19 +453,19 @@ <h2 class="header">ElectroCart (Unity)</h2>
430453
a Demo (Windows)</a>
431454
</p>
432455
<p><strong>Tech Stack</strong><br>
433-
<div style="display: flex; gap: 0.25rem;">
434-
<img class="tablerIcon" src="icons/brand-unity.svg" title="Unity"> Unity <br>
435-
</div>
436-
<div style="display: flex; gap: 0.25rem;">
437-
<img class="tablerIcon" src="icons/brand-c-sharp.svg" title="C#"> #C
438-
</div>
456+
<div style="display: flex; gap: 0.25rem;">
457+
<img class="tablerIcon" src="icons/brand-unity.svg" title="Unity"> Unity <br>
458+
</div>
459+
<div style="display: flex; gap: 0.25rem;">
460+
<img class="tablerIcon" src="icons/brand-c-sharp.svg" title="C#"> #C
461+
</div>
439462
</p>
440463

441464
</div>
442465
</div>
443-
<div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
466+
<div class="screenshot_panel">
444467
<h3>Screenshots</h3>
445-
<div style="display: flex; flex-direction: row; gap: 1rem; align-items: center;">
468+
<div class="screenshots_inner_box">
446469
<img src="images/buildergame-1.png" alt="BuilderGame 1" height="400"
447470
class="wide_image fullscreen_trigger">
448471
<img src="images/buildergame-2.png" alt="BuilderGame 2" height="400"
@@ -457,7 +480,7 @@ <h3>Screenshots</h3>
457480
<h2 class="header">RC Car with chemical delectors</h2>
458481
<img class="center-icon" src="icons/car.png">
459482
</div>
460-
<div style="display: flex;width: 1024px; gap: 5rem;">
483+
<div class="project_description">
461484
<div style="max-width: 50%;">
462485
<p>About:</p>
463486
<p>A project created for the <em>Hack the FICT Hackathon</em>.<br>
@@ -478,25 +501,25 @@ <h2 class="header">RC Car with chemical delectors</h2>
478501
(Ukrainian)</a><br>
479502
</p>
480503
<p><strong>Tech Stack</strong><br>
481-
<div style="display: flex; gap: 0.25rem;">
482-
<img class="tablerIconInv" src="icons/cpu-2.svg" title="Raspberry Pi"> Raspberry Pi <br>
483-
</div>
484-
<div style="display: flex; gap: 0.25rem;">
485-
<img class="tablerIcon" src="icons/cpu.svg" title="ESP32"> ESP32 <br>
486-
</div>
487-
<div style="display: flex; gap: 0.25rem;">
488-
<img class="tablerIconInv" src="icons/brand-cpp.svg" title="C++"> ++C <br>
489-
</div>
490-
<div style="display: flex; gap: 0.25rem;">
491-
<img class="tablerIcon" src="icons/brand-python.svg" title="Python"> Python
492-
</div>
504+
<div style="display: flex; gap: 0.25rem;">
505+
<img class="tablerIconInv" src="icons/cpu-2.svg" title="Raspberry Pi"> Raspberry Pi <br>
506+
</div>
507+
<div style="display: flex; gap: 0.25rem;">
508+
<img class="tablerIcon" src="icons/cpu.svg" title="ESP32"> ESP32 <br>
509+
</div>
510+
<div style="display: flex; gap: 0.25rem;">
511+
<img class="tablerIconInv" src="icons/brand-cpp.svg" title="C++"> ++C <br>
512+
</div>
513+
<div style="display: flex; gap: 0.25rem;">
514+
<img class="tablerIcon" src="icons/brand-python.svg" title="Python"> Python
515+
</div>
493516
</p>
494517

495518
</div>
496519
</div>
497-
<div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
520+
<div class="screenshot_panel">
498521
<h3>Photos</h3>
499-
<div style="display: flex; flex-direction: row; gap: 1rem; align-items: center;">
522+
<div class="screenshots_inner_box">
500523
<img src="images/rc_photo.png" height="400" class="wide_image fullscreen_trigger">
501524
<video src="images/rc_outdoor_demo.mp4" height="400" controls></video>
502525
<img src="images/rc_control_screenshot.jpg" height="400" class="wide_image fullscreen_trigger">
@@ -511,7 +534,7 @@ <h3>Photos</h3>
511534
<h2 class="header">Minecraft Modding</h2>
512535
<!-- <img class="center-icon" src=""> -->
513536
</div>
514-
<div style="display: flex;width: 1024px; gap: 5rem;">
537+
<div class="project_description">
515538
<div style="max-width: 50%;">
516539
<p>Sometimes when i have spare time i develop mods for Minecraft. <br>
517540
I focus on mostly minor tweaks to improve player experience or features that can be
@@ -527,33 +550,33 @@ <h2 class="header">Minecraft Modding</h2>
527550
src="icons/world.svg">Modrinth<br></a>
528551
</p>
529552
<p><strong>Tech Stack</strong><br>
530-
<div style="display: flex; gap: 0.25rem;">
531-
<img class="tablerIcon" src="icons/brand-java.svg" title="Java"> Java <br>
532-
</div>
533-
<div style="display: flex; gap: 0.25rem;">
534-
<img class="tablerIcon" src="icons/world.svg" title="Fabric"> Fabric <br>
535-
</div>
536-
<div style="display: flex; gap: 0.25rem;">
537-
<img class="tablerIcon" src="icons/world.svg" title="Spongepowered Mixin"> Spongepowered
538-
Mixin
539-
</div>
553+
<div style="display: flex; gap: 0.25rem;">
554+
<img class="tablerIcon" src="icons/brand-java.svg" title="Java"> Java <br>
555+
</div>
556+
<div style="display: flex; gap: 0.25rem;">
557+
<img class="tablerIcon" src="icons/world.svg" title="Fabric"> Fabric <br>
558+
</div>
559+
<div style="display: flex; gap: 0.25rem;">
560+
<img class="tablerIcon" src="icons/world.svg" title="Spongepowered Mixin"> Spongepowered
561+
Mixin
562+
</div>
540563
</p>
541564

542565
</div>
543566
</div>
544-
<div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
567+
<div class="screenshot_panel">
545568
<h3>Photos</h3>
546-
<div style="display: flex; flex-direction: row; gap: 1rem; align-items: center;">
547-
<div style="display: flex; flex-direction: column; align-items: center;">
569+
<div style="display: flex; flex-direction: row; gap: 1rem; justify-content: center;">
570+
<div style="display: flex; flex-direction: column; ">
548571
<img src="images/mod_cursor.png" height="400" class="wide_image fullscreen_trigger">
549572
<span>Customizable cursor</span>
550573
</div>
551-
<div style="display: flex; flex-direction: column; align-items: center;">
574+
<div style="display: flex; flex-direction: column;">
552575
<img src="images/mod_wheel.png" height="400" width="400"
553576
class="wide_image fullscreen_trigger" style="object-fit: contain;">
554577
<span>Action wheel</span>
555578
</div>
556-
<div style="display: flex; flex-direction: column; align-items: center;">
579+
<div style="display: flex; flex-direction: column; ">
557580
<img src="images/mod_shader.png" height="400" class="wide_image fullscreen_trigger">
558581
<span>Simple shader-pack with stylized fog and shadows</span>
559582
</div>

0 commit comments

Comments
 (0)