-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
442 lines (411 loc) · 20.2 KB
/
portfolio.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
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
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
<!DOCTYPE html>
<html lang="et">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./navbar.css">
<link rel="stylesheet" href="./colors.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<title>Portfell</title>
<style>
button {
border: solid 2px var(--color2);
padding: 5px;
padding-left: 10px;
padding-right: 10px;
border-radius: 15px;
margin-bottom: 5px;
color: var(--textcontrast);
background-color: var(--text);
font-size: 12pt;
}
button:active {
background-color: #666;
color: white;
}
img {
margin-top: 10px;
width: 50%;
border-radius: 15px;
}
h1,
h2,
h3,
p,
img {
margin-left: 20px;
color: var(--text);
}
#filter-buttons {
margin-top: 80px;
}
.powershell,
.markdown {
height: 450px;
}
.python,
.bash {
height: 500px;
}
.html {
height: 450px;
}
.mudel {
height: 700px;
}
.võrguseadmed {
height: 600px;
}
button {
border: solid 2px var(--color2);
padding: 5px;
padding-left: 10px;
padding-right: 10px;
border-radius: 15px;
margin-bottom: 5px;
color: var(--textcontrast);
background-color: var(--text);
}
button:active {
background-color: #666;
color: white;
}
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
background-color: var(--color4);
}
.item {
float: left;
border-radius: 15px;
background-color: var(--color2);
/* Change this value to whatever fixed width you prefer */
padding: 10px;
margin: 5px;
width: 47%;
}
img {
float: ri;
}
.container {
display: flex;
margin-top: 70px;
margin-left: 1%;
margin-right: 1%;
}
p {
font-size: 16pt;
margin-left: 20px;
}
h1,
h2,
h3,
p,
img,
li {
margin-left: 20px;
color: var(--text);
}
@media screen and (max-width: 1100px) {
.container {
flex-direction: column;
}
.item {
width: 90%;
height: auto;
}
}
html,
body {
max-width: 100%;
overflow-x: hidden;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="./index.html">Minust</a>
<a href="./resume.html">Rezümee</a>
<a href="./portfolio.html">Portfell</a>
</div>
<div id="filter-buttons">
<button data-filter="kõik"> <i class="fa-solid fa-border-all"></i> Kõik</button>
<button data-filter="powershell"> <i class="fa-solid fa-shrimp"></i> Powershell</button>
<button data-filter="markdown"> <i class="fa-brands fa-markdown"></i> Markdown</button>
<button data-filter="python"> <i class="fa-brands fa-python"></i> Python</button>
<button data-filter="bash"> <i class="fa-solid fa-terminal"></i> Bash</button>
<button data-filter="html"> <i class="fa-brands fa-html5"></i> HTML/CSS</button>
<button data-filter="võrguseadmed"> <i class="fa-solid fa-network-wired"></i> Võrguseadmed</button>
<button data-filter="mudel"> <i class="fa-solid fa-cube"></i> 3D mudelid</button>
</div>
<div class="container">
<div id="gallery">
<div class="item powershell">
<a href="https://github.com/Gren-95/efe-toolbox"> <img
src="./src/images/programming/powershell/powershell toolbox.png">
</a>
<h1>Efe Toolbox</h1>
<p>
See oli üks minu olulisemaid PowerShell projekte, mille ma lõin pärast ühe kursuse läbimist
suvevaheajal.
</p>
</div>
<div class="item powershell">
<a href="https://github.com/Gren-95/Shutdown-scripts-windows-10"> <img
src="./src/images/programming/powershell/powershell shutdown.png">
</a>
<h1>Shutdown script</h1>
<p>
See oli minu esimene katse luua programm PowerShell Forms abil. Tegin seda kergemeelselt, kuna
koolis avastasime klassiga ühe cmd käsu, mis võimaldas sulgeda samas võrgus olevaid arvuteid.
</p>
</div>
<div class="item powershell">
<a href="https://github.com/Gren-95/School-Sample">
<img src="./src/images/programming/powershell/powershell school sample.png">
</a>
<h1>School Sample</h1>
<p>
See oli minu näide õpetajale, et tulevikus ei peaks ta võtma nii kaua aega mõne erielemendi
lisamiseks järgmistel kursuste õpetamistel.
</p>
</div>
<div class="item markdown">
<a href="https://github.com/Gren-95/linux-school-work-nginx-samba-squid">
<img src="./src/images/programming/markdown/markdown skeem.png"></a>
<h1>Markdown homework</h1>
<p>
See oli minu kodutöö, mille otsustasin koostada Markdowni märgistuskeeles. Minu arvates ei olnud MS
Word hea valik koodi ja konfiguratsioonifailide esitamiseks.
</p>
</div>
<div class="item python">
<a href="https://github.com/Gren-95/Simple-file-converters">
<img src="./src/images/programming/python/python file converter.png"></a>
<h1>Simple batch file converter</h1>
<p>
See oli minu esimene katse luua Pythoni programm, mille ma tegin pärast esimese kursuse läbimist
vaheajal. </p>
</div>
<div class="item bash">
<a href="https://github.com/Gren-95/dnf-autosnap-basic">
<img src="./src/images/programming/bash/bash dnf autosnap.png"></a>
<h1>DNF autosnap</h1>
<p>
See on üks minu igapäevaselt kasutatavatest Bash skriptidest, mida kasutan enda arvuti töökorras
hoidmiseks. Timeshift programmi abil teen täieliku ketta varukoopia ja seejärel uuendan masina
paketid.
</p>
</div>
<div class="item html">
<a href="https://github.com/Gren-95/MyPortfolio">
<img src="./src/images/programming/html/portfolio1.png"></a>
<h1>Portfolio 1</h1>
<p>
See oli minu teine portfell, mille otsustasin luua kasutades HTML-i ja CSS-i. Selle aluseks võtsin
teise toimiva portfelli ning majutan seda GitHub Pages teenuse abil.
</p>
</div>
<div class="item html">
<a href="https://github.com/Gren-95/MyPortfolio2">
<img src="./src/images/programming/html/portfolio2.png"></a>
<h1>Portfolio 2</h1>
<p>
Mulle meeldib, kuidas uus disain mu portfelli värskendab ja mu tööd esile tõstab. Lisaks
uuenduslikule välimusele lisasin ka uusi projekte, mis kajastavad minu arenevaid oskusi ja
loomingulisust. </p>
</div>
<div class="item html">
<a href="https://github.com/Gren-95/Myportfolio3">
<img src="./src/images/programming/html/portfolio3.png"></a>
<h1>Portfolio 3</h1>
<p>
Olen uhke, et suutsin selle portfelli luua algusest lõpuni omaenda loomingulise visiooni ja
oskustega. See oli suur väljakutse, kuid samas ka äärmiselt rahuldustpakkuv protsess. Igas projekti
etapis pühendusin detailidele ning tagasin, et iga element kajastaks minu professionaalsust ja
pühendumist loomingulisele väljundile. </p>
</div>
<div class="item html">
<a href="https://github.com/Gren-95/School-html-css">
<img src="./src/images/programming/html/school.png"></a>
<h1>Learning Web development</h1>
<p>
See oli kooli tunnis õpitud HTML, mida ma nüüdseks olen hakanud iseseisvalt edasi arendama. Lisaks
põhialuste omandamisele olen uurinud ka CSS-i ja JavaScripti, et muuta oma veebilehed
interaktiivsemaks ja visuaalselt atraktiivsemaks.
</p>
</div>
<div class="item võrguseadmed">
<a href="./src/images/ip devices/config ip cam.jpg">
<img src="./src/images/ip devices/config ip cam.jpg"></a>
<h1>IP camera config</h1>
<p>
See IP-kaamera on tulemuslikult seadistatud tänu sellele, mida ma õppisin Ametikoolis. Ma olen
omandanud põhjalikud teadmised võrguühenduse seadistamisest, IP-aadresside määramisest ja portide
konfigureerimisest.
</p>
</div>
<div class="item võrguseadmed">
<a href="./src/images/ip devices/config ruckus ap.jpg">
<img src="./src/images/ip devices/config ruckus ap.jpg"></a>
<h1>AP config</h1>
<p>
Selle juurdepääsupunkti (AP) seadistamine on üks oskus, mille ma omandasin Ametikoolis. Ma õppisin,
kuidas konfigureerida AP-d nii, et need tagaksid tõhusa ja stabiilse traadita võrguühenduse.
</p>
</div>
<div class="item võrguseadmed">
<a href="./src/images/ip devices/config switch rack.jpg">
<img src="./src/images/ip devices/config switch rack.jpg"></a>
<h1>Switch config</h1>
<p>
See switch'i kapp on varustatud mitme switch'i ja teiste seadmetega, mille seadistamise oskuse
omandasin tänu Ametikoolis saadud haridusele. Ma õppisin, kuidas seadistada ja hallata
võrguseadmeid, tagades tõhusa andmeedastuse ja võrgu turvalisuse.
</p>
</div>
<div class="item võrguseadmed">
<a href="./src/images/ip devices/config tv.jpg">
<img src="./src/images/ip devices/config tv.jpg"></a>
<h1>Mounting TV</h1>
<p>
Siin on ühe klassiruumi multimeediaseade, mis koosneb neljast erinevast ekraanist. Samal ajal kui
teised õpilased lõpetasid ülesannet tunnis, aitasin mina õpetajat nende paigaldamisel.
</p>
</div>
<div class="item mudel">
<a href="./src/images/3d/3d cube.png">
<img src="./src/images/3d/3d cube.png"></a>
<h1>Cube</h1>
<p>
Esimese poole esimesest tunnist valmistasin 3D mudeli navigatsioonikuubikust. Algul arvasin, et
kaamera/vaate liigutamine selles keskkonnas võib olla keeruline, kuna see oli mulle võõras.
Üllatusin, et see osutus oodatust lihtsamaks. Hea asi selle tunni juures oli see, et ekraani vasakus
ülanurgas oli näidis olemas. Selle tunni eesmärk oli õppida, kuidas lisada teksti ja kuidas 3D
mudelid omavahel käituvad. Oleksin võinud õppida ka Tinkercad keskkonnas navigeerimist. Kui olukord
korduks, teeksin seda ülesannet kiiremini ja parema kvaliteediga.
</p>
</div>
<div class="item mudel">
<a href="./src/images/3d/3d lego.png">
<img src="./src/images/3d/3d lego.png"></a>
<h1>Lego 2x4 punane klots</h1>
<p>
Teise poole esimeses tunnis valmistasin 3D mudeli Lego 2x4 punasest klotsist ning õppisin kasutama
Tinkercad keskkonda. Mõtlesin, et mudeli loomine võib olla tüütu, kuna selles oli palju erineva
suurusega kujundeid. Positiivne oli see, et oli olemas skeem, millelt sai mõõtmeid võtta. Selle
tunni eesmärk oli õppida, kuidas üldiselt sarnased programmid toimivad. Oleksin võinud veel õppida,
kuidas kasutada Tinkercad keskkonda. Kui olukord korduks, teeksin töö kiiremini.
</p>
</div>
<div class="item mudel">
<a href="./src/images/3d/3d stool.png">
<img src="./src/images/3d/3d stool.png"></a>
<h1> Taburett </h1>
<p>
Kolmandas tunnis modelleerisin tabureti, kasutades selleks Sketchup keskkonda. Märkasin, et
Sketchupis on modelleerimine veidi keerulisem kui Tinkercadis, eriti navigeerimise osas. Kui sain
aga selle keskkonnaga veidi harjunud, läks minu töö kiiremini edasi. Selle tunni eesmärk oli tutvuda
uue rakendusega ning õppida selle eripärasid võrreldes Tinkercadiga. Oleksin võinud selles
keskkonnas rohkem tööriistu õppida ja kuidas neid praktiliselt kasutada. Kui olukord korduks,
teeksin tööd kiiremini.
</p>
</div>
<div class="item mudel">
<a href="./src/images/3d/3d bench.png">
<img src="./src/images/3d/3d bench.png"></a>
<h1>Pink</h1>
<p>
Teise poole kolmandast tunnist tegin lisaülesandena modernse pingi. Selles töös tundsin, et sain töö
tehtud täiuslikult. Mind häiris see, et Sketchup tegi vahepeal imelikke otsuseid ja ei joondanud
asju automaatselt. Selle situatsiooni mõte oli see, et õpliastel kellel oli eelmine töö tehtud,
saaks enda aega sisustada Sketchup programmi kasutamisega. Oleks saanud lisada veel mõned osad, et
see mudel oleks realistlikum. Kui peaksin seda tööd uuesti tegema, siis kasutaksin paremat hiirt, et
navigeerida kiiremini ja paremini.
</p>
</div>
<div class="item mudel">
<a href="./src/images/3d/3d castle.png">
<img src="./src/images/3d/3d castle.png"></a>
<h1>Loss</h1>
<p>
Neljandas tunnis hakkasin tegema lossi, millel olid värav, seinad, kaitsekraav ja vibutorn. Tundsin,
et selle lossi tegemine oleks olnud ilma näidiseta raske, kuid sain hakkama. Jätkuvalt pole ma
harjunud kaamera/vaate liigutamisega, kuna selle jaoks pean kasutama ainult hiirt või puuteplaati,
mitte WASD või nooleklahve. Selle situatsiooni mõte oli midagi suurt teha ja sellest animatsioon
teha. Oleks saanud kõike korralikumalt ja ühtlasemalt teha. Kui alustaksin uuesti, siis oleks töö
kvaliteetsem ja läbimõeldum.
<br><br>
<a href="https://drive.google.com/file/d/1jqUVDDhDs8jPSaB7c1Z6SDdsghkpF9Nn/view?pli=1" style=" text-decoration: none;
color: var(--text);
font-weight: 800;
font-size: 16pt;">Video</a>
</p>
</div>
<div class="item mudel">
<a href="./src/images/3d/3d snowflake.png">
<img src="./src/images/3d/3d snowflake.png"></a>
<h1>Lumehelbed</h1>
<p>
Viiendas tunnis tegin 4 erinevat lumehelvest komponentse tööriista abiga. Alguses ei saanud ma aru,
kuidas joondada lumehelbeid korralikult, kuid peale katsetamist taipasin, kuidas neid teha kiirelt
ja efektiivselt. Seekord oli asi lihtne, kuna kõik, mis tegin oli 2D. Selle tunni mõte oli näidata,
kuidas component- tööriista saab kasutada. Oleks võinud pöörata enam tähelepanu disainile. Kui
tuleks veel lumehelbeid teha, siis uuriksin internetist erinevaid disaine, mille järgi ideid
eelnevalt koguda ja teha enda töö paremaks.
</p>
</div>
<div class="item mudel">
<a href="./src/images/3d/3d house.png">
<img src="./src/images/3d/3d house.png"></a>
<h1>Maja</h1>
<p>
Kuuendast kuni kaheksanda tunnini tegin valmis ühekorruselise maja. Mööbli lisamisel poleks arvanud,
et Sketchup veebirakendus hakkiks nii palju, et poleks võimalik korralikult liigutada ning
sellepärast võtsin kasutusele Sketchup Pro rakenduse. Selle töö käigus sain aru, et sketchup võib
teha suvalisi ühendusi ning eemaldada paari seina ning põrandat. Seda ülesannet tehes tegin kaks
maja, kuid esimest maja ei lõpetanud, kuna see oli päris kehvasti tehtud. Selle situatsooni mõte oli
see, et teha suurem projekt joonise ja piltide järgi. Oleks saanud Esimiese maja valmis teha, mis
oleks olnud kahe korruseline. Kui situatsioon kordub teeksin üks korrus korraga ning sisustaks maja
enne kui teise korrusega alustaksin.
</p>
</div>
<div class="item mudel">
<a href="./src/images/3d/3d tank.png">
<img src="./src/images/3d/3d tank.png"></a>
<h1>Renault FT-17</h1>
<p>
Kahe nädalavahetusega tegin valmis prantsuse Renault FT-17 tangi. Seda tööd tehes ma ei järginud töö
juhendit nii täpselt, kuna ma ei kasuta Windows kümmet ning arvasin, et selle asemel oleks mul parem
leida programm, mida ma tulevikus võiksin isegi kasutada ma tulevikus võiksin isegi kasutada vabal
ajal ilma litsensi tasuta. Blender programmi õppimise ajal poleks arvanud, et ma oleks asjad nii
kiiresti tava kasutaja tasemel selgeks õppinud. Ma poleks arvanud, et enamus blender kiirklahvide
meelde jätmine oleks nii lihtne. Suureks ajakuluks oli aga keerukas uus kasutaja liides mulle.
Situatsooni mõte oli see, et praktika ajal oleks meil midagi muud teha vabal ajal. Oleks saanud
veelgi detailsemalt tangi teha või isegi detailsem tekstuur lisada. Kui saaksin seda uuesti teha,
teeksin kõik kiiremini.
</p>
</div>
</div>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function () {
const filterButtons = document.querySelectorAll('#filter-buttons button');
const galleryItems = document.querySelectorAll('#gallery .item');
filterButtons.forEach(button => {
button.addEventListener('click', function () {
const category = this.dataset.filter;
galleryItems.forEach(item => {
if (category === 'kõik' || item.classList.contains(category)) {
item.style.display = 'inline-block';
} else {
item.style.display = 'none';
}
});
});
});
});
</script>
</html>