-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
198 lines (186 loc) · 9.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attila Komaromi</title>
<!-- Custom stylesheet -->
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- Animate CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- Favicon links -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<!-- Open Graph meta tags -->
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Attila Komaromi's Portfolio Website" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="http://attilakomaromi.ca/" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website" />
<meta prefix="og: http://ogp.me/ns#" property="og:description" content="Check out my amazing work and see what skills I have to offer." />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="http://attilakomaromi.ca/img/og_img.jpg" />
</head>
<body>
<!-- the preload-div -->
<div class="pre-load">
<div>Loading</div>
</div>
<!-- ========== Nav bar ========== -->
<nav>
<div id="logo">
<img src="img/logo.png">
</div>
<ul>
<li id="li_1"><a>About Me</a></li>
<li id="li_2"><a>Projects</a></li>
<li id="li_3"><a>What I can offer</a></li>
</ul>
</nav>
<!-- ========== Nav bar end ========== -->
<!-- ========== Header animation text ========== -->
<div id="home_text" class="parallax">
<div id="text_cont">
<h1><span>Attila</span> Komaromi</h1>
<h4>it's about being</h4>
<h3 id="targetTxtl">Extraordinary</h3>
<h3 id="targetTxt2">Imaginative</h3>
<h3 id="targetTxt3">Innovative</h3>
</div>
</div>
<!-- ========== Header animation text end ========== -->
<!-- ========== About me ========== -->
<div id="main-about">
<h1>About Me</h1>
<p><span>Hey!</span> my name is Attila and I'm a web developer. Ever since I was a child I have been interested in technology; I built my first desktop when I was only 11 years old. Eventually, I became so good at fixing computer issues that I started my own small home business fixing PCs for neighbours! I got my first taste of development and design when I started playing around with Flash and Actionscript in grade school and early highschool. I created a lot of cool animations as well as a few Flash games. However, come time for matriculation, I decided to study biology. Being a part of an intensive science-based curriculum helped me sharpen my critical thinking skills and allowed me to collaborate with others to solve challenging problems. Having completed this degree gave me the opportunity to apply for a graduate programming certificate, and here I am today working on what I truly enjoy—designing and developing web applications.<br><br>
As a developer, I'm constantly learning new technologies and looking for ways to challenge myself and expand my horizon. Feel free to browse through some of the things I've created (or currently working on) in my portfolio, or click on the links below in the footer to check out my other online profiles, and don't hesitate to send me a message if you'd like to grab some beers or just have a chat!</p>
</div>
<!-- ========== About me end ========== -->
<div id="proj-header">
<h1>Projects</h1>
</div>
<!-- ========== Our projects grid ========== -->
<div id="grid-container">
<div id="grid">
<!-- All images in this grid should have a 7:4 (width:height) aspect ratio, i.e. 1400px by 800px -->
<div class="item desaturate" data-source="proj_sources/proj1.html">
<img src="img/project_imgs/proj1.png">
<div>
<h3>Corporate Affairs</h3>
</div>
</div>
<div class="item desaturate" data-source="proj_sources/proj2.html">
<img src="img/project_imgs/proj2.png">
<div>
<h3>Aranka Csárda</h3>
</div>
</div>
<div class="item desaturate" data-source="proj_sources/proj3.html">
<img src="img/project_imgs/proj3.png">
<div>
<h3>Google Homepage</h3>
</div>
</div>
<div class="item desaturate" data-source="proj_sources/proj4.html">
<img src="img/project_imgs/proj4.png">
<div>
<h3>Circle Sounds</h3>
</div>
</div>
<div class="item desaturate" data-source="proj_sources/proj5.html">
<img src="img/project_imgs/proj5.png">
<div>
<h3>YelpCamp</h3>
</div>
</div>
</div>
</div>
<!-- ========== Our projects grid end ========== -->
<!-- ========== What I can offer section ========== -->
<div id="my_services_header">
<h1>What I can offer</h1>
</div>
<div id="my_services">
<div>
<div id="icon_holder"><i class="fa fa-desktop fa-5x" aria-hidden="true"></i></div>
<h3>Web Design & Development</h3>
<p id="left_p">Need a new website for your rock collection? I love designing unique websites and developing interactive applications. Whether it's a simple static website or a full-stack project—using my professional knowledge of front-end and back-end technologies, I'm happy to craft an idea into a masterpiece. I'll even make it work in Internet Explorer (if I really have to).</p>
</div>
<div>
<div id="icon_holder"><i class="fa fa-calendar-check-o fa-5x" aria-hidden="true"></i></div>
<h3>Up to Date</h3>
<p id="middle_p">Web development is a very dynamic field, not only are there at least a billion jQuery plugins and JavaScript libraries, but there's also a lot of different types of coffee I can drink. Choosing the right tools and the right coffee is very important. I am constantly learning, whether by networking with fellow developers, reading a new book, or enrolled in a course online.</p>
</div>
<div>
<div id="icon_holder"><i class="fa fa-smile-o fa-5x" aria-hidden="true"></i></div>
<h3>Creative & Enthusiastic</h3>
<p id="right_p">Coding is fun! That's the entire reason I'm here—in fact, you'll often find me on Codewars taking on new coding challenges, or on Reddit reading about cool things going on in the world of web development. Being excited about web development isn't the only thing that keeps me alive, it's the creativity—being able to turn any idea into reality, and I'm always thinking of new ideas that I can bring to life.</p>
</div>
</div>
<!-- ========== What I can offer end ========== -->
<!-- ========== Footer ========== -->
<footer>
<div id="left_foot">
<div id="send_msg_btn"><i class="fa fa-paper-plane" aria-hidden="true"></i><br>Send me a message</div>
</div>
<div id="right_foot">
<a href="https://ca.linkedin.com/in/attila-komaromi-58630217" target="_blank"><div><i class="fa fa-linkedin" aria-hidden="true"></i><br>LinkedIn</div></a>
<a href="https://github.com/Twinbird24" target="_blank"><div><i class="fa fa-github" aria-hidden="true"></i><br>GitHub</div></a>
<a href="http://codepen.io/attkom/" target="http://codepen.io/attkom/"><div><i class="fa fa-codepen" aria-hidden="true"></i><br>CodePen</div></a>
</div>
</footer>
<footer id="sub_footer">
</footer>
<!-- ========== Footer end ========== -->
<!-- ========== Our e-mail form pop-up ========== -->
<div id="pop-up">
<div id="popup-inner">
<h2>Send me a message.</h2>
<form action="https://formspree.io/[email protected]" method="POST">
<div id="name_wrapper">
<input id="name" placeholder="Name" name="name" type="text" required>
</div>
<div id="email_wrapper">
<input id="email" placeholder="E-mail" name="e-mail" type="email" required>
</div>
<textarea id="message" name="message" cols="30" rows="10" placeholder="Enter your message here"></textarea required>
<input type="hidden" name="_subject" value="Message from Portfolio Website" />
<!-- _format allows for me to receive plain text versions of emails for form submissions -->
<input type="text" name="_format" value="plain" style="display:none" />
<!-- _gotach is to prevent spam, if a value is provided, the submission will be silently ignored -->
<input type="text" name="_gotcha" style="display:none" />
<input type="submit" value="send">
</form>
<p><a id="popup-closeC">Close</a></p>
<a id="popup-closeX"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
</div>
<!-- ========== E-mail form pop-up end ========== -->
<!-- ========== Project pop-up ========== -->
<div id="proj_pop-up">
<div id="proj_popup-inner">
<div id="fade_container"></div>
<p><a id="proj_popup-closeC">Close</a></p>
<a id="proj_popup-closeX"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
</div>
<!-- ========== Project pop-up end ========== -->
<!-- Linking scripting tags -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!-- lettering.js code, used with textillate.js -->
<script src="js/jquery.lettering.js"></script>
<!-- textillate.js code, used with animate.css and lettering.js to create the main heading letter-by-letter text fades -->
<script src="js/jquery.textillate.js"></script>
<!-- JS library executing a function whenever you scroll to an element -->
<script src="js/noframework.waypoints.min.js"></script>
<!-- jQuery scrollTo plugin (by flesler) for easy nav scrolling -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>
<!-- Custom script.js for page -->
<script src="js/script.js"></script>
</body>
</html>
<!-- copyright 2016 Attila Komaromi -->