-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
16 lines (14 loc) · 20.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html> <html class=no-js ng-app=Portfolio> <head> <meta charset=utf-8> <meta name=description content="Personal portfolio of Jared M Stevick, Front End Developer"> <meta name=viewport content="width=device-width, initial-scale=1"> <title>Jared M Stevick | Front End Developer</title> <link rel=stylesheet href=styles/main.css> <link href="http://fonts.googleapis.com/css?family=Cabin|Lato" rel=stylesheet type=text/css> <link rel=stylesheet href=http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css> <script src=scripts/vendor/modernizr.js></script> </head> <body data-spy=scroll ng-controller="MainCtrl as main"> <!--[if lt IE 10]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]--> <div class="navbar navbar-inverse navbar-fixed-top"> <div class=navbar-header><a class=navbar-brand href=#top>Jared M Stevick</a> <a class=navbar-toggle data-toggle=collapse data-target=.navbar-collapse> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </a> </div> <div class="navbar-collapse collapse navbar-right"> <ul class="nav navbar-nav"> <li><a href=#about>About</a></li> <li><a href=#portfolio>Portfolio</a></li> <li><a href=#blog>Blog</a></li> <li><a href=#contact>Contact</a></li> <li> <a href=https://github.com/jaredstevick target=_blank><i class="fa fa-fw fa-github"></i></a> </li> <li> <a href=https://twitter.com/CountMachuki target=_blank><i class="fa fa-fw fa-twitter"></i></a> </li> <li> <a href=mailto:[email protected] target=_blank><i class="fa fa-fw fa-envelope"></i></a> </li> </ul> </div> </div> <div class=overlay><h1>Jared Stevick</h1></div> <div class=overlay2><h2>Developer Photographer Adventurer</h2></div> <div class=overlay3><h3>Pittsburgh Orlando Remote</h3></div> <header id=myCarousel class="carousel slide"> <ol class=carousel-indicators> <li data-target=#myCarousel data-slide-to=0 class=active></li> <li data-target=#myCarousel data-slide-to=1></li> <li data-target=#myCarousel data-slide-to=2></li> </ol> <div class=carousel-inner> <div class="item active"> <div class=fill style="background-image:url('http://res.cloudinary.com/jaredstevick/image/upload/v1428072594/friday1a_eu84yt.png');"></div> <div class=carousel-caption> </div> </div> <div class=item> <div class=fill style="background-image: url('http://res.cloudinary.com/jaredstevick/image/upload/v1429244982/orlando_gbszqo.jpg');"></div> <div class=carousel-caption> </div> </div> <div class=item> <div class=fill style="background-image:url('http://res.cloudinary.com/jaredstevick/image/upload/v1428039694/20140923_110459_en2zhf.jpg');"></div> <div class=carousel-caption> </div> </div> </div> </header> <div id=about> <div class="facebox col-md-2 col-md-offset-1"> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1428084376/Untitled_y9ddis.jpg height=210 width=150> </div> <div class="about col-md-8"> <h2>Hello There!</h2> <p>I'm Jared Stevick and I'm originally from Pittsburgh, PA. For the past ten years, I have worked in finance and customer service but was always looking for something more. While on an extended vacation in the Virgin Islands, I realized that it was time for a career change. I've always been fascinated by technology and have a passion for learning new skills. I also needed something more challenging that provided me with an opportunity for perpetual learning. I found all of those factors and then some in web development.</p> <p>At the beginning of this year, I moved to Orlando to attend the spring Front-End Engineering cohort at the Iron Yard. While there, I spent twelve crazy weeks learning HTML, CSS, and a whole lot of Javascript. I also became skilled with development processes and tools like Git and Github, Gulp, Grunt, and Bower. Today, I'm building responsive, mobile-friendly websites, doing awesome stuff with API data, and writing Angular applications.</p> <p>If I'm not at my computer, you can probably find me outside. I love to travel and live for adventure - from backpacking the national parks to diving in the Caribbean, kayaking the lakes and canals of central Florida, mountain biking in the hills of rural Pennsylvania. I'm also not too bad at disc golf. When I'm at home, I enjoy making and building things and growing my own fruits and vegetables in my soilless garden. I'm also a pretty good bartender.</p> <p>You can check out some of my recent projects below. Feel free to get in touch with me via the links at the bottom of the page!</p> </div> </div> <section id=portfolio> <div class=container> <div class=row> <div class="col-lg-12 text-center"> <h2>Portfolio</h2> <hr> </div> </div> <div class=row> <div class="col-sm-4 portfolio-item"> <a href=#portfolioModal1 class=portfolio-link data-toggle=modal> <div class=caption> <div class=caption-content> <i class="fa fa-search fa-3x"></i> <h4>whatsPup</h4> </div> </div> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1428094782/whatsPup_vhdu8p.png class=img-responsive> </a> </div> <div class="col-sm-4 portfolio-item"> <a href=#portfolioModal2 class=portfolio-link data-toggle=modal> <div class=caption> <div class=caption-content> <i class="fa fa-search fa-3x"></i> <h4>ngWeather</h4> </div> </div> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1430406811/ngWeatherthumb_db2hg9.png class=img-responsive> </a> </div> <div class="col-sm-4 portfolio-item"> <a href=#portfolioModal3 class=portfolio-link data-toggle=modal> <div class=caption> <div class=caption-content> <i class="fa fa-search fa-3x"></i> <h4>Hex Color Clock</h4> </div> </div> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1428294025/colorclock3_jhccu5.png class=img-responsive> </a> </div> <div class="col-sm-4 portfolio-item"> <a href=#portfolioModal4 class=portfolio-link data-toggle=modal> <div class=caption> <div class=caption-content> <i class="fa fa-search fa-3x"></i> <h4>Surf & Paddle</h4> </div> </div> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1428169036/SURF___PADDLE_CO__bmjxk8.png class=img-responsive> </a> </div> <div class="col-sm-4 portfolio-item"> <a href=#portfolioModal5 class=portfolio-link data-toggle=modal> <div class=caption> <div class=caption-content> <i class="fa fa-search fa-3x"></i> <h4>Vertical Timeline</h4> </div> </div> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1428169259/Vertical_Timeline_4_0_lzny4o.png class=img-responsive> </a> </div> <div class="col-sm-4 portfolio-item"> <a href=#portfolioModal6 class=portfolio-link data-toggle=modal> <div class=caption> <div class=caption-content> <i class="fa fa-search fa-3x"></i> <h4>Freelance Work in Progress</h4> </div> </div> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1429209704/http_lorempixel.com_1800_1300_nature_5_sku5zi.jpg class=img-responsive> </a> </div> </div> </div> </section> <div class="portfolio-modal modal fade" id=portfolioModal1 tabindex=-1 role=dialog aria-hidden=true> <div class=modal-content> <div class=close-modal data-dismiss=modal> <div class=lr> <div class=rl> </div> </div> </div> <div class=container> <div class=row> <div class="col-lg-8 col-lg-offset-2"> <div class=modal-body> <h2>whatsPup</h2> <hr> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1428094782/whatsPup_vhdu8p.png class="img-responsive img-centered"> <p>whatsPup is an Angular web application for pet-sitters to store their client data and send real-time updates when they visit their client's homes. Users are authenticated through Facebook. Client data is stored in Firebase. Email updates are sent via Mandrill and image uploads are made possible through a Cloudinary plugin.</p> <ul class=list-inline> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223177/fsmks73fwhgfs3kx2oxh.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223176/mttxlg7wi0cjqkhepa7t.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1428348826/http_stephenplusplus.github.io_yeoman.io_assets_img_yeoman-003_qc86dd.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223175/h52a9emom5vtxrsf5fqf.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223176/lnuz8qbkookd7d28s0ba.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223176/t2s1fipnibfhh8fciqjc.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223176/hbkasfizitx1bkclofde.png></li> </ul> <p>Date:<strong> March 2015</strong></p> <ul class="list-inline item-details"> <li><a href=http://whatspup.firebaseapp.com target=_blank><button class="btn btn-lg">Live Demo</button></a></li> <li><a href=https://github.com/jaredstevick/whatspuptest target=_blank><button class="btn btn-lg"><i class="fa fa-github"></i> Github</button></a></li> </ul> <button type=button class="btn btn-lg" data-dismiss=modal><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> </div> </div> <div class="portfolio-modal modal fade" id=portfolioModal2 tabindex=-1 role=dialog aria-hidden=true> <div class=modal-content> <div class=close-modal data-dismiss=modal> <div class=lr> <div class=rl> </div> </div> </div> <div class=container> <div class=row> <div class="col-lg-8 col-lg-offset-2"> <div class=modal-body> <h2>NgWeather</h2> <hr> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1430406520/ngWeather_g9y3uk.png class="img-responsive img-centered"> <p>This weather app was one of the first projects I worked on when learning how to get and post API data. I have since gone back and redone the app with Angular. It uses the Google Maps API to return latitude and longitude when given a location. These coordinates are then used to retrieve an accurate local forecast from the Forecast.io API. The app features animated backgrounds that change dependent upon the current weather in the location selected.</p> <ul class=list-inline> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223177/fsmks73fwhgfs3kx2oxh.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1428348826/http_stephenplusplus.github.io_yeoman.io_assets_img_yeoman-003_qc86dd.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223175/h52a9emom5vtxrsf5fqf.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1428349186/http_vigesimalsoft.com_wp-content_uploads_2012_12_jquery-icon_xtune4.png></li> </ul> <p>Date:<strong> February 2015 / May 2015</strong></p> <ul class="list-inline item-details"> <li><a href=http://jaredstevick.github.io/newWeather/dist/index.html target=_blank><button class="btn btn-lg">Live Demo</button></a></li> <li><a href=https://github.com/jaredstevick/newWeather target=_blank><button class="btn btn-lg"><i class="fa fa-github"></i> Github</button></a></li> </ul> <button type=button class="btn btn-lg" data-dismiss=modal><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> </div> </div> <div class="portfolio-modal modal fade" id=portfolioModal3 tabindex=-1 role=dialog aria-hidden=true> <div class=modal-content> <div class=close-modal data-dismiss=modal> <div class=lr> <div class=rl> </div> </div> </div> <div class=container> <div class=row> <div class="col-lg-8 col-lg-offset-2"> <div class=modal-body> <h2>Hex Color Clock</h2> <hr> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1428293926/colorclock2_or7mmn.png class="img-responsive img-centered"> <p>The Hex Color Clock was a quick little project I did when first learning Javascript. The page background color is updated every second. This color is set by converting the current time into a hexadecimal string which corresponds to a particular color.</p> <ul class=list-inline> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1428348826/http_stephenplusplus.github.io_yeoman.io_assets_img_yeoman-003_qc86dd.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223175/h52a9emom5vtxrsf5fqf.png></li> </ul> <p>Date:<strong> February 2015</strong></p> <ul class="list-inline item-details"> <li><a href="http://jaredstevick.github.io/ColorClock/" target=_blank><button class="btn btn-lg">Live Demo</button></a></li> <li><a href=https://github.com/jaredstevick/ColorClock target=_blank><button class="btn btn-lg"><i class="fa fa-github"></i> Github</button></a></li> </ul> <button type=button class="btn btn-lg" data-dismiss=modal><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> </div> </div> <div class="portfolio-modal modal fade" id=portfolioModal4 tabindex=-1 role=dialog aria-hidden=true> <div class=modal-content> <div class=close-modal data-dismiss=modal> <div class=lr> <div class=rl> </div> </div> </div> <div class=container> <div class=row> <div class="col-lg-8 col-lg-offset-2"> <div class=modal-body> <h2>Surf & Paddle</h2> <hr> <img src=http://res.cloudinary.com/jaredstevick/image/upload/c_scale,w_950/v1428297592/SURF___PADDLE_COlg__zwegtz.png class="img-responsive img-centered"> <p>This mobile-friendly blog layout is an Iron Yard tradition and one of the first projects I worked on that used media-queries. The design features different layouts for mobile, tablet, and desktop. The background image at the top of the page also changes based on screen size.</p> <ul class=list-inline> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1428348826/http_stephenplusplus.github.io_yeoman.io_assets_img_yeoman-003_qc86dd.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223175/h52a9emom5vtxrsf5fqf.png></li> </ul> <p>Date:<strong> March 2015</strong></p> <ul class="list-inline item-details"> <li><a href=http://jaredstevick.github.io/TIY-Assignments/surf+paddle/index.html target=_blank><button class="btn btn-lg">Live Demo</button></a></li> <li><a href=https://github.com/jaredstevick/TIY-Assignments/tree/master/surf%2Bpaddle target=_blank><button class="btn btn-lg"><i class="fa fa-github"></i> Github</button></a></li> </ul> <button type=button class="btn btn-lg" data-dismiss=modal><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> </div> </div> <div class="portfolio-modal modal fade" id=portfolioModal5 tabindex=-1 role=dialog aria-hidden=true> <div class=modal-content> <div class=close-modal data-dismiss=modal> <div class=lr> <div class=rl> </div> </div> </div> <div class=container> <div class=row> <div class="col-lg-8 col-lg-offset-2"> <div class=modal-body> <h2>Vertical Timeline</h2> <hr> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1428340271/Vertical_Timeline_4_0med_xts20y.png class="img-responsive img-centered"> <p>This responsive, mobile-friendly site has a fluid design that responds with varying layouts for different screen sizes. The clean design includes icons from Font-Awesome and utilizes my favorite filler text "Far far away", available at <a href=http://www.blindtextgenerator.com/lorem-ipsum>Blind Text Generator.</a></p> <ul class=list-inline> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1428348826/http_stephenplusplus.github.io_yeoman.io_assets_img_yeoman-003_qc86dd.png></li> <li><img class=tech src=http://res.cloudinary.com/jaredstevick/image/upload/v1427223175/h52a9emom5vtxrsf5fqf.png></li> </ul> <p>Date:<strong> February 2015</strong></p> <ul class="list-inline item-details"> <li><a href=http://jaredstevick.github.io/TIY-Assignments/timeline/index.html target=_blank><button class="btn btn-lg">Live Demo</button></a></li> <li><a href=https://github.com/jaredstevick/TIY-Assignments/tree/master/timeline target=_blank><button class="btn btn-lg"><i class="fa fa-lg"></i> Github</button></a></li> </ul> <button type=button class="btn btn-lg" data-dismiss=modal><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> </div> </div> <div class="portfolio-modal modal fade" id=portfolioModal6 tabindex=-1 role=dialog aria-hidden=true> <div class=modal-content> <div class=close-modal data-dismiss=modal> <div class=lr> <div class=rl> </div> </div> </div> <div class=container> <div class=row> <div class="col-lg-8 col-lg-offset-2"> <div class=modal-body> <h2>Some other Project</h2> <hr> <img src=http://res.cloudinary.com/jaredstevick/image/upload/v1426865269/tjmlndndpvfwxfhxplvq.jpg class="img-responsive img-centered"> <p>When I think of something to put here, I will make it appear. I am currently working on a few freelance projects, so one of those will probably end up here.</p> <p>Date:<strong> April 2015</strong></p> <ul class="list-inline item-details"> <li><a href="https://github.com/jaredstevick/" target=_blank><button class="btn btn-lg">Live Demo</button></a></li> <li><a href="https://github.com/jaredstevick/" target=_blank><button class="btn btn-lg"><i class="fa fa-github"></i> Github</button></a></li> </ul> <button type=button class="btn btn-lg" data-dismiss=modal><i class="fa fa-times"></i> Close</button> </div> </div> </div> </div> </div> </div> <div id=blog class=container> <h2>Blog</h2> <hr> <h4>Most Recent Posts from Tumblr</h4> <article> <ul id=postscontainer> <li ng-repeat="post in main.posts"> <div> <a ng-href={{post.post_url}} target=_blank> <h4>{{post.title}}{{post.caption}}</h4> </a> </div> <span> <i class=video ng-bind-html=trustThisHtml(post.player[1].embed_code)></i> <p> {{post.description}} {{post.body}} <a ng-href={{post.post_url}} target=_blank>Read More...</a> </p> <p>Posted on {{post.date.substring(6, post.date.length -13)}}-{{post.date.substring(0, post.date.length -19)}}</p> </span> </li> </ul> </article> </div> <section id=contact> <div class=container> <div class=row> <div class="col-lg-12 text-center"> <h2>Contact Me</h2> <hr> </div> </div> <div class=row> <div class="col-lg-8 col-lg-offset-2"> <form name=sentMessage id=contactForm novalidate> <div class="row control-group"> <div class="form-group col-xs-12"> <input type=text class=form-control placeholder=Name id=name> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12"> <input type=email class=form-control placeholder="Email Address" id=email> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12"> <input type=tel class=form-control placeholder="Phone Number" id=phone> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12"> <textarea rows=5 class=form-control placeholder=Message id=message></textarea> </div> </div> <br> <div class=row> <div class=col-xs-12> <button id=submitForm type=submit class="btn btn-lg">Send</button> </div> </div> </form> <script src=http://src.fireform.org/fireform.min.js></script> <script>
options={
emailNotification:"[email protected]",
}
new Fireform('#contactForm', 'http://fireform.org/list/255/contact', options);</script> </div> </div> </div> </section> <footer class=text-center> <div class=footer-above> <div class=container> <div class=row> <div class=footer-col> <h3>Find me on the Web</h3> <ul class=list-inline> <li> <a href=https://github.com/jaredstevick class="btn-social btn-outline" target=_blank data-toggle=tooltip data-placement=top title=Github><i class="fa fa-fw fa-github"></i></a> </li> <li> <a href=https://twitter.com/CountMachuki class="btn-social btn-outline" target=_blank data-toggle=tooltip data-placement=top title=Twitter><i class="fa fa-fw fa-twitter"></i></a> </li> <li> <a href=http://www.linkedin.com/in/jaredmstevick class="btn-social btn-outline" target=_blank data-toggle=tooltip data-placement=top title=LinkedIn><i class="fa fa-fw fa-linkedin"></i></a> </li> <li> <a href=mailto:[email protected] class="btn-social btn-outline" target=_blank data-toggle=tooltip data-placement=top title=Email><i class="fa fa-fw fa-envelope"></i></a> </li> <li> <a href=resume.html class="btn-social btn-outline" target=_blank data-toggle=tooltip data-placement=top title=Resume><i class="fa fa-fw fa-file-text"></i></a> </li> </ul> </div> </div> </div> </div> <div class=footer-below> <div class=container> <div class=row> <div class=col-lg-12> Copyright © Jared M Stevick 2015 </div> </div> </div> </div> </footer> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62358949-1', 'auto');
ga('send', 'pageview');
</script> <script src=scripts/vendor.js></script> <script src=scripts/plugins.js></script> <script src=scripts/main.js></script> </body> </html>