-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·237 lines (213 loc) · 10.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sylvain's Portfolio</title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--Import materialize.css-->
<!-- <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> -->
<link rel="stylesheet" href="css/devicons.css">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/figureAnim.css" />
<link rel="stylesheet" href="css/portfolio.css">
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<nav class="blackBG">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li><a href="#about_me" class="scroll">About Me</a></li>
<li><a href="#education" class="scroll">Education</a></li>
<li><a href="#projects" class="scroll">Projects</a></li>
<li><a href="#contacts" class="scroll">Contacts</a></li>
</ul>
</div>
</nav>
<div class="hero">
<div class="introText">
<div class="profile"></div>
<h1>Sylvain</h1>
<p>I'm a Sydney based full-stack web developer loving web-apps and new technologies.</p>
<a href="#about_me" class="smoothscroll btn-outline">More About Me</a>
</div>
</div>
<div id="cbp-so-scroller" class="cbp-so-scroller">
<section id="about_me" class="feature inverse blackBG cbp-so-section">
<article class="cbp-so-side cbp-so-side-left">
<div class="left">
<i class="fa fa-info-circle"></i>
<h1>About Me</h1>
</div>
</article>
<article class="cbp-so-side cbp-so-side-right">
<div class="right">
<p><span style="font-weight:bold">Once upon a time</span>, A man from Paris decide to discover new horizons. He made the decision to travel around the world and meet different people.Without speaking another language than French, it would be a challenge - but he wasn't scared of what might come.</p>
<p>Nothing happened as he expected.He fell in love, first with the city where he landed and soon after, with a woman. A new dream was born: Who has never dreamt of starting a second life?</p>
<p>Learning the language, working, and finding his way were the priorities.Technologies and computers were always a passion. Some tutorials in web development a few years earlier reminded him to follow his dreams. Some people think about changing their life, he just did it..</p>
</div>
</article>
</section>
<section id="education" class="feature inverse veryBlackBG cbp-so-section">
<article class="cbp-so-side cbp-so-side-left">
<div class="left">
<i class="fa fa-graduation-cap"></i>
<h1>Education</h1>
</div>
</article>
<article class="cbp-so-side cbp-so-side-right">
<div class="right">
<h2>General Assembly</h2>
<p class="info"><a href="https://generalassemb.ly/education/web-development-immersive#overview">Web Development Immersive</a> | Nov. 2015-Feb. 2016</p>
<p>The Web Development Immersive course is a full-time, intensive 3-month course that teaches students the history of web development through to the current day including programming fundamentals, basics of product development, front-end web development, back-end web development and working in agile based teams.</p>
<h2>Tafe</h2>
<p class="info"><a href="http://tafenow.com.au/ica30111-web-technologies">Certificate 3 Digital Media & Web Technology</a> | July 2014-Jan2015</p>
<p>This course is for people who enjoy IT and want a head start into the basic range of web page technologies that are used in most IT-savvy workplaces.
Discover more about creating web pages, using the features of popular computer applications, interacting with social media, creating web-based animations, as well as basic fault finding and care of hardware.</p>
<h2>Greenwich English College</h2>
<p><a href="http://www.greenwichcollege.com.au/courses/cert-iv-in-academic-english/">Certificate 4 English for Academic Purposes</a> | March 2014-June 2014</p>
<p>Before starting my Tafe course, I decided to improve my academic English level with this course.</p>
</div>
</article>
</section>
<section id="skills" class="feature inverse blackBG cbp-so-section">
<article class="cbp-so-side cbp-so-side-left">
<div class="left">
<i class="fa fa-laptop"></i>
<h1>Skills</h1>
</div>
</article>
<article class="cbp-so-side cbp-so-side-right">
<div class="right">
<div class="grid grid-fluid">
<div class="row">
<div class="col-6">
<h3>Front End:</h3>
<p>HTML | CSS | Javascript | jQuery | Backbone</p>
<p><span class="devicons devicons-html5"></span><span class="devicons devicons-css3"></span><span class="devicons devicons-javascript"></span><span class="devicons devicons-jquery"></span><span class="devicons devicons-backbone"></span></p>
</div>
<div class="col-6">
<h3>Back End:</h3>
<p>Ruby | Rails | Ajax | PostgreSQL</p>
<p><span class="devicons devicons-ruby_rough"></span><span class="devicons devicons devicons-ruby_on_rails"></span><span class="devicons devicons-postgresql"></span></p>
</div>
</div>
</div>
</div>
</article>
</section>
<section id="work" class="feature inverse veryBlackBG cbp-so-section">
<article class="cbp-so-side fifty cbp-so-side-left" id="artWork">
<div class="left">
<i class="fa fa-briefcase"></i>
<h1>Work Experience</h1>
</div>
</article>
<article class="cbp-so-side fifty cbp-so-side-right" id="artWork1">
<div class="right">
<h2>Junior Software Engineer</h2>
<p class="info">April 2016-May 2016</p>
<ul>
<p class="listUnits">Kayla Technologies: (short-term due to restructuring)</p>
Front-end role in charge of developing apps using ES6 / React / Redux <br/>
Reference: Roger Chapman (contact details on request)
</ul>
</div>
<div class="right">
<h2>Police Officer</h2>
<p class="info">January 2002-october 2012</p>
<ul>
<li class="listUnits">Street Crime Unit:</li>
High risk action unit NightTime
<li class="listUnits">Squadron Leader Driver:</li>
Undercover driver for crime event NightTime
<li class="listUnits">Nightlife squad</li>
General Duties NightTime
</ul>
</div>
</article>
</section>
<section id="#" class="feature inverse blackBG cbp-so-section">
<article class="cbp-so-side cbp-so-side-left" id="artSkills">
<div class="left">
<i class="fa fa-lightbulb-o"></i>
<h1>Skills</h1>
</div>
</article>
<article class="cbp-so-side cbp-so-side-right" id="artSkills1">
<div class="right">
<h2>Additional skills</h2>
<ul>
<li>Teamwork</li>
<li>Influence and communication skills</li>
<li>Ability to work under pressure</li>
</ul>
</div>
</article>
</section>
<section id="projects" class="feature inverse veryBlackBG">
<h1>My projects</h1>
<div class="grid grid-fluid">
<div class="row">
<div class="col-4">
<figure>
<img src="images/twister.png" alt="" class="projectImg"/>
<figcaption>
<h3>Twitter like app</h3>
<p class="optionP">Twister is a Ruby on Rails application implementing most of features from the original Twitter.Ability to tweet and comment on tweet.</p>
<p class="linksApp"><a href="https://radiant-hamlet-5051.herokuapp.com/">View on Heroku</a><a href="https://github.com/sylvain75/project-1-Twister">View on Github</a></p>
</figcaption>
</figure>
</div>
<div class="col-4">
<figure>
<img src="images/flatmate.png" alt="" class="projectImg"/>
<figcaption>
<h3>Flatmate Tasks app</h3>
<p class="optionP">Advanced Tasks manager with rating/notification feature built with Rails and Backbone.</p>
<p class="linksApp"><a href="https://chore-app.herokuapp.com/">View on Heroku</a><a href="https://github.com/timiscoding/project_2">View on Github</a></p>
</figcaption>
</figure>
</div>
<div class="col-4">
<figure>
<img src="images/backbonline.png" alt="" class="projectImg"/>
<figcaption>
<h3>Online Backbone Store</h3>
<p class="optionP">This is an online shop built with Rails and switched to a Backbone app to add some challenge.</p>
<p class="linksApp"><a href="https://online-it-store.herokuapp.com/">View on Heroku</a><a href="https://github.com/chueyng/onlineStore">View on Github</a></p>
</figcaption></a>
</figure>
</div>
</div>
</div>
</section>
<section id="contacts" class="feature inverse blackBG cbp-so-section">
<article class="cbp-so-side cbp-so-side-left" id="artFift">
<div class="left">
<i class="fa fa-envelope-o"></i>
</div>
</article>
<article class="cbp-so-side cbp-so-side-right" id="artFift1">
<div class="right">
<h1>Contacts</h1>
<p><a href="https://github.com/sylvain75"><i class="fa fa-github"></i></a><a href="https://au.linkedin.com/in/sylvaindellalibera/en"><i class="fa fa-linkedin"></i></a></p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p><a href="images/resume_SylvainDL.pdf">My Resume</a></p>
</div>
</article>
</section>
</div>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpScroller.js"></script>
<script>
new cbpScroller( document.getElementById( 'cbp-so-scroller' ) );
</script>
</body>
</html>