This repository has been archived by the owner on Sep 22, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (131 loc) · 5.61 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
<!doctype html>
<html class="no-js" lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Grow with Google Nanodegree Project 1: Build a portfolio site.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tyler Van Schaick • Front-end Web Developer based in Florida</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<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]-->
<!-- Site Header -->
<header class="site-header" id="masthead">
<div class="site-header__inner container">
<div class="site-header__logo">
<a href="/index.html">
<img src="img/logo.png" alt="Tyler Van Schaick's Logo.">
</a>
</div>
<div class="site-header__title">
<a href="/index.html" title="Tyler Van Schaick">
<h1>Tyler Van Schaick</h1>
<p class="site-header__tagline">Front-end Ninja</p>
</a>
</div>
</div>
</header>
<!-- Site Main -->
<main class="site-main" id="main">
<!-- Main Content -->
<div class="site-content container" id="content">
<!-- Hero Section -->
<!-- Note: The responsive image examples seen in this "hero" section is
based off work from the following:
- Jason Grigsby - https://cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints/
- Pete LePage - https://developers.google.com/web/fundamentals/design-and-ux/responsive/images
- http://www.responsivebreakpoints.com/ - responsive image generator tool
- Adnanta Raharja - owner of image from Unsplash.com -->
<figure class="splash">
<img class="splash__image"
id="picimg"
alt="Page hero image by Adnanta Raharja from Unsplash.com"
src="img/splash/splash-1144.jpg"
srcset="
img/splash/splash-200.jpg 200w,
img/splash/splash-521.jpg 521w,
img/splash/splash-744.jpg 744w,
img/splash/splash-890.jpg 890w,
img/splash/splash-1040.jpg 1040w,
img/splash/splash-1144.jpg 1144w"
sizes="(max-width: 1144px) 100vw, 1144px">
<figcaption class="splash__caption">
<p>Photo by <em>Adnanta Raharja</em> on <a href="https://unsplash.com/" Title="Go to Unsplash" target="_blank">Unsplash</a>.</p>
</figcaption>
</figure>
<!-- Featured Work Section -->
<section class="section section--featured-work">
<h2>Featured Work</h2>
<ul class="featured-works">
<li class="featured-works__item">
<a href="https://codepen.io/tvs/full/5254f6e573547f5ae1829cd12539790a/" target="_blank">
<img src="img/projects/animal-card-small.png"
srcset="img/projects/animal-card-small.png 1x,
img/projects/animal-card-small-2x.png 2x"
alt="Screenshot of a project.">
<h3>Animal Trading Card</h3>
<span>View on Codepen</span>
</a>
</li>
<li class="featured-works__item">
<a href="https://codepen.io/tvs/full/NyMvJG/" target="_blank" title="Pixel Artl Maker">
<img src="img/projects/pixel-art-maker-small.png"
srcset="img/projects/pixel-art-maker-small.png 1x,
img/projects/pixel-art-maker-small-2x.png 2x"
alt="Screenshot of a project.">
<h3>Pixel Art Maker</h3>
<span>View on Codepen</span>
</a>
</li>
<li class="featured-works__item">
<a href="https://codepen.io/tvs/full/qXRrGR/" target="_blank">
<img src="img/projects/markdown-styles-small.png"
srcset="img/projects/markdown-styles-small.png 1x,
img/projects/markdown-styles-small-2x.png 2x"
alt="Screenshot of a project.">
<h3>Styling Markdown</h3>
<span>View on Codepen</span>
</a>
</li>
</ul>
</section>
</div>
</main>
<!-- TODO: Add cool javascript. -->
<!-- Scripts -->
<!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->
<!-- <script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script> -->
<!-- <script src="js/plugins.js"></script> -->
<!-- <script src="js/main.js"></script> -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!-- <script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function() {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script> -->
</body>
</html>