-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
152 lines (140 loc) · 6.14 KB
/
Copy pathindex.html
File metadata and controls
152 lines (140 loc) · 6.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="google-site-verification" content="SbMIBERpmxlsJKZoSoG7yLOk5JwacX0RuU_IPIsOpio" />
<title>Front-end web developer</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="d-flex align-items-center col-12">
<h2 class="header__title">Lucy Zidour</h2>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="row">
<div class="col-11 col-sm-10 offset-sm-1 col-md-10 col-lg-8">
<h1 class="hero__heading">
Front-end Web Developer
</h1>
</div>
<div class="col-12 col-sm-10 offset-sm-1">
<a class="hero__button" href="#contact">Contact me</a>
</div>
</div>
</div>
</section>
<section class="process">
<div class="container">
<ul class="process__list row">
<li class="process__item col-12 col-sm-10 col-md-4">
<h4 class="process__item-heading">UX / UI</h4>
<p>With a keen eye for good design and a fluid user journey, I enjoy working closely with designers and
product teams to produce beautiful platforms that make sense.</p>
</li>
<li class="process__item col-12 col-sm-10 col-md-4">
<h4 class="process__item-heading">Organised and semantic</h4>
<p>I structure my code cleanly and semantically, and use various flavours of CSS to style components and
pages in a modular, re-usable and maintainable way so that apps can grow smoothly.</p>
</li>
<li class="process__item col-12 col-sm-10 col-md-4">
<h4 class="process__item-heading">Logic & data visualisation</h4>
<p>I often build complex applications that handle large amounts of data. I also use D3.js to create slick,
interactive charts that make it easier for users to digest information.</p>
</li>
</ul>
</div>
</section>
<section class="work section">
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="section-heading">Previous work</h3>
</div>
<div class="col-12">
<ul class="work__list row">
<li class="work__item col-sm-6">
<a href="https://www.ipgdxtra.com/" target="_blank">
<img src="images/dxtra.png" alt="front page of IPG dxtra website" /> </a>
<p class="small">Agency group IPG DXTRA's rebrand</p>
</li>
<li class="work__item col-sm-6">
<a href="https://www.nutmeg.com/nuggets/" target="_blank">
<img src="images/nutmeg-nuggets.png" alt="Nutmeg Nuggets campaign" /> </a>
<p class="small">Financial platform Nutmeg's "Nuggets" campaign</p>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="about section">
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="section-heading">About me</h3>
</div>
<div class="col-xs-12 col-md-10 col-lg-8">
<p>
In my spare time, I’m a lead teacher and mentor for <a href="https://codeyourfuture.io/"
target="_blank">Code Your Future</a> - a volunteer-led charity coding bootcamp for refugees.
</p>
<p>When I’m not coding or teaching, you’ll probably find me dancing, climbing rocks, laughing,
reading books, travelling, or correcting people’s grammar. </p>
</div>
<div class="circular-img-wrapper col">
<div class="circular-img"></div>
</div>
</div>
</div>
</section>
<section class="contact section">
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="section-heading" id="contact">Get in touch</h3>
</div>
<div class="d-flex flex-column col-xs-12 col-lg-8">
<div class="contact-item">
<img src="./images/social-icons/email-envelope.png" alt="envelope icon">
<a href="">contact<span class="blue">[at]</span>lucyzidour.com</a>
</div>
<div class="contact-item">
<img src="./images/social-icons/linkedin-icon.png" alt="linkedin icon">
<a href="https://www.linkedin.com/in/lucyzidour/" target="_blank">linkedin.com/lucyzidour</a>
</div>
</div>
</div>
</section>
</main>
<footer class="container-fluid">
<div class="footer">
<p class="small copyright">© Lucy Zidour</p><span>/</span>
<p class="small">Photo by <a
href="https://unsplash.com/@steve_j?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
target="_blank">
Steve Johnson</a> on <a href="https://unsplash.com/" target="_blank">Unsplash</a>
</p>
</div>
</footer>
</div>
<script type="text/javascript">
const now = new Date();
const year = now.getFullYear();
document.querySelector('.copyright').innerHTML = `© ${year} Lucy Zidour`;
</script>
</body>
</html>