-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
276 lines (261 loc) · 11.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta property="og:title" content="Brian Charles O'Reilly" />
<meta name="description" property="og:description"
content="A portfolio of work by Front End Web Developer & Software Engineer Brian Charles O'Reilly" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.briancharlesoreilly.com/" />
<meta property="og:image" content="/openGraphBrian.png" />
<link rel="stylesheet" href="./styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&family=Sorts+Mill+Goudy:ital@0;1&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/b1b1a9bb2c.js" crossorigin="anonymous"></script>
<title>Brian Charles O'Reilly</title>
</head>
<body>
<header> <!-- header START -->
<div class="wrapper">
<div class="burger-menu-slide"> <!-- burger menu START-->
<input type="checkbox" name="burger-menu" id="burger-menu" class="burger-menu-button">
<label for="burger-menu" class="burger-menu-button">
<i class="fa-solid fa-bars"></i>
</label>
<div class="burger-slide-out">
<div class="close-button">
<button>x</button>
</div>
<nav>
<ul class="burger-nav">
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div> <!-- burger menu END -->
<nav class="nav-bar"> <!-- nav bar START -->
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav> <!-- nav bar END -->
</div>
<div class="wrapper">
<div class="header-flex">
<div class="header-left-box">
<p class="job-title">Front End Developer</p>
<h1>Brian Charles O'Reilly</h1>
</div>
</div>
</div>
</header> <!-- header END -->
<main> <!-- main START -->
<section class="about" id="about"> <!-- about section START -->
<div class="wrapper">
<h2>About</h2>
<div class="about-flex">
<ul class="about-left-box">
<li class="about-box">
<a href="https://www.linkedin.com/in/brian-charles-oreilly/" target="_blank">
<i class="fa-brands fa-linkedin-in"></i>
<p>Linked In</p>
</a>
</li>
<li class="about-box">
<a href="https://github.com/briancharlesoreilly" target="_blank">
<i class="fa-brands fa-github"></i>
<p>Git Hub</p>
</a>
</li>
<li class="about-box">
<a href="https://twitter.com/quitenice_" target="_blank">
<i class="fa-brands fa-twitter"></i>
<p>Twitter</p>
</a>
</li>
</ul>
<div class="about-right-box">
<div class="about-bio">
<p class="bold-bio">See me up there putting my jacket on? I'm getting ready to <span class="highlight">GET TO WORK</span> ... developing front end web applications using <span class="highlight">accessibility best practices</span> and <span class="highlight">industry leading programming standards.</span></p>
<p>A creative at heart with solid leadership and managerial experience in the hospitality industry as a (former) small business owner. Classical training in cabinet making and several years of bespoke furniture design round out a lively and unique work history. I'm quick to learn & highly adaptable, with a penchant for forward thinking and novel technologies, such as immersion in developing web 3 technologies. Outside of work you'll find me obsessing over books and honing my backend skills (currently Python) and Ethereum/blockchain coding (Solidity).</p>
</div>
<div class="bio-button">
<label for="bio-button"></label>
<a href="./assets/brian_oreilly_developer_resume_2024.pdf" target="_blank">
<button id="bio-button">View Resume</button>
</a>
</div>
</div>
</div>
</div>
</section> <!-- about section END -->
<section class="projects" id="projects"> <!-- projects START -->
<div class="wrapper">
<h2>Projects</h2>
<div class="projects-flex">
<div class="projects-top-box">
<div class="projects-bio">
<h3 class="bold-projects-bio">A small collection of some projects I've worked on, fully interactive for your viewing pleasure. </h3>
</div>
</div>
<ul class="projects-bottom-box">
<li class="projects-box">
<a href="https://charming-parfait-b10816.netlify.app/" target="_blank">
<img src="./assets/images/flock-screen.jpg" alt="screenshot of a website for event planning titled Flock of Friends">
</a>
<div class="projects-box-text">
<h4>Flock of Friends</h4>
<p>An event planning site using the Ticketmaster API built with React and Firebase.</p>
<a class="site-links" href="https://charming-parfait-b10816.netlify.app/" target="_blank">Live Site</a>
<a class="site-links" href="https://github.com/briancharlesoreilly/flock" target="_blank">View Code</a>
</div>
</li>
<li class="projects-box">
<a href="https://gilded-mousse-2c8335.netlify.app/" target="_blank">
<img src="./assets/images/planted-screen.jpg" alt="screenshot of a website about plants">
</a>
<div class="projects-box-text">
<h4>Planted</h4>
<p>A cool site about plants. This was a psd conversion project, fully responsive for all device sizes.</p>
<a class="site-links" href="https://gilded-mousse-2c8335.netlify.app/" target="_blank">Live Site</a>
<a class="site-links" href="https://github.com/briancharlesoreilly/planted" target="_blank">View Code</a>
</div>
</li>
<li class="projects-box">
<a href="https://friendly-kelpie-002f0d.netlify.app/" target="_blank">
<img src="./assets/images/arora-screen.jpg" alt="screenshot of an e-commerce website">
</a>
<div class="projects-box-text">
<h4>Arora Jewelers</h4>
<p>A psd conversion originally done in 1 (long) session, entirely in Code Pen.</p>
<a class="site-links" href="https://friendly-kelpie-002f0d.netlify.app/" target="_blank">Live Site</a>
<a class="site-links" href="https://github.com/briancharlesoreilly/arora-jewelers" target="_blank">View Code</a>
</div>
</li>
<li class="projects-box">
<a href="https://competent-carson-c2f0a6.netlify.app/" target="_blank">
<img src="./assets/images/toys-screen.jpg" alt="screenshot of an e-commerce website">
</a>
<div class="projects-box-text">
<h4>Toys</h4>
<p>An E-commerce website for a fictional toy company</p>
<a class="site-links" href="https://competent-carson-c2f0a6.netlify.app/" target="_blank">Live Site</a>
<a class="site-links" href="https://github.com/briancharlesoreilly/e-commerce-toys" target="_blank">View Code</a>
</div>
</li>
</ul>
</div>
</div>
</section> <!-- projects END -->
<section class="skills" id="skills"> <!-- skills section START -->
<div class="wrapper">
<h2>Skills</h2>
<ul class="skills-flex">
<li class="skills-box">
<i class="fa-brands fa-html5"></i>
<p>HTML5</p>
</li>
<li class="skills-box">
<i class="fa-brands fa-css3"></i>
<p>CSS3</p>
</li>
<li class="skills-box">
<i class="fa-brands fa-sass"></i>
<p>Sass</p>
</li>
<li class="skills-box">
<i class="fa-brands fa-js-square"></i>
<p>JavaScript</p>
</li>
<li class="skills-box">
<i class="fa-solid fa-jedi"></i>
<p>jQuery</p>
</li>
<li class="skills-box">
<i class="fa-brands fa-react"></i>
<p>React</p>
</li>
<li class="skills-box">
<i class="fa-brands fa-github"></i>
<p>Git Hub</p>
</li>
<li class="skills-box">
<i class="fa-brands fa-windows"></i>
<p>VS Code</p>
</li>
<li class="skills-box">
<i class="fa-solid fa-code-branch"></i>
<p>Firebase</p>
</li>
<li class="skills-box">
<i class="fa-solid fa-mobile-screen-button"></i>
<p>Responsive Design</p>
</li>
<li class="skills-box">
<i class="fa-solid fa-universal-access"></i>
<p>Accessibility</p>
</li>
</ul>
</div>
</section> <!-- skills section END -->
<section class="contact" id="contact"> <!-- contact START -->
<div class="wrapper"> <!-- contact wrapper START -->
<h2>Contact</h2>
<div class="contact-flex">
<ul class="contact-info-flex">
<li>
<a href="mailto:[email protected]">
<i class="fa-solid fa-envelope"></i>
<p>Email Me</p>
</a>
</li>
<li>
<a href="https://goo.gl/maps/rX5PmNr8XrCWL2AV9" target="_blank">
<i class="fa-solid fa-location-dot"></i>
<p>Toronto, ON</p>
</a>
</li>
</ul>
<form class="contact-form" action="https://formspree.io/f/xvolvkjo" method="POST"> <!-- form START -->
<ul class="flex-form">
<li>
<label for="name"></label>
<input type="text" name="name" placeholder="Name">
</li>
<li>
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Email">
</li>
<li>
<label for="message"></label>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Write your message here. Memes accepted."></textarea>
</li>
<li>
<button type="submit">Submit</button>
<p id="my-form-status"></p>
</li>
</ul>
</form> <!-- form END -->
</div>
</div> <!-- contact wrapper END -->
</section> <!-- contact END -->
</main> <!-- main END -->
<footer> <!-- footer STARTS -->
<p>Copyright © 2022 Brian Charles O'Reilly</p>
</footer> <!-- footer ENDS -->
<script src="./scripts/script.js"></script>
</body>
</html>