-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (108 loc) · 5.3 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chris Lee</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19583432-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="antialiased" id="particles">
<nav class="fixed top-0 bg-near-white gill-sans f6 ttu absolute w-100 bg-cl-dark-blue white z-1">
<ul class="fw6 list ph4 ph5-ns flex-ns flex-row cl-mw center items-center nowrap overflow-x-auto">
<li class="dib flex-auto mr4">
<div class="dib bb bw1 white pv3">
<span class="tracked-mega">Chris Le</span>e
</div>
</li>
<li class="dib mr4">
<a href="/work" class="link white-70 hover-white pv3"
><span class="tracked-mega">Wor</span>k</a
>
</li>
<li class="dib mr4">
<a href="/posts" class="link white-70 hover-white pv3"
><span class="tracked-mega">Writin</span>g</a
>
</li>
<li class="dib">
<a href="/about" class="link white-70 hover-white pv3"
><span class="tracked-mega">Abou</span>t</a
>
</li>
</ul>
</nav>
<main class="charter lh-copy">
<section class="flex items-center w-100 min-vh-100 bg-cl-dark-blue white">
<div class="w-100 cl-mw center pa4 pv5 pa5-ns">
<h1 class="self-name f3 cl-cyan ttu tracked-mega mb1">Chris Lee</h1>
<p class="self-description mb5">Product Designer</p>
<ul class="list pl0">
<li class="mv2"><a href="mailto:[email protected]" class="link white-70 underline-hover">[email protected]<a/></li>
<li class="mv2"><a href="https://twitter.com/cleerview" class="link white-70 underline-hover">Twitter<a/></li>
<li class="mv2"><a href="https://www.linkedin.com/in/cleer/" class="link white-70 underline-hover">LinkedIn<a/></li>
</ul>
</div>
</section>
<section class="min-vh-100 bg-cl-red-gradient cl-light-salmon">
<div class="w-100 cl-mw center pa4 pv5 pa5-ns">
<blockquote class="mt4 mb5">
<div class="f4-l mb3 lh-large">
<p class="mb3"><strong class="white">The work has enough love when enthusiasm transfers from the maker to the audience and bonds them.</strong> Both are enthusiastic about the design.</p>
<p>I can imagine the excitement in the room when Stradivari would hand his newest violin to a skilled musician, because the violinist would <strong class="white">unlock the instrument’s full potential by playing it</strong>. The products of design, like Stradivari’s violins, possess an aspect that can only be revealed through their use.</p>
</div>
<cite class="cl-salmon">
<p class="gill-sans f6 ttu tracked-mega">Frank Chimero</p>
<p class="i">The Shape of Design</p>
</cite>
</blockquote>
<blockquote class="mb4">
<div class="f4-l mb3 lh-large">
<p class="mb3">The violin-maker has made beautiful instruments, and has called musicians to make wonderful music with them; but the musicians have refused, and have tried to play tunes on bits of scrappy wood and grass they have found lying about the place.</p>
<p>It is no good the violin-maker wringing his hands and deciding to do without the musicians; they are needed if the violins are to make the music they are supposed to make. He has to set about <strong class="white">rescuing the musicians from their folly</strong>, not just for their own sake (because it’s frustrating and dishonouring for them to try to get music out of lifeless objects) but because <strong class="white">they are needed precisely to make the wonderful music he had in mind all along</strong>.</p>
</div>
<cite class="cl-salmon">
<p class="gill-sans f6 ttu tracked-mega">NT Wright</p>
<p class="i">Paul and the Faithfulness of God</p>
</cite>
</blockquote>
</div>
</section>
</main>
<script src="particles.min.js"></script>
<script type="text/javascript">
var nb = window.innerWidth * window.innerHeight / 3000;
particlesJS('particles', {
particles: {
color: '#40c4ff',
shape: 'circle',
opacity: 0.3,
size: 1,
size_random: true,
nb: nb,
line_linked: {
enable_auto: false
},
anim: {
enable: true,
speed: 0.2
}
},
interactivity: {
enable: false
},
retina_detect: true
});
</script>
</body>
</html>