-
Notifications
You must be signed in to change notification settings - Fork 0
/
project.html
192 lines (191 loc) · 11.1 KB
/
project.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
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
Hundoiv | 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="project hundoiv">
<header>
<div class="header-wrap">
<a href="index.html">
<svg class="logo" width="32" height="32" viewBox="0 0 32 32" xmlns="https://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="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/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="hero ">
<article class="article-wrap pv3 row-l ">
<div class="grid-unit">
<h1 class="mb4-l">Search strings for perfect Pokemon</h1>
<a class="cta cta-l primary cta-shadow" href="https://www.hundoiv.com">See app</a>
</div>
<figure class="">
<div class="features flex flex-column flex-row-l items-center justify-center">
<img src="images/hundoiv/pokemon-4.png" />
<img src="images/hundoiv/pokemon-1.png" />
<img src="images/hundoiv/pokemon-5.png" />
</div>
</figure>
</article>
</section>
<section>
<article class="article-wrap row-l">
<div class="grid-unit">
<h2>
Backstory
</h2>
<p>
A special event happens once a month where one pokemon will appear in abundance for 3 hrs. When you have enough candy, you can evolve it to a more powerful form which comes with an exclusive move.
</p>
</div>
</article>
<article class="article-wrap row-l">
<figure>
<img class="br3" src="images/hundoiv/hero.jpg" width="720" />
</figure>
<div class="grid-unit">
<h3>
Goal
</h3>
<p>
Towards the end of the event (last 20 minutes), players will search for high IV pokemon (individual stats for battle) to evolve and get the exclusive move.
</p>
<h3>
Problem
</h3>
<p>
After catching 250 Pokemon, to find the best ones, you have to appraise them, one at a time. This method wastes a lot of time, since you have to swipe to each one.
</p>
</div>
</article>
<article class="article-wrap row-l">
<figure class="">
<img class="" src="images/hundoiv/sketch.png" width="720" />
</figure>
<div class="grid-unit">
<h3>
Solution
</h3>
<p>
Lets find and copy the search strings on github kindly provided by another player. Create a text replacement on the iPhone, paste the string in the phrase. But this is a lot of steps and complicated for some users.
</p>
<p class="f3 fw4 handwriting">
Lets create a code strings copy paste app.
</p>
</div>
</article>
<article class="article-wrap row-l flow">
<figure class="animated">
<img class="br3" src="images/hundoiv/pokemon-1.png" width="320" />
</figure>
<div class="grid-unit">
<span class="dib mb4">
<svg width="21" height="32" viewBox="0 0 21 32" xmlns="https://www.w3.org/2000/svg"><title>1 copy</title><desc>Created with Sketch.</desc><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#FF4136" offset="0%"/><stop stop-color="#FF851B" offset="100%"/></linearGradient></defs><path d="M.32.32h20.366v31.68h-4.526v-27.154h-15.84v-4.526zm0 6.789h13.577v24.891h-4.526v-20.366h-9.051v-4.526zm0 6.789h6.789v18.103h-4.526v-13.577h-2.263v-4.526z" fill="url(#a)"/></svg>
</span>
<h3>Landing page</h3>
<p class="measure animated">
A brief description of what search strings can do and then the user can tap on the pokemon ordered by latest event
</p>
<div class="btn-circle next mt4-l">
<svg xmlns="https://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>
</article>
<article class="article-wrap row-l">
<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/maEJEa9SQDI?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</figure>
<div class="grid-unit">
<h3>
User Journey
</h3>
<p>
See the whole journey from app to creating keyboard text replacements on ios phone.
</p>
<h3>
Features
</h3>
<p>
Users were requesting other features that relate to finding perfect pokemon. I decided to go with a tabbed interface as this was consistent with the game ui and players were familiar with this.
</p>
</div>
</article>
</section>
<section class="quote tweets">
<div class="quote-wrap">
<div class="quote-head">
<img src="images/tweets/snaps.jpg" />
<div class="ml3 ">
<cite class="f5 b">@pkmnsnaps</cite>
</div>
</div>
<blockquote class="animated">
<p class="fs4">
iOS users who want to check IVs quickly should take a look at this video. The website I used to copy the string is https://hundoiv.com so you should check it out! Feel free to share! Note: Always appraise as CP can be the same for different levels. #PokemonGO
</p>
</blockquote>
<div class="quote-nav">
<div class="quote-number">
<span>1</span> / 4
</div>
<div class="btn-circle next">
<svg xmlns="https://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>
</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="https://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="https://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="https://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="https://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/tweets.js"></script>
<script src="js/header.js"></script>
<script src="js/animation.js"></script>
<script src="js/flow.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>