-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
350 lines (303 loc) · 17.2 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
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
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/x-icon" href="https://www.connorjbryant.com/wp-content/uploads/2022/11/bolt.png">
<title>Connor Bryant - Web Designer & Developer</title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,800);
body {
background-color: #EFF5F5;
}
a {
text-decoration: none;
}
.bg
{
width: 100%;
z-index: 0;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
font-family: 'Open Sans';
font-size: 1.3em;
padding: 0;
margin: 0;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: 'Open Sans';
scroll-behavior: smooth;
}
h1 {
Font-size:48pt;
padding: 0;
margin: 0;
font-family: 'Open Sans';
}
h2 {
Font-size:26pt;
padding: 0;
margin: 0;
font-family: 'Open Sans';
}
a {
text-decoration: none;
}
.header {
background-color: #1C3879;
color: white;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #EB6440;
color: #ffffff;
font-size: 30px;
text-decoration: none;
position: relative;
font-family: 'Open Sans';
}
.menu li:hover {
background-color: #f76b44;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 12%;}
.col-3 {width: 30%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-13 {width: 1%;}
}
button {
width:10vw;
position:absolute;
background:#E3481A;
margin-bottom:20px;
top:10cm;
left:1vw;
}
button a {
color:#FAEE35;
font:helvetica;
text-decoration:none;
Font-size:20pt;
}
</style>
<body>
<div style="background-color: #497174;" class="row">
<div class="col-3 menu">
<ul>
<br>
<a href="https://www.connorjbryant.com/wp-content/uploads/2023/01/Connor-Bryant-Resume.pdf"><li>Resume</li></a>
<a href="mailto:connorjamesbryant7@gmail.com"><li>Contact</li></a>
</ul>
</div>
<div class="col-6">
<h1>Connor Bryant</h1>
<h2>Web Designer & Developer</h2>
<p style="color: white">Innovative developer interested in creating scalable web applications and working across the full stack. Experienced in WordPress and Adobe Dreamweaver. Able to adapt to new technologies and environments.</p>
</div>
<div class="col-2 right">
<img src="https://www.connorjbryant.com/wp-content/uploads/2020/12/circle-cropped-2.png" style="max-width: 100%" alt="pic of me">
</div>
<div class="col-13 right">
<a style="color: black" href="https://github.com/connorjbryant"><i class="fa fa-github" style="font-size:36px"></i></a>
<a style="color: black" href="https://www.linkedin.com/in/connor-j-bryant/"><i class="fa fa-linkedin" style="font-size:36px"></i></a>
<a style="color: black" href="https://twitter.com/c_gingey"><i class="fa fa-twitter-square" style="font-size:36px"></i></a>
<a style="color: black" href="https://www.instagram.com/c_gingey/"><i class="fa fa-instagram" style="font-size:36px"></i></a>
<a style="color: black" href="mailto:connorjamesbryant7@gmail.com"><i class="fa fa-envelope" style="font-size:36px"></i></a>
</div>
</div>
<img class="bg" src="https://www.connorjbryant.com/wp-content/uploads/2022/11/shattered-island-e1668806477896.png" alt="">
<div class="row">
<div style="background-color: #e4dcc3fb" class="col-12">
<br>
<h1>Project Work</h1>
<br>
</div>
</div>
<div class="row">
<!-- Indy Urban League -->
<div style="background-color: #D6E4E5" class="col-12">
<h2 style="color: black; text-align: left;">The Indianapolis Urban League Website</h3>
<img align="right" src="https://www.indplsul.org/wp-content/uploads/2018/03/iul-icon-red-250.png" width="300" alt="iul">
<p style="color: black; font-size:20px; text-align: left;">As a Web Designer I created content and updated information for the site.</p>
<p><b>Company:</b> <b><u style="color: #EB6440"><a style="color: #EB6440" href="https://hopetrainingacademy.org/tln-interactive-education-center-1/">Indianapolis Urban League</a></u></b></p>
<p><b>Skills I Used:</b></p>
<ul>
<li>Content Management Tools: WordPress</li>
<li>Web Design</li>
<li>Writing content for the website</li>
<li>Ability to write custom code to the site</li>
<li>WPBakery Page Builder</li>
</ul>
</div>
</div>
<div class="col-6">
<p style="color: black; font-size:20px;"><b>Front-end web graphics is my specialty</b></p>
<p>I liked to use CodePen to make interesting graphics for the IUL website.</p>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdXePZr" data-user="connorjbryant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/connorjbryant/pen/mdXePZr">
Revolver Gallery</a> by Connor Bryant (<a href="https://codepen.io/connorjbryant">@connorjbryant</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p>Click <b><u style="color: #EB6440"><a style="color: #EB6440" href="https://www.indplsul.org/equity-summit-myths-realities-an-action-session/2022-no-menthol-sunday/">here</a></u></b> to view this on the website.</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="col-6">
<p style="color: #EFF5F5; font-size:20px;"><b>Front-end web graphics is my specialty</b></p>
<p style="color: #EFF5F5; font-size:20px;">I like to use CodePen to make fun little graphics for the IUL website.</p>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWQjNxq" data-user="connorjbryant" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/connorjbryant/pen/QWQjNxq">
NoSmoking</a> by Connor Bryant (<a href="https://codepen.io/connorjbryant">@connorjbryant</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>Click <b><u style="color: #EB6440"><a style="color: #EB6440" href="https://www.indplsul.org/equity-summit-myths-realities-an-action-session/2022-no-menthol-sunday/">here</a></u></b> to view this on the website.</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="col-7">
<p style="color: black; font-size:20px;"><b>Created a web portal for a college readiness program (Project Ready)</b></p>
<p>One of my responsibilties was making a secure portal for students to apply for college scholarships. To gain access to the scholarship forms a password was required which would allow a student to complete the application process. The forms are categorized by school type and are sent to the corresponding schools Project Ready Coordinator. The Contact Form 7 plug-in was used to collect data.</p>
<img src="https://www.connorjbryant.com/wp-content/uploads/2022/11/project-ready-forms.gif" width="500" alt="">
</div>
<div class="col-4">
<p style="color: black; font-size:20px;"><b>Added a front page revolver to showcase important information</b></p>
<p>One of my contributions was adding this rotating revolver that shows upcoming programs or events on the front page. This feature has increased traffic to the website because it allows users to access what they need very quickly.</p>
<img src="https://www.connorjbryant.com/wp-content/uploads/2022/11/front-page-revolver.gif" width="500" alt="">
</div>
</div>
</div>
<div class="row">
<!-- TDULTRA -->
<div style="background-color: #D6E4E5" class="col-12">
<h2 style="color: black; text-align: left;">TDULTRA: A web conferencing application</h3>
<img align="right" src="https://www.connorjbryant.com/wp-content/uploads/2022/07/logo.png" width="385" alt="">
<p style="color: black; font-size:20px; text-align: left;">TDULTRA is a platform like Skype or Zoom that connects students with tutors.</p>
<p><b>Company:</b> <b><u style="color: #EB6440"><a style="color: #EB6440" href="https://www.tutordudes.com/">TutorDudes</a></u></b></p>
<p><b>Project:</b> The <b><u style="color: #EB6440"><a style="color: #EB6440" href="http://tdultra.com/">TDULTRA</a></u></b> Website</p>
<p><b>Skills I Used:</b></p>
<ul>
<li>Website Design/Development</li>
<li>Front and Back-end Coding</li>
</ul>
</div>
<div class="col-7">
<p style="color: black; font-size:20px; text-align: left;">The purpose of this project was to continue development on the TDULTRA website to improve usability and profitability. One of my main roles on this project as an intern was to build the technical infrastructure for the back-end of the site since the original prototype lacked a way to track users signing up for different services and lacked file-sharing capabilities for the tutors.</p>
</div>
</div>
<div class="col-4">
<p style="color: black; font-size:20px;">This is how the website initially looked.</p>
<iframe src="https://drive.google.com/file/d/1lsLrCrIVfdvs1uoKya-4cPEF0Yik6ftE/preview" width="560" height="315" allow="autoplay"></iframe>
<p style="color: black; font-size:20px;"><b>Initial Concept:</b> I worked with a team of two other interns on a three month project to continue development on this virtual meeting platform for learning and interaction.</p>
<p style="color: black; font-size:20px;"><b>Technology Used:</b> To complete this project my team and I used HTML5, CSS3, JavaScript, jQuery, and Node.js. We also used Google Firebase for database services and Paddle Payment for B2B transactions.</p>
<p style="color: black; font-size:20px;"><b>What was added:</b> A pricing page was developed that uses Paddle payment for transactions, web pages were added to access the WebRTC portion of the website, and access pages were created for the file sharing part of the website.</p>
</div>
<div class="col-3"></div>
<div class="col-3">
<p style="color: black; font-size:20px;">The website after three months of development.</p>
<iframe src="https://drive.google.com/file/d/1D7nZV9THbeUwIeZR4bT0bCZVxifopid2/preview" width="560" height="315" allow="autoplay"></iframe>
<p style="color: black; font-size:20px;"><b>How It Works:</b> TDULTRA is a WebRTC (Web Real-Time Communications) application that enables real-time voice, text and video communications capabilities between web browsers and devices. The front end of the website uses HTML and CSS while the back end uses JavaScript (specifically Node.js) as well as Google Firebase. TDULTRA also has a file sharing service called TDCLOUD that allows tutors to upload media to their own personal account.</p>
</div>
</div>
<div class="row">
<!-- Video Game Palooza -->
<div style="background-color: #D6E4E5" class="col-12">
<h2 style="color: black; text-align: left;">Video Game Palooza Virtual Reality Online Walkthrough</h3>
<br>
<iframe width='560' height='315' src='https://my.matterport.com/show/?m=U1uQr7mE3zk' frameborder='0' allowfullscreen allow='xr-spatial-tracking'></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/fEYLK4Rs64Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<img align="right" src="https://www.connorjbryant.com/wp-content/uploads/2022/11/VR-project.png" alt="">
<p><b>Company:</b> <b><u style="color: #EB6440"><a style="color: #EB6440" href="https://hopetrainingacademy.org/tln-interactive-education-center-1/">Hope Training Academy</a></u></b></p>
<p><b>Project:</b> An <b><u style="color: #EB6440"><a style="color: #EB6440" href="https://hopetrainingacademy.org/vrtour/">online virtual reality walkthrough</a></u></b> of Hope Training Academy's Center for E Sports.</p>
<p><b>Skills I Used:</b></p>
<ul>
<li>3D Scanning</li>
<li>360° Image Capture</li>
<li>Matterport Development</li>
<li>Website Design/Development</li>
</ul>
</div>
</div>
<div class="col-12">
<p style="color: black; font-size:20px; text-align: left;">The purpose of this project was to create an online VR walkthrough of <b><u style="color: #EB6440"><a style="color: #EB6440" href="https://hopetrainingacademy.org/tln-interactive-education-center-1/">Hope Training Academy's</a></u></b> E Sports Center. By showcasing this state-of-the-art facility in an immersive way potential participants can understand the experience being offered.</p>
</div>
<div class="col-6">
<p style="color: black; font-size:20px;">Website Mock-up</p>
<img src="https://www.connorjbryant.com/wp-content/uploads/2021/04/urn_aaid_sc_US_6fca5579-28ca-48f2-a500-f21d30250611.png" alt="website mockup">
<p style="color: black; font-size:20px;"><b>Initial Concept:</b> The goal of this project was to attract more people to Hope Training Academy’s Center for E Sports through an online virtual reality walkthrough of their facility.</p>
<p style="color: black; font-size:20px;"><b>Technology Used:</b> To complete this project my team and I used Matterport’s equipment and software. Matterport is a 3D platform that allows a physical space to be turned into an accurate and immersive digital twin. Specifically, we used the Matterport Pro2 3D Camera and an iPad with the Matterport app for this project.</p>
<p style="color: black; font-size:20px;"><b>Content Within The Scan:</b> There are Mattertags within the scan, which are points of interests within the digital twin that the user can interact with. We included text descriptions, videos, images, and links within the Mattertags to keep people engaged on the site. Information on all of their arcade machines, the equipment used, services offered, and the decor in the facility is in the scan.</p>
</div>
<div class="col-6">
<p style="color: black; font-size:20px;">Completed Webpages</p>
<img src="https://www.connorjbryant.com/wp-content/uploads/2021/04/ezgif.com-gif-maker-1.gif" width="800" alt="completed webpages">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p style="color: black; font-size:20px;"><b>How It Works:</b> We completed the project by capturing a 3D scan of a spot and then getting a 360 degree panoramic image of that area. We were cognizant of where we were in relation to the camera at all times because getting in its path creates an unusable scan. Every six feet we moved the camera and re-leveled it if necessary. The circles on the floor represent where you can travel in the walkthrough, and this is also where we moved the camera within the building. Matterport does a lot of the work for you; the camera communicates with the app and it pieces together the scans and images of each spot into one complete 3D model.</p>
</div>
</div>
<div class="row">
<!-- Other Website -->
<div style="background-color: #D6E4E5" class="col-12">
<h2 style="color: black; text-align: left;">Game Design and Development Portfolio Website</h3>
<img align="right" src="https://www.connorjbryant.com/wp-content/uploads/2022/11/gaming-site-2-2.png" width="385" alt="">
<p style="color: black; font-size:20px; text-align: left;">I have an interest in video game development and created a portfolio website that showcases the games I have created.</p>
<p><b>Project: </b><b><u style="color: #EB6440"><a style="color: #EB6440" href="https://www.connorjbryant.com/">Gaming Portfolio</a></u></b> Website</p>
<p><b>Skills I Used:</b></p>
<ul>
<li>Website Design/Development</li>
<li>Front and Back-end Coding</li>
<li>Content Management Tools: WordPress</li>
</ul>
</div>
</div>
<div class="col-12">
</div>
</div>
</div>
<footer>
<p align="center">Website developed by Connor Bryant. Click <u style="color: #EB6440"><a style="color: #EB6440" href="https://github.com/connorjbryant/connorjbryant.github.io/blob/main/index.html">here</a></u> to view the code behind it.</p>
</footer>
</body>
</html>