-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
256 lines (226 loc) · 19.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./output.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel="icon" type="image/x-icon" href="./assets/img/mirrorme.webp" >
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Voces&display=swap" rel="stylesheet">
</head>
<body class="font-[poppins]">
<!-- HEADER SECTION -->
<header id="home" class=" bg-[#5A5A5A] w-full">
<nav class="flex justify-between items-center w-[92%] mx-auto p-4 " style="position: sticky; top: 0;">
<div class="text-3xl font-extrabold">
<p class="text-[#10CA02]">Bonjour!</p>
</div>
<div>
<ul class="hidden md:flex md:flex-row items-center gap-[4vw] text-lg font-medium ">
<li class="hover:text-[#10CA02] ">
<a href="#">Home</a>
</li>
<li class="hover:text-[#10CA02] ">
<a href="#services">Services</a>
</li>
<li class="hover:text-[#10CA02] ">
<a href="#portfolio">Portfolio</a>
</li>
<li class="hover:text-[#10CA02] ">
<a href=""></a>
<a href="#contacts">Contacts </a>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN SECTION -->
<main>
<!-- HOME -->
<section class="grid gap-2 lg:grid-cols-2 lg:gap-8 h-[80%] md:h-screen bg-[#5A5A5A]">
<div class="flex flex-col text-center justify-center">
<h1 class="pt-2 font-extrabold">TONUI RADDAMES</h1>
<h2>Full Stack Web Developer</h2>
<p class="w-[80%] mx-auto pb-3">
I am a skilled web developer with expertise in both <br><span class="font-bold">Front-end </span> and <span class="font-bold">Back-end</span> technologies. I leverage my proficiency in coding to create seamless and responsive web applications that enhance user experience. With a strong focus on delivering high-quality features efficiently, I thrive on turning challenges into innovative solutions. My passion for technology drives me to stay updated with industry trends, ensuring that I consistently produce exceptional results.
</p>
<div class="flex flex-row gap-4 justify-center">
<div class="p-3 hover:bg-[#10CA02] rounded-lg border border-[#01A003] bg-[#01A003]">
<a href="#">DOWNLOAD CV</a>
</div>
<div class="p-3 hover:bg-[#10CA02] rounded-lg border border-[#01A003]">
<a class="" href="#contacts">CONTACT ME</a>
</div>
</div>
</div>
<div class="bg-[#5A5A5A] flex justify-self-center animate-bounce">
<img src="./assets/img/mirrorme.webp" class=" bg-[#C5C5C5] md:bg-[#5A5A5A] h-[90%] rounded-lg" text-centeralt="image of Raddames">
</div>
</section>
<!-- SERVICES -->
<section class="bg-[#747172] min-h-screen overflow-x-auto">
<div class="text-center">
<h1 id="services" class="md:pt-10">SERVICES</h1>
<h2>What I am great at</h2>
<p class="text-center w-[80%] md:w-[60%] mx-auto pb-3">
I have a well-rounded skill set that includes designing intuitive user interfaces, developing engaging front-end applications, conducting web research, and crafting effective marketing strategies. Below is a detailed overview of my services.
</p>
</div>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4 w-[90%] mx-auto overflow-x-auto">
<div class="bg-[#5A5A5A] shadow-lg hover:bg-[#10CA02] rounded-lg lg:w-[20vw] overflow-auto hover-line">
<div class="mx-3">
<svg class="mt-3" xmlns="http://www.w3.org/2000/svg" height="3em" viewBox="0 0 24 24">
<path fill="black" d="M20.235 11.284a2.3 2.3 0 0 0-3.01-.149l-1.781-5.391a2.484 2.484 0 0 0-2.1-1.7l-8.581-.93a1.5 1.5 0 0 0-1.648 1.651l.93 8.579a2.479 2.479 0 0 0 1.7 2.1l5.39 1.77a2.258 2.258 0 0 0-.51 1.43a2.257 2.257 0 0 0 2.25 2.25a2.263 2.263 0 0 0 1.591-.661l5.77-5.769a2.249 2.249 0 0 0 0-3.181Zm-14.18 3.21a1.5 1.5 0 0 1-1.02-1.26l-.9-8.39l4.01 4.01a1.188 1.188 0 0 0 .281 1.221a1.167 1.167 0 1 0 1.649-1.651a1.143 1.143 0 0 0-1.209-.269l-4.02-4.02l8.39.9a1.476 1.476 0 0 1 1.259 1.02l1.931 5.86l-4.51 4.51Zm11.709-2.51a1.25 1.25 0 0 1 2.13.891a1.237 1.237 0 0 1-.369.88l-5.771 5.77a1.277 1.277 0 0 1-1.769 0a1.253 1.253 0 0 1 0-1.76Z" />
</svg>
</div>
<div class="text-left m-3">
<h4>UI/UX Design</h4>
<p>I design intuitive, user-friendly interfaces, utilizing Figma and other design tools to deliver seamless user experiences across digital platforms.</p>
</div>
</div>
<div class="bg-[#5A5A5A] shadow-lg hover:bg-[#10CA02] rounded-lg lg:w-[20vw] overflow-auto hover-line">
<div class="mx-3">
<svg class="mt-3" xmlns="http://www.w3.org/2000/svg" height="3em" viewBox="0 0 24 24">
<path fill="black" d="m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6z" />
</svg>
</div>
<div class="text-left m-3">
<h4>Front End</h4>
<p>As a front-end developer, I build responsive and interactive web applications using HTML, CSS, JavaScript, React, and Tailwind CSS.</p>
</div>
</div>
<div class="bg-[#5A5A5A] shadow-lg hover:bg-[#10CA02] rounded-lg lg:w-[20vw] overflow-auto hover-line">
<div class="mx-3">
<svg class="mt-3" xmlns="http://www.w3.org/2000/svg" height="3em" viewBox="0 0 24 24">
<path fill="black" d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5q0-1.875-1.312-3.187T9.5 5Q7.625 5 6.313 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14" />
</svg>
</div>
<div class="text-left m-3">
<h4>Backend Development</h4>
<p> Using tools such as Python, Flask, SQL, and RESTful APIs, I ensure the back-end is efficient, secure, and scalable to support the front-end seamlessly.</p>
</div>
</div>
<div class="bg-[#5A5A5A] shadow-lg hover:bg-[#10CA02] rounded-lg lg:w-[20vw] overflow-auto hover-line">
<div class="text-left m-3">
<svg class="mt-3" xmlns="http://www.w3.org/2000/svg" height="3em" viewBox="0 0 2048 2048">
<path fill="black" d="M2048 384v640h-128V603l-768 768l-384-384l-675 674l-90-90l765-766l384 384l677-677h-421V384z" />
</svg>
</div>
<div class="text-left m-3 ">
<<h4>Web Research</h4>
<p>I conduct in-depth research to gather valuable insights, analyze trends, and stay updated with the latest developments in the tech industry. This research supports informed decision-making, content creation, and optimizing web development strategies.</p>
</div>
</div>
</div>
</section>
<!-- PORTFOLIO -->
<section class="bg-[#5A5A5A] h-screen overflow-x-scroll">
<div>
<h1 id="portfolio" class="text-center md:pt-10">PORTFOLIO</h1>
<h2>My Masterpiece Collection</h2>
</div>
<div class="grid md:grid-cols-5 hover:grid-span-5 gap-4 w-[90%] mx-auto">
<div class="col-span-1 mx-auto hover:col-span-2 hover:col-start-1 bg-[#10CA02] rounded-md overflow-hidden shadow-lg hover:shadow-[#006D05]">
<!-- Content for the third grid -->
<div class=" h-[50vh] overflow-auto ">
<img src="./assets/img/crypto.jpg " alt="crypto website" class="object-cover" >
</div>
<div class="m-3">
<span class="font-bold underline">Crypto</span>
<p>Cutting-edge Digital Currency Platform </p>
</div>
</div>
<div class="col-span-1 mx-auto hover:col-start-2 hover:col-span-2 bg-[#10CA02] rounded-md overflow-hidden shadow-lg hover:shadow-[#006D05]">
<!-- Content for the first grid -->
<div class="h-[50vh] overflow-auto">
<img src="./assets/img/services.jpg" alt="Service Website">
</div>
<div class="m-3 ">
<span class="font-bold underline">Services</span>
<p>Comprehensive Expertise Offerings </p>
</div>
</div>
<div class="col-span-1 mx-auto hover:col-start-3 hover:col-span-2 bg-[#10CA02] rounded-md overflow-hidden shadow-lg hover:shadow-[#006D05]">
<!-- Content for the second grid -->
<div class=" h-[50vh] overflow-auto">
<img src="./assets/img/product.jpg" alt="">
</div>
<div class="m-3">
<span class="font-bold underline">Product</span>
<p>Innovative Market Offering</p>
</div>
</div>
<div class="col-span-1 mx-auto hover:col-start-4 hover:col-span-2 bg-[#10CA02] rounded-md overflow-hidden shadow-lg hover:shadow-[#006D05]">
<!-- Content for the fourth grid -->
<div class=" h-[50vh] overflow-auto">
<img src="./assets/img/portfolio.jpg" alt="Portfolio website">
</div>
<div class="m-3">
<span class="font-bold underline">Portfolio</span>
<p> Curated Showcase of Projects </p>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACTS -->
<div class="bg-[#2b2b2b] ">
<div class=" text-center w-[80%] md:w-[60%] mx-auto">
<h1 id="contacts" class="text-center pt-2 md:pt-10">CONTACTS</h1>
<h2 class="">Ways To Contact Me</h2>
<p class="text-center font-semibold">
Official Hours: 8:00 am-5:00 pm EAT
</p class="">
I believe in clear communication, attention to detail, and a collaborative approach to ensure that we meet and exceed your expectations.
Please feel free to reach out to me anytime with questions, feedback, or new ideas. I'm ready and eager to begin our journey together and create something amazing.
</p>
</div>
<div class="flex w-[90%] justify-center gap-4 mx-auto mt-5 ">
<a href="https://twitter.com/Mzee_Telee" class="hover:animate-bounce w-6 h-6 ">
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 24 24"><path fill="black" d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231zm-1.161 17.52h1.833L7.045 4.126H5.078z"/></svg> </a>
<a class="hover:animate-bounce w-6 h-6" href="https://www.instagram.com/its__radde_/" >
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="url(#skillIconsInstagram0)" rx="60"/><rect width="256" height="256" fill="url(#skillIconsInstagram1)" rx="60"/><path fill="#fff" d="M128.009 28c-27.158 0-30.567.119-41.233.604c-10.646.488-17.913 2.173-24.271 4.646c-6.578 2.554-12.157 5.971-17.715 11.531c-5.563 5.559-8.98 11.138-11.542 17.713c-2.48 6.36-4.167 13.63-4.646 24.271c-.477 10.667-.602 14.077-.602 41.236s.12 30.557.604 41.223c.49 10.646 2.175 17.913 4.646 24.271c2.556 6.578 5.973 12.157 11.533 17.715c5.557 5.563 11.136 8.988 17.709 11.542c6.363 2.473 13.631 4.158 24.275 4.646c10.667.485 14.073.604 41.23.604c27.161 0 30.559-.119 41.225-.604c10.646-.488 17.921-2.173 24.284-4.646c6.575-2.554 12.146-5.979 17.702-11.542c5.563-5.558 8.979-11.137 11.542-17.712c2.458-6.361 4.146-13.63 4.646-24.272c.479-10.666.604-14.066.604-41.225s-.125-30.567-.604-41.234c-.5-10.646-2.188-17.912-4.646-24.27c-2.563-6.578-5.979-12.157-11.542-17.716c-5.562-5.562-11.125-8.979-17.708-11.53c-6.375-2.474-13.646-4.16-24.292-4.647c-10.667-.485-14.063-.604-41.23-.604zm-8.971 18.021c2.663-.004 5.634 0 8.971 0c26.701 0 29.865.096 40.409.575c9.75.446 15.042 2.075 18.567 3.444c4.667 1.812 7.994 3.979 11.492 7.48c3.5 3.5 5.666 6.833 7.483 11.5c1.369 3.52 3 8.812 3.444 18.562c.479 10.542.583 13.708.583 40.396c0 26.688-.104 29.855-.583 40.396c-.446 9.75-2.075 15.042-3.444 18.563c-1.812 4.667-3.983 7.99-7.483 11.488c-3.5 3.5-6.823 5.666-11.492 7.479c-3.521 1.375-8.817 3-18.567 3.446c-10.542.479-13.708.583-40.409.583c-26.702 0-29.867-.104-40.408-.583c-9.75-.45-15.042-2.079-18.57-3.448c-4.666-1.813-8-3.979-11.5-7.479s-5.666-6.825-7.483-11.494c-1.369-3.521-3-8.813-3.444-18.563c-.479-10.542-.575-13.708-.575-40.413c0-26.704.096-29.854.575-40.396c.446-9.75 2.075-15.042 3.444-18.567c1.813-4.667 3.983-8 7.484-11.5c3.5-3.5 6.833-5.667 11.5-7.483c3.525-1.375 8.819-3 18.569-3.448c9.225-.417 12.8-.542 31.437-.563zm62.351 16.604c-6.625 0-12 5.37-12 11.996c0 6.625 5.375 12 12 12s12-5.375 12-12s-5.375-12-12-12zm-53.38 14.021c-28.36 0-51.354 22.994-51.354 51.355c0 28.361 22.994 51.344 51.354 51.344c28.361 0 51.347-22.983 51.347-51.344c0-28.36-22.988-51.355-51.349-51.355zm0 18.021c18.409 0 33.334 14.923 33.334 33.334c0 18.409-14.925 33.334-33.334 33.334c-18.41 0-33.333-14.925-33.333-33.334c0-18.411 14.923-33.334 33.333-33.334"/><defs><radialGradient id="skillIconsInstagram0" cx="0" cy="0" r="1" gradientTransform="matrix(0 -253.715 235.975 0 68 275.717)" gradientUnits="userSpaceOnUse"><stop stop-color="#fd5"/><stop offset=".1" stop-color="#fd5"/><stop offset=".5" stop-color="#ff543e"/><stop offset="1" stop-color="#c837ab"/></radialGradient><radialGradient id="skillIconsInstagram1" cx="0" cy="0" r="1" gradientTransform="matrix(22.25952 111.2061 -458.39518 91.75449 -42.881 18.441)" gradientUnits="userSpaceOnUse"><stop stop-color="#3771c8"/><stop offset=".128" stop-color="#3771c8"/><stop offset="1" stop-color="#60f" stop-opacity="0"/></radialGradient></defs></g></svg>
</a>
<a href="https://www.linkedin.com/in/raddames-tonui-01a751277/" class="animate-bounce">
<svg xmlns="http://www.w3.org/2000/svg" height="3em" viewBox="0 0 24 24"><path fill="blue" d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"/></svg>
</a>
<a href="mailto:[email protected]" class="hover:animate-bounce w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60"/>
<path fill="#4285f4" d="M41.636 203.028h31.818v-77.273L28 91.665v97.727c0 7.545 6.114 13.636 13.636 13.636"/>
<path fill="#34a853" d="M182.545 203.028h31.819c7.545 0 13.636-6.113 13.636-13.636V91.665l-45.455 34.09"/>
<path fill="#fbbc04" d="M182.545 66.664v59.091L228 91.665V73.481c0-16.863-19.25-26.477-32.727-16.363"/>
<path fill="#ea4335" d="M73.455 125.755v-59.09L128 107.574l54.545-40.91v59.091L128 166.665"/>
<path fill="#c5221f" d="M28 73.483v18.181l45.454 34.091v-59.09l-12.727-9.546C47.227 47.005 28 56.619 28 73.483"/>
</g>
</svg>
</a>
<a href="tel:+254717771461" class="hover:animate-bounce w-6 h-6 "">
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linejoin="round" stroke-width="4"><path stroke-linecap="round" d="M41.7796 20.6066C42.0324 18.9108 41.9495 17.1747 41.5309 15.5054C40.978 13.3002 39.8392 11.2118 38.1147 9.4873C36.3902 7.76281 34.3018 6.62409 32.0967 6.07115C30.4274 5.65257 28.6912 5.56967 26.9954 5.82245"/><path stroke-linecap="round" d="M34.1897 19.8035C34.4605 17.9869 33.8967 16.0699 32.4983 14.6715C31.0998 13.2731 29.1829 12.7092 27.3663 12.98"/><path fill="#2f88ff" d="M14.3757 8.79424C15.1022 8.79424 15.7716 9.1883 16.1243 9.8235L18.5707 14.2303C18.891 14.8073 18.9061 15.5052 18.6109 16.0955L16.2541 20.8091C16.2541 20.8091 16.9371 24.3206 19.7955 27.179C22.654 30.0374 26.1536 30.7086 26.1536 30.7086L30.8665 28.3522C31.4572 28.0568 32.1556 28.0721 32.7328 28.393L37.1521 30.85C37.7868 31.2028 38.1803 31.8719 38.1803 32.598V37.6715C38.1803 40.2552 35.7804 42.1213 33.3323 41.2952C28.3044 39.5987 20.4997 36.3685 15.5529 31.4216C10.606 26.4748 7.37579 18.6701 5.67928 13.6422C4.85325 11.1941 6.71934 8.79424 9.30299 8.79424H14.3757Z"/></g></svg>
</a>
</div>
<br>
<div>
<img src="./assets/img/wa.link_w8sp6t.png" alt="Image of whatsapp QR Code" class="mx-auto my-auto h-[20vh]">
</div>
<div class="fixed bottom-4 right-4 animate-bounce w-6 h-6 bouce-element">
<button class="bg-blend-normal hover:bg-[#10CA02] hover:rounded-full text-white font-bold rounded">
<a href="#home">
<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 24 24"><g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m15 13l-3-3l-3 3"/></g></svg>
</a>
</button>
</div>
</section>
</main>
<footer>
<hr>
<div>
<p class="text-center bg-[#1e6618] text-black text-sm p-2 ">
© Copyright <script type="text/javascript">document. write(new Date(). getFullYear());</script> | <span>Raddames-Tonui</span>
</p>
</div>
</footer>
</body>
</html>