-
Notifications
You must be signed in to change notification settings - Fork 1
/
bio.html
123 lines (111 loc) · 12.4 KB
/
bio.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>John Wilson</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.12.0");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/gallery.theme.css">
<link rel="stylesheet" href="css/gallery.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="nav">
<a href="index.html"><svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="122.852px" height="189.398px" viewBox="0 0 122.852 189.398" enable-background="new 0 0 122.852 189.398"
xml:space="preserve">
<path fill="#FFFFFF" d="M56.539,0H0v189.398h56.539l66.313-47.239v-94.92L56.539,0z M41.674,175.031H23.219l18.477-23.796
L41.674,175.031z M14.368,163.005V26.011l28.084,35.883l-0.026,64.978L14.368,163.005z M43.776,40.271L23.497,14.366h20.137
L43.776,40.271z M56.975,80.538l10.794,13.696l-10.683,13.758L56.975,80.538z M57.862,58.268l-0.089-39.99l44.289,31.791
L76.855,82.533L57.862,58.268z M108.483,65.222v57.718L85.984,94.198L108.483,65.222z M56.086,172.081l-0.023-39.091l20.836-27.093
l25.809,32.973L56.086,172.081z M105.985,136.532l2.498-1.953v0.176L105.985,136.532z"/>
</svg></a>
<ul>
<li>
<a id="nav-toggle" href="#" onclick="return false;"><span>☰</span></a>
</li>
<li class="nav-item">
<a href="bio.html">bio</a>
</li>
<li class="nav-item">
<a href="portfolio.html">portfolio</a>
</li>
<li class="nav-item">
<a href="Index.html#gallery">gallery</a>
</li>
<li class="nav-item">
<a href="Index.html#contact">contact</a>
</li>
</ul>
</div>
<a id="navicon" href="#" onclick="return false;"><span>☰</span></a>
<div id="container">
<div class="banner">
<h1 id="header-text">Yo, peep my <br>Bio.</h1>
<svg class="logo" version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="122.852px" height="189.398px" viewBox="0 0 122.852 189.398" enable-background="new 0 0 122.852 189.398"
xml:space="preserve">
<path fill="#FFFFFF" d="M56.539,0H0v189.398h56.539l66.313-47.239v-94.92L56.539,0z M41.674,175.031H23.219l18.477-23.796
L41.674,175.031z M14.368,163.005V26.011l28.084,35.883l-0.026,64.978L14.368,163.005z M43.776,40.271L23.497,14.366h20.137
L43.776,40.271z M56.975,80.538l10.794,13.696l-10.683,13.758L56.975,80.538z M57.862,58.268l-0.089-39.99l44.289,31.791
L76.855,82.533L57.862,58.268z M108.483,65.222v57.718L85.984,94.198L108.483,65.222z M56.086,172.081l-0.023-39.091l20.836-27.093
l25.809,32.973L56.086,172.081z M105.985,136.532l2.498-1.953v0.176L105.985,136.532z"/>
</svg>
</div>
<div id="about">
<div id="profile-pic"></div>
<h1 id="about-header">Bio</h1>
<p>Hi! My name is John Wilson, and I'm a Graphic Deezyner.</p>
<p>From birth, I was what you might call a curious little bastard who always needed to know 'why'. That curiosity has stuck with me and plays a huge part of my identity as a creative. I love to dive into a problem and figure out why the problem even exists before trying to solve it.</p>
<p>I was born in San Clemente, California, which is located in south Orange County. I moved away far too soon, but I never lost my love for the ocean. I plan to one day move back and live near my first love — the Pacific Ocean. Currently, I live in Cheney, Washington with my roomates and my adorable dog, Pepper. I am currently finishing my degree in Visual Communication Design at Eastern Washington University. </p>
<p>My primary specialty would have to be logo deezyne. There is something about making a simple symbol that represents an entire entity that makes me love giving every detail love and care. Creating a solid visual aesthetic with colors, shapes, and the Gestalt Principles is something that I love to do, and will keep doing for years to come.</p>
<p></p>
</div>
<div id="contact">
<h1 id="contact-heading">Contact</h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a href="https://www.facebook.com/profile.php?id=100002719271378">
<g id="facebook" sketch:type="MSLayerGroup" transform="translate(40.000000, 40.000000)">
<!--<rect id="Rectangle" sketch:type="MSShapeGroup" x="0" y="0" width="44" height="44"></rect>-->
<circle id="Oval" stroke="#2a4d69" stroke-width="2" sketch:type="MSShapeGroup" cx="22" cy="22" r="22"></circle>
<path d="M23.3147057,35 L18.4372418,35 L18.4372418,23.4985483 L16,23.4985483 L16,19.535534 L18.4372418,19.535534 L18.4372418,17.1562737 C18.4372418,13.9234411 19.8127074,12 23.7230238,12 L26.9776468,12 L26.9776468,15.964466 L24.9435074,15.964466 C23.4212558,15.964466 23.3206665,16.5182719 23.3206665,17.5518493 L23.3139606,19.535534 L27,19.535534 L26.5685836,23.4985483 L23.3139606,23.4985483 L23.3139606,35 L23.3147057,35 Z" id="Shape" fill="#2a4d69" sketch:type="MSShapeGroup"></path>
</g>
</a>
<a href="http://www.twitter.com">
<g id="twitter" sketch:type="MSLayerGroup" transform="translate(100.000000, 40.000000)">
<!--<rect id="Rectangle" sketch:type="MSShapeGroup" x="0" y="0" width="44" height="44"></rect>-->
<circle id="Oval" stroke="#2a4d69" stroke-width="2" sketch:type="MSShapeGroup" cx="22" cy="22" r="22"></circle>
<path d="M30.526149,16.8457316 C31.4160944,16.2841254 32.0989611,15.3936155 32.41944,14.3328037 C31.5861948,14.8541095 30.6654341,15.2311137 29.6830428,15.4352159 C28.899102,14.5512061 27.7786582,14 26.5386512,14 C24.1597112,14 22.231907,16.0345226 22.231907,18.5435505 C22.231907,18.8997544 22.2676528,19.2468583 22.3416094,19.578362 C18.762106,19.3885599 15.5881317,17.5815398 13.4618771,14.8307092 C13.0908611,15.5041167 12.8788519,16.2841254 12.8788519,17.1161346 C12.8788519,18.6917521 13.6393731,20.0827676 14.7955626,20.8991767 C14.0892763,20.8757764 13.4248987,20.6690741 12.8431062,20.3310703 L12.8431062,20.386971 C12.8431062,22.5891954 14.3271703,24.4261158 16.3005811,24.8421205 C15.9381933,24.9487217 15.558549,25.0020222 15.1641134,25.0020222 C14.8867758,25.0020222 14.6156013,24.9747219 14.3542877,24.9214213 C14.9015672,26.7258414 16.4928685,28.041456 18.3787639,28.0765564 C16.9033281,29.29597 15.0457827,30.021378 13.0279979,30.021378 C12.6804015,30.021378 12.3365029,30.0018778 12,29.9589773 C13.9068498,31.2472916 16.1711569,32 18.6043317,32 C26.5300229,32 30.8614193,25.0761231 30.8614193,19.0713563 C30.8614193,18.8737542 30.858954,18.677452 30.8503258,18.4837498 C31.6921993,17.8428427 32.4243705,17.0420338 33,16.1307237 C32.2271527,16.4921277 31.3963726,16.7365304 30.526149,16.8457316 Z" id="Shape" fill="#2a4d69" sketch:type="MSShapeGroup"></path>
</g>
</a>
<a href="http://www.googleplus.com">
<g id="googleplus" sketch:type="MSLayerGroup" transform="translate(160.000000, 40.000000)">
<!--<rect id="Rectangle" sketch:type="MSShapeGroup" x="0" y="0" width="44" height="44"></rect>-->
<circle id="Oval" stroke="#2a4d69" stroke-width="2" sketch:type="MSShapeGroup" cx="22" cy="22" r="22"></circle>
<path d="M18.2130439,33.8627117 C15.4977734,33.8627117 13.5381614,32.1317615 13.5381614,30.053269 C13.5381614,28.0153457 15.9702278,26.3182032 18.6841561,26.3479539 C19.3163323,26.3560677 19.9069003,26.4574906 20.4424381,26.6319379 C21.9148315,27.6650988 22.9724851,28.2479421 23.2704535,29.4244473 C23.3268259,29.6638053 23.3576965,29.9072201 23.3576965,30.1587488 C23.3576965,32.2385936 22.0275763,33.8627117 18.2130439,33.8627117 M18.9257521,21.6703316 C17.1043867,21.6148871 15.3729488,19.6175329 15.058874,17.2077258 C14.7447992,14.7979186 15.9662012,12.9533749 17.7875665,13.0074671 C19.6075897,13.0629116 21.3403699,14.9953551 21.6544447,17.4065146 C21.9685195,19.8163217 20.7471175,21.7257761 18.9257521,21.6703316 M22.7013607,25.239064 C22.0624735,24.7833373 20.8424137,23.6757996 20.8424137,23.0239887 C20.8424137,22.2585842 21.0585079,21.8839958 22.1980357,20.9860654 C23.3670919,20.0651458 24.1952293,18.7709901 24.1952293,17.2672272 C24.1952293,15.474071 23.4033313,13.7282455 21.9161737,13.1521637 L24.1576477,13.1521637 L25.7401015,12 L18.6693919,12 C15.5018,12 12.5180894,14.4192733 12.5180894,17.2212488 C12.5180894,20.0854304 14.6790314,22.3965193 17.9029957,22.3965193 C18.1284853,22.3965193 18.3445795,22.3924624 18.5579893,22.3762347 C18.3499483,22.7792215 18.1982797,23.2349483 18.1982797,23.7055503 C18.1982797,24.5020579 18.6237571,25.1484595 19.1619793,25.6745061 C18.7552927,25.6745061 18.3620281,25.6866769 17.9365507,25.6866769 C14.0106158,25.6866769 10.9879814,28.2046684 10.9879814,30.8186736 C10.9879814,33.3907573 14.3018732,35 18.2264659,35 C22.7013607,35 25.1750353,32.4414393 25.1750353,29.8680033 C25.1750353,27.8057385 24.5697031,26.5697319 22.7013607,25.239064 M32.9879814,21.8799389 L30.2364714,21.8799389 L30.2364714,19.107714 L28.0204992,19.107714 L28.0204992,21.8799389 L25.2689893,21.8799389 L25.2689893,24.1125941 L28.0204992,24.1125941 L28.0204992,26.8848189 L30.2364714,26.8848189 L30.2364714,24.1125941 L32.9879814,24.1125941 L32.9879814,21.8799389" id="Shape" fill="#2a4d69" sketch:type="MSShapeGroup"></path>
</g>
</a>
<a href="http://www.instagram.com">
<g id="instagram" sketch:type="MSLayerGroup" transform="translate(220.000000, 40.000000)">
<!--<rect id="Rectangle" sketch:type="MSShapeGroup" x="0" y="0" width="44" height="44"></rect>-->
<circle id="Oval" stroke="#2a4d69" stroke-width="2" sketch:type="MSShapeGroup" cx="22" cy="22" r="22"></circle>
<path d="M28.1347601,12 L15.8652399,12 C13.7344779,12 12,13.733302 12,15.8652399 L12,28.1347601 C12,30.266698 13.7344779,32 15.8652399,32 L28.1347601,32 C30.2655221,32 32,30.266698 32,28.1347601 L32,15.8652399 C32,13.733302 30.2655221,12 28.1347601,12 L28.1347601,12 Z M29.24365,14.3059737 L29.6857949,14.3036218 L29.6857949,17.6937912 L26.3062088,17.7043744 L26.2944497,14.3142051 L29.24365,14.3059737 L29.24365,14.3059737 Z M19.1460489,19.9468485 C19.7857479,19.060207 20.8252587,18.4793039 22,18.4793039 C23.1747413,18.4793039 24.2142521,19.060207 24.8539511,19.9468485 C25.2714017,20.5253998 25.5206961,21.233302 25.5206961,22 C25.5206961,23.9402634 23.9414393,25.5195202 22,25.5195202 C20.0597366,25.5195202 18.4804798,23.9402634 18.4804798,22 C18.4804798,21.233302 18.7297742,20.5253998 19.1460489,19.9468485 L19.1460489,19.9468485 Z M30.0515052,28.1347601 C30.0515052,29.1919097 29.1919097,30.0515052 28.1347601,30.0515052 L15.8652399,30.0515052 C14.8080903,30.0515052 13.9484948,29.1919097 13.9484948,28.1347601 L13.9484948,19.9468485 L16.9353246,19.9468485 C16.6766228,20.5818438 16.5319849,21.2744591 16.5319849,22 C16.5319849,25.0150517 18.9849483,27.469191 22,27.469191 C25.0162277,27.469191 27.469191,25.0150517 27.469191,22 C27.469191,21.2744591 27.3222013,20.5818438 27.0658514,19.9468485 L30.0515052,19.9468485 L30.0515052,28.1347601 L30.0515052,28.1347601 Z" id="Shape" fill="#2a4d69" sketch:type="MSShapeGroup"></path>
</g>
</a>
</svg>
</div>
<footer>
<button>Back to Top</button>
</footer>
<script src="script.js"></script>
</body>
</html>