-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
229 lines (177 loc) · 13 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta
name="description"
content="Reda Haq is a front end developer based in London"
/>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto|Futura&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
<script src="https://kit.fontawesome.com/9de7c8a110.js"></script>
<title>Reda Haq - Front End Developer</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-35895078-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-35895078-3');
</script>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<!-- <li><a href="#notes">Notes</a></li> -->
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<a href="/" class="active" aria-label="isometric R logo"><img src="assets/R isometric.svg" class="R-logo" alt="isometric R logo" aria-label="isometric R logo"></a>
<a href="/" class="active" aria-label="isometric R logo"><img src="assets/R isometric-hover.svg" class="R-logo-hover" alt="isometric R logo" ></a>
<img src="assets/leaf-top-left.svg" class="leaf-green" alt="leaf background">
<img src="assets/leaf-pink.svg" class="leaf-pink" alt="leaf background">
<header class="header">
<a href="/" class="active" aria-label="isometric R logo"><img src="assets/R isometric.svg" class="R-logoMob" alt="isometric R logo"></a>
<h1 class="headline">
Reda Haq
</h1>
<h2 class="sub-heading">
Front End Developer
</h2>
<p class="tagline">
I solve problems by building delightful digital experiences with curiosity and compassion
</p>
<img src="assets/figure.svg" class="figure" alt="illustration of woman waving">
<a href="#about"><button class="btn-primary">About Me</button></a>
<a href="#work"><button class="btn-secondary">See My Work</button></a>
</div>
</header>
<section class="about" >
<h2 id="about">About</h2>
<p>
Hi there, I'm Reda <span class="waving" aria-label="animated waving hand emoji">👋🏾</span> (pronounced F̶l̶o̶rida), front end software developer at <a href="https://www.timetospare.com/" target="blank">Time to Spare</a>, and a graduate of <a href="https://www.foundersandcoders.com/" target="blank" rel="noreferrer">Founders and Coders</a>. I have a background in digital communications strategy, with experience in copywriting and design. I'm particularly interested in how technology shapes society and tech for good.</p>
<p>Retraining as a software engineer feels like getting to play every day. I love that coding requires a combination of logic and creativity and presents an endless [array] of interesting challenges. I have a real passion for UX/UI design and love engaging both my developer and designer <span aria-label="unicorn emoji">🦄</span> sides in my work.</p>
<p>Tech Stack + Tooling</p>
<div class="stack">
<img src="assets/html5.svg" class="ts-logo" alt="html5 logo">
<img src="assets/css3.svg" class="ts-logo" alt="css3 logo">
<img src="assets/JS.svg" class="ts-logo" alt="JavaScript logo">
<img src="assets/react.svg" class="ts-logo" alt="react logo">
<img src="assets/express.svg" class="ts-logo" alt="react logo">
<img src="assets/git.svg" class="ts-logo" alt="git logo">
<img src="assets/github.svg" class="ts-logo" alt="github logo">
<img src="assets/travis.svg" class="ts-logo" alt="travis CI logo">
<img src="assets/codecov.svg" class="ts-logo" alt="codecov logo">
<img src="assets/heroku.svg" class="ts-logo" alt="heroku logo">
<img src="assets/netlify.svg" class="ts-logo" alt="netlify logo">
<img src="assets/nodeJS.svg" class="ts-logo" alt="nodeJS logo">
<img src="assets/npm.svg" class="ts-logo" alt="npm logo">
<img src="assets/jest.svg" class="ts-logo" alt="jest logo">
<img src="assets/rtl.png" class="ts-logo" alt="jest logo">
<img src="assets/vscode.svg" class="ts-logo" alt="visual studio code logo">
<img src="assets/figma.svg" class="ts-logo" alt="figma logo">
<img src="assets/photoshop.png" class="ts-logo" alt="photoshop logo">
<img src="assets/SC.svg" class="ts-logo" alt="styled components logo">
<img src="assets/slack.png" class="ts-logo" alt="slack logo">
<img src="assets/airtable.svg" class="ts-logo" alt="airtable logo">
<img src="assets/trello.png" class="ts-logo" alt="trello logo">
</div>
<!-- <p> I'm super keen to delve into Redux, Next JS and TypeScript next, and hope to incorporate these into future projects. </p> -->
<!-- <p>I'm interested in accessibility and performance and want to learn how to create flexible platforms that scale well. </p> -->
<p>You can find me at meetups such as Front End London, React London and React JS Girls. I also mentor at Founders and Coders and switch things up between student and coach at Codebar. It's great how the tech community nurtures continuous learning - I recently had a 101 in machine learning and neural nets with Brain JS! <span aria-label="sparkle emoji">✨</span> </p>
<p>Aside from coding, I'm a big foodie and hobbyist baker - my next challenge is to try baking croissants <span aria-label="croissant emoji">🥐</span>. I enjoy gardening <span>🌱</span> </span>, yoga <span aria-label="lotus pose emoji">🧘🏾♀️</span>, and am a fan of a good mocktail <span aria-label="cocktail emoji">🍸</span>. I also volunteer at Foodcycle where we make meals for the vulnerable, tackling food poverty and food waste.</p>
<p>I'm very friendly and love collaborative working; <a href="#contact">drop me a line if you fancy a chat</a>.</p>
</section>
<section class="testimonial parallax">
<h1>"Reda is sharp, motivated, hard-working and has an excellent (if somewhat pixie-ish) sense of humour... One to watch."</h1>
<p>- Mat Morrisson, Global Head of Digital, Porter Novelli</p>
</section>
<section class="work">
<h2 id="work">Work</h2>
<div class="wrapper">
<article class="project-article">
<div class="project-image-container">
<img src="assets/rrr.png" class="project-image" alt="reduce, reuse, recycling game">
</div>
<a href="http://reduce-reuse-recycle.netlify.com/" target="blank" rel="noreferrer"><h3>
Reduce, Reuse, Recycle!
</h3></a>
<p>Tablet-first drag and drop game to teach 3-6 year-olds about recycling.</p>
<p>Tech Stack: React, React Router, Drag and Drop Container Library, Travis CI, Codecov, Jest, React Testing Library, Styled Components, SVGs, CSS animations, Progressive Web App</p>
<p>This was a joy of a project. Usability testing helped us validate many assumptions and drove us to build tablet-first. We used a drag and drop library which worked with touch events. It was great to be able to achieve some of our stretch goals around animating SVGs, adding UI sound effects to improve the user experience, and, excitingly, turning this into a Progressive Web App.</p>
<p>Role: QA lead, developer, designer</p>
<p><a href="https://github.com/fac18/recycling-game" target="blank" rel="noreferrer">Code on Github</a> | <a href="https://www.figma.com/proto/0JWLkTWl4IFKRodfEZkkky/Recycling-Game?node-id=96%3A456&scaling=scale-down" target="blank" rel="noreferrer">Figma Prototype</a> | <a href="https://reduce-reuse-recycle.netlify.com" target="blank" rel="noreferrer">Live Site</a></p>
</article>
<article class="project-article">
<div class="project-image-container">
<img src="assets/ss.png" class="project-image" alt="safe space site">
</div>
<a href="https://safespacemu.netlify.com/" target="blank" rel="noreferrer"><h3>
Safe Space
</h3></a>
<p>A site built for the Musicians' Union, to enable reporting of sexual harassment within the music industry.</p>
<p>Tech Stack: React, React Router, AirTable, Netlify Lambda Functions, Travis CI, Codecov, Jest, React Testing Library, Cypress, React Material Web Component Library, Styled Components</p>
<p>Still in Build phase - description to come soon!</p>
<p>Role: UX/UI lead, developer, designer</p>
<p><a href="https://github.com/fac18/safe-space" target="blank" rel="noreferrer">Code on Github</a> | <a href="https://www.figma.com/file/rePH5IrRYb62GPJiZysDvs/Safe-Space?node-id=4886%3A23" target="blank" rel="noreferrer">Figma Prototype</a> | <a href="https://safespacemu.netlify.com" target="blank" rel="noreferrer">Live Site</a></p>
</article>
<article class="project-article">
<div class="project-image-container">
<img src="assets/exp.png" class="project-image" alt="reduce, reuse, recycling game">
</div>
<a href="https://expelliarmus.netlify.com/" target="blank" rel="noreferrer"><h3>
Expelliarmus
</h3></a>
<p>A Street Fighter style Harry Potter spell-casting game built using React JS in 2 days</p>
<p>Format: Pair-programming</p>
<!-- <p>Challenge, Solution, Learning</p> -->
<p><a href="https://github.com/fac18/expelliarmus" target="blank" rel="noreferrer">Code on Github</a> | <a href="https://expelliarmus.netlify.com" target="blank" rel="noreferrer">Live Site</a></p>
</article>
<article class="project-article">
<div class="project-image-container">
<img src="assets/gifsthesia.png" class="project-image" alt="gifsthesia game">
</div>
<a href="" target="blank" rel="noreferrer"><h3>
Gifsthesia
</h3></a>
<p>When we hear lyrics, we see Gifs. A game using the MusixMatch and Giphy APIs</p>
<p>Format: Pair-programming, mobbing</p>
<!-- <p>Challenge, Solution, Learning</p> -->
<p><a href="https://github.com/fac18/week3-cikp-gifsthesia" target="blank" rel="noreferrer">Code on Github</a> | <span href="" target="blank" rel="noreferrer">Site Link to come</span></p>
</article>
</div>
</section>
<!--
<section class="notes" id="notes">
<h2>Notes</h2>
<p>Cool things I've been looking into lately:</p>
<p>- CSS Houdini</p>
<p>- Redux Leaves</p>
<p>- </p>
</section> -->
<section class="contact" id="contact">
<div class="flex-row">
<div class="contact-wrapper">
<h2>Contact</h2>
<p>Carrier pigeon, postcard...</p>
<a href="mailto:redahaq@gmail.com" title="Email" target="_blank"><i class="fab far fa-paper-plane"></i>Email</a>
<a href="https://twitter.com/redahaq" title="Twitter" target="_blank" rel="noreferrer"><i class="fab fa-twitter"></i>Twitter</a>
<a href="https://github.com/redahaq" title="Github" target="_blank" rel="noreferrer"><i class="fab fa-github" id="github"></i>Github</a>
<a href="https://www.freecodecamp.org/grapegirl711" title="FreeCodeCamp" target="_blank"><i class="fab fa-free-code-camp"></i>freeCodeCamp</a>
<a href="https://codewars.com/users/grapegirl711" title="Codewars" target="_blank" rel="noreferrer"><span class="iconify codewars-icon" data-icon="simple-icons:codewars" data-inline="false" style="color: #6200ee;" data-width="25" data-height="25"></span>Codewars</a>
<a href="./assets/Reda Haq CV 2020.pdf" download="Reda Haq CV"><i class="fas fa-file-download"></i>CV</a>
</div>
<div class=headshot-wrapper><img src="assets/reda-headshot-prof.png" class="headshot" alt="reda headshot"></div>
</div>
</section>
<footer><h3>Fueled by <span aria-label="coffee">☕</span>. Built by Reda <span aria-label="sparkle emoji">✨</span>© 2020 </h3></footer>
</body>
</html>