-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (145 loc) · 8.91 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="apple-touch-icon" href="icon.png">
<title>
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=2">
</head>
<body class="home">
<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="" 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>Roy Quilor</h1>
<p class="fs4 measure">Designer who loves to code and prototype with HTML, CSS and Javascript. Learner, maker and Pokemon GO player.</p>
</section>
<section>
<article class="article-wrap row-l">
<div class="grid-unit">
<h2>
CSS Purge
</h2>
<p class="fs4">CSS files can get large and hard to maintain. I looked at top sites and how css is used.</p>
<a class="cta cta-s" href="csspurge.html">See project</a>
</div>
<figure>
<a href="csspurge.html">
<img class="br3" src="images/concept-3.jpg" />
</a>
</figure>
</article>
<article class="article-wrap row-l">
<div class="grid-unit">
<h2>
Hundo IV
</h2>
<p class="fs4">Apply search strings to filter the best Pokemon. Copy and paste webapp to save time.</p>
<a class="cta cta-s" href="project.html">See project</a>
</div>
<figure>
<a href="project.html">
<img class="br3" src="images/hundoiv/pokemon-1.png" width="320" />
</a>
</figure>
</article>
<article class="article-wrap row-l">
<div class="grid-unit">
<h2>
Cryptomonos
</h2>
<p class="fs4">Minimal top 25 Crypto currencies. Inspired by Google fonts and monospaced typeface.</p>
<a class="cta cta-s" href="cryptomonos.html">See project</a>
</div>
<figure>
<a href="cryptomonos.html">
<img class="" src="images/crypto/ipad/IMG_0715.PNG" />
</a>
</figure>
</article>
</section>
<section class="quote">
<div class="quote-wrap">
<div class="quote-head">
<img src="images/testimonials/theo.jpg" />
<div class="ml3 ">
<cite><strong>Theo Bonham Carter</strong></cite>
<span class="db fs5">Lucidworks</span>
</div>
</div>
<blockquote class="animated">
<p class="fs4">
Roy is a very nice, very accomplished UX/UI designer who delivers spot on work. In my time working with him, our company saw him as a key contributor to the development of our products, and as a high value, trusted member of the client services team. He has an enviable eye for detail and the ability to really focus on the end user at every stage along a journey: leading to truly valuable work.
</p>
</blockquote>
<div class="quote-nav">
<div class="quote-number">
<span>1</span> / 7
</div>
<div class="next btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="space-v2 bg-black tc">
<a href="work.html" class="cta cta-l ma3">More Work</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?version=1"></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('set','anonymizeIp', true);
ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>