-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
267 lines (213 loc) · 14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Leo M.</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">
</head>
<body>
<main>
<aside class="sidebar " data-sidebar>
<div class="sidebar-info">
<figure class="avatar-box">
<img src="assets/images/memoji.png" alt="avatar" width="80">
</figure>
<div class="info-content">
<h1 class="name" title="Leo M">Leo M.</h1>
<p class="title">Full Stack Developer</p>
</div>
<button class="info-more-btn" data-sidebar-btn>
<span>Show Contacts</span>
<ion-icon name="chevron-down"></ion-icon>
</button>
</div>
<div class="sidebar-info-more">
<div class="separator"></div>
<ul class="contacts-list">
<li class="contact-item">
<div class="icon-box">
<ion-icon name="mail-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Email</p>
<a href="mailto:[email protected]" class="contact-link">[email protected]</a>
</div>
</li>
<li class="contact-item">
<div class="icon-box">
<ion-icon name="location-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Location</p>
<address>Detroit, Michigan, USA</address>
</div>
</li>
</ul>
<div class="separator"></div>
<ul class="social-list">
<li class="social-item"><a href="https://github.com/theNomadicEnby" class="social-link"><ion-icon name="logo-github"></ion-icon></a></li>
<li class="social-item"><a href="https://www.linkedin.com/in/lemorris11/" class="social-link"><ion-icon name="logo-linkedin"></ion-icon></a></li>
</ul>
</div>
</aside>
<div class="main-content">
<nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item"><a href="index.html"><button class="navbar-link active" data-nav-link>About</button></a></li>
<li class="navbar-item"><a href="resume.html"><button class="navbar-link" data-nav-link>Resume</button></a></li>
<li class="navbar-item"><a href="portfolio.html"><button class="navbar-link" data-nav-link>Portfolio</button></a></li>
<li class="navbar-item"><a href="blog.html"><button class="navbar-link" data-nav-link>Blog</button></a></li>
<li class="navbar-item"><a href="contact.html"><button class="navbar-link" data-nav-link>Contact</button></a></li>
</ul>
</nav>
<article class="about active" data-page="about">
<header>
<h2 class="h2 article-title">About me</h2>
</header>
<section class="about-text">
<p>My name is Leo and I am an up and coming, self-taught Full Stack Developer available for hire. My dream is to connect with a small to mid-size company seeking to find a teachable, passionate, UX and solutions centered developer to join their team in a contract or part-time remote role. I am also searching for local opportunities to Washington and Michigan with remote or hybrid positions.</p>
<p>My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way.</p>
</section>
<section class="service">
<h3 class="h3 service-title">What I'm doing</h3>
<ul class="service-list">
<li class="service-item">
<div class="service-icon-box">
<img src="https://i.postimg.cc/4389jZkP/icon-design.png" alt="icon" width="40">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Web Design</h4>
<p class="service-item-text">The most modern and high-quality design made at a professional level.</p>
</div>
</li>
<li class="service-item">
<div class="service-icon-box">
<img src="https://i.postimg.cc/ZqgqrqzG/icon-dev.png" alt="icon" width="40">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Web development</h4>
<p class="service-item-text">High-quality development of sites at the professional level.</p>
</div>
</li>
<li class="service-item">
<div class="service-icon-box">
<img src="https://i.postimg.cc/xjLdzYxZ/icon-app.png" alt="icon" width="40">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Mobile apps</h4>
<p class="service-item-text">Professional development of applications for iOS and Android.</p>
</div>
</li>
<!--Need to make following PNG same color as preceding ones-->
<li class="service-item">
<div class="service-icon-box">
<img src="https://img.icons8.com/?&id=123374&format=png" alt="icon" width="40">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Data Engineering</h4>
<p class="service-item-text">Assisting in building and maintaining data pipelines, ensuring data quality and availibility for analysis.</p>
</div>
</li>
</ul>
</section>
<section class="testimonials">
<h3 class="h3 testimonials-title">Testimonials</h3>
<ul class="testimonials-list has-scrollbar">
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="testimonials-avatar-box">
<img src="https://i.postimg.cc/zGDHfn3G/avatar-1.png" alt="avatar" data-testimonials-avatar width="60">
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Daniel Lewis</h4>
<div class="testimonials-text" data-testimonials-text>
<p>Richard was hired to create a corporate identity. It's modern, clean and with a beautiful design that got a lot of praises from colleagues and visitors. We were very pleased with the work done. He has a lot of experience and is very concerned about the needs of client.</p>
</div>
</div>
</li>
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="testimonials-avatar-box">
<img src="https://i.postimg.cc/DwY0yHtx/avatar-2.png" alt="avatar" data-testimonials-avatar width="60">
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Jessica Miller</h4>
<div class="testimonials-text" data-testimonials-text>
<p>Working with Richard has been an absolute pleasure. I was impressed with his attention to detail, his web design skills and his professional approach to our timelines and processes.</p>
</div>
</div>
</li>
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="testimonials-avatar-box">
<img src="https://i.postimg.cc/fRFWhX9F/avatar-3.png" alt="avatar" data-testimonials-avatar width="60">
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Emily Evans</h4>
<div class="testimonials-text" data-testimonials-text>
<p>I couldn't be happier with the website that Richard created for us. His attention to detail and creativity is unmatched. Our clients frequently compliment the design, and it has significantly improved our brand image.</p>
</div>
</div>
</li>
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="testimonials-avatar-box">
<img src="https://i.postimg.cc/zXv1Xv81/avatar-4.png" alt="avatar" data-testimonials-avatar width="60">
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Henry Williams</h4>
<div class="testimonials-text" data-testimonials-text>
<p>I was overwhelmed with the thought of redesigning my online store, but Richard made the process seamless. The site is not only visually appealing but also optimized for conversions. I've seen a 50% increase in traffic since the launch!</p>
</div>
</div>
</li>
</ul>
</section>
<div class="modal-container " data-modal-container>
<div class="overlay " data-overlay></div>
<section class="testimonials-modal">
<button class="modal-close-btn" data-modal-close-btn><ion-icon name="close-outline"></ion-icon></button>
<div class="modal-img-wrapper">
<figure class="modal-avatar-box">
<img src="https://i.postimg.cc/zGDHfn3G/avatar-1.png" alt="Daniel Lewis" width="80" data-modal-img>
</figure>
<img src="https://i.postimg.cc/mZ00RwX7/icon-quote.png" alt="quote icon">
</div>
<div class="modal-content">
<h4 class="h3 modal-title" data-modal-title>Daniel Lewis</h4>
<time datetime="2023-06-14">14 June, 2023</time>
<div class="modal-text" data-modal-text>
<p>Richard was hired to create a corporate identity. It's modern, clean and with a beautiful design that got a lot of praises from colleagues and visitors. We were very pleased with the work done. He has a lot of experience and is very concerned about the needs of client.</p>
</div>
</div>
</section>
</div>
<section class="clients">
<h3 class="h3 clients-title">Clients</h3>
<ul class="clients-list has-scrollbar">
<li class="clients-item">
<a href="#"><img src="https://i.postimg.cc/YqfKyG66/logo-1-color.png" alt="logo"></a>
</li>
<li class="clients-item">
<a href="#"><img src="https://i.postimg.cc/fWm6JtgG/logo-2-color.png" alt="logo"></a>
</li>
<li class="clients-item">
<a href="#"><img src="https://i.postimg.cc/Bb07xpwd/logo-3-color.png" alt="logo"></a>
</li>
<li class="clients-item">
<a href="#"><img src="https://i.postimg.cc/hv1yMmkh/logo-4-color.png" alt="logo"></a>
</li>
<li class="clients-item">
<a href="#"><img src="https://i.postimg.cc/ry1P86Dc/logo-5-color.png" alt="logo"></a>
</li>
<li class="clients-item">
<a href="#"><img src="https://i.postimg.cc/SsWDN8NV/logo-6-color.png" alt="logo"></a>
</li>
</ul>
</section>
</article>
</div>
</main>
<script src="main.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>