forked from JS-goose/js-goose.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
210 lines (202 loc) · 12.1 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web Developer Portfolio - Jonathan Sexton</title>
<meta name="description" content="a portfolio page for jonathan sexton">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/styles.css">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9"
crossorigin="anonymous">
<!-- Google Fonts CDN -->
<link href="https://fonts.googleapis.com/css?family=Raleway%7CTitillium+Web" rel="stylesheet">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="wrapper">
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#about_me">
<img src="./img/powerGoose.png" alt="a goose with a power cord" class="logo">Web Development by Jonathan Sexton</a>
<!-- Logo designed and built by me, Jonathan Sexton at https://www.freelogodesign.org/index.html -->
<ul class="navbar-nav ml-auto mt-2 mt-lg-2">
<li class="nav-item">
<a class="nav-link" href="#about_me">
<i class="fas fa-male"></i> | Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">
<i class="fas fa-briefcase"></i> | Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">
<i class="fas fa-users"></i> | Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<section class="top">
<div class="container-fluid header" id="about_me">
<div class="row">
<div class="col-md-6 offset-md-3">
<img src="./img/twitter%20icon.jpg" class="img-fluid rounded mx-auto d-block me-img" alt="a picture of Jonathan Sexton">
<div class="card text-white bg-dark mb-3 me">
<div class="card-body">
<h1 class="card-title">Hello and Welcome!</h1>
<hr>
<p class="card-text">I'm Jonathan Sexton and I'm a Front End Web Developer. I enjoy creating
beautifully designed websites and giving back to my community whenever possible.
If I'm not putting fingers to keys I enjoy spending time with my family, taking my
dogs to the park, and going to the beach!</p>
<p>I've always been interested in computers and helping people. Coming from a customer
service background, I make it my personal mission to help others achieve their goals
and find success. Once I transitioned into web development, that mission became connecting
people through technology to achieve their goals.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main_content">
<div class="container-fluid projects divider">
<div class="row">
<div class="col-sm-12 divider-content">
<h2>Highlighted Projects</h2>
</div>
</div>
</div>
<header class="projects-header">
<div class="container-fluid">
<div class="row" id="projects">
<div class="col-sm-12">
<h2 class="project-section-one">Websites</h2>
</div>
</div>
</header>
<article class="projects-article">
<div class="row content">
<div class="col-sm">
<a href="https://www.conduitpc-shop.com/" target="_blank">
<img src="./img/ConduitPCShopScreenshot.png" alt="a screen shot of Conduit PC Shop website" class="img-thumbnail project-img">
</a>
<p class="img-desc one">This is my first paid freelance project. I built it on WordPress along
with some custom CSS and HTML.
</p>
</div>
<div class="col-sm">
<a href="https://github.com/JS-goose/Projects/tree/master/startup%20landing%20page" target="_blank">
<img src="./img/bigj.png" alt="a screen shot of a custom landing page" class="img-thumbnail project-img">
</a>
<p class="img-desc">A simple landing page built for a fictitious company that builds custom grills.
It is built with HTML and CSS.</p>
</div>
<div class="col-sm">
<a href="https://www.tracys-upholstery.com/" target="_blank">
<img src="./img/tracys-upholstery.png" alt="a screen shot of tracy's upholstery .com" class="img-thumbnail project-img">
</a>
<p class="img-desc">This is the very first website I built. It is for a local upholstery company
and the site is built with Bootstrap.</p>
</div>
</div>
</article>
<hr>
<header class="projects-header">
<div class="row">
<div class="col-sm-12">
<h2 class="project-section-two">JavaScript Apps</h2>
</div>
</div>
</header>
<article class="projects-article">
<div class="row">
<div class="col-sm-4">
<a href="https://github.com/JS-goose/Projects/tree/master/colorGuessGame" target="_blank">
<img src="./img/colorGuess.png" alt="a screen shot of a color guess game" class="img-thumbnail project-img">
</a>
<p class="img-desc">This is an RGB Color Guessing game with hard/easy mode as well as a reset
button. It is build on JavaScript.
</p>
</div>
<div class="col-sm-4">
<a href="https://codepen.io/JS-goose/full/BYLaLE/" target="_blank">
<img src="./img/pixel%20art%20screenshot'.png" alt="a screen shot of a pixel art game" class="img-thumbnail project-img">
</a>
<p class="img-desc one">Here is a Pixel Art Maker that was the final project of the Grow With
Google and Udacity Challenge Course. It is built on jQuery.</p>
</div>
<div class="col-sm-4">
<a href="https://codepen.io/JS-goose/full/xjoZBZ/" target="_blank">
<img src="./img/board.png" alt="a screen shot of a matching game app"
class="img-thumbnail project-img img-three">
</a>
<p class="img-desc two">Here is my take on the classic matching game. It's built with HTML, CSS,
and JavaScript.
</p>
</div>
</div>
</article>
<section class="contact-section">
<div class="container-fluid contact divider">
<div class="row">
<div class="col-sm">
<h2 class="divider_content" id="connect">Let's Connect!</h2>
<a href="https://www.twitter.com/jj_goose" class="footer-links" target="_blank">
<i class="fab fa-twitter-square"></i>
</a>
<a href="https://github.com/JS-goose" target="_blank" class="footer-links">
<i class="fab fa-github-square"></i>
</a>
<a href="https://www.linkedin.com/in/jj-goose/" target="_blank" class="footer-links">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
</div>
</section>
</section>
</main>
<footer class="footer bg-dark sticky-bottom">
<div class="container copyright">
<p>This website is built on
<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>. Divider images are from
<a href="https://www.unsplash.com" target="_blank">Unsplash</a>. Icons are provided by
<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>.
<br>
<a href="https://www.fonts.google.com" target="_blank">Google Fonts</a> supplied the fonts on the page.
All other images, design, and layout have been created by me, ©2018
<a href="https://www.powerofgoose.com" target="_blank">Jonathan Sexton</a>
</p>
</div>
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<!-- Popper CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</div>
</body>
</html>