-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
294 lines (293 loc) · 16.8 KB
/
index.html
File metadata and controls
294 lines (293 loc) · 16.8 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JP2VMXB6BJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-JP2VMXB6BJ');
</script>
<title>LH Web Development Portfolio & CV</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="title" content="Website Development Portfolio CV - LizH">
<meta name="description" content="Responsive mobile-first website portfolio CV. Designed and developed from scratch by LizH. Showcasing
programming skills in HTML5, CSS3, BootStrap, JavaScript and more.">
<meta name="keywords" content="Responsive, HTML, HTML5, CSS, CSS3, Bootstrap, Web, Site, Website, mobile-first, Web Design,
Web Development, Portfolio, Web Creation, CV, Curriculum vitae, online cv, homepage, websites, coding, web development portfolio,
best websites, best online portfolio, creative websites, front-end web developer, JavaScript, creative skills, programming, coding
applications, learning to code, website inspirations">
<meta name="author" content="LizH">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
<script src="main.js" defer></script>
<script src="topScrollBtn.js" defer></script>
<script src="animation.js" defer></script>
</head>
<body>
<header class="header" id="index">
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsiveNavbar">
<ul class="nav navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="#index">HOME</a></li>
<li class="nav-item"><a class="nav-link" href="#about">ABOUT ME & MY SKILLS</a></li>
<li class="nav-item"><a class="nav-link" href="#experiences">EXPERIENCES</a></li>
<li class="nav-item"><a class="nav-link" href="#why">MY "WHY?"</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">PORTFOLIO</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<section class="title text-center">
<h1>< Lizette Henry ></h1>
</br>
<h2>Website Developer, Designer and Coordinator</h2>
</section>
</header>
<button aria-label="Button to scroll to the top of the page" id="scrollToTopBtn"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
<main>
<section class="intro" id="about">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="text-center">ABOUT ME</h3>
<p class="para2 textAnimateLeft">I am a determined and hardworking Computing graduate, with a creative flair and a strong passion for
immersing myself in the digital world. Currently working as a Web Coordinator; while creating personal Web
Development projects, in my free time. I have many years of experience in these fields.<br><br> I thoroughly enjoy
developing responsive and unique websites from scratch, and learning new coding languages and tools; as the
creative possibilities are endless.</p>
<br/>
</div>
<div class="col-md-6">
<h3 class="text-center">MY TECH SKILLS INCLUDE...</h3>
<img class="imgFormat" src="images/skills/html.png" width="17%" alt="HTML logo">
<img class="imgFormat" src="images/skills/css.png" width="17%" alt="CSS logo">
<img class="imgFormat" src="images/skills/js.png" width="17%" alt="JavaScript logo">
<img class="imgFormat" src="images/skills/git.png" width="17%" alt="Git logo">
<img class="imgFormat" src="images/skills/github.png" width="17%" alt="GitHub logo">
<img class="imgFormat" src="images/skills/sitecore.png" width="17%" alt="Sitecore CMS logo">
<img class="imgFormat" src="images/skills/SEO.jpeg" width="17%" alt="SEO logo">
<img class="imgFormat" src="images/skills/ga.png" width="17%" alt="Google Analytics logo">
<img class="imgFormat" src="images/skills/react.png" width="17%" alt="React logo">
<img class="imgFormat" src="images/skills/mysql.png" width="17%" alt="MySQL logo">
<img class="imgFormat" src="images/skills/bootstrap.png" width="17%" alt="Bootstrap logo">
<img class="imgFormat" src="images/skills/drupal.png" width="17%" alt="Drupal CMS logo">
</div>
</div>
</div>
</section>
<hr>
<section class="experiences" id="experiences">
<h3 class="text-center">PROFESSIONAL EXPERIENCES</h3>
<p class="para2 textAnimateLeft"><strong>Click below</strong> to find out about <em>some</em> of my relevant work experiences.</p>
<div class="container aboutsec">
<div class="row">
<div class="col-md-6">
<button aria-label="Toggle button to learn about my work experience" class="experiencesBtn rounded text-center" id="experience1">Web Coordinator/ Editor</button>
<div class="experienceDetails rounded" id="details1">
<p class="bespoke1"> I have experience of: creating, proofreading, editing and testing web pages, in a
professional business environment. This also includes being part of a large website rebranding
and reskin project.
<br/><br/>Furthermore, my role has enabled me to work on Google Analytics audits, helping to
accurately analyse web page interactions; and improve user experience.</p>
<p class="bespoke1"><strong>Some skills acquired:</strong> HTML5, CSS3, Sitecore, SEO, Google Analytics,
Adobe Photoshop, Hootsuite, Social Media, Mouseflow, Google Optimize, Google Tag Manager,
Google Trends and Quality Assurance, using Siteimprove.</p>
</div>
</div>
<div class="col-md-6">
<button aria-label="Toggle button to learn about my work experience" class="experiencesBtn rounded text-center" id="experience2">Website Designer and Developer</button>
<div class="experienceDetails rounded" id="details2">
<p class="bespoke1">I plan, design, create and then test my own bespoke and responsive websites, using
a range of coding languages and tools. <br><br>
My facination for creating websites and applications increased during my Computing degree;
where I had opportunities to experience Front End and Back End development, in real-time.
<br><br>
I have worked with various Content Management Systems, such as: Sitecore and Drupal 8; but
I am also able to code from scratch, which provides the freedom to be more creative and unique.
I continue to develop my repertoire; learn new technologies, languages and tools and implement my
skills in various projects.</p>
<p class="bespoke1"><strong>Some skills acquired:</strong> HTML5, CSS3, Bootstrap,
JavaScript, Git, GitHub.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button aria-label="Toggle button to learn about my work experience" class="experiencesBtn rounded text-center" id="experience3">Digital Producer</button>
<div class="experienceDetails rounded" id="details3">
<p class="bespoke1">Working in a professional charity environment, as a Technology Innovation Digital
Producer, enabled me to take ownership of webpages. I also created website prototypes, and delved into UX projects; giving primary
focus to users' needs.</p>
<p class="bespoke1"><strong>Some skills acquired:</strong> HTML5, Drupal 8, Google Analytics, SEO,
Jira, UX, Axure RP, Adobe Photoshop, Hotjar, Optimizely, UsabilityHub, Trello, Confluence.</p>
</div>
</div>
<div class="col-md-6">
<button aria-label="Toggle button to learn about my work experience" class="experiencesBtn rounded text-center" id="experience4">Coding Tutor</button>
<div class="experienceDetails rounded" id="details4">
<p class="bespoke1">I have experience of teaching coding in a school environment, public buildings and
within students' homes. Age range from: 3 to 8 years old.</p>
<p class="bespoke1"><strong>Some skills acquired:</strong> Tutoring, Scratch Jr, liaising with other
teachers, students, parents and carers.</p>
</div>
</div>
</div>
</div>
</section><br>
<hr>
<section class="why" id="why">
<h3 class="text-center">MY "WHY?"</h3>
<div class="container">
<div class="row">
<div class="col-md-6 fullWhy">
<p class="para2noanimation"><strong>Why I do what I do...</strong><br><br> I'm passionate about learning coding languages and
frameworks; and then using those skills to develop new, meaningful and innovative projects. <br><br>
I enjoy the creative freedom, and am able to take ownership of projects. Additionally, there is a wealth of
opportunity for collaboration, and knowledge-sharing, between like-minded individuals. <br><br>
There is always something new to learn, and I thrive when I'm solving the many challenges that occur throughout the development life cycle. <br><br>
</p>
<br/>
</div>
<div class="col-md-6 fullWhy">
<figure>
<img src="./images/portraits/me.jpg" class="imgCircle" alt="headshot of person"/>
</figure>
<br/>
<figcaption>
<p aria-label="A quote from myself - the developer of this website" class="bigPara">"The creative possibilities are endless, when building an application from scratch." <span class="para3"> - Lizette Henry</span></p>
</figcaption>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<h3 class="text-center">WEBSITE PORTFOLIO</h3>
<p class="para2noanimation">Here's a few I prepared earlier - Displaying some of my website creations.</p>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="7"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="8"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="9"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="10"></li>
</ol>
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img class="d-block w-100" src="images/websites4/homepage.png" alt="Slide one of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites4/about.png" alt="Slide two of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites4/us.png" alt="Slide three of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites4/why.png" alt="Slide four of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites4/contact.png" alt="Slide five of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites4/contact2.png" alt="Slide six of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites/Homepage.png" alt=" Slide seven of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites/Homepage 1 2.png" alt="Slide eight of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites/Homepage 2.png" alt="Slide nine of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites/Homepage 3.png" alt="Slide ten of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites/Homepage 3 4.png" alt="Slide eleven of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites5/homepage.png" alt="Slide twelve of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites5/homepage2.png" alt="Slide thirteen of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites5/about.png" alt="Slide fourteen of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites5/contact.png" alt="Slide fifthteen of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites6/homepage.png" alt="Slide sixteen of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites6/homepage2.png" alt="Slide seventeen of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites6/clothes.png" alt="Slide eighteen of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites6/description.png" alt="Slide nineteen of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites6/other.png" alt="Slide twenty of website portfolio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/websites6/ratings.png" alt="Slide twenty one of website portfolio">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</br>
</section>
<section class="contact" id="contact">
<h3 class="text-center">CONTACT ME</h3>
<p class="para2">
I am actively looking for opportunities to collaborate with like-minded people, and further develop my digital skills.
You can find me on LinkedIn below! <br><br> To find out more details about my skills and experiences, my CV can be
sent on request.
</p>
</section>
</main>
<footer class="footer">
<section class="social">
<a href="https://www.linkedin.com/in/lizette-h-b580ba120/" target="_blank"><img src="images/socials/linkedin.png" class="rounded" alt="LinkedIn logo in contact me section" height="30px" width="30px"></a>
</section>
<p class="copyright"> © Website created by Lizette Henry</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
window._mfq = window._mfq || [];
(function() {
var mf = document.createElement("script");
mf.type = "text/javascript"; mf.defer = true;
mf.src = "//cdn.mouseflow.com/projects/432659cd-fd7d-4abd-932c-096677d4ce24.js";
document.getElementsByTagName("head")[0].appendChild(mf);
})();
</script>
</body>
</html>