-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (185 loc) · 12.3 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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio | Fedor Božík</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/aos.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
</head>
<body>
<header>
<div class="nav-bar">
<div class="nav-container">
<nav>
<ul class="navigation">
<li class="nav-initials"><a href="index.html"><strong class="initials">FB</strong></a></li>
<li class="nav-item"><a data-easing="easeInOutQuad" href="#contact"><i class="fas fa-paper-plane"></i><strong>Contact</strong></a></li>
<li class="nav-item"><a data-easing="easeInOutQuad" href="#skills"><i class="fas fa-code"></i><strong>Skills</strong></a></li>
<li class="nav-item"><a data-easing="easeInOutQuad" href="#experience"><i class="fas fa-bug"></i><strong>Experience</strong></a></li>
<li class="nav-item"><a data-easing="easeInOutQuad" href="#home"><i class="fas fa-home"></i><strong>Home</strong></a></li>
</ul>
<div class="menu">
<input class="menu" id="menu" type="checkbox">
<label for="menu"></label>
<ul class="slide">
<li><a data-easing="easeInOutQuad" href="#home"><i class="fas fa-home"></i><strong>Home</strong></a></li>
<li><a data-easing="easeInOutQuad" href="#experience"><i class="fas fa-bug"></i><strong>Experience</strong></a></li>
<li><a data-easing="easeInOutQuad" href="#skills"><i class="fas fa-code"></i><strong>Skills</strong></a></li>
<li><a data-easing="easeInOutQuad" href="#contact"><i class="fas fa-paper-plane"></i><strong>Contact</strong></a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<main id="home" class="main-content code-background">
<picture>
<source media="(max-width: 640px)" srcset="img/macbook-pro-desk-640x384.jpeg">
<source media="(max-width: 1280px)" srcset="img/macbook-pro-desk-1280x768.jpeg">
<source media="(max-width: 1920px)" srcset="img/macbook-pro-desk-1920x1153.jpeg">
<source media="(min-width: 3840px)" srcset="img/macbook-pro-desk-4102x2464.jpeg">
<img src="img/macbook-pro-desk-4102x2464.jpeg" alt="intro-image" style="max-width:100%;height:auto;">
</picture>
<div class="intro">
<h1 class="intro-text">Portfolio | Fedor Božík</h1>
</div>
<h2 class="intro-about">I'm an aspiring young developer, programmer and overall an IT guy, who wants to make a good career in this business and learn as much as possible about everything that web, coding, and other stuff entails</h2>
<section class="experience-section">
<div id="experience" class="container">
<div data-aos="zoom-in-down" class="timeline-item">
<h1>My experience</h1>
</div>
<div data-aos="zoom-in-down" class="timeline-item" date-is='July to October 2017'>
<h1>Summer Internship at AT&T as a PERL programming engineer</h1>
<p>Recording existing programs between shell script or PHP into PERL</p>
<ul>
<li>
<p>Enhancement of existing programs written in PERL</p>
</li>
<li>
<p>Troubleshooting, debugging and testing code</p>
</li>
<li>
<p>Documenting code changes and requirements for deployment of programs to the production environment</p>
</li>
<li>
<p>Designing, developing and recommending ways to improve code</p>
</li>
<li>
<p>Obtained experience in RedHat Linux, PERL, shell scripting and PHP as well as experience with UNIX systems</p>
</li>
</ul>
</div>
<div data-aos="zoom-in-down" class="timeline-item" date-is='2016'>
<h1>Front desk receptionist at Hotel Senec</h1>
<p>
Helping customers in person and on the phone under the supervision of the reception manager
</p>
<ul>
<li>
Two employees always present at the reception led to more experience in teamwork and understanding
</li>
</ul>
</div>
<div data-aos="zoom-in-down" class="timeline-item" date-is='2017'>
<h1>Simple arcade game made with some HTML, CSS and a lot of JavaScript</h1>
<p>
It was a project for school, finished after a whole semester of learning how to build interactive applications and how to interact with them, and learning JavaScript basically from scratch
</p>
<p>
You can see the game below this text, it is embedded from Codepen to allow it to run only after clicking on it and it is best viewed at a FullHD or 1920x1080 resolution screen, and if you want it not to be shifted and transformed to the background's image of a laptop, then please resize your browser to a lower resolution such as 1280x720 or also known as HD, or view it on a smaller screen or device, then it will be just normal size
</p>
</div>
</div>
</section>
<picture>
<source media="(max-width: 640px)" srcset="img/business-coffee-communication-640x426.jpeg">
<source media="(max-width: 1280px)" srcset="img/business-coffee-communication-1280x853.jpeg">
<source media="(max-width: 1920px)" srcset="img/business-coffee-communication-1920x1080.jpeg">
<source media="(min-width: 3840px)" srcset="img/business-coffee-communication-5472x3648.jpg">
<img src="img/business-coffee-communication-5472x3648.jpg" alt="intro-image" style="max-width:100%; height:auto;">
</picture>
<div class="codepen-embed-div">
<p data-height="564" data-theme-id="light" data-slug-hash="wjdKKM" data-default-tab="result" data-user="bozik" data-embed-version="2" data-pen-title="FB_Game_in_JS - PONG'd" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/bozik/pen/wjdKKM/">FB_Game_in_JS - PONG'd</a> by Fedor Božík (<a href="https://codepen.io/bozik">@bozik</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</div>
<section class="skills-section">
<div id="skills" class="container">
<div data-aos="zoom-in-down" class="timeline-item">
<h1>My skills</h1>
</div>
<div data-aos="zoom-in-down" class="timeline-item" date-is='Currently'>
<h1>HTML, CSS, JS and other web design and development experience</h1>
<p>I am currently studying in a Front-End Developer learning course, which is a paid course that is going to be finishing in the next months and finished with a certificate and a couple of projects to show off the work put into the whole course</p>
<ul>
<li>
<p>Developing projects and webpages in my own time too, always trying to learn more about the new technologies</p>
</li>
<li>
<p>Going to continue learning and want to learn about frameworks such as React, Node or Angular</p>
</li>
<li>
<p>I have worked for about 2 years now on HTML, CSS</p>
</li>
<li>
<p>And about less than 6 months worth of PHP, JS and PERL</p>
</li>
</ul>
</div>
<div data-aos="zoom-in-down" class="timeline-item" date-is='2017'>
<h1>Development and coding in pure C for school</h1>
<p>Working on various projects and team projects for school, learned C from scratch and reached a post-beginner skillset</p>
<ul>
<li>
<p>I have got about a year worth of C development experience from school and some of my work is on my Github profile</p>
</li>
</ul>
</div>
<div data-aos="zoom-in-down" class="timeline-item" date-is='2017'>
<h1>Smartphone webpage presentation project - HTML, CSS and PHP</h1>
<p>Project from school for a whole semester focusing a bit on PHP, but then on some photography and video editing and overall usage of multimedia in the whole project and the multimedia's correct implementation in the webpage</p>
<p>Under this section you can see a video showing this project - click anywhere on the video to pause - on mobile please click on the screenshot to start the video (mobile browsers won't autoplay video by default)</p>
</div>
</div>
</section>
<div class="bg-video-section">
<video poster="img/bg-video-thumbnail-poster.png" id="bgvid" playsinline autoplay muted loop>
<!--
- Video needs to be muted, since Chrome 66+ will not autoplay video with sound. -->
<source src="vid/bg-video-code-full-1920x1080-webm.webm" type="video/webm">
<source src="vid/bg-video-code-full-1920x1080-h264.mp4" type="video/mp4">
<source src="vid/bg-video-code-full-1920x1080-ogg.ogg" type="video/ogg">
<source src="vid/bg-video-code-full-1920x1080-hevc.mp4" type="video/mp4">
</video>
</div>
<section id="contact" class="contact-form">
<h1>CONTACT FORM</h1>
<form id="form" class="topBefore">
<input name="subject" id="subject" type="text" placeholder="Subject">
<textarea name="message" id="message" placeholder="Message"></textarea>
<input id="submit" onclick="processSubmitEmailRequest();" type="submit" value="SEND MESSAGE">
</form>
</section>
</main>
<div class="social">
<a href="mailto:[email protected]" class="social__button mail"><i class="far fa-envelope"></i></a>
<a target="_blank" href="https://m.me/fedorbozik" class="social__button facebook"><i class="fab fa-facebook-f"></i></a>
<a target="_blank" href="https://www.linkedin.com/in/fedorbozik" class="social__button linkedin"><i class="fab fa-linkedin-in"></i></a>
<a target="_blank" href="https://github.com/fedorbozik" class="social__button github"><i class="fab fa-github"></i></a>
<a target="_blank" href="https://codepen.io/bozik/" class="social__button codepen"><i class="fab fa-codepen"></i></a>
</div>
<footer>
<div class="footer-content">
<h3> © Fedor Božík | 2018</h3>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/12.1.5/js/smooth-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
<script src="./js/main.js"></script>
</body>
</html>