-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
277 lines (259 loc) · 8.92 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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
---
layout: _default.html
---
<div class="section section--intro" id="intro">
<div class="section__inner section__inner--narrow">
<a href="#about" class="section__jump">
<span class="visually-hidden">Skip to About section</span>
<img
src="images/arrow.svg"
height="46"
width="29"
alt=""
aria-hidden="true"
/>
</a>
<article class="stack stack--gap-sm">
<h2 class="text-xxl">Hello</h2>
<p class="text-xl">
I'm James Clarke, a front-end web developer who's passionate about
accessibility and inclusion.
</p>
</article>
</div>
</div>
<article class="section section--about" id="about">
<div class="section__inner">
<div class="grid grid--stackable grid--forward lg:grid--reverse">
<div class="grid__col stack">
<h2 class="text-xxl scroll-animate">About</h2>
<p class="scroll-animate">
After over 10 years honing my skills in agencies I wanted to focus on
the elements of web development that matter to me. I launched JMC.DEV
in 2019 to provide fast & accessible websites, web apps and design
systems to agencies and personal clients.
</p>
<p class="scroll-animate">
I've worked on countless website builds, from startups to
multi-nationals. My clients include Halfords, Worcester Bosch,
soak.com and dōTERRA.
</p>
<p class="scroll-animate">
When I'm not writing code, I can be found spending time with my family
or cycling around Worcester.
</p>
</div>
<figure class="grid__col">
<picture
class="breakout breakout--sides md:breakout--reset mb-neg-xl md:mb-0 scroll-image d-flex align-center justify-center"
>
<source srcset="images/photo.webp" type="image/webp" />
<source srcset="images/photo.jpg" type="image/jpeg" />
<img
src="images/photo.jpg"
width="480"
height="607"
alt="A photograph of me standing in my garden"
loading="lazy"
/>
</picture>
</figure>
</div>
</div>
<img
src="images/j.svg"
class="section__letter scroll-zoom"
alt=""
aria-hidden="true"
/>
</article>
<article class="section section--work" id="work">
<div class="section__inner stack">
<div class="stack">
<h2 class="text-xxl scroll-animate">What I do</h2>
<div class="grid">
<div class="grid__col lg:grid__col--50 stack">
<h3 class="text-lg scroll-animate">
I provide front-end development and accessibility consultancy to
agencies and businesses.
</h3>
</div>
</div>
</div>
<div class="grid grid--stackable">
<div class="grid__col stack">
<p class="scroll-animate">
With a mind for detail, I care about the code I create for you. I
don't believe in short-term fixes, which means less conflict and less
time debugging. So you save time in getting a working product to your
clients.
</p>
<p class="scroll-animate">
My goal is to write code for you that's as good as it can be. The
culmulation of small details leads to an optimised website that
engages all users, gives a great experience and is as fast as it can
be.
</p>
</div>
<div class="grid__col stack">
<p class="scroll-animate">
I'm a believer in component-driven development and I am an advocate of
<abbr title="Block, Element, Modifier">BEM</abbr> methodology to
ensure a readable and scalable codebase. I champion
<strong>accessibility</strong> and
<strong>progressive enhancement</strong>, with the aim of creating
digital experiences that work for everyone - regardless of ability,
device, or environment.
</p>
<p class="scroll-animate">
I have loads of experience with HTML, CSS, JavaScript, React.js,
Typescript, PHP, Umbraco, WordPress and much more.
</p>
</div>
</div>
</div>
<img
src="images/m.svg"
class="section__letter scroll-zoom"
alt=""
aria-hidden="true"
/>
</article>
<article class="section section--clients" id="clients">
<div class="section__inner">
<div class="stack">
<h2 class="text-xxl scroll-animate">Who I do it for</h2>
<div class="grid grid--stackable">
<div class="grid__col stack">
<h3 class="text-lg scroll-animate">Web and digital agencies</h3>
<p class="scroll-animate">
I'll provide you with freelance specialist support on your projects,
enabling you to meet deadlines and keep your clients happy.
</p>
<p class="scroll-animate">
I prefer to work on complete projects where possible. This gives you
the benefit of knowing I'll be on hand until the project is
completed, avoiding any unneccesary hacks and shortcuts.
</p>
</div>
<div class="grid__col stack">
<h3 class="text-lg scroll-animate">Design and marketing agencies</h3>
<p class="scroll-animate">
I'll bring your design concepts to life, building websites that are
fully accessible and meet best practices.
</p>
<p class="scroll-animate">
I've worked with design teams throughout my career so I understand
your needs. Rest assured, my attention to detail will satisfy the
needs of the most picky Creative Director.
</p>
</div>
</div>
</div>
<article class="mt-xl lg:mt-huge stack stack--gap-lg">
<h3 class="text-lg scroll-animate">Companies I've worked with include</h3>
<ul class="clients">
<li class="clients__item">
<img
src="images/logo-doterra.svg"
alt="dōTERRA"
class="clients__logo scroll-scale-up"
/>
</li>
<li class="clients__item">
<img
src="images/logo-halfords.svg"
alt="Halfords"
class="clients__logo scroll-scale-up"
/>
</li>
<li class="clients__item">
<img
src="images/logo-nec-group.svg"
alt="NEC Group"
class="clients__logo scroll-scale-up"
/>
</li>
<li class="clients__item">
<img
src="images/logo-worcester-bosch.svg"
alt="Worcester Bosch"
class="clients__logo scroll-scale-up"
/>
</li>
<li class="clients__item">
<img
src="images/logo-karcher.svg"
alt="Kärcher"
class="clients__logo scroll-scale-up"
/>
</li>
</ul>
</article>
</div>
<img
src="images/c.svg"
class="section__letter scroll-zoom"
alt=""
aria-hidden="true"
/>
</article>
<div class="section section--contact" id="contact">
<div class="section__inner">
<div class="grid grid--stackable">
<article class="grid__col stack">
<h2 class="text-xxl scroll-animate">Contact</h2>
<div class="stack stack--gap-lg">
<h3 class="text-lg scroll-animate">Let's build something together</h3>
<p class="scroll-animate">
An email is the best way to get in touch with me. Tell me about your
project, if you have a deadline that needs to be met and, if
possible, an indication of budget.
</p>
<p class="scroll-animate">
Drop me a line at<br />
<a href="mailto:[email protected]" class="inherit">[email protected]</a>
</p>
</div>
</article>
<article class="grid__col stack">
<h2 class="text-xxl scroll-animate">Availability</h2>
<dl
class="availability"
aria-description="My availability for the next 3 months"
>
<div class="scroll-animate">
<dt class="text-lg">
<time datetime="2025-02">February</time>
</dt>
<dd
class="availability__value availability__value--available text-md"
>
Available
</dd>
</div>
<div class="scroll-animate">
<dt class="text-lg">
<time datetime="2025-03">March</time>
</dt>
<dd
class="availability__value availability__value--available text-md"
>
Available
</dd>
</div>
<div class="scroll-animate">
<dt class="text-lg">
<time datetime="2025-04">April</time>
</dt>
<dd
class="availability__value availability__value--available text-md"
>
Available
</dd>
</div>
</dl>
</article>
</div>
</div>
</div>