-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
809 lines (803 loc) · 35.3 KB
/
index.html
File metadata and controls
809 lines (803 loc) · 35.3 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
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
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
<!DOCTYPE html>
<html lang="en">
<head>
<title>Josh Koiro - Resume</title>
<meta property="og:title" content="Josh Koiro - Resume" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta property="twitter:card" content="summary_large_image" />
<style data-tag="reset-style-sheet">
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption { margin: 0; padding: 0;}button { background-color: transparent;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth }
</style>
<style data-tag="default-style-sheet">
html {
font-family: Nunito;
font-size: 18px;
}
body {
font-weight: 300;
font-style:normal;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
line-height: 1.55;
color: var(--dl-color-gray-black);
background-color: var(--dl-color-gray-white);
}
</style>
<link
rel="shortcut icon"
href="public/coffee-steam-icon.png"
type="icon/png"
sizes="32x32"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap"
data-tag="font"
/>
<!--This is the head section-->
<!-- <style> ... </style> -->
<style>
@keyframes shake {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(7deg);
}
50% {
transform: rotate(-5deg);
}
70% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slideIn {
0% {
margin-top:100vh;
}
30% {
margin-top:100vh;
}
100% {
margin-top:0;
}
}
@keyframes slideInFromRight {
0% {
transform: translateX(50%);
}
100% {
transform: translateX(0);
}
}
@keyframes slideInFromLeft {
0% {
transform: translateY(50%);
}
100% {
transform: translateY(0);
}
}
@-webkit-keyframes glowIn {
from {
text-shadow:
0 0 5px rgba(255,255,255,0),
0 0 10px rgba(255,255,255,0),
0 0 15px rgba(255,255,255,0),
0 0 20px rgba(153, 0, 255,0),
0 0 30px rgba(153, 0, 255,0),
0 0 40px rgba(153, 0, 255,0),
0 0 50px rgba(153, 0, 255,0),
0 0 100px rgba(153, 0, 255,0);
}
to {
text-shadow:
0 0 5px rgba(255,255,255,1),
0 0 10px rgba(255,255,255,1),
0 0 15px rgba(255,255,255,1),
0 0 20px rgba(153, 0, 255,1),
0 0 30px rgba(153, 0, 255,1),
0 0 40px rgba(153, 0, 255,1),
0 0 50px rgba(153, 0, 255,1),
0 0 100px rgba(153, 0, 255,1);
}
}
@-webkit-keyframes glowOut {
to {
text-shadow:
0 0 5px rgba(255,255,255,0),
0 0 10px rgba(255,255,255,0),
0 0 15px rgba(255,255,255,0),
0 0 20px rgba(153, 0, 255,0),
0 0 30px rgba(153, 0, 255,0),
0 0 40px rgba(153, 0, 255,0),
0 0 50px rgba(153, 0, 255,0),
0 0 100px rgba(153, 0, 255,0);
}
from {
text-shadow:
0 0 5px rgba(255,255,255,1),
0 0 10px rgba(255,255,255,1),
0 0 15px rgba(255,255,255,1),
0 0 20px rgba(153, 0, 255,1),
0 0 30px rgba(153, 0, 255,1),
0 0 40px rgba(153, 0, 255,1),
0 0 50px rgba(153, 0, 255,1),
0 0 100px rgba(153, 0, 255,1);
}
}
</style>
<link rel="stylesheet" href="./style.css" />
<script src="scrollFX.js" defer=""></script>
<script
src="https://raw.githubusercontent.com/JoshKoiro/JoshKoiro.github.io/master/scrollFX.js"
defer=""
></script>
</head>
<body>
<div>
<link href="./index.css" rel="stylesheet" />
<div class="home-container">
<header data-role="Accordion" class="home-header fadeIn">
<img src="public/signature-200h.png" alt="image" class="home-image" />
<div class="home-separator"></div>
<div class="home-container01">
<div class="home-container02">
<div data-role="AccordionHeader" class="home-accordion-header">
<svg viewBox="0 0 1024 1024" class="home-icon">
<path
d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
></path>
</svg>
</div>
<div data-role="AccordionContent" class="home-accordion-content">
<div class="home-nav">
<nav
class="navigation-links1-nav navigation-links1-root-class-name20"
>
<a
href="#about-me"
class="navigation-links1-link hoverGlow"
>
<span>About</span>
</a>
<a
href="#experience"
class="navigation-links1-link1 hoverGlow"
>
<span>Experience</span>
</a>
<a
href="#knowledge"
class="navigation-links1-link2 hoverGlow"
>
<span>Knowledge</span>
</a>
<a
href="#history"
class="navigation-links1-link3 hoverGlow"
>
<span>Career</span>
</a>
</nav>
</div>
</div>
</div>
<div class="home-container03">
<nav class="home-nav1">
<nav
class="navigation-links1-nav navigation-links1-root-class-name19"
>
<a href="#about-me" class="navigation-links1-link hoverGlow">
<span>About Me</span>
</a>
<a
href="#experience"
class="navigation-links1-link1 hoverGlow"
>
<span>Experience</span>
</a>
<a
href="#knowledge"
class="navigation-links1-link2 hoverGlow"
>
<span>Knowledge</span>
</a>
<a href="#history" class="navigation-links1-link3 hoverGlow">
<span>Career</span>
</a>
</nav>
</nav>
</div>
<div class="home-social-bar">
<a
href="https://www.linkedin.com/in/jkoiro/"
target="_blank"
rel="noreferrer noopener"
class="home-link"
>
<svg
viewBox="0 0 877.7142857142857 1024"
class="home-icon02 social-links-header wobble"
>
<path
d="M135.429 808h132v-396.571h-132v396.571zM276 289.143c-0.571-38.857-28.571-68.571-73.714-68.571s-74.857 29.714-74.857 68.571c0 37.714 28.571 68.571 73.143 68.571h0.571c46.286 0 74.857-30.857 74.857-68.571zM610.286 808h132v-227.429c0-121.714-65.143-178.286-152-178.286-70.857 0-102.286 39.429-119.429 66.857h1.143v-57.714h-132s1.714 37.143 0 396.571v0h132v-221.714c0-11.429 0.571-23.429 4-32 9.714-23.429 31.429-48 68-48 47.429 0 66.286 36 66.286 89.714v212zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"
></path>
</svg>
</a>
<a
href="https://medium.com/@josh.koiro"
target="_blank"
rel="noreferrer noopener"
class="home-link1"
>
<svg
viewBox="0 0 1024 1024"
class="home-icon04 social-links-header wobble"
>
<path
d="M341.143 240.571v670.286c0 17.714-8.571 34.286-28 34.286-6.857 0-13.143-1.714-18.857-4.571l-265.714-133.143c-16-8-28.571-28.571-28.571-45.714v-651.429c0-14.286 6.857-27.429 22.286-27.429 9.143 0 17.143 4.571 25.143 8.571l292 146.286c0.571 0.571 1.714 2.286 1.714 2.857zM377.714 298.286l305.143 494.857-305.143-152v-342.857zM1024 308.571v602.286c0 18.857-10.857 32-29.714 32-9.714 0-18.857-2.857-26.857-7.429l-252-125.714zM1022.286 240c0 2.286-295.429 481.714-318.286 518.286l-222.857-362.286 185.143-301.143c6.286-10.286 17.714-16 29.714-16 5.143 0 10.286 1.143 14.857 3.429l309.143 154.286c1.143 0.571 2.286 1.714 2.286 3.429z"
></path>
</svg>
</a>
<a
href="https://github.com/JoshKoiro"
target="_blank"
rel="noreferrer noopener"
class="home-link2"
>
<svg
viewBox="0 0 950.8571428571428 1024"
class="home-icon06 social-links-header wobble"
>
<path
d="M365.714 694.857c0 41.714-21.714 109.714-73.143 109.714s-73.143-68-73.143-109.714 21.714-109.714 73.143-109.714 73.143 68 73.143 109.714zM731.429 694.857c0 41.714-21.714 109.714-73.143 109.714s-73.143-68-73.143-109.714 21.714-109.714 73.143-109.714 73.143 68 73.143 109.714zM822.857 694.857c0-87.429-53.143-164.571-146.286-164.571-37.714 0-73.714 6.857-111.429 12-29.714 4.571-59.429 6.286-89.714 6.286s-60-1.714-89.714-6.286c-37.143-5.143-73.714-12-111.429-12-93.143 0-146.286 77.143-146.286 164.571 0 174.857 160 201.714 299.429 201.714h96c139.429 0 299.429-26.857 299.429-201.714zM950.857 594.286c0 63.429-6.286 130.857-34.857 189.143-75.429 152.571-282.857 167.429-431.429 167.429-150.857 0-370.857-13.143-449.143-167.429-29.143-57.714-35.429-125.714-35.429-189.143 0-83.429 22.857-162.286 77.714-226.286-10.286-31.429-15.429-64.571-15.429-97.143 0-42.857 9.714-85.714 29.143-124.571 90.286 0 148 39.429 216.571 93.143 57.714-13.714 117.143-20 176.571-20 53.714 0 108 5.714 160 18.286 68-53.143 125.714-91.429 214.857-91.429 19.429 38.857 29.143 81.714 29.143 124.571 0 32.571-5.143 65.143-15.429 96 54.857 64.571 77.714 144 77.714 227.429z"
></path>
</svg>
</a>
</div>
</div>
</header>
<div class="home-hero fadeIn">
<div class="home-container04 card delayFade">
<h1 class="home-text Greeting">Hi!</h1>
<div class="home-container05">
<h1 class="home-text01 Greeting">My name is Josh Koiro</h1>
</div>
<img
alt="image"
src="https://joshkoiro.github.io/public/Coffee-Steam.gif"
class="home-image1"
/>
<h2 class="home-text02 GreatingSub">
I am a manufacturing estimator by day and self-taught programmer
by night.
</h2>
</div>
</div>
<div class="separator home-separator1"></div>
<div
data-animation-class="animated-fade-in-out"
class="home-banner animated"
>
<div
data-animation-class="fly-left"
class="home-container06 fly-left-init animated"
>
<h1 id="about-me" class="home-text03 Section-Heading">About me</h1>
<span class="home-text04">
<span class="Content">
I have 10 years of experience learning and using JavaScript from
the ground up, creating web applications built on Node.JS.
</span>
<br class="Content" />
<br class="Content" />
<span class="Content">
In my professional life, I have 5 years of expertise in
utilizing VBA, Microsoft Excel and SQL Server to develop
internal tools for a sales and estimating team. This includes
reporting applications, dashboards, document generation, and
sophisticated product line configuration forms.
</span>
<span>
I also have experience in my personal life building and
developing Docker containers, managing a multi-level home
server, and working with REST APIs.
</span>
<br class="Content" />
<br class="Content" />
<span class="Content">
My knowledge and passion encompasses a wide range of digital
tools including graphic design, AI technology, music and video
production.
</span>
<br class="Content" />
<br class="Content" />
<span class="Content">
I have a deep love of learning that drives me to continuously
adapt to new tools and technologies ensuring that I remain at
the forefront of the ever-evolving digital landscape of the
modern tech industry.
</span>
</span>
</div>
<div
data-animation-class="fly-right"
class="home-container07 fly-right-init animated"
></div>
</div>
<div class="separator home-separator2"></div>
<div
data-animation-class="animated-fade-in-out"
class="home-features animated"
>
<h1 id="experience" class="home-text16 Section-Heading">
<span>Experience</span>
<br />
</h1>
<span class="home-text19">
Technologies that I've built projects using
</span>
<div class="home-container08">
<div class="card slide-left">
<img
alt="image"
src="public/nodejs-logo-fbe122e377-seeklogo.com-200w.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Node JS</span>
</h2>
<span class="feature-card3-text1">
<span>Express servers, APIs and backend development.</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/ext-550-200h.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>SQL Server</span>
</h2>
<span class="feature-card3-text1">
<span>
complex report queries, using enterprise-level database
systems.
</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/docker-logo-cf97d0124b-seeklogo.com-200h.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Docker</span>
</h2>
<span class="feature-card3-text1">
<span>Container development, management and deployment.</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/microsoft_excel_2013-2019_logo.svg-200h.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Excel VBA</span>
</h2>
<span class="feature-card3-text1">
<span>
Excel as a rapid-prototype system for complex forms and
applications.
</span>
</span>
</div>
</div>
</div>
<div class="separator home-separator3"></div>
<div
data-animation-class="animated-fade-in-out"
class="home-features1 animated"
>
<h1 id="experience" class="home-text20 Section-Heading">
<span>Learning</span>
<br />
</h1>
<span class="home-text23">
<span>Technology that I'm currently learning</span>
<br />
</span>
<div class="home-container09">
<div class="card slide-left">
<img
alt="image"
src="public/golang-logo-200w.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Golang</span>
</h2>
<span class="feature-card3-text1">
<span>Building performance-oriented Native applications.</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/computer-science-200h.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Computer Science</span>
</h2>
<span class="feature-card3-text1">
<span>Asking the how and why questions.</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/icon-200h.ico"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Unit Testing</span>
</h2>
<span class="feature-card3-text1">
<span>Writing and refactoring reliable code.</span>
</span>
</div>
</div>
</div>
<div class="separator home-separator4"></div>
<div
data-animation-class="animated-fade-in-out"
class="home-features2 animated"
>
<h1 id="knowledge" class="home-text26 Section-Heading">
<span>Knowledge</span>
<br />
</h1>
<span class="home-text29">
<span class="home-text30">
My range of interests and experience across industries
</span>
<br />
</span>
<div class="home-container10">
<div class="card slide-left">
<img
alt="image"
src="public/adobe_photoshop_cc_icon.svg-200h.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Graphic Design</span>
</h2>
<span class="feature-card3-text1">
<span>
Over 10 years experience using Photoshop and Illustrator.
</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/html.svg"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Web Design</span>
</h2>
<span class="feature-card3-text1">
<span>
Building webpages and utilizing web technology in nearly every
programming project.
</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/prompt-engineering1-200w.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Prompt Engineering</span>
</h2>
<span class="feature-card3-text1">
<span>
Working to be at the forefront of understanding and utilizing
AI tech.
</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/medium.svg"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Writing</span>
</h2>
<span class="feature-card3-text1">
<span>Blogging and technical writing.</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/solidworks_250x250-200h.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>3D Modeling</span>
</h2>
<span class="feature-card3-text1">
<span>
5+ years experience using SolidWorks in a professional
engineering capacity.
</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/bash-icon-200h.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading"><span>Bash</span></h2>
<span class="feature-card3-text1">
<span>Automation scripts and getting things done.</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/mixer-icon-200h.png"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Sound Engineering</span>
</h2>
<span class="feature-card3-text1">
<span>
Highly technical knowledge and experience with live sound.
</span>
</span>
</div>
<div class="card slide-left">
<img
alt="image"
src="public/ableton.svg"
class="feature-card3-image wobble"
/>
<h2 class="feature-card3-text Card-Heading">
<span>Music Production</span>
</h2>
<span class="feature-card3-text1">
<span>
I'm passionate about music, music creation, and music
production for 15+ years.
</span>
</span>
</div>
</div>
</div>
<div class="separator home-separator5"></div>
<div
data-animation-class="animated-fade-in-out"
class="home-steps animated"
>
<h1 id="history" class="home-text32 Section-Heading">
My Career History
</h1>
<span class="home-text33">
<span>How I've got to where I am now</span>
<br />
</span>
<div class="home-container11">
<div class="home-step">
<div class="home-container12">
<div class="home-line"></div>
<div class="home-container13">
<svg viewBox="0 0 1097.142857142857 1024" class="home-icon08">
<path
d="M352.571 799.429l-28.571 28.571c-7.429 7.429-18.857 7.429-26.286 0l-266.286-266.286c-7.429-7.429-7.429-18.857 0-26.286l266.286-266.286c7.429-7.429 18.857-7.429 26.286 0l28.571 28.571c7.429 7.429 7.429 18.857 0 26.286l-224.571 224.571 224.571 224.571c7.429 7.429 7.429 18.857 0 26.286zM690.286 189.714l-213.143 737.714c-2.857 9.714-13.143 15.429-22.286 12.571l-35.429-9.714c-9.714-2.857-15.429-13.143-12.571-22.857l213.143-737.714c2.857-9.714 13.143-15.429 22.286-12.571l35.429 9.714c9.714 2.857 15.429 13.143 12.571 22.857zM1065.714 561.714l-266.286 266.286c-7.429 7.429-18.857 7.429-26.286 0l-28.571-28.571c-7.429-7.429-7.429-18.857 0-26.286l224.571-224.571-224.571-224.571c-7.429-7.429-7.429-18.857 0-26.286l28.571-28.571c7.429-7.429 18.857-7.429 26.286 0l266.286 266.286c7.429 7.429 7.429 18.857 0 26.286z"
></path>
</svg>
</div>
<div class="home-line1"></div>
</div>
<div class="home-container14">
<h1 class="home-text36">Web Design</h1>
<span class="home-text37">
<span>
I spent a year and a half between high school and college
learning the basics of web design and providing some
services for clients.
</span>
<br />
</span>
</div>
</div>
<div class="home-step1">
<div class="home-container15">
<div class="home-line2"></div>
<div class="home-container16">
<svg viewBox="0 0 961.6822857142856 1024" class="home-icon10">
<path
d="M219.429 841.143c0-20-16.571-36.571-36.571-36.571s-36.571 16.571-36.571 36.571 16.571 36.571 36.571 36.571 36.571-16.571 36.571-36.571zM587.429 601.143l-389.714 389.714c-13.143 13.143-32 21.143-51.429 21.143s-38.286-8-52-21.143l-60.571-61.714c-13.714-13.143-21.714-32-21.714-51.429s8-38.286 21.714-52l389.143-389.143c29.714 74.857 89.714 134.857 164.571 164.571zM949.714 352.571c0 18.857-6.857 42.286-13.143 60.571-36 101.714-133.714 172-241.714 172-141.143 0-256-114.857-256-256s114.857-256 256-256c41.714 0 96 12.571 130.857 36 5.714 4 9.143 9.143 9.143 16 0 6.286-4 12.571-9.143 16l-167.429 96.571v128l110.286 61.143c18.857-10.857 151.429-94.286 162.857-94.286s18.286 8.571 18.286 20z"
></path>
</svg>
</div>
<div class="home-line3"></div>
</div>
<div class="home-container17">
<h1 class="home-text40">Computer Aided Drafting</h1>
<span class="home-text41">
<span>
I graduated with a 2 year degree in Computer-Aided Drafting
and was hired by a manufacturing company as a mechanical
engineer.
</span>
<br />
</span>
</div>
</div>
<div class="home-step2">
<div class="home-container18">
<div class="home-line4"></div>
<div class="home-container19">
<svg
viewBox="0 0 1170.2857142857142 1024"
class="home-icon12"
>
<path
d="M365.714 512v292.571h-146.286v-292.571h146.286zM585.143 219.429v585.143h-146.286v-585.143h146.286zM1170.286 877.714v73.143h-1170.286v-877.714h73.143v804.571h1097.143zM804.571 365.714v438.857h-146.286v-438.857h146.286zM1024 146.286v658.286h-146.286v-658.286h146.286z"
></path>
</svg>
</div>
<div class="home-line5"></div>
</div>
<div class="home-container20">
<h1 class="home-text44">Estimating</h1>
<span class="home-text45">
<span>
I transitioned to the role of sales estimating and have
taken on many tasks involving process improvement
specifically by programming tools to improve speed, accuracy
and ease of use.
</span>
<br />
</span>
</div>
</div>
<div class="home-step3">
<div class="home-container21">
<div class="home-line6"></div>
<div class="home-container22">
<svg viewBox="0 0 1024 1024" class="home-icon14">
<path
d="M0 64v640h1024v-640h-1024zM960 640h-896v-512h896v512zM672 768h-320l-32 128-64 64h512l-64-64z"
></path>
</svg>
</div>
<div class="home-line7"></div>
</div>
<div class="home-container23">
<h1 class="home-text48">The Next Big Thing!</h1>
<span class="home-text49">
<span>
Reach out to me on LinkedIn or other social networks if you
think your company would be a good fit as a next step in my
career.
</span>
<br />
</span>
</div>
</div>
</div>
</div>
<div class="separator home-separator6"></div>
<div
data-animation-class="animated-fade-in-out"
class="home-container24 animated"
>
<div class="home-container25">
<h1 id="socials" class="home-text52 Section-Heading">
Find Me on Social Media
</h1>
<div class="home-social-bar1">
<a
href="https://www.linkedin.com/in/jkoiro/"
target="_blank"
rel="noreferrer noopener"
class="home-link3"
>
<svg
viewBox="0 0 877.7142857142857 1024"
class="home-icon16 social-links wobble"
>
<path
d="M135.429 808h132v-396.571h-132v396.571zM276 289.143c-0.571-38.857-28.571-68.571-73.714-68.571s-74.857 29.714-74.857 68.571c0 37.714 28.571 68.571 73.143 68.571h0.571c46.286 0 74.857-30.857 74.857-68.571zM610.286 808h132v-227.429c0-121.714-65.143-178.286-152-178.286-70.857 0-102.286 39.429-119.429 66.857h1.143v-57.714h-132s1.714 37.143 0 396.571v0h132v-221.714c0-11.429 0.571-23.429 4-32 9.714-23.429 31.429-48 68-48 47.429 0 66.286 36 66.286 89.714v212zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"
></path>
</svg>
</a>
<a
href="https://medium.com/@josh.koiro"
target="_blank"
rel="noreferrer noopener"
class="home-link4"
>
<svg
viewBox="0 0 1024 1024"
class="home-icon18 social-links wobble"
>
<path
d="M341.143 240.571v670.286c0 17.714-8.571 34.286-28 34.286-6.857 0-13.143-1.714-18.857-4.571l-265.714-133.143c-16-8-28.571-28.571-28.571-45.714v-651.429c0-14.286 6.857-27.429 22.286-27.429 9.143 0 17.143 4.571 25.143 8.571l292 146.286c0.571 0.571 1.714 2.286 1.714 2.857zM377.714 298.286l305.143 494.857-305.143-152v-342.857zM1024 308.571v602.286c0 18.857-10.857 32-29.714 32-9.714 0-18.857-2.857-26.857-7.429l-252-125.714zM1022.286 240c0 2.286-295.429 481.714-318.286 518.286l-222.857-362.286 185.143-301.143c6.286-10.286 17.714-16 29.714-16 5.143 0 10.286 1.143 14.857 3.429l309.143 154.286c1.143 0.571 2.286 1.714 2.286 3.429z"
></path>
</svg>
</a>
<a
href="https://github.com/JoshKoiro"
target="_blank"
rel="noreferrer noopener"
class="home-link5"
>
<svg
viewBox="0 0 950.8571428571428 1024"
class="home-icon20 social-links wobble"
>
<path
d="M365.714 694.857c0 41.714-21.714 109.714-73.143 109.714s-73.143-68-73.143-109.714 21.714-109.714 73.143-109.714 73.143 68 73.143 109.714zM731.429 694.857c0 41.714-21.714 109.714-73.143 109.714s-73.143-68-73.143-109.714 21.714-109.714 73.143-109.714 73.143 68 73.143 109.714zM822.857 694.857c0-87.429-53.143-164.571-146.286-164.571-37.714 0-73.714 6.857-111.429 12-29.714 4.571-59.429 6.286-89.714 6.286s-60-1.714-89.714-6.286c-37.143-5.143-73.714-12-111.429-12-93.143 0-146.286 77.143-146.286 164.571 0 174.857 160 201.714 299.429 201.714h96c139.429 0 299.429-26.857 299.429-201.714zM950.857 594.286c0 63.429-6.286 130.857-34.857 189.143-75.429 152.571-282.857 167.429-431.429 167.429-150.857 0-370.857-13.143-449.143-167.429-29.143-57.714-35.429-125.714-35.429-189.143 0-83.429 22.857-162.286 77.714-226.286-10.286-31.429-15.429-64.571-15.429-97.143 0-42.857 9.714-85.714 29.143-124.571 90.286 0 148 39.429 216.571 93.143 57.714-13.714 117.143-20 176.571-20 53.714 0 108 5.714 160 18.286 68-53.143 125.714-91.429 214.857-91.429 19.429 38.857 29.143 81.714 29.143 124.571 0 32.571-5.143 65.143-15.429 96 54.857 64.571 77.714 144 77.714 227.429z"
></path>
</svg>
</a>
</div>
</div>
</div>
<footer class="home-footer">
<span class="home-text53">
© 2023 Josh Koiro, All Rights Reserved.
</span>
</footer>
</div>
</div>
<script src="https://unpkg.com/@teleporthq/teleport-custom-scripts"></script>
</body>
</html>