-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (133 loc) · 8.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<!--- Meta --->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calum Ragan | Full-Stack Engineer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!--- Stylesheets ---->
<link rel="stylesheet" href="assets/css/skeleton.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css" type='text/css'>
</head>
<body>
<!---- Title ----->
<div class="header">
<img id="profileimg" src="assets/images/Astropic.jpg" alt='calum-ragan-profile'>
<h3 class='animated' id='greeting'>Hello! My name is <strong class='my-name'>Calum Ragan</strong></h3>
<h5>Software Engineer located in Orange County</h5>
</div>
<hr>
<section class="row">
<!---- Introduction ----->
<summary class="nine columns">
<h3><i class="fa fa-user" aria-hidden="true"></i>About Me </h3>
<p class="info">I am a <strong>full-stack software engineer</strong> looking for web developer and software engineering roles. I am passionate about building technologies that can change the world. Recently I worked as a Teaching Assistant at Trilogy Education building future full-stack developers. In my free time, I enjoy playing video games, keeping up with the latest shows, and reading.
<br /><br />
Feel free to <a href='#contact'>contact</a> me with any questions, opportunties, or if you just want to chat :)
</p>
</summary>
<!---- Intro Buttons----->
<nav class="three columns">
<button onclick="window.open('https://github.com/calumR23');">
<img src='assets/images/github.svg' class='github-icon'/>
Github
</button>
<button onclick="window.open('https://www.linkedin.com/in/calumragan/');">
<img src='assets/images/linkedin.svg' class='linkedin-icon' />
LinkedIn
</button>
<button class="fa fa-envelope" onclick="window.location='#contact-info'"> Contact</button>
</nav>
</section>
<hr>
<!---- Portfolio ----->
<div id="portfolio">
<h3> <i class="fa fa-briefcase" aria-hidden="true"></i>Projects</h3>
<p>Fun apps and websites I have built, either for school or for fun(displayed with permission). Hover above each block for a description of the project, and click to see the project in real life!</p>
<!--- Gallery --->
<div class="container-fluid" id='gallery' name='gallery'>
<div class="row row-10 row-horizontal-10">
<div class="col-md-6"> <a class="thumb-modern" data-lightgallery="item" href="https://the-kog.herokuapp.com/" target='_blank'>
<figure><img src="assets/images/arcade.jpg" alt="kingsarcade" class='gallery-pic'>
</figure>
<div class="thumb-modern__overlay">
<p class='gallery-title'><strong>King's Arcade</strong>, built with ReactJS, PhaserJs & Bootstrap 4</p>
</div></a></div>
<div class="col-md-6"><a class="thumb-modern" data-lightgallery="item" href="https://travel-by-raft.herokuapp.com/" target='_blank'>
<figure><img src="assets/images/raft.jpg" alt="raft" class='gallery-pic'>
</figure>
<div class="thumb-modern__overlay">
<p class='gallery-title'><strong>Raft</strong>, built with HTML/CSS, & AngularJS</p>
</div></a></div>
<div class="col-md-6"><a class="thumb-modern" data-lightgallery="item" href="https://la-crime-locator.herokuapp.com/" target='_blank'>
<figure><img src="assets/images/lapd.jpg" alt="" class='gallery-pic'>
</figure>
<div class="thumb-modern__overlay">
<p class='gallery-title'><strong>Crime App</strong>, built with HTML/CSS & Javascript</p></div></a></div>
<div class="col-md-6"><a class="thumb-modern" data-lightgallery="item" href="#header" >
<figure><img src="assets/images/tv.jpg" alt="" class='gallery-pic'>
</figure>
<div class="thumb-modern__overlay">
<p class='gallery-title'><strong>WatchWhere</strong>, built with ReactJS & Guidebox API(in development)</p></div></a></div>
</div>
</div>
<hr>
<div id="project-div">
<h3><img src='assets/images/programming.svg' class="fa fa-experience" aria-hidden="true" />Experience</h3>
<div id="list">
<!---- Professional Experience ----->
<h5><i class="fa fa-globe" aria-hidden="true"></i><b>Professional</b></h5>
<ul>
<li><a href='https://bootcamp.ce.uci.edu/coding/' target='_blank'><strong>Trilogy Education</strong></a>, Education Service that offers intensive courses all over the tech industry. | Teaching Assistant</li>
<li><a href='https://salonhero.com/' target="_blank"><strong>Salon Hero LLC</strong></a>, Digital Media for Hair Salons, Stylists, & Professional Haircare Brands| Web Developer</li>
<li><a href='https://calumr23.github.io/Portfolio/.' target="_blank"><strong>Freelance</strong></a>, Building Web Apps with MERN (MongoDB, Express, ReactJS, and NodeJS) | Full-Stack Engineer</li>
</ul>
</div>
</div>
<hr>
<!---- Contact Info ----->
<div id="contact-info">
<a name='contact'></a>
<footer class="row">
<section class="six columns info">
<h3><b>Contact me</b></h3>
<span><b><i class="fa fa-envelope"></i> E-Mail:</b> <a href="mailto:[email protected]">[email protected]</a></span><br>
<span class="pull-right1"><b><i class="fa fa-phone"></i> Phone:</b> (949)-439-4440 </span><br>
</section>
<!---- Contact Form ----->
<section class="six columns contact">
<h3><i class="fa fa-envelope"></i><b> Contact</b></h3>
<form action="https://formspree.io/[email protected]" method="POST">
<div class="row">
<div class="six columns">
<input class="u-full-width" type="name" placeholder="Name" id="NameInput" name="name">
</div>
<div class="six columns">
<input class="u-full-width" type="email" placeholder="Email" id="EmailInput" name="email">
</div>
</div>
<textarea class="u-full-width" placeholder="Message..." id="Message" name="message"></textarea>
<input class="button" type="submit" value="Send">
<input type="hidden" name="_subject" value="New message!" />
</form>
</section>
</footer>
</div>
<!---- Scripts ---->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src='assets/js/main.js' type='text/javascript'></script>
</body>
</html>