-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.php
More file actions
339 lines (311 loc) · 23 KB
/
about.php
File metadata and controls
339 lines (311 loc) · 23 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
<?php include('assets/php/sessionStart.php'); ?>
<!DOCTYPE html>
<html lang="en">
<!-- Head, Navigation & Intro Section -->
<?php
$title = "About F2O";
include('assets/modular/head.php');
?>
<header>
<?php include('assets/modular/nav.php');?>
</header>
<body id="about">
<!-- Main -->
<main>
<div class="container-fluid">
<!-- About F2O Section -->
<section id="about-f2o" class="section">
<!-- Heading -->
<h1 class="section-heading wow fadeIn">About F2O</h1>
<hr class="between-sections">
<p class="section-description font-italic lead wow fadeIn">Are you interested in learning more about F2O, what are our misson, vision and our background story?</p>
<!-- Content -->
<div class="row row-eq-height">
<!-- First column -->
<div class="col-lg-4">
<div id="abt-mission" class="card-overlay wow fadeInLeft">
<div class="white-text text-center">
<div class="card-block">
<h3 class="card-title"><i class="fa fa-flag"></i> MISSION</h3>
<p>F2O mission is to provide a quality service and platform for both freelancers and organisations. We are devoted to providing freelancers with working opportunity with various organisations, without the need for them to seek for clients actively. Additionally, we aim to assists organisation with the skill sets they need that they do not have with their current team of staffs.</p>
</div>
</div>
</div>
</div>
<!-- /.First column -->
<!-- First column -->
<div class="col-lg-4">
<div id="abt-vision" class="card-overlay wow zoomIn">
<div class="white-text text-center">
<div class="card-block">
<h3 class="card-title"><i class="fa fa-eye"></i> VISION</h3>
<p>
F2O vision is to be the world's leading central platform for both organisation and freelancers. Where freelancers can get hired, and organisation can hire freelancers without any hassle.
</p>
</div>
</div>
</div>
</div>
<!-- /.First column -->
<!-- First column -->
<div class="col-lg-4">
<div id="abt-background" class="card-overlay wow fadeInRight">
<div class="white-text text-center">
<div class="card-block">
<h3 class="card-title"><i class="fa fa-info-circle"></i> BACKGROUND</h3>
<p>F2O was founded by Joel, a freelance Full-Stack Developer. He understands that there are times where freelancers are having difficulty getting clients. Moreover, how tiresome it could be to have to actively self-promote themselves to get potential clients. With that, he founded F2O with a vision to help freelancers to solve their dilemma.</p>
</div>
</div>
</div>
</div>
<!-- /.First column -->
</div>
</section>
<!-- /.About F2O Section -->
<hr>
<!-- Brand Identity Section -->
<section id="brand-identity" class="section feature-box">
<h1 class="section-heading wow fadeIn">F2O Brand Identity</h1>
<hr class="between-sections">
<p class="section-description font-italic lead wow fadeIn">Are you curious about how we got our brand identity, how did we come up with the name F2O, and how did we come up with our brand identity design?</p>
<!-- First row -->
<div class="row features-small align-items-center">
<!--First column-->
<div class="col-md-4">
<!-- First row -->
<div class="row wow fadeInLeft">
<div class="col-2">
<i class="fa fa-id-card teal-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Identity Name</h4>
<p class="grey-text text-justify">F2O in expanded form is Freelancers To Organisations. Additionally, we are providing a platform where freelancers can come to us and get hired by organisations. From there, if we were to shorten the sentence with only keywords, we came up with Freelancers To Organisations. Furthermore, to further shorten it in the form of acronyms we get F2O. Where, F is the initial letter of Freelancers, two (2) that sounds like To, and O is the initial letter of Organisations.</p>
<div class="height-30"></div>
</div>
</div>
<!-- /.First row -->
<!-- Second row -->
<div class="row wow fadeInLeft" data-wow-delay="0.4s">
<div class="col-2">
<i class="fa fa-paint-brush blue-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Primary Colour</h4>
<p class="grey-text text-justify">We pick the colour blue for our primary colour. To emphasise on the reason behind why we chose the colour blue is that the colour blue conveys the feeling of trust and security. We want our users to feel a sense of security when using our platform, and to be able to trust that we can provide a quality service.</p>
</div>
</div>
<!-- /.Second row -->
</div>
<!-- /.First column -->
<!-- Second column -->
<div class="col-md-4 mb-r center-on-small-only flex-center">
<div class="card hoverable wow zoomIn" data-wow-delay="0.2s">
<img class="img-fluid" src="assets/img/F2O-card.png" width="100%" alt="F2O">
<div class="card-block">
<p class="card-text text-justify">
<i class="fa fa-quote-left"></i> To be the world's leading central platform for both organisation and freelancers. <i class="fa fa-quote-right"></i>
</p>
</div>
</div>
</div>
<!-- /.Second column -->
<!-- Third column -->
<div class="col-md-4">
<!--First row-->
<div class="row wow fadeInRight">
<div class="col-2">
<i class="fa fa-picture-o red-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Identity Design</h4>
<p class="grey-text text-justify">When we were designing F2O identity logo, we wanted something unique yet clear. We experimented with various design. After many prototypes, we feel that this current design looks great, unique and still able to convey our brand name F2O in it. To be sure that anyone that took a glance at the logo could tell that it is F2O, we added an even clearer, and readable text F2O into the O of our identity logo design.</p>
<div class="height-30"></div>
</div>
</div>
<!-- /.First row -->
<!-- Second row-->
<div class="row wow fadeInRight" data-wow-delay="0.4s">
<div class="col-2">
<i class="fa fa-paint-brush cyan-text"></i>
</div>
<div class="col-10">
<h4 class="feature-title">Secondary Colour</h4>
<p class="grey-text text-justify">We pick the colour cyan for our secondary colour. To emphasise on the reason behind why we chose the colour cyan is that the colour cyan blends in well with blue. Moreover, The colour cyan conveys the feeling of creativity and friendship. We want to build a sense of friendship with our users, and the creativity of our platform idea.</p>
</div>
</div>
<!-- /.Second row -->
</div>
<!-- /.Third column -->
</div>
<!-- /.First row -->
</section>
<!-- /.Brand Identity Section -->
<hr>
<!-- About Founder Section -->
<section id="abt-founder" class="section feature-box">
<h1 class="section-heading wow fadeIn">About F2O Founder</h1>
<hr class="between-sections">
<p class="section-description font-italic lead wow fadeIn">Are you curious about the founder of F2O, about his stories, skills, and background?</p>
<div class="row justify-content-center">
<div class="col-xl-9 col-lg-12">
<!-- Card -->
<div id="card-founder" class="card testimonial-card hoverable wow zoomIn">
<div class="card-up wow">
</div>
<!-- Social buttons -->
<div class="card-share wow zoomIn">
<div class="social-reveal">
<!-- Website -->
<a href="https://jdesignera.com" type="button" class="btn-floating cyan" data-toggle="tooltip" data-placement="top" title="Website"><i class="fa fa-globe"></i></a>
<!-- Facebook -->
<a href="https://www.facebook.com/Joel.Lifes/" class="btn-floating btn-fb" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a>
<!-- Linkedin -->
<a href="https://www.linkedin.com/in/jdesignera/" class="btn-floating btn-li" data-toggle="tooltip" data-placement="top" title="Linkedin"><i class="fa fa-linkedin"></i></a>
<!-- Behance -->
<a href="https://www.behance.net/jdesignera/" class="btn-floating light-blue" data-toggle="tooltip" data-placement="top" title="Behance"><i class="fa fa-behance"></i></a>
<!-- Google+ -->
<a href="https://plus.google.com/111564702545940542779/" type="button" class="btn-floating btn-gplus" data-toggle="tooltip" data-placement="top" title="Google+"><i class="fa fa-google-plus"></i></a>
<!-- Email -->
<a href="mailto:[email protected]" class="btn-floating btn-email" data-toggle="tooltip" data-placement="top" title="Email"><i class="fa fa-envelope"></i></a>
</div>
<a class="btn-floating btn-action share-toggle primary-color float-right" data-toggle="tooltip" data-placement="top" title="Social Profiles"><i class="fa fa-share-alt"></i></a>
</div>
<!-- /.Social buttons -->
<!-- Photo -->
<div class="avatar wow zoomIn">
<img src="assets/img/Joel.jpg" class="rounded-circle img-responsive">
</div>
<!-- Content -->
<div class="card-block wow fadeIn">
<h4><strong>Joel</strong></h4>
<p>
<strong>Full-Stack Developer</strong><br/>
<span class="font-italic">Founder of <a href="https://jdesignera.com">J.Design</a> & <a href="http://localhost/">F2O</a></span>
</p>
<hr>
<h4>About Me</h4>
<p class="text-justify">
I am a Freelance Full-Stack Developer and Designer with my branding, J.Design. I have been in this industry since 2012. Furthermore, I am skilled in various programming languages and design skills.
</p>
<p class="text-justify">
I had previously founded Game-Nexus (game-nexus.net) in 2014 too, where I offer customers official digital game license by Steam, Origin, Ubisoft, Battlet.Net and NCSoft at a lower price than most other competitors in the market. In fact, I was one of the very first few to offer such service on Carousell too with a wide variety of game titles. I saw an opportunity in expanding Game-Nexus services to Carousell at that point when Carousell was still a new and modern platform. Furthermore, there was nearly no other competitor on Carousell that are in the digital game license industry at that time. However, due to personal commitments, I had to shut down Game-Nexus. Nonetheless, Game-Nexus has provided me with invaluable lessons.
</p>
<hr>
<h4 class="wow fadeIn">Skills <span class="special-amp">&</span> Tools</h4>
<br/>
<div class="chip white-text wow zoomIn" style="background-color: #EF652A;">
<img src="assets/img/skills/html5.png">
<strong>HTML</strong>
</div>
<div class="chip white-text wow zoomIn" data-wow-delay="0.2s" style="background-color: #33A9DC;">
<img src="assets/img/skills/css3.png">
<strong>CSS</strong>
</div>
<div class="chip white-text wow zoomIn" data-wow-delay="0.9s" style="background-color: #6181B6;">
<img src="assets/img/skills/php.png">
<strong>PHP</strong>
</div>
<div class="chip white-text wow zoomIn" data-wow-delay="1.3s" style="background-color: #EFC725;">
<img src="assets/img/skills/js.png">
<strong>JavaScript</strong>
</div>
<div class="chip white-text wow zoomIn" data-wow-delay="1.5s" style="background-color: #0769AD;">
<img src="assets/img/skills/jquery.png">
<strong>jQuery</strong>
</div>
<div class="chip white-text wow zoomIn" data-wow-delay="0.6s" style="background-color: #3990CB;">
<img src="assets/img/skills/ajax.png">
<strong>AJAX</strong>
</div>
<div class="chip white-text wow zoomIn" data-wow-delay="2s" style="background-color: #0075AF;">
<img src="assets/img/skills/mysql.png">
<strong>MySQL</strong>
</div>
<div class="chip white-text wow zoomIn" data-wow-delay="1.3s" style="background-color: #5382A1;">
<img src="assets/img/skills/java.png">
Java
</div>
<div class="chip white-text wow zoomIn" data-wow-delay="1.4s" style="background-color: #424242;">
<i class="fa fa-code"></i>
<strong>Objective-C</strong>
</div>
<div class="chip white-text wow zoomIn" data-wow-delay="1.2s" style="background-color: #0087C7;">
<i class="fa fa-code"></i>
<strong>C#</strong>
</div>
<div class="chip white-text red wow zoomIn" data-wow-delay="0.3s">
<i class="fa fa-cogs"></i>
Web Development
</div>
<div class="chip white-text teal wow zoomIn" data-wow-delay="1.9s">
<i class="fa fa-cogs"></i>
Software Development
</div>
<div class="chip white-text green wow zoomIn" data-wow-delay="0.9s">
<i class="fa fa-cogs"></i>
Mobile Application Development
</div>
<div class="chip white-text light-green wow zoomIn" data-wow-delay="1.4s">
<i class="fa fa-cogs"></i>
Web Application Development
</div>
<div class="chip white-text purple wow zoomIn" data-wow-delay="1s">
<i class="fa fa-paint-brush" style="font-weight: 600;"></i>
Web Design
</div>
<div class="chip white-text light pink wow zoomIn" data-wow-delay="1.4s">
<i class="fa fa-paint-brush" style="font-weight: 600;"></i>
Graphic Design
</div>
<div class="chip white-text deep-purple wow zoomIn" data-wow-delay="1.7s">
<i class="fa fa-paint-brush" style="font-weight: 600;"></i>
Brand Identity Design
</div>
<div class="chip white-text indigo wow zoomIn" data-wow-delay="1.7s">
<i class="fa fa-paint-brush" style="font-weight: 600;"></i>
User Interface Design
</div>
<div class="chip white-text blue-grey wow zoomIn" data-wow-delay="1.2s">
<i class="fa fa-pencil" style="font-weight: 600;"></i>
Content Writing
</div>
<a href="https://wordpress.org/" target="_blank">
<div class="chip white-text wow zoomIn" data-wow-delay="1.6s" style="background-color: #21759B;">
<i class="fa fa-wordpress"></i>
WordPress Development
</div>
</a>
<a href="http://www.adobe.com/sea/products/photoshop.html" target="_blank">
<div class="chip white-text wow zoomIn" data-wow-delay="0.5s" style="background-color: #31C5F0;">
<img src="assets/img/skills/photoshop.png">
Adobe Photoshop
</div>
</a>
<a href="http://www.adobe.com/sea/products/illustrator.html" target="_blank">
<div class="chip white-text wow zoomIn" data-wow-delay="0.9s" style="background-color: #F37021;">
<img src="assets/img/skills/illustrator.png">
Adobe Illustrator
</div>
</a>
<a href="https://www.sketchapp.com" target="_blank">
<div class="chip white-text wow zoomIn" data-wow-delay="1.5s" style="background-color: #FFAE00;">
<i class="fa fa-diamond"></i>
Sketch
</div>
</a>
</div>
<!-- /.Content -->
</div>
<!-- /.Card -->
</div>
</div>
</section>
<!-- /.About Founder Section -->
</div>
</main>
<?php
include('assets/modular/footer.php');
include('assets/modular/scripts.php');
?>
</body>
</html>