-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHTML
257 lines (198 loc) · 17.5 KB
/
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
<script src="http://raincake.com.br/wp-content/themes/raincake/js/jquery.mousewheel.js"></script> <!-- for slides -->
<!-- ==== Sources =========================-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<title>Robert Uivarosi - Portfolio</title>
<!-- Building the navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid container0">
<div class="navbar-header">
<button type="button" id="nav-button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h3>Robert Uivarosi</h3>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><div class ="btn-group"><button id="home"><a href="#homeANC">Home</a></button></div></li>
<li><div class ="btn-group"><button id="portfolio"><a href="#landingFolio">Portfolio</a></button></div></li>
<li><div class ="btn-group"><button id="about"><a href="#landingAboutMeAnk">About Me</a></button></div></li>
<li><div class ="btn-group"><button id="contact"><a href="#landingContactAnk">Contact</a></button></div></li>
</ul>
</div>
</nav>
</div> <!-- end of first container | end of navbar-->
<!-- Adding the 7 separate sections of the page -->
<!-- Section 1 Home -->
<a name="homeANC"></a>
<div class="container1 container">
<div class="wrapper">
<div class="content">
<div class="visible">
<ul class="effectClassUL">
<li id="name" class="centeredIntro">Robert Uivarosi</li>
<li id="welcome" class="centeredIntro">Welcome to my personal page !</li>
<li id="enjoy_stay" class="centeredIntro">Enjoy your stay !</li>
</ul>
</div>
</div>
</div> <!-- end of wrapper -->
</div> <!-- end of container1 | end of homepage -->
<!-- Section 2 A few words -->
<div class="container-fluid container2">
<div class="about_left_side">
<p class="about_me_intro">A few words...</p>
<p class="about_me_text">Hi! My name is Robert Uivarosi and I'm a <span class="txtHighlight">self–taught</span>, FCC <span class="txtHighlight">certified Front End Web Developer</span> working on becoming a Full Stack Web Developer. I am also a <span class="txtHighlight">Network Engineer graduate (2012)</span> but I have switched to web development because of my passion for coding and problem solving. I do believe life is about contribution, so if you need help with bringing your business to life on the web don't hesitate to get in touch. If you are interested in seeing my recent work just take a look below at some of my portfolio projects.</p>
<p class="about_me_text">Top programming skills:<span class="txtHighlight"> HTML, CSS, JavaScript.</span></p>
<p class="about_me_text" id="about_last_line">Other relevant experience with: <span class="txtHighlight">jQuery,Bootstrap, APIs, GitHub.</span></p>
<p class="about_me_text" id="bonus_linkenid">For additional information about my previously held positions, please check my <a href="https://www.linkedin.com/pub/robert-uivarosi/83/6a2/301" style="color:green;text-decoration:none" target="_blank" >Linked<i class="fa fa-linkedin"></i></a> account.</p>
</div><!-- end of left side | text intro-->
<div class="about_right_side">
<img class="img-responsive" id="me" src="https://avatars.githubusercontent.com/u/15540231?v=3">
</div> <!-- end of right side -->
</div> <!-- end of container 2 -->
<!-- Section 3 Portfolio -->
<span class="anchor" id="landingFolio"></span>
<div class="container-fluid container3 recent_Work">
<h3 id=section3_RecentWork>Recent work</h3>
<!-- <div class ="btn-group"><button id="frontEnd">Front End Projects</button></div>
<div class ="btn-group"><button id="dataVis">Data Visualization Projects </button></div>
<div class ="btn-group"><button id="backEnd">Back End Projects</button></div>
<div class ="btn-group"><button id="nonprofit">Nonprofit Projects</button></div>
<br><br>
<div class="thumbnails">
<div class="row"> These navigation buttons are not necessary yet-->
<!-- 1 2 3 -->
<div class="prjWrap">
<div class="col-xs-4 col-lg-4 projects"><a href="http://codepen.io/URobert/full/Boqvoj/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/Timer_fbgkgs.png" alt="Image missing"><p class="projNames">Pomodoro Timer</p></a></div>
</div>
<div class="prjWrap">
<div class="col-xs-4 col-lg-4 projects"><a href="http://codepen.io/URobert/full/WQgqve/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/QuoteMachine_xmlnuy.jpg" alt="Image missing"><p class="projNames">Quote Machine</p></a></div>
</div>
<div class="prjWrap">
<div class="col-xs-4 col-lg-4 projects"><a href="http://codepen.io/URobert/full/rxwLwE/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/SimonG_vn6i4x.png" alt="Image missing"><p class="projNames">Simon Game</p></a></div>
</div>
<!-- 4 5 6 -->
<div class="prjWrap">
<div class="col-xs-4 col-lg-4 projects"><a href="http://codepen.io/URobert/full/LpKOOa/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/Calc_nj45wr.png"><p class="projNames">JS Calculator</p></a></div>
</div>
<div class="prjWrap">
<div class="col-xs-4 col-lg-4 projects"><a href="http://codepen.io/URobert/full/adJYpZ/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/TicTacToe2_rgtndd.jpg"><p class="projNames">Tic Tac Toe Game</p></a></div>
</div>
<div class="prjWrap">
<div class="col-xs-4 col-lg-4 projects"><a href="http://codepen.io/URobert/full/GogJRZ/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/TwitchApp_h47drs.jpg" alt="Image missing"><p class="projNames">TwitchTv Status Check</p></a></div>
</div>
<!-- 7 8 9 -->
<div class="prjWrap">
<div class="col-xs-4 col-lg-4 projects"><a href="http://codepen.io/URobert/full/pgJXqX/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/FCCNews_r2hkxz.png" alt="Image missing"><p class="projNames">FCC News Page</p></a></div>
</div>
<div class="prjWrap">
<div class="col-xs-4 col-lg-4 projects"><a href="http://codepen.io/URobert/full/rxeXJB/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/v1455824158/WikiViewer_zzslrx.png" alt="Image missing"><p class="projNames">Wikipedia Viewer</p></a></div>
</div>
<div class="prjWrap">
<div class="col-xs-4 col-lg-4 projects"><a href="http://codepen.io/URobert/full/qOePda/" target="_blank"><img class="img-responsive prjImgClass" src ="http://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/WeatherApp_mncdcq.jpg" alt="Image missing"><p class="projNames">Local Weather App</p></a></div>
</div>
</div> <!-- end of container3 -->
<span class="anchor" id="landingAboutMeAnk"></span>
<!-- Section 4 More About Me -->
<div class="moreMe">
<div class="container container4">
<h3 id="section4_moreMe">More About Me </h3>
<div class="flexslider">
<div class="row">
<ul class="slides">
<li><img class="slidingIMGs" src="http://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/coder2_rqgbst.jpg" alt=""> <!-- end of col -->
<p class="slidingText"><strong>Code addict</strong><br>
I first discovered my passion for code writing while I was working on my second project on FCC, the Pomodoro Timer. It was challenging for a beginner and I just couldn't stop working at it. Later on I realized that I was working late nights, going to bed and waking up with coding challenges in mind. There are certain moments when I feel completely “wired”, in the zone. It is an incredible sense of flow… a feeling that I’m constantly craving for. My competitive nature also pushes me to constantly improve.</p>
<p class="slidingText">Results:<br>
<span class="txtHighlight moreMeStats">10 Front End Web Dev projects completed</span><br>
<span class="txtHighlight moreMeStats">114 straight days of coding (and counting)</span> <br>
<span class="txtHighlight moreMeStats">200+ FCC community members helped to debug their code</span>
</p>
</li> <!-- Code addict -->
<li><img class="slidingIMGs" src="http://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/G2_nfayiq.jpg" alt="">
<p class="slidingText"><strong>College Graduate</strong></p>
<p class="slidingText">Although our education does not describe us, it does have some weight on the way society perceives us. College was exciting, fun and offered some exclusive benefits (Work & Travel) and at times it was quite challenging! Apart of the actual things you learn, going through college makes you cope with high stress and extremely high workloads in a short period of time.</p>
<p class="slidingText"><span class="txtHighlight moreMeStats">Graduated as a: Network Engineer (Class of 2012)</p></span>
<p class="slidingText"><span class="txtHighlight moreMeStats">Bachelor's degree: Built the design for a wireless network that could offer coverage for the center of the campus and its three major buildings</p></span>
</li> <!-- Colledge Graduate-->
<li><img class="slidingIMGs" src="http://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/Traveler_c69sgl.jpg" alt="">
<p class="slidingText"><strong>Traveler</strong></p>
<p class="slidingText">"Traveling is the only thing you buy that makes you richer". Along the past several years I’ve always assigned a few weeks to go somewhere new. In my opinion everyone should take some time off every now and then to simply discover this beautiful world we live in. Books are great, and they can teach you many things but there is no better teacher than the road. Some of the best days of my life happened when I was abroad. When you travel you can get completely sucked out of the mundane life and the uniqueness of some places can forge memories that will last forever. </p>
</li> <!-- Traveler -->
<li><img class="slidingIMGs" src="http://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/SealFit_Trainee2_jwsmrc.jpg" alt="">
<p class="slidingText"><strong>SealFit Trainee</strong></p>
<p class="slidingText">Seal Fit is a training program developed by retired Navy Seal Commander Mark Divine. The training itself is very demanding and keeps you pushing yourself to the very limit each and every workout. It is a combination between CrossFit and military training and its aim is not only to strengthen your body but also your mind. When you keep pushing yourself and you overcome physical “limits” continuously, your view on what is possible and what’s not starts shifting. Finishing every workout feels very rewarding and empowering. </p>
</li> <!-- SealFit Trainee -->
<li><img class="slidingIMGs" src="http://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/Lover2_ydqtau.jpg" alt="">
<p class="slidingText"><strong>Lover</strong></p>
<p class="slidingText">With the risk of being cheesy I have to say that nothing reveals more of who we are but the people we choose to love. I can hardly make a presentation of who I am without including my significant other. We are often so consumed with everyday demands that we might not spend enough time with those who matter the most.</p>
</li>
<!-- Lover -->
<li><img class="slidingIMGs" src="http://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/sc2_njk3md.jpg" alt="">
<p class="slidingText"><strong>Starcraft 2 enthusiast</strong></p>
<p class="slidingText">I have been playing Starcraft 2 recreationally for a few years now with some breaks in between. <em>Legacy of the Void</em> brought me back to the game and fired up the competitor in me once again, so I started laddering again both 1v1 and 2v2. I also watch some games from the GSL whenever I've got the time. My favorite players are Maru, Innovation and Zest. Currently I’m playing only on weekends; if you want to play some good games leave me a message.</p>
<p class="slidingText"><span class="txtHighlight moreMeStats">Best Ranking:</p></span>
<p class="slidingText"><span class="txtHighlight moreMeStats">Top Diamond 1v1 – playing Random US (WOL) |
Top Diamond 2v2 – playing Random EU (LotV)</p></span>
</li> <!-- SC2 -->
</ul>
</div> <!-- end of row -->
</div> <!-- end of flexslider -->
</div> <!-- end of container -->
</div> <!--end of more me -->
<!-- Section 5 Contact intro -->
<span class="anchor" id="landingContactAnk"></span>
<div class="Contact_Me">
<h3 class="moreMeTextIntro">Get in touch </h3>
<p class="moreMeText">Do you like anything from above? Do you have a new business idea that you would like to bring to the web or would you like to upgrade your company's image on the www? Get in touch, so we can start talking about what you need, and then get it done. </p>
</div>
<!-- Section 6 Contact Form -->
<div class="container-fluid container6">
<div class="row">
<div class="col-md-6">
<h3 id="letsTalk">Leave me a message</h3>
<div class="Contact_FORM">
<form id="myForm" on.click="mailto:[email protected]">
<input type="text" name="firstname" id= "fname" class="inputFields" placeholder="First name*">
<input type="text" name="lastname" id="lname" class="inputFields" placeholder="Last Name"><br><br>
<input type="text" name="emailAddress" id="emailA" class="inputFields" placeholder="Email Address*">
<input type="text" name="Website" id="website" class="inputFields" placeholder="Website"><br><br>
<input type="text" name="Message" class="inputFields" placeholder="Message*" id="formMessage"><br><br>
<button id="sendEmailB">Send Email</button>
</form>
</div> <!-- end of contact_form -->
</div> <!--end of col-xs-6 -->
<!-- Section 7 Additional Info -->
<div class="col-md-6">
<div class="moreContactInfo">
<h3 id="Connect">Connect</h3>
<p id="bottomNote">Additional contact information can be found below. I will reply to all emails and requests as soon as possible. Thanks for visiting and have a great day!</p>
<div class="row">
<div class ="col-xs-8 col-xs-offset-4"><a href="https://twitter.com/RobertAxius" style="color:black" text-decoration:"none" target="_blank" ><button class="btn btn-default endbuttons"><i class="fa fa-twitter fa-fw"></i>Twitter</button></a></div>
<div class ="col-xs-8 col-xs-offset-4"><a href="https://github.com/URobert" style="color:black" text-decoration:"none" target="_blank" ><button class="btn btn-default endbuttons"><i class="fa fa-github"></i>Github</button></a></div>
<div class ="col-xs-8 col-xs-offset-4"><a href="https://www.linkedin.com/pub/robert-uivarosi/83/6a2/301" style="color:black" text-decoration:"none" target="_blank" ><button class="btn btn-default endbuttons"><i class="fa fa-linkedin"></i>Linkedin</button></a></div>
<div class ="col-xs-8 col-xs-offset-4"><a href="http://www.freecodecamp.com/urobert" style="color:black" text-decoration:"none" target="_blank" ><button class="btn btn-default endbuttons"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button></a></div>
</div><!--end of row-->
<p id="emailAddress"><strong>Email :</strong> [email protected]</p>
</div> <!-- end of col-md-6-->
</div> <!-- end of moreContactInfo -->
</div><!--end of "master" ROW for entire section -->
</div> <!--end of container6 -->
</div>
<!-- Footer -->
<div id="footer" class ="container-fluid">
<ul>
<div class="row rowcenter">
<div class="col-xs-3"><li><a href="#homeANC"><p>Home</p></a></li></div>
<div class="col-xs-3"><li><a href="#landingFolio"><p>Portfolio</p></a></li></div>
<div class="col-xs-3"><li><a href="#landingAboutMeAnk"><p>AboutMe</p></a></li></div>
<div class="col-xs-3"><li><a href="#landingContactAnk"><p>Contact</p></a></li></div>
</div> <!-- end of row -->
</ul>
</div>