-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork.html
135 lines (131 loc) · 8.28 KB
/
work.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
Work | Roy Quilor | Designer, HTML, CSS, Javascript
</title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="/css/main.css?version=1">
</head>
<body>
<header>
<div class="header-wrap">
<a href="index.html">
<svg class="logo" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<title>q</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="logo">
<stop stop-color="var(--color-accent)" offset="0%"/>
<stop stop-color="var(--color-accent-2)" offset="100%"/>
</linearGradient>
</defs>
<path d="M15.94 27.474h15.84v4.526h-15.84c-8.734 0-15.84-7.106-15.84-15.84s7.106-15.84 15.84-15.84 15.84 7.106 15.84 15.84c0 .768-.055 1.524-.161 2.263h-4.592c.149-.731.227-1.488.227-2.263 0-6.239-5.075-11.314-11.314-11.314s-11.314 5.075-11.314 11.314 5.075 11.314 11.314 11.314zm0-6.789h15.84v4.526h-15.84c-4.991 0-9.051-4.06-9.051-9.051 0-4.991 4.06-9.051 9.051-9.051 4.991 0 9.051 4.06 9.051 9.051 0 .781-.099 1.539-.286 2.262h-4.847c.386-.666.608-1.439.608-2.263 0-2.495-2.03-4.525-4.525-4.525-2.496 0-4.526 2.03-4.526 4.525 0 2.496 2.03 4.526 4.526 4.526zm-2.263-4.526c0-1.25 1.013-2.262 2.263-2.262s2.262 1.013 2.262 2.262c0 1.25-1.013 2.263-2.262 2.263-1.25 0-2.263-1.013-2.263-2.263z" fill=""/></svg>
</a>
<nav>
<a class="active" href="work.html">Work</a>
<a class="" href="about.html">About</a>
<a class="" href="https://github.com/royquilor">Github</a>
<a class="cta cta-s cta-line" href="mailto:[email protected]">Contact</a>
</nav>
</div>
</header>
<main class="transition-fade">
<section class="space-v1 mw8">
<h1 class="">Work</h1>
<p class="fs4 measure">My process is an iterative approach. From sketching or designing in the browser, I aim to get a prototype or concept out there early to get feedback from users, developers and stake holders. </p>
<p class="fs4 measure">
Some other projects and concepts below. Would you like to work together? Get in touch <a href="mailto:[email protected]">[email protected]</a>
</p>
</section>
<section>
<article>
<figure>
<a href="https://royquilor.github.io/slate/#what-is-searchkit">
<img class="br3" src="images/searchkit.png" width="960"/>
</a>
</figure>
<div class="grid-unit mt4-l">
<h2>
Beautiful static docs
</h2>
<p class="fs4 measure">Have an api or open source project? I forked <a href="https://github.com/lord/slate">Slate</a> and created a custom design with CSS for <a href="http://searchkit.co/">Searchkit</a>. Currently in progress.</p>
<a class="cta cta-s" href="https://royquilor.github.io/slate/#what-is-searchkit">See docs</a>
</div>
</article>
<article class="">
<div class="row-l ">
<img class="br3 ma3" src="images/gainsapp/0-startup.png" width="320"/>
<img class="br3 ma3" src="images/gainsapp/3-create-exercise.png" width="320"/>
<img class="br3 ma3" src="images/gainsapp/4-exercise-list.png" width="320"/>
</div>
<div class="grid-unit mt4-l">
<h2>
Gains app
</h2>
<p class="fs4">Fitness concept inspired by Dieter Rams and Braun design - less is better. </p>
</div>
</article>
<article class="bg-black white">
<figure>
<img class="br3" src="images/gridscores/gridscores-ipad.png" width="" />
</figure>
<div class="pa3 mt4-l">
<h2>
Gridscores
</h2>
<p class="fs4">
A livescores concept. I created the typeface on fonstruct and converted to a webfont.
</p>
</div>
</article>
<article class="article-wrap">
<figure>
<img class="br3" src="images/intranet/intranet-large.jpg" width="" />
</figure>
<div class="pa3 mt4-l mw7">
<h2>
Intranet
</h2>
<p class="fs4">
My old company required a redesign. A fun project with one developer.
</p>
</div>
</article>
</section>
</main>
<div class="space-v2 bg-black tc">
<a href="work.html" class="cta cta-l ma3">CSS Purge</a>
<a href="design-system.html" class="cta cta-line cta-l ma3">Design System</a>
</div>
<footer class="space-a1">
<div class="footer-wrap">
<p class="mb5 mb0-l">© Made with <a href="http://tachyons.io/">Tachyons</a> and love.</p>
<div class="social">
<a href="https://www.linkedin.com/in/roy-quilor-0b78559/" class="linkedin">
<svg aria-labelledby="simpleicons-linkedin-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-linkedin-icon">LinkedIn icon</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://dribbble.com/royquilor" class="dribbble">
<svg aria-labelledby="simpleicons-dribbble-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-dribbble-icon">Dribbble icon</title><path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"/></svg>
</a>
<a href="https://twitter.com/RoyQuilor" class="twitter">
<svg aria-labelledby="simpleicons-twitter-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-twitter-icon">Twitter icon</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
</a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
<script src="js/header.js"></script>
<script src="js/animation.js"></script>
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-4568199-5','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>