-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (169 loc) · 9.86 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>DJ Joy</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
</script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <script type="text/javascript" src="./js/index.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="./favicon.png"/>
<meta name="referrer" content="origin">
</head>
<body>
<div class="nav-wrapper">
<p class="dj">Hi, I'm DJ: {
<span class="text"></span> }
</p>
<span class="right valign-wrapper">
<a href="#about-me" id="me-link" class="hoverable">About Me</a>
<a href="#my-projects" id="project-link" class="hoverable">My Projects</a>
<a href="#contact-me" id="contact-link" class="hoverable">Contact Me</a>
</span>
</div>
<div class="slider">
<ul class="slides">
<li>
<img class="slider-pic" src="./images/code2.jpeg">
<div class="caption center-align slider-text" id="webdev">
<h1 class="slider-text">Full-Stack Web Developer</h1>
<h5 class="slider-subtext">Front End, Back End, and Everything Between.</h5>
</div>
</li>
<li>
<img class="slider-pic" src="./images/athens.jpg">
<div class="caption right-align" id="philosopher">
<h1 class="slider-text">philo- "loving" + </h1>
<h1 class="slider-text">-sophia "knowledge"</h1>
<h5 class="slider-subtext">Logical, Rational, Ethical.</h5>
</div>
</li>
<li>
<img class="slider-pic" src="./images/BrainGears.gif">
<div class="caption center-align slider-text" id="problem-solver">
<h1 class="slider-text">Analytical</h1>
<h5 class="slider-subtext">Critical Thinker.</h5>
</div>
</li>
<li>
<img class="slider-pic" src="./images/veteran.jpg">
<div class="caption left-align slider-text" id="veteran">
<h1 class="slider-text">Team-Player</h1>
<h5 class="slider-subtext">Service, Discipline, and Dedication.</h5>
</div>
</li>
</ul>
</div>
<div class="container">
<div class="row" id="about-me">
<div class="col s6">
<div class="column" id="photos">
<div class="img-responsive">
<img class="dj-pics w3-animate-fading" src="./images/djsuitpic.jpg" alt="DJ in a suit">
<img class="dj-pics w3-animate-fading" src="./images/escape.jpg" alt="We escaped!">
<img class="dj-pics w3-animate-fading" src="./images/djhg.png" alt="DJ in ceremonial HG uniform">
<img class="dj-pics w3-animate-fading" src="./images/djwed.jpg" alt="DJ at a friend's wedding">
<img class="dj-pics w3-animate-fading" src="./images/eclipse.JPG" alt="DJ and kids waiting for the eclipse">
<img class="dj-pics w3-animate-fading" src="./images/djrobot.jpg" alt="DJ in Mr. Robot costume">
<img class="dj-pics w3-animate-fading" src="./images/tubing.JPG" alt="Tubing at Arctic Valley">
</div>
</div>
</div>
<div class="col s6" id="bio">
<h2 class="section">About Me</h2>
<p>I'm a philosopher turned web developer, Air Force veteran, dad, and computer geek. I wrote my first computer program at age 6 in BASIC, I've worked with standalone DOS-based terminals, built gaming rigs for myself and friends, installed crude token ring LANs, and been a Crew Commander in charge of securing the networks of 16 Air Force bases and thousands of clients. After being a consumer of technology and dabbling with coding for decades, I decided to make a career out of it.</p>
</div>
</div> <!-- end of row -->
<div class="row center-align" id="my-projects">
<div class="col s12">
<h2 class="section">My Projects</h2>
<div class="card">
<div class="card-content">
<p class="card-title">Book$tore</p>
<a href="https://powerful-earth-96795.herokuapp.com/"><img class="card-image hvr-bounce-out" title="Single-page web application allowing users to catalog books from their home libraries, mark books they want to get rid of, and queries Amazon.com for current stock and price of books." src="./images/bookstorelogo.png" alt="Single-page web app for managing your home library"></a>
</div>
</div>
<div class="card">
<div class="card-content">
<p class="card-title">Buridian</p>
<a href="https://github.com/djjoyjr/Buridian"><img class="card-image hvr-bounce-out" title="A mobile application (for Android or iOS) that helps users decide where to eat." src="./images/buridian.png" alt="Buridian logo"></a>
</div>
</div>
<div class="card">
<div class="card-content">
<p class="card-title">Pic A or B</p>
<a href="https://picaorb.herokuapp.com/"><img class="card-image hvr-bounce-out" title="A web application for users to do A/B Testing via any two images. The images can be submitted via Twitter or the PicAorB frontend." src="./images/logo.png" alt="A/B Testing via pictures"></a>
</div>
</div>
<div class="card">
<div class="card-content">
<p class="card-title">Simpsons Game</p>
<a href="https://djjoyjr.github.io/SimpsonsThemedReactMemoryGame/"><img class="card-image hvr-bounce-out" title="React based memory game with a Simpson theme." src="./images/SimpsonsClickyGame.png" alt="Simpson Clicky Game"></a>
</div>
</div>
</div>
</div><!-- end of row -->
<div class="row center-align">
<div class="col s12">
<div class="card">
<div class="card-content">
<p class="card-title">BluthMatcher</p>
<a href="https://bluthmatcher.herokuapp.com/"><img class="card-image hvr-bounce-out" src="./images/Arrested-Development.jpg" alt"BluthMatcher" title="A fun 'matchmaking' app based on the TV show Arrested. Development"></a>
</div>
</div>
<div class="card">
<div class="card-content">
<p class="card-title">The SCROnion</p>
<a href="https://djmongoscraper.herokuapp.com/"><img class="card-image hvr-bounce-out" src="./images/onionsBG.jpg" alt="SCROnion" title="The SCROnion, America's Finest News Scrapings - Web Scraping application that lets users find all of the headlines from The Onion."></a>
</div>
</div>
<div class="card">
<div class="card-content">
<p class="card-title">TV Show gif API</p>
<a href="https://djjoyjr.github.io/giphy-api/"><img class="card-image hvr-bounce-out" src="./images/oldtv.jpg" title="Web application that uses API to giphy.com for TV show themed gifs." alt="TV Show gif API"></a>
</div>
</div>
<div class="card">
<div class="card-content">
<p class="card-title">Latchkeyper</p>
<a href="https://djjoyjr.github.io/latchkeyper/"><img class="card-image hvr-bounce-out" title="A web application for parents to communicate with their kids, assign and track chores, tasks, etc. with a points/reward system for completing tasks. Designed for parents of ‘latchkey’ kids." src="./images/atkey.png" alt="Latchkeyper logo"></a>
</div>
</div>
</div>
</div><!-- end of row -->
<hr>
<div class="row center-align">
<div class="col s12 email-form">
<h1 id="email-form-head">Say "Hi" if you want to chat, wax philosophical, grab a coffee, or offer me my dream job!</h1>
<form action="http://formspree.io/[email protected]" method="POST">
<label>Your name:</label>
<input type="text" name="name" placeholder="e.g. Christina Turkleton"><br />
<label>Your email:</label>
<input type="email" name="_replyto" placeholder="e.g. [email protected]">
<label>Your message to me:</label>
<textarea name="message" placeholder="Here's something fascinating that will blow your mind, DJ!!!"></textarea>
<input type="submit" value="Send" id="send-button" class="hoverable">
</form>
</div>
</div>
</div>
<br />
<footer class="footer has-text-centered" id="contact-me">
<a href="https://drive.google.com/open?id=1Lmo-6cT9rLAVATNcvrI3Oxo7kF1ZuegR"><img src="./images/resume.png" height="65" width="65" alt="Resume" class="hvr-wobble-vertical" title="My Resume"></a>
<a href="https://github.com/djjoyjr"><img src="./images/gh.png" height="65" width="65" alt="GitHub" class="hvr-wobble-vertical" title="Github"></a>
<a href="https://www.linkedin.com/in/dj-joy"><img src="./images/li.png" height="65" width="65" alt="LinkedIn" class="hvr-wobble-vertical" title="LinkedIn"></a>
<a href="mailto:[email protected]"><img src="./images/email.ico" height="65" width="65" alt="email" class="hvr-wobble-vertical" title="email Me"></a>
<a href="./nisp.pdf"><img src="./images/paper.png" height="65" width="65" alt="Resume" class="hvr-wobble-vertical" title="Journal Publication: Cybersecurity and User Responsibility: Surprising Normative Differences"></a>
<h2>Copyright <a href="mailto:[email protected]"> DJ Joy </a>2017</h2>
</footer>
</body>
</html>