/
index.html
181 lines (168 loc) · 7.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Professional full stack web developer and audio engineer based in New York City. View web development portfolio, recording studio information and contact info.">
<title>Graig Janssen</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Javascripts -->
<script src="js/jquery.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/jquery-color.js"></script>
<!-- <script src="js/scripts.js"></script> -->
</head>
<body>
<header>
<h5 id="my-name"><a href="index.html">Graig Janssen</a></h5>
<ul id="nav">
<li class="nav-item"><a href="web.html">WEB</a></li>
<li class="nav-item"><a href="audio.html">AUDIO</a></li>
</ul>
</header>
<!-- HOME VIEW -->
<div id="home">
<div class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-night.jpg">
<!-- Lead Section -->
<section class="lead">
<div class="container">
<div class="row">
<div class="offset-by-one ten columns lead-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/NYCS-bull-trans-G.svg/2000px-NYCS-bull-trans-G.svg.png" alt="big g logo" class="lead-logo">
<h1 class="lead-title">Graig Janssen</h1>
<h3 class="lead-subtitle">Web Developer | Audio Engineer</h3>
</div>
</div>
</div>
</section>
<!-- Web Section -->
<section class="web">
<div class="container">
<div class="row">
<div class="offset-by-two eight columns section-heading">
<h1 class="section-title">Web Development</h1>
</div>
</div>
<div class="row">
<div class="six columns web-blurb-box">
<h5 class="blurb">I am a web developer driven by love of building seamless interfaces and solving tough problems.</h5>
<h5 class="blurb">I bring creativity, dedication and passion for quality to every project.</h5>
</div>
<div class="six columns languages">
<div class="lang-row">
<img src="images/HTML5.png" alt="html5 logo" class="sq lang-logo">
<img src="images/CSS3.png" alt="css3 logo" class="sq lang-logo">
<img src="images/JS.png" alt="javascript logo" class="sq lang-logo">
</div>
<div class="lang-row">
<img src="images/jQuery.gif" alt="jquery logo" class="sq lang-logo">
<img src="images/ruby.png" alt="ruby logo" class="sq lang-logo">
<img src="images/rails.png" alt="rails logo" class="sq lang-logo">
</div>
<div class="lang-row">
<img src="images/node.png" alt="node logo" class="rect lang-logo">
<img src="images/express.png" alt="express logo" class="rect lang-logo">
</div>
<div class="lang-row">
<img src="images/angular.png" alt="angular logo" class="rect lang-logo" id="angular">
<img src="images/backbone.png" alt="backbone logo" class="rect lang-logo" id="backbone">
</div>
</div>
</div>
<div class="row web-projects">
<div class="six columns">
<a href="https://github.com/graigjanssen/sample-jam" target="_blank">
<div id="web-project1" class="web-project-box">
<div class="web-project-content">
<h5 class="web-project-title">sample-jam</h5>
<h6 class="web-project-tagline">Build and play your own instrument.</h6>
<h6 class="web-project-tech">Express app using HTML/CSS and JQuery</h6>
</div>
</div>
</a>
</div>
<div class="six columns">
<a href="https://still-hollows-73515.herokuapp.com/#/" target="_blank">
<div id="web-project2" class="web-project-box">
<div class="web-project-content">
<h5 class="web-project-title">InvestWatch</h5>
<h6 class="web-project-tagline">Get stock quotes and track your favorite companies.</h6>
<h6 class="web-project-tech">MEAN stack app integrated with Yahoo! Finance API</h6>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="offset-by-three six columns bottom-btn-section">
<a href="web.html"><button class="button-primary bottom-btn">Learn More</button></a>
</div>
</div>
</div>
</section>
</div>
<div class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-night.jpg">
<section class="buffer"></section>
<!-- Audio Section -->
<section class="audio">
<div class="container">
<div class="row">
<div class="offset-by-two eight columns section-heading">
<h1 class="section-title">Audio Production</h1>
</div>
</div>
<div class="row">
<div class="six columns">
<img src="images/mercy-1.jpg" alt="recording studio" id="home-audio-mainpic">
</div>
<div class="six columns">
<h5 class="blurb home-audio-text">With over ten years experience, I can take music and audio projects to the next level.<br> <strong>Services include:</strong> </h5>
<ul class="home-audio-services">
<li class="home-audio-services-item">Recording</li>
<li class="home-audio-services-item">Mixing</li>
<li class="home-audio-services-item">Mastering</li>
<li class="home-audio-services-item">Instrumental Tracks</li>
<li class="home-audio-services-item">Full Album Production</li>
</ul>
</div>
</div>
<div class="row">
<div class="offset-by-three six columns bottom-btn-section">
<a href="audio.html"><button class="button-primary bottom-btn">Learn More</button></a>
</div>
</div>
</div>
</section>
<section class="buffer"></section>
<!-- Connect Section -->
<section class="connect">
<div class="container">
<div class="row">
<div class="offset-by-two eight columns section-heading">
<h1>Connect</h1>
</div>
</div>
<div class="row">
<div class="offset-by-two eight columns connect-email">
<a class="connect-email-link" href="mailto:graig.janssen@gmail.com">graig.janssen@gmail.com</a>
</div>
</div>
<div class="row social-media">
<div class="offset-by-two eight columns social-media-box">
<a href="https://www.facebook.com/graig.janssen" target="_blank"><img src="images/facebook.png" alt="Facebook" class="social-media-btn"></a>
<a href="https://twitter.com/grjanssen" target="_blank"><img src="images/twitter.png" alt="Twitter" class="social-media-btn"></a>
<a href="http://www.linkedin.com/in/graigjanssen" target="_blank"><img src="images/linkedin.png" alt="LinkedIn" class="social-media-btn"></a>
<a href="http://www.github.com/graigjanssen" target="_blank"><img src="images/github.png" alt="GitHub" class="social-media-btn"></a>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>