-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
302 lines (272 loc) · 12.9 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Curtis Burns Portfolio Page</title>
<script src="./js/app.js" charset="utf-8"></script>
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Raleway" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li><span class="line-2"></span></li>
<li><a href="#skills" class="skills-nav">Skills</a></li>
<li><a href="#projects" class="projects-nav">Projects</a></li>
<li><a href="#about" class="about-nav">About</a></li>
<li>
<span class="line-1"></span>
<span class="black-box"></span>
</li>
</ul>
</nav>
<section id="header">
<span class="main-image-bg">
<img src='./assets/images/profile-pic.png' alt="Curtis Burns" />
<div class="header-text">
<h2 class="first-name">C<span <span class="white-letters">ur</span>tis</h2>
<h2 class="surname">Burn<span <span class="white-letters">s.</span></h2>
<h3>Web Developer</h3>
</div>
<div class="graduation">
<p>GA WDI Graduate</p>
<p class="date" ><span class="line"></span>09/18</p>
</div>
</span>
</section>
<section id="contact">
<div class="contact-panel">
<h5>Contact<span class="line-1"></span></h5>
<div class="contact-info">
<div class="linkedIn">
<div class="linkedIn-hover">
<a href="https://linkedin.com/in/curtis-burns" target="_blank"><img src="./assets/images/linkedin-icon.png" alt="linkedIn"/> linkedin.com/in/curtis-burns</a>
</div>
</div>
<div class="email">
<div class="email-hover">
<a href="mailto:contact@curtisburns.me"><img src="./assets/images/email-icon.png" alt="email"/> contact@curtisburns.me</a>
</div>
</div>
</div>
<span class="line-2"></span>
</div>
</section>
<section id="about">
<div class="about-bg">
<div class="quote-container">
<p>Why we make<span style="color: white"> the things we make</span></p>
<p>says a lot<span style="color: white"> about us.</span></p>
</div>
</div>
<div class="about-panel">
<h2>About<span class="line"></span></h2>
<p>Hi, my name is Curtis and back in June 2018 I decided to make the leap from my job in finance into the world of web development. I enrolled on the Web Development Immersive course at General Assembly in order to gain an understanding of the fundamentals in coding for me to build upon in my new career. I continue to find the prospect of having an ever growing amount of tools at my fingertips to fix problems and create amazing things truly exciting. During the course I was able to work on some great projects. Feel free to check them out below!</p>
<p>I've come a long way since then, now working with a highly regarded creative agency and consultancy firm, building new and exciting solutiions for a wide range of clients.</p>
<p>If you have any questions about my experience or wish to contact me for any reason, please don't hesitate to do so.</p>
</div>
</section>
<section id="projects">
<h2>Projects<span class="line"></span></h2>
<!-- Project 4 -->
<div class="project-styling-1">
<div class="columns-container">
<div class="image-column">
<img src="./assets/images/online-course-platform.png" alt="Online course platform screenshots">
<div class="overlay">
<h3>Online Course Platform</h3>
<hr style="color: white"/>
<p>5th - 13th September 2018</p>
</div>
</div>
<div class="text-column">
<div class="text-panel">
<p>This was my final project for the Web Development Immersive course.</p>
<p>The app serves as an e-learning platform and allows you to take courses and even construct courses for other people to take.</p>
<p>I built this using the MERN stack, and enjoyed using React.js in particular, where a project can be broken into many logical components. I used Sketch to design the app which helped give me an idea of the structure and the components necessary for each page.</p>
</div>
</div>
</div>
<div class="project-links">
<div class="links-container">
<span class="line"></span>
<a href="https://ga-course-builder.herokuapp.com/" target="_blank">
<img class="link-icon" src="./assets/images/link-icon.png" alt="Visit online course platform site" />
</a>
<a href="https://github.com/curtisburns/wdi-project-four" target="_blank">
<img class="github-icon" src="./assets/images/github-icon.png" alt="Visit online course platform GitHib repository" />
</a>
<span class="line"></span>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="project-styling-2">
<div class="columns-container">
<div class="text-column">
<div class="text-panel">
<p>This was a group project, where I and two others (<a href="https://github.com/platypotomus/" target="_blank">Ellie</a> and <a href="https://maxcramer101.com" target="_blank">Max</a> - check them out!) got to develop an app where festival organisers are able to add an event to the feed so that users can confirm their attendance and arrange car shares, while also being informed of the weather for upcoming events.</p>
<p>It was a great opportunity work with external APIs and we were able to build this using the MEAN stack.</p>
</div>
</div>
<div class="image-column">
<img src="./assets/images/festinate.png" alt="Festinate screenshots">
<div class="overlay">
<h3>Festinate</h3>
<hr style="color: white"/>
<p>22nd - 31st August 2018</p>
</div>
</div>
</div>
<div class="project-links">
<div class="links-container">
<span class="line"></span>
<a href="https://festinate.herokuapp.com/" target="_blank">
<img class="link-icon" src="./assets/images/link-icon.png" alt="Visit Festinate site" />
</a>
<a href="https://github.com/curtisburns/festival-companion-app" target="_blank">
<img class="github-icon" src="./assets/images/github-icon.png" alt="Visit Festinate GitHib repository" />
</a>
<span class="line"></span>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="project-styling-1">
<div class="columns-container">
<div class="image-column">
<img src="./assets/images/easel.png" alt="Easel screenshots">
<div class="overlay">
<h3>Easel</h3>
<hr style="color: white"/>
<p>2nd - 8th August 2018</p>
</div>
</div>
<div class="text-column">
<div class="text-panel">
<p>This project was an opportunity to demonstrate our understanding of the RESTful architectural approach to developing apps.</p>
<p>This is an Instagram style app, with a 'like' and 'follow' system except the intention is for it to be a place to share mainly art and photography.</p>
<p>This was built using EJS, Express.js/Node.js and MongoDB with the addition of filestack to handle image uploading.</p>
</div>
</div>
</div>
<div class="project-links">
<div class="links-container">
<span class="line"></span>
<a href="https://curtis-easel.herokuapp.com/ " target="_blank">
<img class="link-icon" src="./assets/images/link-icon.png" alt="Visit Easel site" />
</a>
<a href="https://github.com/curtisburns/wdi-project-two" target="_blank">
<img class="github-icon" src="./assets/images/github-icon.png" alt="Visit Easel GitHib repository" />
</a>
<span class="line"></span>
</div>
</div>
</div>
<!-- Project 1 -->
<div class="project-styling-2">
<div class="columns-container">
<div class="text-column">
<div class="text-panel">
<p>This was the first of four projects I did while on the Web Development Immersive course at General Assembly</p>
<p>I enjoy playing video games so I found this project very fun, but had to be careful not to get carried away with 'testing'.</p>
<p>This was built using JavaScript, and was inspired by the game R-type. Give it a go and let me know your highscore!</p>
</div>
</div>
<div class="image-column">
<img src="./assets/images/galactic-assembly.png" alt="Galactic Assembly screenshots">
<img class="gif-1" src="https://media.giphy.com/media/1jY6KtGXraEWPUNv78/giphy.gif" alt="Galactic Assembly intro gif">
<img width=40 class="gif-2" src="https://media.giphy.com/media/NsKhmlFhbChhpMDXGW/giphy.gif" alt="Galactic Assembly gameplay gif">
<div class="overlay">
<h3>Galactic Assembly</h3>
<hr style="color: white"/>
<p>20th - 27th July 2018</p>
</div>
</div>
</div>
<div class="project-links">
<div class="links-container">
<span class="line"></span>
<a href="https://curtisburns.me/wdi-project-one" target="_blank">
<img class="link-icon" src="./assets/images/link-icon.png" alt="Visit Galactic Assembly page" />
</a>
<a href="https://github.com/curtisburns/wdi-project-one" target="_blank">
<img class="github-icon" src="./assets/images/github-icon.png" alt="Visit Galactic Assembly GitHib repository" />
</a>
<span class="line"></span>
</div>
</div>
</div>
<!-- What next? -->
<div class="what-next">
<h2>What next?</h2>
<p>
I am always looking to learn new new technologies that I can add to my skillset and use to build more creative and better solutions. I have become very fond of Vue.js and GraphQL, so I will be using them more in my upcoming projects. I feel that no matter how experienced I am in the industry, there is alway room to expand my knowledge in all aspects of development, and so would happily become someone's mentee. If you're interested in mentoring, or would like to work together on a project, <a href="mailto:contact@curtisburns.me">get in touch.</a> Also find my GitHub <a href="https://github.com/curtisburns" target="_blank">here</a>.</p>
<!-- <a><a href="https://www.codewars.com/users/thisismrburns" target="_blank">Codewars</a></p> -->
</div>
</section>
<section id="skills">
<h2>Skills<span class="line"></span></h2>
<div class="skills-columns">
<span class="line"></span>
<div class="technologies-column">
<div class="technologies-panel">
<h3>Technologies</h3>
<ul>
<li>React.js</li>
<li>Vue.js</li>
<li>Nuxt.js</li>
<li>HTML</li>
<li>CSS & SCSS</li>
<li>GSAP</li>
<li>jQuery</li>
<li>MongoDB</li>
<li>Node.js</li>
<li>Express.js</li>
<li>Shopify</li>
<li>GraphQL</li>
<li>Storyblok</li>
</ul>
</div>
</div>
<div class="methodology-column">
<div class="methodology-panel">
<h3>Methodology</h3>
<ul>
<li>RESTful</li>
<li>Responsive web design</li>
<li>BEM</li>
<li>Agile</li>
<li>CRUD methods</li>
</ul>
<h3>Tools</h3>
<ul>
<li>Slack</li>
<li>Postman</li>
<li>Sketch</li>
<li>Invision</li>
<li>GitHub</li>
<li>Git</li>
<li>GitKraken</li>
<li>GraphiQL</li>
<li>Asana</li>
<li>Jira</li>
<li>Google Analytics</li>
<li>Google Tag Manager</li>
</ul>
<h3>Soft Skills</h3>
<ul>
<li>Adaptive</li>
<li>Problem solving</li>
<li>Daily standups</li>
<li>Presentations</li>
<li>Teamwork</li>
<li>Pair programming</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>