-
Notifications
You must be signed in to change notification settings - Fork 0
/
Services.html
519 lines (491 loc) · 32 KB
/
Services.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
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description"
content="Cristian Richards: Orlando-based freelance Frontend Engineer and Design enthusiast, passionate about JavaScript, React, Three.js, Next.js, and TypeScript." />
<meta name="keywords"
content="frontend engineer, design systems enthusiast, Javascript, Backend engineer, developer, Testing, jest, Three.js artist, TypeScript developer, React specialist, digital creativity, modern design, interactive art, visual storytelling, web development, innovative graphics, digital aesthetics, creative technology, dynamic visuals, software engineer portfolio, coding creativity, technical artistry, immersive experiences, web design, digital innovation, artistic coding, digital masterpieces, visual expression, creative coding, tech-infused art, digital craftsmanship, React, JavaScript, TypeScript, HTML, CSS, Vue.js, Three.js, Next.js, Web Accessibility, Figma, Astro, Node.js, Express.js, MongoDB, PostgreSQL, SQL, Python, R (Predictive Modeling), Amazon Web Services (AWS), Version Control (Git), CI/CD, GitHub Actions, Testing (TDD), Jest " />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="google-site-verification" content="SR7ckfOsHXWj2b9GHkWYZQo_qr6nqtYjpVNE-2WNm3A" />
<title>Cristian Richards
</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff">
<meta property="og:type" content="website">
<meta property="og:title" content="Portfolio Cristian Richards">
<meta property="og:description"
content="Cristian a frontend engineer specializing in TypeScript and React, I merge technology and creativity to craft interactive digital masterpieces. Explore a fusion of modern design and innovative coding that brings visual storytelling to life. Discover the synergy of web development and artistry, encapsulated in captivating visuals that redefine digital aesthetics. Join me on a journey through a realm where technology and design converge to create a new era of digital craftsmanship.">
<meta property="og:image" content="./assets/previews/p1.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Portfolio Cristian Richards">
<meta name="twitter:description"
content="Cristian a frontend engineer specializing in TypeScript and React, I merge technology and creativity to craft interactive digital masterpieces. Explore a fusion of modern design and innovative coding that brings visual storytelling to life. Discover the synergy of web development and artistry, encapsulated in captivating visuals that redefine digital aesthetics. Join me on a journey through a realm where technology and design converge to create a new era of digital craftsmanship.">
<meta name="twitter:image" content="./assets/previews/p1.png">
<link rel="stylesheet" href="./css/style-two.css" />
</head>
<body class="home">
<div class="bg"></div>
<header class="centering">
<a href="/" class="logo-stack">
<img class="logo" src="./assets/icons/basi-fill.png" alt="logo" />
<div class="button button--surtur ">
<svg aria-hidden="true" class="eye" width="70" height="70" viewBox="0 0 70 70"
xmlns="http://www.w3.org/2000/svg">
<path class="eye__outer"
d="M10.5 35.308c5.227-7.98 14.248-13.252 24.5-13.252s19.273 5.271 24.5 13.252c-5.227 7.98-14.248 13.253-24.5 13.253s-19.273-5.272-24.5-13.253z" />
<path class="eye__lashes-up" d="M35 8.802v8.836M49.537 11.383l-3.31 8.192M20.522 11.684l3.31 8.192" />
<path class="eye__lashes-down"
d="M35 61.818v-8.836 8.836zM49.537 59.237l-3.31-8.193 3.31 8.193zM20.522 58.936l3.31-8.193-3.31 8.193z" />
<circle class="eye__iris" cx="35" cy="35.31" r="5.221" />
<circle class="eye__inner" cx="35" cy="35.31" r="10.041" />.
</svg>
</div>
</a>
</header>
<main class="mx-auto mb-14 w-full max-w-screen-md flex-1 animate-main-content px-4 py-12 dark:text-white">
<div>
<h1 class="h1 mb-6">
<div class="accent-with-icon"><span class="" aria-label="toggle blurring">
<span class="text-style-two ">
Services ~</span>
</span>
<img title="visibility toggle" class="accent-icon" title="accent-icon" src="./assets/icons/svgexport-18.svg"
alt="magic wang wusssh">
</div>
</h1>
<p class="paragraph mb-8">Hi, I'm Cristian, a freelance front-end developer with years of experience. I love
building
and improving digital projects. Whether you're starting a new project or need to enhance an existing one, I'm
here
to help.</p>
<h2 class="h2 mb-4">My tech stack</h2>
<ul class="paragraph flex flex-wrap gap-x-6">
<li>React</li>
<!-- <li>React Native</li> -->
<li>Next.js</li>
<li>Typescript</li>
<li>GraphQL</li>
<li>Node.js</li>
<li>Tailwind CSS</li>
<li>And more...</li>
</ul>
<h2 class="h2 mb-4 mt-12">What I can do for you</h2>
<div class="flex flex-col gap-8">
<div class="relative overflow-hidden">
<div class="pointer-events-none absolute -inset-px opacity-0 transition duration-500"
style="opacity: 0; background: radial-gradient(600px at 80px 18px, rgba(0, 0, 0, 0.05), transparent 40%);">
</div>
<div class="relative rounded-md border border-neutral-200 bg-neutral-300/5 p-6 dark:border-neutral-800">
<div class="mb-3 flex items-center">
<div class="rounded-md border border-neutral-200 p-1 dark:border-neutral-900 dark:bg-neutral-900"><svg
width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2 4.25C2 4.11193 2.11193 4 2.25 4H12.75C12.8881 4 13 4.11193 13 4.25V11.5H2V4.25ZM2.25 3C1.55964 3 1 3.55964 1 4.25V12H0V12.5C0 12.7761 0.223858 13 0.5 13H14.5C14.7761 13 15 12.7761 15 12.5V12H14V4.25C14 3.55964 13.4404 3 12.75 3H2.25Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg></div>
<h2 class="h2 ml-2 mr-3">Website Development</h2>
</div>
<p class="paragraph mb-4 max-w-xl">Crafting high-quality, responsive websites tailored to your business
needs.
Leveraging modern technologies like React and Next.js, I build sites that are fast, SEO-friendly, and
provide an exceptional user experience.</p>
<!-- <button
class="inline-flex items-center rounded-md border border-neutral-300 bg-transparent px-4 py-2 text-base
font-medium transition hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500">
<address>
<a class="accent-two" href="mailto:rcmtcristian@gmail.com" aria-label="Email: rcmtcristian@gmail.com">
Discuss
your project</a>
</address>
</button> -->
</div>
</div>
<div class="relative overflow-hidden">
<div class="pointer-events-none absolute -inset-px opacity-0 transition duration-500"
style="opacity: 0; background: radial-gradient(600px at 42px 7px, rgba(0, 0, 0, 0.05), transparent 40%);">
</div>
<div class="relative rounded-md border border-neutral-200 bg-neutral-300/5 p-6 dark:border-neutral-800">
<div class="mb-3 flex items-center">
<div class="rounded-md border border-neutral-200 p-1 dark:border-neutral-900 dark:bg-neutral-900"><svg
width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1 3.25C1 3.11193 1.11193 3 1.25 3H13.75C13.8881 3 14 3.11193 14 3.25V10.75C14 10.8881 13.8881 11 13.75 11H1.25C1.11193 11 1 10.8881 1 10.75V3.25ZM1.25 2C0.559643 2 0 2.55964 0 3.25V10.75C0 11.4404 0.559644 12 1.25 12H5.07341L4.82991 13.2986C4.76645 13.6371 5.02612 13.95 5.37049 13.95H9.62951C9.97389 13.95 10.2336 13.6371 10.1701 13.2986L9.92659 12H13.75C14.4404 12 15 11.4404 15 10.75V3.25C15 2.55964 14.4404 2 13.75 2H1.25ZM9.01091 12H5.98909L5.79222 13.05H9.20778L9.01091 12Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg></div>
<h2 class="h2 ml-2 mr-3">Web Application Development</h2>
</div>
<p class="paragraph mb-4 max-w-xl">Building robust and scalable web applications using the latest front-end
technologies. With a strong focus on performance and usability, I use React, TypeScript, and other modern
tools to create applications that meet your specific requirements and deliver value to your users.</p>
<!-- <button
class="inline-flex items-center rounded-md border border-neutral-300 bg-transparent px-4 py-2 text-base font-medium transition hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500">
<address>
<a class="accent-two" href="mailto:rcmtcristian@gmail.com" aria-label="Email: rcmtcristian@gmail.com">
Discuss
your project</a>
</address>
</button> -->
</div>
</div>
<!-- <div class="relative overflow-hidden">
<div class="pointer-events-none absolute -inset-px opacity-0 transition duration-500"
style="opacity:0;background:radial-gradient(600px circle at 0px 0px, rgba(0,0,0,.05), transparent 40%)">
</div>
<div class="relative rounded-md border border-neutral-200 bg-neutral-300/5 p-6 dark:border-neutral-800">
<div class="mb-3 flex items-center">
<div class="rounded-md border border-neutral-200 p-1 dark:border-neutral-900 dark:bg-neutral-900"><svg
width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 2.5C4 2.22386 4.22386 2 4.5 2H10.5C10.7761 2 11 2.22386 11 2.5V12.5C11 12.7761 10.7761 13 10.5 13H4.5C4.22386 13 4 12.7761 4 12.5V2.5ZM4.5 1C3.67157 1 3 1.67157 3 2.5V12.5C3 13.3284 3.67157 14 4.5 14H10.5C11.3284 14 12 13.3284 12 12.5V2.5C12 1.67157 11.3284 1 10.5 1H4.5ZM6 11.65C5.8067 11.65 5.65 11.8067 5.65 12C5.65 12.1933 5.8067 12.35 6 12.35H9C9.1933 12.35 9.35 12.1933 9.35 12C9.35 11.8067 9.1933 11.65 9 11.65H6Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg></div>
<h2 class="h2 ml-2 mr-3">Mobile Application Development</h2>
</div>
<p class="paragraph mb-4 max-w-xl">Creating engaging mobile applications using React Native or ionic.
Whether
you need a standalone app or want to extend your web application to mobile, I can deliver a solution that
provides a seamless user experience across devices.</p><button
class="inline-flex items-center rounded-md border border-neutral-300 bg-transparent px-4 py-2 text-base font-medium transition hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500">Discuss
your project</button>
</div>
</div> -->
<div class="relative overflow-hidden">
<div class="pointer-events-none absolute -inset-px opacity-0 transition duration-500"
style="opacity:0;background:radial-gradient(600px circle at 0px 0px, rgba(0,0,0,.05), transparent 40%)">
</div>
<div class="relative rounded-md border border-neutral-200 bg-neutral-300/5 p-6 dark:border-neutral-800">
<div class="mb-3 flex items-center">
<div class="rounded-md border border-neutral-200 p-1 dark:border-neutral-900 dark:bg-neutral-900"><svg
width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3.87935 1H3.9H11.1H11.1207C11.5231 0.999994 11.8553 0.999989 12.1259 1.0221C12.407 1.04506 12.6653 1.09434 12.908 1.21799C13.2843 1.40973 13.5903 1.7157 13.782 2.09202C13.9057 2.33469 13.9549 2.59304 13.9779 2.87409C14 3.14468 14 3.47686 14 3.87934V3.9V11.1V11.1207C14 11.5231 14 11.8553 13.9779 12.1259C13.9549 12.407 13.9057 12.6653 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.6653 13.9057 12.407 13.9549 12.1259 13.9779C11.8553 14 11.5231 14 11.1207 14H11.1H3.9H3.87934C3.47686 14 3.14468 14 2.87409 13.9779C2.59304 13.9549 2.33469 13.9057 2.09202 13.782C1.7157 13.5903 1.40973 13.2843 1.21799 12.908C1.09434 12.6653 1.04506 12.407 1.0221 12.1259C0.999989 11.8553 0.999994 11.5231 1 11.1207V11.1207V11.1V3.9V3.87935V3.87934C0.999994 3.47686 0.999989 3.14468 1.0221 2.87409C1.04506 2.59304 1.09434 2.33469 1.21799 2.09202C1.40973 1.7157 1.7157 1.40973 2.09202 1.21799C2.33469 1.09434 2.59304 1.04506 2.87409 1.0221C3.14469 0.999989 3.47687 0.999994 3.87935 1ZM2.95552 2.01878C2.73631 2.03669 2.62421 2.06915 2.54601 2.10899C2.35785 2.20487 2.20487 2.35785 2.10899 2.54601C2.06915 2.62421 2.03669 2.73631 2.01878 2.95552C2.00039 3.18056 2 3.47171 2 3.9V7H7V2H3.9C3.47171 2 3.18056 2.00039 2.95552 2.01878ZM7 8H2V11.1C2 11.5283 2.00039 11.8194 2.01878 12.0445C2.03669 12.2637 2.06915 12.3758 2.10899 12.454C2.20487 12.6422 2.35785 12.7951 2.54601 12.891C2.62421 12.9309 2.73631 12.9633 2.95552 12.9812C3.18056 12.9996 3.47171 13 3.9 13H7V8ZM8 8H13V11.1C13 11.5283 12.9996 11.8194 12.9812 12.0445C12.9633 12.2637 12.9309 12.3758 12.891 12.454C12.7951 12.6422 12.6422 12.7951 12.454 12.891C12.3758 12.9309 12.2637 12.9633 12.0445 12.9812C11.8194 12.9996 11.5283 13 11.1 13H8V8ZM13 7H8V2H11.1C11.5283 2 11.8194 2.00039 12.0445 2.01878C12.2637 2.03669 12.3758 2.06915 12.454 2.10899C12.6422 2.20487 12.7951 2.35785 12.891 2.54601C12.9309 2.62421 12.9633 2.73631 12.9812 2.95552C12.9996 3.18056 13 3.47171 13 3.9V7Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg></div>
<h2 class="h2 ml-2 mr-3">Design System Creation</h2>
</div>
<p class="paragraph mb-4 max-w-xl">Developing comprehensive design systems that ensure consistency across
your
digital products. This includes defining reusable components, styles, and UX patterns, making it easier to
maintain and evolve your applications over time.</p>
<!-- <button
class="inline-flex items-center rounded-md border border-neutral-300 bg-transparent px-4 py-2 text-base font-medium transition hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500">
<address>
<a class="accent-two" href="mailto:rcmtcristian@gmail.com" aria-label="Email: rcmtcristian@gmail.com">
Discuss
your project</a>
</address>
</button> -->
</div>
</div>
</div>
<div class="my-20">
<h2 class="h2 mb-4">What I value</h2>
<div class="grid grid-cols-1 gap-x-20 gap-y-8 md:grid-cols-2">
<div>
<div class="mb-1 flex items-center"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg><span class="pl-2">Asynchronous Work</span></div>
<p class="text-sm text-neutral-700 dark:text-neutral-300">I believe in the power of focused, uninterrupted
work. I prefer to communicate asynchronously to maintain productivity and efficiency.</p>
</div>
<div>
<div class="mb-1 flex items-center"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg><span class="pl-2">Minimal Meetings</span></div>
<p class="text-sm text-neutral-700 dark:text-neutral-300">I value time and efficiency, so I aim to keep
meetings to a minimum. When they are necessary, I ensure they are focused and productive.</p>
</div>
<div>
<div class="mb-1 flex items-center"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg><span class="pl-2">Clear and Honest Communication</span></div>
<p class="text-sm text-neutral-700 dark:text-neutral-300">I believe in transparency and open dialogue. I'll
always keep you informed about project progress and any challenges that arise.</p>
</div>
<div>
<div class="mb-1 flex items-center"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg><span class="pl-2">High-Quality Work</span></div>
<p class="text-sm text-neutral-700 dark:text-neutral-300">I prioritize on delivering work of the highest
quality. I believe that thoughtful, well-executed projects are key to achieving the best results.</p>
</div>
<div>
<div class="mb-1 flex items-center"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg><span class="pl-2">Fast Delivery</span></div>
<p class="text-sm text-neutral-700 dark:text-neutral-300">I understand the importance of timelines and
strive
to deliver projects promptly without compromising on quality</p>
</div>
<div>
<div class="mb-1 flex items-center"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg><span class="pl-2">Sustainability</span></div>
<p class="text-sm text-neutral-700 dark:text-neutral-300">I aim to write efficient and maintainable code to
ensure the long-term viability of the projects I work on.</p>
</div>
</div>
</div>
<section class="bundle-container">
<div class="bundle rounded-md border border-neutral-200 bg-neutral-300/5 p-6 dark:border-neutral-800">
<div class="mb-3 flex items-center">
<div class="rounded-md border border-neutral-200 p-1 dark:border-neutral-900 dark:bg-neutral-900"><svg
xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<title>flight land fill</title>
<g fill="#ffffff" class="nc-icon-wrapper">
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M10.254 10.47l-.37-8.382 1.933.518 2.81 9.035 5.261 1.41a1.5 1.5 0 1 1-.776 2.898L4.14 11.937l.776-2.898.242.065.914 3.35-2.627-.703a1 1 0 0 1-.74-.983l.09-5.403 1.449.388.914 3.351 5.096 1.366zM4 19h16v2H4v-2z">
</path>
</g>
</svg></div>
</div>
<div class="badge">
<div class="badge-outline" <p class="">Figma Project</p>
</div>
</div>
<section class="price-container">
<div class="price-range">
<div class="text-style-one"> Landing Page</div>
<!-- <div class="text-neutral-700">$2,999</div> -->
</div>
<button class="badge-bundle ">
<div class="badge-outline-bundle box" <p class="">
<address>
<a class="accent-two" href="mailto:rcmtcristian@gmail.com?subject=landing page"
aria-label="Email: rcmtcristian@gmail.com">
Choose Bundle</a>
</address>
</p>
</div>
</button>
</section>
<p class="paragraph mb-4 max-w-xl">Capture attention and drive conversions effectively. Meticulously crafted
design to impact your audience.</p>
<ul class="development-options">
<li>
+ Single page
</li>
<li>
+ Design Only
</li>
<li>
+ Multiple iterations
</li>
<li>
+ Slack management
</li>
<li>
+ Unlimited stock photos
</li>
</ul>
</div>
<div class="bundle rounded-md border border-neutral-200 bg-neutral-300/5 p-6 dark:border-neutral-800">
<div class="mb-3 flex items-center">
<div class="rounded-md border border-neutral-200 p-1 dark:border-neutral-900 dark:bg-neutral-900"><svg
xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<title>stack line</title>
<g fill="#ffffff" class="nc-icon-wrapper">
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z">
</path>
</g>
</svg>
</svg></div>
<!-- <h2 class="h2 ml-2 mr-3">Design System Creation</h2> -->
</div>
<div class="badge">
<div class="badge-outline" <p class="">FullStack project</p>
</div>
</div>
<section class="price-container">
<div class="price-range">
<div class="text-style-one"> Fullstack Website</div>
<!-- <div class="text-neutral-700">$8,999</div> -->
</div>
<button class="badge-bundle ">
<div class="badge-outline-bundle box" <p class="">
<address>
<a class="accent-two" href="mailto:rcmtcristian@gmail.com?subject=Fullstack project"
aria-label="Email: rcmtcristian@gmail.com">
Choose Bundle</a>
</address>
</p>
</div>
</button>
</section>
<p class="paragraph mb-4 max-w-xl">Full scale business website with multiple pages, seamless CMS integration,
SEO optimization and outstanding performance.</p>
<ul class="development-options">
<li>
+ Multiple pages
</li>
<li>
+ Design & build
</li>
<li>
+ Components library
</li>
<li>
+ Multiple iterations
</li>
<li>
+ Slack management
</li>
<li>
+ Unlimited stock photos
</li>
</ul>
</div>
<div class="bundle rounded-md border border-neutral-200 bg-neutral-300/5 p-6 dark:border-neutral-800">
<div class="mb-3 flex items-center">
<div class="rounded-md border border-neutral-200 p-1 dark:border-neutral-900 dark:bg-neutral-900"><svg
xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>svgexport 15</title>
<g fill="none" class="nc-icon-wrapper">
<path
d="M8.664 4.336a6.32 6.32 0 0 0 0 12.642c.72 0 1.338-.103 1.911-.308.542-.194.813-.29.917-.315.96-.226 1.357.432 2.184.57a.632.632 0 0 0 .734-.676c-.03-.359-.277-.698-.376-1.042-.206-.717.073-1.26.368-1.897m.506-10.319l-.55 1.431c-.132.343-.198.514-.3.658-.091.127-.203.239-.33.33-.144.102-.315.168-.658.3l-1.43.55m3.268-3.269l.55 1.431c.132.343.198.514.3.658.091.127.203.239.33.33.144.102.315.168.658.3l1.43.55m-3.268-3.269V9.53m3.269-3.269l-1.431.55c-.343.132-.514.198-.658.3a1.4 1.4 0 0 0-.33.33c-.102.144-.168.315-.3.658l-.55 1.43m3.269-3.268H11.64m3.268 3.269l-.55-1.431c-.132-.343-.198-.514-.3-.658a1.402 1.402 0 0 0-.33-.33c-.144-.102-.315-.168-.658-.3l-1.43-.55m-2.82 7.821a3.27 3.27 0 0 1-3.166-2.451h6.331A3.27 3.27 0 0 1 8.82 14.08z"
stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" stroke="#ffffff" fill="none">
</path>
</g>
</svg></div>
<!-- <h2 class="h2 ml-2 mr-3">Custom</h2> -->
</div>
<div class="badge">
<div class="badge-outline" <p class="">Custom</p>
</div>
</div>
<section class="price-container">
<div class="price-range">
<div class="text-style-one"> Custom Inquiry</div>
<!-- <div class="text-neutral-700">$2,999</div> -->
</div>
<button class="badge-bundle ">
<div class="badge-outline-bundle box" <p class="">
<address>
<a class="accent-two" href="mailto:rcmtcristian@gmail.com?subject=custom project"
aria-label="Email: rcmtcristian@gmail.com">
Discuss
your project</a>
</address>
</p>
</div>
</button>
</section>
<p class="paragraph mb-4 max-w-xl">Seeking a different scope of work? We're offering a variety of other design
services.</p>
<ul class="development-options">
<li>
+ Web apps
</li>
<li>
+ Desktop apps
</li>
<li>
+ Mobile apps
</li>
</ul>
</div>
</section>
<section class="">
<article class="content-alignment">
<div class="stack">
<h3 class="">Connect</h3>
<div class="stack__item">
<p>I can also help you with:
<!-- --><strong class="text-style-one">landing pages</strong>,
<!-- --><strong class="text-style-one">e-commerce websites</strong>,
<!-- --><strong class="text-style-one">desktop applications</strong>,
<!-- --><strong class="text-style-one">performance optimization</strong>,
<!-- --><strong class="text-style-one">code reviews</strong>,
<!-- --><strong class="text-style-one">refactoring</strong>, and more. ✌️
<!-- -->
</p>
<ul class="">
<li class="divided">
<h4 class="text-style-two">Twitter</h4>
<address>
<a class="accent-two " href="https://twitter.com/rcmtcristian" aria-label="Twitter: @rcmtcristian">
@rcmtcristian</a>
</address>
</li>
<li class="divided">
<h4 class="text-style-two">Email</h4>
<address>
<a class="accent-two" href="mailto:rcmtcristian@gmail.com"
aria-label="Email: rcmtcristian@gmail.com">
rcmtcristian@gmail.com</a>
</address>
</li>
<li class="divided">
<h4 class="text-style-two">GitHub</h4>
<address>
<a class="accent-two" href="https://github.com/rcmtcristian" aria-label="GitHub: rcmtcristian">
rcmtcristian</a>
</address>
</li>
<li class="divided">
<h4 class="text-style-two">Resume</h4>
<address>
<a class="accent-two"
href="https://drive.google.com/file/d/1QHZXm3_G_jonbCgv75QAkBRXhP5d6QsN/view?usp=sharing"
aria-label="View Resume">Cristian's
Resume</a>
</address>
</li>
<li class="divided ">
<h4 class="text-style-two">Linkedin</h4>
<address>
<a class="accent-two" href="https://www.linkedin.com/in/cristian-richards/"
aria-label="Cristian's linkedin ">
Cristian-Richards</a>
</address>
</li>
<li class="divided blurred">
<h4 class="text-style-two">Cal</h4>
<address>
<a class="accent-two" href="https://cal.com/rcmtcristian" aria-label="Cristian's calendar">
rcmtcristian</a>
</address>
</li>
<li class="divided blurred">
<h4 class="text-style-two">Hashnode</h4>
<address>
<a class="accent-two" href="https://rcmtcristian.hashnode.dev/" aria-label="Cristian's Hashnode">
rcmtcristian</a>
</address>
</li>
</ul>
</div>
</div>
</article>
</section>
</div>
</main>
</body>
</html>