-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
313 lines (267 loc) · 17 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<title>Founders & Coders Application</title>
</head>
<body>
<!-- Video background -->
<header>
<div id="videodiv" class="fullscreen-bg">
<video loop muted autoplay class="fullscreen-bg__video">
<source src="coding-background.mp4" type="video/MP4"> </video>
</div>
<!-- navigation bar -->
<div id="div-nav">
<section>
<ul class="navUl">
<a href="#"><img id="logo" src="images/ryma-logo.jpg" alt="RYMA Logo"></a>
<li class="navLi"><a href="#div9">Contact</a></li>
<li class="navLi"><a href="#div7">Meet The Team</a></li>
<li class="navLi"><a href="#div6">Image Carousel</a></li>
<li class="navLi"><a href="#div5">Projects</a></li>
<li class="navLi"><a href="#div4">Equation</a></li>
<li class="navLi"><a href="#div3">Why FAC?</a></li>
<li class="navLi"><a href="#goals">Goals</a></li>
<li class="navLi"><a href="#about">About</a></li>
<li class="navLi"><a class="active" href="#home">Home</a></li>
</ul>
<!-- Main home screen wording -->
<h1 id="RYMA">RYMA Technology</h1>
<h1 class="mainwording">Inspired by Founders & Coders</h1>
</section>
</div>
</header>
<!-- Lawyer Turned Developer Section -->
<div id="div1">
<section>
<h1 id="about" class="lawyer-header">Lawyer Turned Developer</h1>
<div class="cover-photo-class">
<img class="cover-photo1" src="images/cover-photo1.jpg" alt="Cover Photo">
</div>
<div>
<img src="images/ryan-profile.jpg" alt="Photo of Ryan McAvoy, Developer" class="ryan-profile1">
</div>
<div class="scroll-box1">
<figure class="paragraph-one">
<p>On 31st July 2018 I made the decision to leave behind a career in law and take the plunge into my passion, software development.</p>
<p>After completing a Masters in Law and whilst trying to secure a job within the legal industry, I took an interim job as a recruitment
consultant specialising in the technology market. It was my role to source software developers and place them in roles in London.
This included all types of developers such as: JavaScript, Node.js, Python, Java and Scala. </p>
<p>Working as a recruiter was an eye-opening experience into the world of technology. It was only
through working as a recruiter I began to realise how much technology is integrated into our daily
lives. Moreover, I discovered the depth of work required to develop such technologies.</p>
<p>The part I most enjoyed about recruitment was meeting with developers and talking about the latest technologies and their personal projects.
I have always been entrepreneurial and once I discovered the capabilities of technology, I began coming up with solutions to everyday problems.
Naturally, I did not have the skills or finance to build these ideas; having worked in recruitment I know how expensive building websites and apps can be.
I also thought given my age (26 at the time), it would be too late to learn how to code. I decided to put these ideas to the back of my brain and focus on my
career in law instead.</p>
<p>Eventually, I managed to secure a paralegal position at a highly respected law firm which has been involved in some of England’s most notable cases in the last 30 years.
After a few months in my new role, I noticed I was more interested in reading about the latest technology news than legal. Furthermore, business ideas kept coming to the
forefront of my mind. I have always wanted to start a business and all of my ideas have technology at their core. Therefore, in order to make these ideas a reality, I believe the
best approach is to immerse myself in the technology industry. Hence on 31st July 2018, I began completing the pre-requisites for the Founders and Coders course. </p>
<p>I have since completed TeamTreehouse and FreecodeCamp’s HTML, CSS and JavaScript courses as well as achieving over 560 points on Codewars. I have also created multiple Katas and an image carousel.
Through these challenges I have discovered a passion for coding and have a talent for solving coding challenges. My Dad is a carpenter and perhaps this is where I get my passion and satisfaction for building things. </p>
</figure>
</div>
</section>
</div>
<div id="div2">
<!-- Developer Goals Section -->
<section>
<h1 id="goals" class="developer-header">Developer Goals</h1>
<div>
<img class="developer-cover-photo1" src="images/developer-cover.jpg" alt="Developer Cover Photo">
</div>
<div>
<img class="dev-profile1" src="images/dev-profile.jpg" alt="Photo of Ryan McAvoy, Developer">
</div>
<div>
<figure class="paragraph-two">
<p>Although it is my ambition to turn one of my App/Website ideas into a viable business, I understand that I still have little experience within the
technology industry. Therefore, I believe the best approach is to secure a junior developer position at a start-up. This will hopefully give me firsthand
insight into the challenges of running a start-up. I hope that it will also provide me with broad software development experience. I am currently 28 years old
and would like to achieve the below within the next three years:</p>
<ul>
<li>Successfully complete the Founders & Coders boot camp.</li>
<li>Secure a junior developer position at a start-up.</li>
<li>Regularly attend Tech Meetups and network within the industry.</li>
<li>Build upon my software development skills to the point that I am no longer considered a junior developer.</li>
<li>Once the above four goals have been achieved, start my technology based business.</li>
</ul>
</figure>
</div>
</section>
</div>
<div id="div3">
<!-- Why Founders & Coders Section -->
<section>
<h1 class="FAC">Why Founders & Coders?</h1>
<div class="FC-cover-photo1">
<img src="images/FACbanner.png" alt="FAC Cover Photo">
</div>
<div>
<img class="FC-profile-photo" src="images/FAC-Crew.jpg" alt="Photo of Friends from FAC">
</div>
<div>
<figure class="paragraph-three">
<p>I first heard about FAC through my role as a recruitment consultant. During my time as a recruiter,
I spoke to a number of FAC graduates and was always impressed with the quality of their experience and
the companies they had work for since completing the course. Within my recruitment firm, FAC graduates were
always regarded as the best graduates over other similar boot camps. </p>
<p>What attracts me to FAC more than any other boot camp is the culture, ethics and reasons behind the organisation.
FAC is a place where everyone is welcome, equal and supported, and I am so grateful that such a scheme is in place.
FAC has already taught me so much through the Monday classes and pre-requisites.</p>
<p>For example, I have seen firsthand the power of pair-programming and would relish the opportunity to improve my development
skills within such an environment. Throughout the Monday classes, whilst working on various Codewars challenges with either: Sam (pictured above),
Tom (pictured above), Freddie, Richard or another applicant, I understand how effective pair-programming can be when learning. There have been many
challenges where, for example, my knowledge of objects combined with Tom’s knowledge of for loops has solved the challenge.
Without the other person it would have been a lot harder and taken a lot longer to solve the challenge. I also find that when a
challenge is solved and your programming partner teaches you something, it sticks with you and you do not forget it. Prior to that
particular Monday class, I struggled with for loops but thanks to Tom, I now find them simple. Equally, I was able to help Tom
understand how to access objects.</p>
<p>I have made some good friends through the weekly meetups and will stay in touch with them regardless of whether I gain a place on the course.
However, if I am lucky enough to get a place on the course, I would love the opportunity to work alongside them further.</p>
<p>Finally, I am very interested in the organisation’s potential lecturing opportunities in the Middle East and Africa after completing the course.</p>
</figure>
</div>
</section>
</div>
<div id="div4">
<!-- The Founders and Coders plus Lawyer equals Coder equation Section -->
<section>
<div class="row">
<div class="column" id="responsive1">
<img class="ryan-profile2" src="images/ryan-profile.jpg" alt="Ryan Lawyer Picture" style="width:100%">
</div>
<div class="column">
<img src="images/plus-icon.png" alt="plus icon" style="width:100%">
</div>
<div class="column" id="responsive2">
<img class="FAClogo" src="images/fclogo.png" alt="founders and coders logo" style="width:100%">
</div>
<div class="column">
<img src="images/equal-icon.png" alt="Equal Sign" style="width:100%">
</div>
<div class="column ryanIcon" id="responsive3">
<img src="images/ryan-icon.png" alt="Ryan Icon" style="width:100%">
</div>
</div>
</section>
</div>
<div id="div5">
<!-- Wanna Look Under the Hood? Section -->
<section>
<div>
<h1 class="projects">Wanna Look Under The Hood?</h1>
</div>
<container class="container">
<div class="row2" id="icons">
<div class="column2">
<a target="_blank" href="https://teamtreehouse.com/rymatech" rel="teamtreehouse Account"><img class="treehouse" src="images/teamtreehouse-logo.jpg" alt="Github" style="width:100%"></a>
</div>
<div class="column2">
<a target="_blank" href="https://github.com/RymaTech/rymatech.github.io" rel="Ryma Github Account"><img class="github" src="images/github.jpg" alt="Github" style="width:100%"></a>
</div>
<div class="column2">
<a id="codewarsSpin" href="https://www.codewars.com/users/RymaTech" target="_blank" rel="Ryma-Codewars-Account"><img alt="codewars" class="codewars" src="images/codewars.jpg" style="width:100%"></a>
</div>
<div class="column2">
<a target="_blank" href="https://www.freecodecamp.org/rymatech" rel="Ryma freecodecamp Account"><img class="freecodecamp" src="images/freecodecamp.jpg" alt="freecodecamp" style="width:100%"></a>
</div>
</div>
</container>
<div class="check-out-more">
<p>To view my image carousel scroll down or check out the code in <a target="_blank" href="https://github.com/RymaTech/imageCarousel" class="links">Github</a></p>
</div>
</section>
</div>
<div id="div6">
<h1 class="achievements">Image Carousel & Coding Achievements</h1>
<!-- <div class="check-out-more"> -->
<div id="topBox">
<div class="row">
<div id="slideOneMarker"></div>
<div class="divingLine"></div>
<div id="slideTwoMarker"></div>
<div class="divingLine"></div>
<div id="slideThreeMarker"></div>
<div class="divingLine"></div>
<div id="slideFourMarker"></div>
</div>
</div>
<div id="mainBox">
<img id="image" name="eachImage">
</div>
<div id="bottomBox">
<button class="buttonStyle" id="back">Back</button>
<button class="buttonStyle" id="pause">Pause</button>
<button class="buttonStyle" id="next">Next</button>
</div>
<p class="carouselParagraph">The code for the above image carousel is available at <a target="_blank" href="https://github.com/RymaTech/imageCarousel" class="links">Github</a> or on <a target="_blank" href="https://codepen.io/rymatech/pen/oQrLJQ" class="links">Codepen</a></p>
<!-- </div> -->
</div>
<div id="div7">
<!-- Meet the Team Section -->
<h1 class="meet-the-team">Meet The Team</h1>
<div class="row3">
<img src="images/rymaphoto.png" alt="Photo of Ryan, Emma and Mary" class="column3">
<img src="images/ryan-mum.jpg" alt="Photo of Ryan and Mary at graduation" class="column3">
<img src="images/oasis-bros.jpg" alt="Photo of Ryan and two brother at Oasis gig" class="column3">
<img src="images/ryan-em.jpg" alt="Photo of Ryan and Emma on Holiday" class="column3"> <br>
<img src="images/ryanmum.jpg" alt="Photo of Tony, Mary and Ryan" class="column3">
<img src="images/new-Ryan-and-emma.jpg" alt="Photo of Ryan and Emma in Hampstead" class="column3">
<img src="images/ryanmumemma.jpg" alt="Photo of Ryan, Mary and Emma in Covent Garden" class="column3">
<img src="images/jacks.jpg" alt="Photo of Jacks the cat" class="column3">
</div>
</div>
<div id="div8">
<!-- Mystery Button Section -->
<h1 class="button-id">Mystery Button</h1>
<h4 class="mystery-header-text">Can you guess what the mystery button does?*</h4>
<p class="disclaimer">*The website developer accepts no liability for what may or may not happen if you choose, of your own free will, to press the below button!<br /> By pressing the button, the user agrees to these terms.</p>
<a target="_blank" href="https://www.youtube.com/watch?v=NHozn0YXAeE"><button class="button">Press Me</button></a>
</div>
</body>
<footer>
<div id="div9">
<!-- Contact Section -->
<div class="container">
<div class="leftpane">
<!-- Opening Times -->
<ul class="openingTimes">
<li><span>Opening Times</span></li>
<br>
<li>Monday          9am-5pm</li>
<li>Tuesday         9am-5pm</li>
<li>Wednesday    9am-5pm</li>
<li>Thursday        9am-5pm</li>
<li>Friday             9am-5pm</li>
<li>Saturday         Closed</li>
<li>Sunday           Closed</li>
</ul>
</div>
<div class="middlepane">
<!-- Clock and contact address -->
<img src="images/paper-plane.png" alt="paper plane icon" class="paperPlane">
<p class="contact">
<span>London</span><br>
<br> RYMA Tech<br> Flat 7<br> 8 Clissold Road<br> Stoke Newington<br> United Kingdom<br> N16 9EU<br>
<br> +44 (0)77 4665 6061<br>
</p>
<script src="scripts.js"></script>
</div>
<div class="rightpane">
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2480.5166170732505!2d-0.08697808463341937!3d51.55876217964362!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761c7d11debd8b%3A0x318da66577129bc2!2sClissold+Rd%2C+Stoke+Newington%2C+London!5e0!3m2!1sen!2suk!4v1541326644490"
width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="toppane">
<p class="copyright" id="copyrightId">Copyright © RYMA Tech Limited 2018. All rights reserved. For company<br> information and other legal bits, see our <a target="_blank" href="https://www.google.co.uk/search?biw=1366&bih=631&tbm=isch&sa=1&ei=tzpwW_eNLNCagQakw6NI&q=law+&oq=law+&gs_l=img.3..35i39k1j0i67k1j0l7j0i67k1.26447.26447.0.27225.1.1.0.0.0.0.163.163.0j1.1.0....0...1c.1.64.img..0.1.160....0.JZEQ-boT9lQ">legal</a> page. We’re using
<a target="_blank" href="https://www.google.co.uk/search?biw=1366&bih=626&tbm=isch&sa=1&ei=GejmW-LnHs31qwGg-6iABA&q=cookie+monster&oq=cookie+monster&gs_l=img.3..35i39k1l2j0l8.970950.973740.0.973890.9.9.0.0.0.0.232.908.6j2j1.9.0....0...1c.1.64.img..0.9.902....0.LBYHB531hXo#imgrc=qYJ7sX2AysZkdM:"
rel="picture of cookies">cookies</a>, hope that’s cool. Here’s our <a target="_blank" href="https://www.google.co.uk/search?biw=1366&bih=626&tbm=isch&sa=1&ei=SezmW6-4OeGxrgSw5bSIAg&q=private&oq=private&gs_l=img.3..35i39k1l2j0i67k1j0l3j0i67k1j0l3.2506.6045.0.6388.11.6.0.0.0.0.238.238.2-1.1.0....0...1c.1.64.img..10.1.234....0.mqBrOaEwZvQ#imgrc=i7rxTNNLtqAeHM:">Privacy Policy</a></p>
</div>
</div>
</div>
</footer>
</html>