forked from tim-stone/portfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (155 loc) · 10.3 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
<!DOCTYPE HTML>
<!--
Portfolio piece for Tim Stone - Front-End Developer
-->
<html>
<head>
<title>Tim Stone</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Intro -->
<section class="intro">
<header>
<h1>Tim Stone</h1>
<p>Front-End Developer Portfolio</p>
<ul class="actions">
<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
</ul>
</header>
<div class="content">
<span class="image fill" data-position="center"><img src="images/unsplash/head-screen.jpg" alt="" />
<a href="#portfolio" class="button primary head-button">Portfolio</a>
<a href="assets/resume/tim-stone-resume.pdf" class="button primary head-button" target="_blank">Resume</a>
</span>
</div>
</section>
<!-- Section -->
<section id="first">
<header>
<h2>Bio</h2>
</header>
<div class="content">
<p><strong>Front-end Web Development</strong> wasn't even on my radar when I found it 7 years ago. After landing a work-study position in the marketing department of my university I was fortunate to build a relationship with the department's lead web developer. He quickly took me under his wing and taught me everything he knew. His teaching style, whilst unorthodox, gave me the ability to learn anything and overcome any challenge. Day in and day out he would print off pages of basic websites and tell me to write it out in html. He did nothing to prepare me for each lesson. Every night I stumbled around my text editor trying to solve the progressively more difficult problems he gave me. With each project I finished he would comb through my code and critique every bit. It battle hardened me and made me able to face any challenge. In the following years I would progress from a 5-hour per week work study to a nearly full time Associate Web Editor. At that same time I began working as a freelancer and have now finished dozens of projects for companies across many industries and spanning the entire U.S. I'm proud to showcase some of my favorite projects here. Some were gruelling contracts with tight deadlines and others were simple html canvas games I made just to learn something new. I hope you enjoy peeking into the window of my journey and further hope that your organization could be the next step in that journey. Here's to many more lines of code and even more lines of comments!</p>
</div>
</section>
<!-- Section -->
<section id="portfolio">
<header>
<h2>Showcase</h2>
</header>
<div class="content">
<div class="gallery">
<a href="images/portfolio/pawbits-landing.png" class="landscape"><img src="images/portfolio/pet.jpg" alt="Cleaves-Bessmer-Marrieti inc." /></a>
<p class="caption-small"><strong>Pawbits</strong> was a start-up for which I was contracted to build the front-end. After some unrelated events the start-up never made it past the development phase. However, it is still one of my personal favorite projects. Originally, the app was built in Angular, but needed to be converted to basic html due to back-end limitations. My personal favorite features are the side nav and the modals.</p>
<a href="assets/portfolio-host/paw-bits/index.html" class="button primary" target="_blank">See Site</a>
<a href="https://github.com/tim-stone/portfolio/tree/master/assets/portfolio-host/paw-bits" class="button" target="_blank">See Code</a>
</div>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>Offline Environments</h2>
<h4>A collection of projects that are either no longer online or were used in offline applications</h4>
</header>
<div class="content">
<div class="gallery">
<div class="gallery-contain">
<a href="images/portfolio/homecoming-landing.png" class="in-gal-contain"><img src="images/portfolio/homecoming.jpg" alt="Evangel University Homecoming Landing Page" /></a>
<p><strong>Evangel University Homecoming</strong> I built this site from the ground up using Foundation. It was built to be used as both a promotional piece and homebase for guests on homecoming weekend.</p>
<a href="assets/portfolio-host/homecoming/index.html" class="button primary in-gal-contain" target="_blank">See Site</a>
<br />
<a href="https://github.com/tim-stone/portfolio/tree/master/assets/portfolio-host/homecoming" class="button in-gal-contain" target="_blank">See Code</a>
</div>
<div class="gallery-contain">
<a href="images/portfolio/agts-landing.png" class="in-gal-contain"><img src="images/portfolio/yearend.jpg" alt="Assemblies of God Theological Seminary Year End Campaign Landing Page" /></a>
<p><strong>AGTS Year End Campaign</strong> Again I built this campaign landing page using Foundation from the ground up. I'm esspecially proud of how well this looks across desktop, tablet and mobile.</p>
<a href="assets/portfolio-host/yearend-agts/index.html" class="button primary in-gal-contain" target="_blank">See Site</a>
<br />
<a href="https://github.com/tim-stone/portfolio/tree/master/assets/portfolio-host/yearend-agts" class="button in-gal-contain" target="_blank">See Code</a>
</div>
</div>
<div class="gallery">
<div class="gallery-contain">
<a href="images/portfolio/social-stream.png" class="in-gal-contain"><img src="images/portfolio/social.jpg" alt="Social Media Stream" /></a>
<p><strong>Social Media Stream</strong> I built this social media stream for use on TV's across campus. There was only one display size for this project so it is not responsive.</p>
<a href="assets/portfolio-host/social-media-stream/index.html" class="button primary in-gal-contain" target="_blank">See Site</a>
<br />
<a href="https://github.com/tim-stone/portfolio/tree/master/assets/portfolio-host/social-media-stream" class="button in-gal-contain" target="_blank">See Code</a>
</div>
<div class="gallery-contain">
<a href="images/portfolio/pong.png" class="in-gal-contain"><img src="images/portfolio/pong.jpg" alt="Pong Game" /></a>
<p><strong>Pong Canvas Game</strong> This simple HTML canvas game is built and styled entirely in JavaScript. I built this project to dip my toes in the game dev world.</p>
<a href="assets/portfolio-host/pong/pong.html" class="button primary in-gal-contain" target="_blank">See Site</a>
<br />
<a href="https://github.com/tim-stone/portfolio/tree/master/assets/portfolio-host/pong" class="button in-gal-contain" target="_blank">See Code</a>
</div>
</div>
</div>
</section>
<!-- Section -->
<section>
<header>
<h2>Live Environments</h2>
<h4>A collection of client sites that are currently live</h4>
</header>
<div class="content">
<div class="gallery">
<a href="images/portfolio/cbm-landing.png" class="landscape"><img src="images/portfolio/cbm.jpg" alt="Cleaves-Bessmer-Marrieti inc." /></a>
<p class="caption-small"><strong>Cleaves-Bessmer-Marrieti, inc.</strong> is a custom Wordpress site built using X-theme as a baseline. In this project I built the complete front-end of the site. Custom page layouts include: the entire products funneland the blog section.</p>
<a href="https://cbmrep.com" class="button primary" target="_blank">See Site</a>
<a href="https://github.com/tim-stone/portfolio/tree/master/assets/portfolio-host/CBM" class="button" target="_blank">See Code</a>
<div class="gallery-contain">
<a href="images/portfolio/black-bear-landing.png" class="in-gal-contain"><img src="images/portfolio/blackbear.jpg" alt="Black Bear Roofing and Exteriors LLC." /></a>
<p><strong>Black Bear Roofing and Exteriors LLC.</strong> is another Wordpress site built using X-theme as a baseline. For this project, I built mostly within the bounds of X-Theme.</p>
<a href="https://blackbearroofing.com/" class="button primary in-gal-contain" target="_blank">See Site</a>
</div>
<div class="gallery-contain">
<a href="images/portfolio/brand-landing.png" class="in-gal-contain"><img src="images/portfolio/brandguide.jpg" alt="Evangel Brand Guidelines Site" /></a>
<p><strong>The Evangel Brand Guidelines Site</strong> was one of the first full sites I developed. I started with a Wordpress theme and worked with plugins/custom CSS to get desired results.</p>
<a href="http://brand.evangel.edu/" class="button primary in-gal-contain" target="_blank">See Site</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<section>
<div class="content">
<div class="copyright">© 2020 All rights reserved. Tim Stone.</div>
</div>
<header>
<footer>
<ul class="items">
<li class="foot-list">
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li class="foot-list">
<a href="tel:7202086971">(720) 208-6971</a>
</li>
<li class="foot-list">
<ul class="icons">
<li><a href="https://www.linkedin.com/in/tim-stone-1b973a189/" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/tim-stone" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
</ul>
</li>
</ul>
</footer>
</header>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>