-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
306 lines (255 loc) · 13.6 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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alex Murray Design</title>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--links to Google Font and Font Awesome-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--navbar and contents-->
<!-- need to fix the navbar as it is showing up opaque -->
<div class="w3-top w3-card-2">
<div class "w3-bar w3-white w3-xxlarge " id="myNavbar">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i>
</a>
<a href="#alex_murray" class="w3-bar-item w3-button w3-hover-blue-gray w3-hide-small">[Alex Murray]</a>
<a href="#contact_me" class="w3-bar-item w3-button w3-hover-blue-gray w3-hide-small w3-right">
<i class="fa fa-envelope"></i> Contact Me</a>
<a href="#projects" class="w3-bar-item w3-button w3-hover-blue-gray w3-hide-small w3-right">
<i class="fa fa-th"></i> Projects</a>
<a href="#about_me" class="w3-bar-item w3-button w3-hover-blue-gray w3-hide-small w3-right">
<i class="fa fa-user"></i> About Me</a>
</div>
<!-- navbar for small screens -->
<div id="navDemo" class="w3-bar-block w3-card-hide w3-white w3-hide w3-hide-large w3-hide-medium">
<a href="#alex_murray" class="w3-bar-item w3-button w3-hover-blue-gray" onclick="toggleFunction()">ALEX MURRAY</a>
<a href="#about_me" class="w3-bar-item w3-button w3-hover-blue-gray" onclick="toggleFunction()">ABOUT ME</a>
<a href="#projects" class="w3-bar-item w3-button w3-hover-blue-gray" onclick="toggleFunction()">PROJECTS</a>
<a href="#contact_me" class="w3-bar-item w3-button w3-hover-blue-gray" onclick="toggleFunction()">CONTACT ME</a>
<!-- <a href="#" class="w3-bar-item w3-button" onclick="toggleFunction()">SEARCH</a> -->
</div>
</div>
<!-- First Parallax Image with logo text below. -->
<div class="bgimg-1 w3-display-container w3-image" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">[ALEX MURRAY] <span class="w3-hide-small">DESIGN</span></span>
<!-- <span class="w3-hide-small">MURRAY</span></span>DESIGNS</span> -->
</div>
</div>
<!-- About me Section -->
<div class="w3-content w3-padding-48" style="max-width: 1564px">
<div class="w3-row">
<div class="w3-content w3-container w3-padding-64" id="about_me">
<h3 class="w3-center">About Me</h3>
<p class="w3-center">
<em>Web Developer</em>
</p>
<p>Hello there! My name is Alex. I am a former banker with Wells Fargo bank turned web developer. I grew up in the Queen
City where I attended the University of North Carolina at Charlotte. I returned to my alma mater, later, to become
a web developer.</p>
<p>While I am a full stack web developer, having been exposed to many different technologies on both the client and
server side, my primary focus has been on front-end technologies. I work on a number of projects using HTML, CSS,
and Javascript, in addition to incorporating different libraries and frameworks. I thoroughly enjoy exploring new
languages and refining my own skills. Let's face it, web development really is a moving target and learning never
stops!</p>
<p>In my spare time I enjoy giving back to the community and the people of our fair city. I am a volunteer with Code
for Charlotte and a staunch advocate for civic tech, open data, open government, and transparency. The experience
has been informative, invaluable, and transformative. I recommend that everyone voluteer for a citizen brigade!
I also like to ride my bike and take lots of photos. </p>
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large">
<p>
<b>
<i class="fa fa-user w3-margin-right"></i>Alex Murray</b>
</p>
<br>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1374530/profile%20pic.jpg" alt="Alex Murray" class="w3-circle w3-grayscale-max w3-image w3-opacity w3-hover-opacity-off"
width="300" height="300">
</div>
<div class="w3-panel w3-col m6 w3-hide-small w3-padding-64">
<p>
<i class="fa fa-quote-right" style="font-size:24px;color:#999999"> Cultivate the Karass</i>
</p>
<p>-Kurt Vonnegut
<i>("Cat's Cradle")</i>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End of "About Me" section -->
<!-- Beginning of second parallax-->
<div class="bgimg-2 w3-display-container w3-image">
<div class="w3-display-middle">
<span class="w3-row w3-xxlarge w3-text-white w3-wide" style="white-space:nowrap;">Projects <span class="w3-hide-small">and Photos</span></span>
</div>
</div>
<!-- Beginning of Projects and photo section -->
<!-- <div class="w3-row"> -->
<div class="w3-content w3-container w3-padding-32 " id="projects">
<h3 class="w3-center">PROJECTS</h3>
</div>
<!-- Projects Section-->
<!-- Consider adding project names as hover-overs -->
<div class="flex-container">
<!-- first card -->
<div class="w3-card-4 w3-display-container">
<img src='images/comingsoon.png' class="w3-opacity w3-hover-opacity-off" alt='Coming Soon' />
<div class="w3-padding w3-display-middle">
<span class="w3-tag w3-small w3-padding w3-red" style="transform:rotate(-10deg)">Coming Soon</span>
</div>
<div class="w3-container w3-center">
<div class="w3-show-inline-block">
<div class="w3-bar w3-margin">
<a href="https://serene-reef-95166.herokuapp.com/" class="w3-bar-item w3-btn w3-blue-gray">Brine Events</a>
<a href="https://github.com/namurray1/brineeventmarketing" class="w3-bar-item w3-btn w3- w3-black">Github Repo</a>
</div>
</div>
</div>
</div>
<!-- second card -->
<div class="w3-card-4 w3-display-container">
<img src='images/personal-portfolio.png' class="w3-opacity w3-hover-opacity-off" alt='Alex Murray Design' />
<div class="w3-padding w3-display-middle" id="display">
<h2>Portfolio</h2>
</div>
<div class="w3-container w3-center">
<div class="w3-show-inline-block">
<div class="w3-bar w3-margin">
<a href="https://floating-fortress-82510.herokuapp.com/" class="w3-bar-item w3-btn w3-blue-gray">Portfolio</a>
<a href="https://github.com/namurray1/new-portfolio" class="w3-bar-item w3-btn w3-black">Github Repo</a>
</div>
</div>
</div>
</div>
<!-- third card -->
<div class="w3-card-4 w3-display-container">
<img src='images/RAVN.png' class="w3-opacity w3-hover-opacity-off" alt='Rescue Animal Volunteer Network' />
<div class="w3-padding w3-display-middle" id="display">
<h2>RAVN</h2>
</div>
<div class="w3-container w3-center">
<div class="w3-show-inline-block">
<div class="w3-bar w3-margin">
<a href="#" class="w3-bar-item w3-btn w3-blue-gray w3-disabled">RAVN</a>
<a href="https://github.com/namurray1/RAVN" class="w3-bar-item w3-btn w3-black">Github Repo</a>
</div>
</div>
</div>
</div>
<!-- fourth card -->
<div class="w3-card-4 w3-display-container">
<img src='https://placehold.it/400x300/000000/ffffff?text=Charlotte%20Bikes' class="w3-opacity w3-hover-opacity-off" alt='Coming Soon'
/>
<div class="w3-padding w3-display-middle">
<span class="w3-tag w3-small w3-padding w3-red" style="transform:rotate(-10deg)">Coming Soon</span>
</div>
<div class="w3-container w3-center">
<div class="w3-show-inline-block">
<div class="w3-bar w3-margin">
<a href="#" class="w3-bar-item w3-btn w3-blue-gray w3-disabled">Charlotte Bikes</a>
<a href="#" class="w3-bar-item w3-btn w3-black w3-disabled">Github Repo</a>
</div>
</div>
</div>
</div>
</div>
<!-- Third parallax image goes here -->
<div class="bgimg-3 w3-display-container w3-image">
<div class="w3-display-middle">
<span class="w3-row w3-xxlarge w3-text-white w3-wide" style="white-space:nowrap;">Contact Me</span>
</div>
</div>
<!-- Contact section -->
<div class="w3-row w3-padding-24" id="contact_me">
<h3 class="w3-center">How to reach me</h3>
<p class="w3-center">Social Media | Email | Blog | Resume </p>
<div class="w3-row w3-center">
<div class="w3-container">
<a href="https://www.youtube.com/channel/UCCpm-Dh8OoVDQyEVrKXjEMA" class="w3-tooltip btn-floating" target="_blank">
<span class="w3-text w3-tag w3-small w3-animate-opacity" style="position:absolute;left:0;bottom:35px">Youtube</span>
<i class="fa fa-youtube w3-margin" style="font-size:32px;color:red"></i></a>
<a href="https://www.codepen.io" class="w3-tooltip btn-floating btn-floating" target="_blank">
<span class="w3-text w3-tag w3-small w3-animate-opacity" style="position:absolute;left:0;bottom:35px">Codepen</span>
<i class="fa fa-codepen w3-margin" style="font-size:32px;color:rgb(0, 0, 0)"></i></a>
<a href="https://www.linkedin.com/in/alex-murray-5056a155/" class="w3-tooltip btn-floating btn-floating" target="_blank">
<span class="w3-text w3-tag w3-small w3-animate-opacity" style="position:absolute;left:0;bottom:35px">Linkedin</span>
<i class="fa fa-linkedin-square w3-margin" style="font-size:32px; color:#66a3ff"></i></a>
<a href="https://github.com/namurray1" class="w3-tooltip btn-floating btn-floating" target="_blank">
<span class="w3-text w3-tag w3-small w3-animate-opacity" style="position:absolute;left:0;bottom:35px">Github</span>
<i class="fa fa-github w3-margin" style="font-size:32px;color:black"></i></a>
<a href="https://www.twitter.com/MURRAY_ALEX" class="w3-tooltip btn-floating btn-floating" target="_blank">
<span class="w3-text w3-tag w3-small w3-animate-opacity" style="position:absolute;left:0;bottom:35px">Twitter</span>
<i class="fa fa-twitter w3-margin" style="font-size:32px;color:#80b3ff"></i></a>
<a href="https://www.medium.com/code-for-charlotte" class="w3-tooltip btn-floating btn-floating" target="_blank">
<span class="w3-text w3-tag w3-small w3-animate-opacity" style="position:absolute;left:0;bottom:35px">Medium</span>
<i class="fa fa-medium w3-margin" style="font-size:32px;color:#000102"></i></a>
<a href="mailto:namurray1@gmail.com" class="w3-tooltip btn-floating btn-floating" target="_blank">
<span class="w3-text w3-tag w3-small w3-animate-opacity" style="position:absolute;left:0;bottom:35px">Gmail</span>
<i class="fa fa-envelope fa-inverse w3-margin" style="font-size:32px;color:red"></i></a>
</div>
</div>
<div class="w3-row">
<div class="w3-container w3-center">
<a href="https://docs.google.com/document/d/1SkRdAcuzlIgFES_NLNNcwL41TrNW3urS3USfbYUzAzw/edit?usp=sharing" class="w3-btn w3-purple">CV/Resume</a>
</div>
</div>
</div>
<!--End of contact section-->
<!--Google map and contact field -->
<div class="w3-row-padding w3-section">
<div class="w3-col m6 w3-container">
<div id="googleMap" class="w3-large-round w3-mobile w3-right w3-card-4 w3-grayscale-min" style="width:400px; height:400px;">
</div>
</div>
<div class="w3-col m6 w3-panel">
<div class="w3-large w3-mobile w3-margin-bottom">
<i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i>Charlotte, NC
<br>
<!-- <i class="fa fa-phone fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i>Phone: 704-222-9205 -->
<!-- <br>
<i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i>Email: namurray1@gmail.com
<br> -->
</div>
<form class="w3-container" action="mailto:namurray1@gmail.com" target="_blank">
<p>
<label>Full Name</label>
<input class="w3-input w3-disabled" type="text">
</p>
<p>
<label>Email</label>
<input class="w3-input w3-disabled" type="text">
</p>
<p>
<label>Message</label>
<input class="w3-input w3-disabled" type="text">
</p>
<button class="w3-button w3-hover-blue-gray w3-black w3-section w3-disabled" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</form>
</div>
</div>
<!--Footer -->
<div class="row">
<div class="w3-row w3-container w3-grey w3-center w3-padding">
<p>AMD
<i class="fa fa-copyright" style="font-size:18px">2017</i>
</p>
<!-- You need to fix the flag or take it out -->
</div>
</div>
<!--go to top button-->
<!-- <button onclick="topFunction()" id="myBtn" title="Go to Top">Top</button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/index.js "></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1-rFGZ-tBTowFcAEAvY4Ax0fAjGEmSpc&callback=myMap"
type="text/javascript"></script>
</body>
</html>