-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproject-story-2.html
More file actions
227 lines (200 loc) · 12.1 KB
/
project-story-2.html
File metadata and controls
227 lines (200 loc) · 12.1 KB
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="DarrenRM - bPanel Story">
<meta name="author" content="Darren">
<!-- Favicon -->
<link rel="icon" href="images/favicon.png">
<!-- Site Title -->
<title>DarrenRM CV</title>
<!-- Bootstrap 4 core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
<link href="css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="preloader">
<div class="preloader">
<span></span>
<span></span>
</div>
</div>
<div id="top"></div>
<div id="main-content">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
<button class="navbar-toggler collapsed menu-text" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button><!-- / navbar-toggler -->
<div class="collapse navbar-collapse" id="navbar-toggle">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project-story-1.html">PROJECT STORIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#my-story">MY BACKGROUND</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#projects">RECENT WORK</a>
</li>
</ul><!-- / navbar-nav -->
</div><!-- / navbar-collapse -->
</div><!-- / container -->
</nav><!-- / navbar -->
<header id="dark-overlay" class="has-sticky-menu story2" style="padding-bottom:0;">
<div class="container">
<div class="header-content text-right" style="padding-bottom:30px;">
<div class="story-hero-title">
<h2>Curated Categories</h2>
<p class="mb-0">PRODUCT DESIGN & FRONT-END</p>
</div>
<div class="spacer-2x"> </div>
<div class="hero-info text-left">
<div class="info">
<p class="mb-0"> <span class="info-title va-middle">CLIENT</span></p>
<p>Purse.io</p>
</div><!-- / info -->
<div class="info">
<p class="mb-0"> <span class="info-title va-middle">TOOLS</span></p>
<p>Adobe Illustrator, Visual Studio, GitLab, CodePen</p>
</div><!-- / info -->
<div class="info">
<p class="mb-0"> <span class="info-title va-middle">AUDIENCE</span></p>
<p>Crypto Users, Purse Users</p>
</div><!-- / info -->
<div class="spacer-2x"> </div>
</div>
</div><!-- / header-content -->
</div><!-- / container -->
</header>
<div class="spacer-2x"> </div>
<section id="project-details" class="p-0">
<div class="container">
<div class="section-w-image">
<div class="row">
<div class="col-lg-6 project2-details-image"><p></p></div>
<div class="col-lg-6 offset-lg-6 section-description">
<h4 class="section-title mb-3"><span class="text-primary">01.</span> THE DATA</h4>
<p class="mb-3 lh-28">Combining analytics I had pulled from Google with data our analyst provided, we learned that
the ovewhelming majority of users were searching for and purchasing electronic items.
</p>
<p class="lh-28">There were three major priorities. First, we wanted a better way to collect data on niche market interest outside of electronics. Second, we
wanted something that could be re-used in the future for affiliate landing pages. Third, it must be managed by the internal admin panel so anyone can add & edit categories.
</p>
<p class="lh-28"> I would be full-stack on this project, from idea to design to code.</p>
<div class="project-info">
</div><!-- / project-info -->
</div><!-- / section-description -->
</div><!-- / row -->
</div>
</div><!-- / container-fluid -->
</section><!-- / project-details -->
<div class="spacer-2x"> </div>
<section id="project-details2" class="p-0 image-right">
<div class="container">
<div class="section-w-image">
<div class="row">
<div class="col-lg-6 section-description">
<h4 class="section-title mb-3"><span class="text-primary">02.</span> DESIGN</h4>
<p class="mb-3 lh-28">There were strong design constraints beyond the brand guidelines on this project. I was limited to the structure of the Purse website, and the way
hero part of the site was built & functioned. The solution we settled on was to use large images for the background of each category, along with a UI pill-bar that
would display details about the current category.
</p>
<p class="lh-28">Finding the right balance between the UI and the large background was a challenge both from the perspective of whitespace and contrast. Overall, I spent the most
time on designing the animated menu buttons for the main page. They should feel playful and shiny.
</p>
<div class="spacer-1x"> </div>
<div class="info">
<p class="mb-0"><i class="fas fa-tag text-primary mr-1"></i> <span class="story-detail-info va-middle">SKILLS</span></p>
<p>UX, UI, Visual Design</p>
</div><!-- / info -->
</div><!-- / section-description -->
<div class="col-lg-6 offset-lg-6 project2-details-image2"><p></p></div>
</div><!-- / row -->
</div>
</div><!-- / container-fluid -->
</section><!-- / project-details -->
<div class="spacer-2x"> </div>
<section id="project-details3" class="p-0">
<div class="container">
<div class="section-w-image">
<div class="row">
<div class="col-lg-6 project2-details-image3"><p></p></div>
<div class="col-lg-6 offset-lg-6 section-description">
<h4 class="section-title mb-3"><span class="text-primary">03.</span> CODE IMPLEMENTATION</h4>
<p class="mb-3 lh-28">At Purse, the front-end is built with backbone.js. I had worked on the front-end for months, but this was a deeper dive into backbone. I really wanted to
push myself and deliver the project as a simple pull-request, especially since outside of questions, there were no engineers on the project.
</p>
<p class="lh-28">
Another area I found especially captivating was building the animated buttons in CSS. My designs had called for a transparent ring combined with a gradient, something
that would require some research to see if possible. I crammed a bunch of nights, and am really happy to have ended up with a unique result that was not easy to achieve.</p>
<div class="spacer-1x"> </div>
<div class="info">
<p class="mb-0"><i class="fas fa-tag text-primary mr-1"></i> <span class="story-detail-info va-middle">SKILLS</span></p>
<p>Front-end, JS, Git</p>
</div><!-- / info -->
</div><!-- / section-description -->
</div><!-- / row -->
</div>
</div><!-- / container-fluid -->
</section><!-- / project-details -->
<section class="pagination">
<h3 class="hidden">PAGINATION</h3>
<div class="container">
<a href="project-story-1.html" class="btn btn-link btn-lg btn-direction"><i class="fas fa-long-arrow-alt-left mr-2"></i> Prev</a>
<a href="project-story-3.html" class="btn btn-link btn-lg btn-direction pull-right">Next <i class="fas fa-long-arrow-alt-right ml-2"></i></a>
</div><!-- / container -->
</section><!-- / pagination -->
</div><!-- / main-content -->
<a href="#top" class="scroll-to-top dark-scroll is-hidden smooth-scroll" data-nav-status="toggle"><i class="md-icon dp24">expand_less</i></a>
<div id="reveal-footer">
<div class="reveal-content">
<footer class="bg-darkgrey dark">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 footer-left-area">
<p>© 2019 DarrenRM</p>
</div>
<div class="col-lg-4 social-icons footer-right-area">
<a href="https://twitter.com/DarrenMills" class="btn-social"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/DarrenRM" class="btn-social"><i class="fab fa-github"></i></a>
</div><!-- / social-icons -->
</div><!-- / row -->
</div><!-- / container -->
</footer>
</div><!-- / reveal-content -->
</div><!-- / reveal-footer -->
<!-- Core JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<!-- / Core JavaScript -->
<!-- preloader -->
<script src="js/preloader.js"></script>
<!-- / preloader -->
<!-- Smooth Scrolling -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<!-- / Smooth Scrolling -->
<!-- Hide Nav -->
<script src="js/hide-nav.js"></script>
<!-- / Hide Nav -->
</body>
</html>