Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

website/web.html

Go to file
 
 
Cannot retrieve contributors at this time
176 lines (159 sloc) 8.03 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162669941-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-162669941-1');
</script>
<meta charset="utf-8">
<title>Joshua Stanavage</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://use.typekit.net/xqz7txj.css">
<link rel="stylesheet" href="css/style.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<a name="top"></a>
<nav class="nav flex-row">
<div class="nav-menu">
<div class="nav-brand">
<a href="about.html"><img src="img/logo.png" alt="JoshStanavage" height= 125px;></a>
</div>
</div>
<div class="toggle-collapse">
<div class="toggle-icons text-black">
<span><i class="fas fa-bars"><svg height="32px" id="icon" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg></i></span>
</div>
</div>
<div>
<ul class="nav-items flex-row">
<li class="nav-link">
<a href="about.html" class="text-black">About</a>
</li>
<li class="nav-link">
<a href="resume.html" class="text-black">Resume</a>
</li>
<li class="nav-link">
<a href="web.html" class="text-black">Web Design</a>
</li>
<li class="nav-link">
<a href="otherwork.html" class="text-black" id="extra">Other Work</a>
</li>
</ul>
</div>
</nav>
<div class="headerr">
<h1>Web Design</h1>
<p> <a class="bluelinks" href="#ux">UX Designs,</a> <a class="bluelinks" href="#respond"> Responsive Designs,</a> <a class="bluelinks" href="#style"> Style-Tiles,</a> <a class="bluelinks" href="#wire"> Wireframes,</a> <a class="bluelinks" href="#flat"> Flat-Designs</a> </p>
</div>
<a name="ux"></a>
<div class="start">
<div class="ux">
<div class="ux1">
<h3>UX Design</h3>
<a href="https://xd.adobe.com/view/55741214-fdaa-4c45-766b-d71187aa0151-2345/" target="_blank"> <img class="shesmall" src="img/combscreenshot.gif" alt="screenshot of comb app"x> </a>
</div>
<div class="ux2">
<div class="somespace">
<p> To create this prototype, for a new Photo App named "Comb", I conducted needfinding to see what other issues people were experiencing with their current Photos app, if any. Combining the things that users enjoyed and disliked about their current app, I started the priority list of features. </p>
<br>
<p>The entire needfinding process was documenteed <a class="lightlinks" href="https://medium.com/@joshua.stanavage_19256/apple-killed-my-friend-3b5d2af2d99c"> via Medium</a></p>
</div>
<a href="https://medium.com/@joshua.stanavage_19256/apple-killed-my-friend-3b5d2af2d99c" target="_blank"> <img class="shesmall" src="img/medium.png" alt="Medium Article"> </a>
<hr>
<p> (Practice) Money Transfer App</p>
<a href="https://xd.adobe.com/view/643938f0-b85f-43a8-57a8-d8a7076577a6-1208/" target="_blank"> <img class="shesmall" id="radius" src="img/cashmoni.png" alt="Cash Money Design"> </a>
</div>
</div>
</div>
<div class="everyoneinweb">
<div class="oneone">
<div class="party">
<a name="respond"></a>
<h3>Fully-Responsive Website</h3>
<p class="getaway">In this project, I re-designed Grace Mitchell's old, less-functional website to be more dynamic. In order to score a "98" for Performance in Google's Lighthouse tools, I specifically focused on optimizing all included images .</p>
<img class="gracemitchellnew" src="img/gm.png" alt="Grace Mitchell's originial website">
</div>
<div class="party">
<a href="https://github.uconn.edu/pages/jjs15102/3470web/final/finalone.html" target="_blank"><img class="gracemitchellnew" id="bringit" src="img/giphy1.gif" alt="animation"x></a>
<p>^ Explore the new website above</p>
<br>
<a class="lightlinks" href="img/1.png" >Style Tile Idea #1</a> <br>
<a class="lightlinks" href="img/2.png" >Style Tile Idea #2</a>
</div>
</div>
<div class="twotwo">
<div class="party2" class="getaway">
<h3>CSS Animation</h3>
<p id="left">In exploring some of the features of CSS animation, I created different SVG images to make a heat lamp turn the christmas cactus a different, deadly color upon hover. </p>
<p>The photos in the frame are able to change depending which way the user clicks. This project was intended to be used in Google Chrome.</p>
</div>
<div class=party2>
<a href="https://github.uconn.edu/pages/jjs15102/3470web/midterm/midterm.html" target="_blank"> <img class="gracemitchellnew" src="img/giphy2.gif" alt="animation of plant dying"></a>
</div>
</div>
</div>
<h2 class="centerher"> Process-Work Examples</h2>
<a name="style"></a>
<h3 id="special">Style Tiles</h3>
<div class="wire">
<div class="twotwotwo">
<img class="shesmallz" src="img/brownie.jpg" alt="styletile1">
</div>
<div class="twotwotwo">
<img class="shesmallz" src="img/brownie2.jpg" alt="styletile2">
</div>
<div class="three">
<img class="shesmallz" src="img/animal1.jpg" alt="animal_style_tile">
</div>
<div class="three">
<img class="shesmallz" src="img/animal2.jpg" alt="animal_style_tile2">
</div>
<div class="three">
<img class="shesmallz" src="img/animal3.jpg" alt="animal_style_tile3">
</div>
</div>
<a name="wire"></a>
<h3 id="special" >Wireframes</h3>
<div class="wire">
<div class="twotwotwo">
<a href="https://wireframe.cc/GNLp6C" target="_blank"> <img class="shesmallz" src="img/wire1.png" alt="wireframe"> </a>
</div>
<div class="twotwotwo">
<a href="https://wireframe.cc/H6dgqT" target="_blank"> <img class="shesmallz" src="img/wire2.png" alt="wireframe"> </a>
</div>
</div>
<a name="flat"></a>
<h3 id="special">Flat Designs</h3>
<div class="flat">
<div class="three">
<img class= "shesmallz" src="img/flatdesign1.jpg" alt="Flat-Design">
</div>
<div class="three">
<img class="shesmallz" src="img/flatdesign3.jpg" alt="Flat-Design">
</div>
</div>
</div>
<footer>
<a href="#top">^ Back to top of page ^</a>
</footer>
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>