-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
230 lines (228 loc) · 17.4 KB
/
index.html
File metadata and controls
230 lines (228 loc) · 17.4 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
228
229
230
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135014080-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-135014080-1');
</script>
<title>Lewis Turner - Web Developer</title>
</head>
<body>
<div class="mobileNavContainer">
<div class="mobileTopBar">
<a class="name" href="javascript:void(0)">Lewis Turner</a>
<div class="mobileNavButton closed">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
<div class="mobileNavWrapper closed">
<ul class="mobileNav">
<li><a class="work" href="javascript:void(0)">Work</a></li>
<li><a href="CV.pdf" target="_blank">CV</a></li>
<li><a href="mailto:lewis@lewiscodes.com" target="_blank"><i class="fas fa-at"></i></a></li>
<li><a href="https://github.com/lewiscodes" target="_blank"><i class="fab fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/lewis-turner-26796213b/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="navContainer">
<ul class="nav">
<li class="name"><a>Lewis Turner</a></li>
<li><a class="work" href="javascript:void(0)">Work</a></li>
<li><a href="CV.pdf" target="_blank">CV</a></li>
<li><a href="mailto:lewis@lewiscodes.com" target="_blank"><i class="fas fa-at"></i></a></li>
<li><a href="https://github.com/lewiscodes" target="_blank"><i class="fab fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/lewis-turner-26796213b/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
<div class="bodyContainer">
<div class="section white header">
<div class="content">
<img src="img/me_img.jpg" class="me"/>
<h1>Lewis Turner</h1>
<h2>Front End Web Developer</h2>
<p class="personalStatement">A passionate front end web developer with a talent and desire for utilising a wide range of technologies to build elegant and functional websites and applications.</p>
</div>
</div>
<div class="section grey technologies">
<div class="content">
<h2>Tech</h2>
<div class="listOfTechnologies">
<img src="./img/devicons/html5-original-wordmark.svg" class="devicon" />
<img src="./img/devicons/css3-original-wordmark.svg" class="devicon" />
<img src="./img/devicons/javascript-original.svg" class="devicon" />
<img src="./img/devicons/react-original-wordmark.svg" class="devicon" />
<img src="./img/devicons/nodejs-original-wordmark.svg" class="devicon" />
<img src="./img/devicons/jquery-original-wordmark.svg" class="devicon" />
<img src="./img/devicons/sass-original.svg" class="devicon" />
<img src="./img/devicons/git-original-wordmark.svg" class="devicon" />
<img src="./img/devicons/visualstudio-plain-wordmark.svg" class="devicon"/>
<img src="./img/devicons/mysql-original-wordmark.svg" class="devicon" />
</div>
</div>
</div>
<div class="section white work">
<div class="content" style="height: 100vh">
<h2>Work</h2>
<div class="slider">
<div class="controlBar">
<a href="javascript:void(0)" class="control_prev"><i class="fas fa-arrow-circle-right fa-3x"></i></a>
<div class="dots">
<span class="dot dot1 selected"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
<span class="dot dot4"></span>
<span class="dot dot5"></span>
<span class="dot dot6"></span>
</div>
<a href="javascript:void(0)" class="control_next"><i class="fas fa-arrow-circle-right fa-3x"></i></a>
</div>
<ul class="clearfix">
<li class="slide slide1">
<div class="slideContent">
<div class="titleBar">
<h2>Something2Watch</h2>
<div class="links">
<a href="http://www.something2watch.com" target="_blank"><i class="fas fa-external-link-alt fa-lg"></i></a>
<a href="https://github.com/lewiscodes/something2Watch" target="_blank"><i class="fab fa-github fa-lg"></i></a>
</div>
<div class="tech">
<i class="fab fa-react fa-2x"></i>
<i class="fab fa-css3-alt fa-2x"></i>
</div>
</div>
<div>
<h3>Idea</h3>
<p>I came up with this idea through personal necessity. I love watching tv, but so often it's tough to find something good to watch. There are lots of similar sites out there, but they all seem overly complicated; asking specifics about genre or certification (amongst a myriad of other things). My idea is simple; what have you enjoyed before? Here are some similar shows to choose from!</p>
<h3>Designs</h3>
<p>I had a good idea in my mind of how I wanted the site to look. I design and build all sites that I work on using the 'mobile first' methodology. I knew that this site more than most, would get a lot of traffic via mobile and tablet. Most people sat on their sofa wondering what to watch tend to have their phone or tablet to hand! I fleshed out some wireframes and user flow (<a href='../img/something2watch/Something2Watch_small.pdf' target="_">small</a>, <a href='../img/something2watch/Something2Watch_medium.pdf' target="_">medium</a> and <a href='../img/something2watch/Something2Watch_large.pdf' target="_">large</a>) in Balsamiq and selected the font and colour with inspiration from a recent copy of Web Designer magazine.</p>
<h3>Challenges</h3>
<p>The biggest challenge was finding the right API to get the data. I wasn't able to find a single data source that gave me everything I wanted. <a href="https://developers.themoviedb.org/3" target="_">themoviedb</a> came close; it provided a comprehensive query endpoint to find suggestions using any number of different metrics. The one downside was that it uses its own rating system, rather than the more familiar, and much more widely used, IMDB and Rotten Tomatoes. I settled on using <a href="http://www.omdbapi.com/" target"_">omdbapi</a> for the basic search and most of the UI data, including the all-important "sort by rating"), but utilised themoviedb for the impressive search api.</p>
<p>The second challenge came with extracting the data out of the APIs. Because of the need to switch between the two api's to retrieve and display the results, there are 5 asynchronous api calls, that all depend on the previous to work. Initially I tried doing this in the redux container, checking that the previous API had returned its result using componentWillReceiveProps and firing off the next call when it had; that got very messy very fast. Instead I decided on chaining promises in the action creator. I felt this was the best all round solution as it keeps the container concise whilst not having an overly complicated action.</p>
<h3>Further Development Ideas</h3>
<p>If I can find an API that provides the data, I would love to be able to show which platforms each result is available on; whether it be Netflix, Amazon Prime, iPlayer, etc...</p>
</div>
</div>
</li>
<li class="slide slide2">
<div class="slideContent">
<div class="titleBar">
<h2>IfOnly</h2>
<div class="links">
<a href="http://www.ifonly.xyz" target="_blank"><i class="fas fa-external-link-alt fa-lg"></i></a>
<a href="https://github.com/lewiscodes/IfOnly" target="_blank"><i class="fab fa-github fa-lg"></i></a>
</div>
<div class="tech">
<i class="fab fa-html5 fa-2x"></i>
<i class="fab fa-sass fa-2x"></i>
<i class="fab fa-js-square fa-2x"></i>
</div>
</div>
<div>
<h3>Idea</h3>
<p>I came up with the idea for this site when chatting to a friend; "I wonder, if someone had invested some money in Apple for me on the day I was born, what would it be worth now?". It turns out, it would be worth about 150 times more today than it was then.</p>
<h3>Designs</h3>
<p>I think I spent more time thinking about how to make this idea fun for the end user, the actual design of it; and honestly? I think that shows. However, I am very pleased with the story telling aspect of it.</p>
<h3>Challenges</h3>
<p>The hardest part was the time spent on getting the inputs to work how I wanted them to. They grow and shrink to fit the text that the user adds. They are responsive across different viewports, utilising mobile and tablet devices native datetime pickers, and a jQuery plugin to achieve the same thing on desktop.</p>
<p>I also took care when it came to loading the background image; there are 5 potential images that can be used. The site randomises which one is displayed each time the page is loaded. The image is then loaded asynchronously and fades in when it has finished downloading. It turns out to be a fairly simple bit of javascript, but it took a decent amount of thought!</p>
<h3>Further Development Ideas</h3>
<p>I've already done some further development; I added the bottom section calculation to show the optimum date to cash out! I also added the UK FTSE100 stock exchange to go with the existing US S&P500. I have some further ideas for development; I would like to redesign the UI to use more material design aspects as I have never been totally happy with it, especially the loading spinner!. I would also like to add Crypto Currencies to the list of available investments.</p>
</div>
</div>
</li>
<li class="slide slide3">
<div class="slideContent">
<div class="titleBar">
<h2>StudentBeans</h2>
<div class="links">
<a href="http://www.studentbeans.com" target="_blank"><i class="fas fa-external-link-alt fa-lg"></i></a>
</div>
<div class="tech">
<i class="fab fa-react fa-2x"></i>
</div>
</div>
<div>
<p>Studentbeans is a website and app that provides students with discounts to thousands of different brands all over the world. I mostly worked on the Single Sign On and user management areas of the site. I worked closely with a Ruby on Rails back end developer and UX and Design specialist to impliment changes required as a result of recent GDPR legislation and general improvements to the signup and verification process, where success was measured by a decrease in the percentage drop off of user signups to user verifications.</p>
<p>Coding standards were taking very seriously at StudentBeans, merge requests and code reviews were large part of the job. Having your own code checked and critiqued as well as reviewing and critiquing other developers code made me a better developer. On top of this, each squad was provided with a problem to solve, rather than simply being given a brief to fulfil. This bred teamwork and collaboration between all members of the squad.</p>
</div>
</div>
</li>
<li class="slide slide4">
<div class="slideContent">
<div class="titleBar">
<h2>Jaguar & Land Rover Configurator</h2>
<div class="links">
<a href="https://buildyour.landrover.com/lr2/r/model/_/en_gb/l560/3kgxn" target="_blank"><i class="fas fa-external-link-alt fa-lg"></i></a>
</div>
<div class="tech">
<i class="fab fa-react fa-2x"></i>
<i class="fab fa-node fa-2x"></i>
</div>
</div>
<div>
<p>The configurator was an amazingly complex project to work on. It involved vast amounts of data, much of which would change after a couple of site interactions by the user. The raw data was manipulated by a series of custom nodeJS middlewares and stored in a Redux state. Another challenge of the project was getting the sheer amount of data to fit in the available screen real-estate, especially on mobile. Many hours were spent with the designer making small tweaks to maximise the space utilised.</p>
<p>The main aspect I worked on was the new 'Recommended Choice' initiative, which was largely driven direcly by the client. This entailed each market being able to set a 'recommended choice' for each category within the configuration. Each one would be identified to the user. An option was also added to view a fully configured 'recommended choice' vehicle, without having to do any configuration at all.</p>
</div>
</div>
</li>
<li class="slide slide5">
<div class="slideContent">
<div class="titleBar">
<h2>Jaguar & Land Rover DX</h2>
<div class="links">
<a href="https://www.landrover.co.uk/index.html" target="_blank"><i class="fas fa-external-link-alt fa-lg"></i></a>
</div>
<div class="tech">
<i class="fab fa-html5 fa-2x"></i>
<i class="fab fa-sass fa-2x"></i>
<i class="fab fa-js-square fa-2x"></i>
</div>
</div>
<div>
<p>This is the main 'Digital Experience' platform for Jaguar and Land Rover, across all markets worldwide. I was involved in many areas of the site, but the main aspect I worked on was a complete refresh of the Retailer Locator component. This required a large degree of attention to detail being considered one of the most important areas of the site, as it is the main way to direct customers to individual retailers to begin the sales process.</p>
</div>
</div>
</li>
<li class="slide slide6">
<div class="slideContent">
<div class="titleBar">
<h2>Wallpapers</h2>
<div class="links">
<a href="https://github.com/lewiscodes/Wallpapers" target="_blank"><i class="fab fa-github fa-lg"></i></a>
</div>
<div class="tech">
<i class="fab fa-node fa-2x"></i>
</div>
</div>
<div>
<h3>Idea</h3>
<p>I love having colorful and interesting wallpapers on my mac! So, I decided to make a little app that would allow me to download the current trending images in the <a href="https://www.reddit.com/r/EarthPorn/" target="_">EarthPorn</a> sub-reddit on Reddit. I then setup my mac to cycle through the images changing my wallpaper every 30 minutes!</p>
<h3>Challenges</h3>
<p>There were no massively challenging aspects to this. Probably the biggest headache was working with the notoriously fiddley file system implementation in nodeJS.</p>
<h3>Further Development Ideas</h3>
<p>I have already implemented a settings file so that the user can easily configure things such as which subReddit to get the images from, where the downloaded images should be saved and the minimum image dimensions that should be allowed. If I were to develop it further, I would investigate a way of automatically setting the downloaded images as the wallpaper, rather than using the built in mac display settings tool and have the app run periodically, automatically; rather than having to manually set it as a scheduled task.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>