72 |
108 |
73 |
82 |
107 | Hey There. I’m Tayo
74 |I am a Software developer
75 | 76 |77 | I can help you build a product , feature or website Look through 78 | some of my work and experience! If you like what you see and have a 79 | project you need coded, don’t hestiate to contact me. 80 |
81 |
112 |
117 |
113 |
115 |
116 | My Recent Works
114 |115 |
120 |
129 | About me
121 |122 | Hello I’m a software developer! I can help you build a product , 123 | feature or website Look through some of my work and experience! If you 124 | like what you see and have a project you need coded, don’t hestiate to 125 | contact me. 126 |
127 | 128 |
130 |
131 |
165 | 131 |
132 |
164 | -
133 |
- Language 135 |
- Javascript 137 |
- Ruby 138 |
- Html 139 |
- Css 140 |
- Frameworks 144 |
- Bootstrap 146 |
- Ruby on Rails 147 |
- RSPec 148 |
- CapyBara 149 |
- Selenium 150 |
- Skills 154 |
- Codekit 156 |
- Github 157 |
- Codepen 158 |
- Gitlab 159 |
- Terminal 160 |
134 |
142 | -
136 |
143 |
152 | -
145 |
153 |
162 | -
155 |
169 | I'm always interested in hearing about new projects, so if you'd like to 170 | chat please get in touch. 171 |
172 | 202 |204 | 230 | 231 | 232 | 233 | 234 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const dropDown = document.querySelector('.dropdown'); 2 | const mobileMenu = document.querySelector('.mobileMenu'); 3 | const Popup = document.getElementById('work-link'); 4 | 5 | const immage = document.querySelector('.immage'); 6 | dropDown.addEventListener('click', () => { 7 | dropDown.classList.toggle('active'); 8 | mobileMenu.classList.toggle('active'); 9 | immage.classList.toggle('active'); 10 | }); 11 | 12 | document.querySelectorAll('.menu-items').forEach((i) => i.addEventListener('click', () => { 13 | dropDown.classList.remove('active'); 14 | mobileMenu.classList.remove('active'); 15 | immage.classList.remove('active'); 16 | })); 17 | // Project one card information stored in an object 18 | const project1Card = { 19 | title: 'Clean Energy Submit 2023', 20 | text: 'This is a responsive website created for the National Renweable Energy Submit. It provides information about the submit keyspeakers and also partnering companies.', 21 | technology: ['css', 'html', 'Javascript'], 22 | image: 'image/vlean.jpg', 23 | PopImage: 'image/vlean.jpg', 24 | seelive: 'https://newtayo.github.io/Clean-Energy-Submit/', 25 | seeSource: 'https://github.com/Newtayo/Clean-Energy-Submit', 26 | }; 27 | // Object containing contents in the mobile version 28 | const mobileothercontent = [ 29 | { 30 | title: 'World Population App', 31 | text: ' With world population App, you can have basic information of the various countries in the world with just a single click', 32 | description: 'According to the restcountries API, there are over 7.7 billion people and around 250 countries in the World. With world population App, you can have basic information of the various countries in the world with just a single click', 33 | technology: ['React', 'Redux', 'Vanilla Css'], 34 | image: 'image/Website.png', 35 | sn: 0, 36 | picture: 'image/WorldPopulatio.JPG', 37 | seelive: 'https://countriespopulation.onrender.com/', 38 | seeSource: 'https://github.com/Newtayo/metric-webapp', 39 | }, 40 | { 41 | title: 'Todo-List App', 42 | text: ' Todo-List app is created to help users properly plan their daily itenary. Tasks can be planned and track using this app. It also ensures that all changes made to the tasks are updated in real-time and preserved.', 43 | description: 'One of the ways to better manage Time and increase productivity is through Planning. Todo-List app is created just for this purpose. Tasks can be planned and track using this app. It also ensures that all changes made to the tasks are updated in real time and preserved', 44 | technology: ['Javascript', 'Html', 'CSS'], 45 | image: 'image/Calculator.png', 46 | sn: 1, 47 | picture: 'image/Todo.JPG', 48 | seelive: 'https://newtayo.github.io/TODO-LIST/dist/', 49 | seeSource: 'https://github.com/Newtayo/TODO-LIST', 50 | }, 51 | { 52 | title: 'Book Store', 53 | text: 'This application helps keeps track of the books in a user library. The user can add or remove books from the library', 54 | technology: ['React', 'Redux', 'CSS'], 55 | description: 'This application helps keeps track of the books in a user library. The user can add or remove books from the library. The user booklist is preserved on an API', 56 | image: 'image/View.png', 57 | picture: 'image/Bookstore.jpg', 58 | sn: 2, 59 | seelive: 'https://booklibrary-mmen.onrender.com/', 60 | seeSource: 'https://github.com/Newtayo/Bookstore', 61 | }, 62 | { 63 | title: 'Leaderboard', 64 | text: ' This is mobile responsive SPA website that displays the scores of participants in a game. Individuals can add scores to the leader board filling the add score form.', 65 | description: 'This is mobile responsive SPA website that displays the scores of participants in a game. Individuals can add scores to the leader board filling the add score form. All scores are preserved in using API', 66 | technology: ['html', 'Javascript', 'Css'], 67 | image: 'image/Website.png', 68 | picture: 'image/tenyears.png', 69 | sn: 3, 70 | seelive: 'https://newtayo.github.io/Leaderboard/dist/', 71 | seeSource: 'https://github.com/Newtayo/Leaderboard', 72 | }, 73 | { 74 | title: 'Awesome BookStore', 75 | text: ' This web app manages the books available at a store called Awesome Books. Books can be added and removed at will. It also utilizes local storage to ensure changes are preserved', 76 | description: 'This web app manages the books available at a store called Awesome Books. Books can be added and removed at will. It also utilizes local storage to ensure changes are preserved', 77 | technology: ['html', 'Javascript', 'CSS'], 78 | picture: 'image/tenyears.png', 79 | image: 'image/Calculator.png', 80 | sn: 4, 81 | seelive: 'https://newtayo.github.io/Module-Awesome-Books/main/', 82 | seeSource: 'https://github.com/Newtayo/Module-Awesome-Books', 83 | }, 84 | { 85 | title: 'Profesional Art Printing Data', 86 | text: ' A daily selection of privately personalized reads; no accounts or sign-ups required. has been the industrys standard', 87 | description: ' A daily selection of privately personalized reads; no accounts or sign-ups required. has been the industrys standard', 88 | picture: 'image/tenyears.png', 89 | technology: ['html', 'bootstrap', 'Ruby'], 90 | image: 'image/View.png', 91 | sn: 5, 92 | seelive: 'https://newtayo.github.io/Leaderboard/dist/', 93 | seeSource: 'https://github.com/Newtayo/Leaderboard', 94 | }, 95 | ]; 96 | 97 | // Loading the First cards dynamically 98 | const FirstProject = document.createElement('div'); 99 | FirstProject.id = 'project1'; 100 | FirstProject.innerHTML = `
101 |
102 |
113 |
114 | `;
115 | Popup.append(FirstProject);
116 |
117 | const seeprojectBtn = document.querySelector('.seeproject1');
118 | seeprojectBtn.addEventListener('click', () => {
119 | const backdrop = document.createElement('div');
120 | backdrop.className = 'backdrop';
121 |
122 | const popWindow = document.createElement('div');
123 |
124 | popWindow.className = 'popclass';
125 |
126 | popWindow.innerHTML = ` ${project1Card.title}
103 |${project1Card.text} 104 |
105 | 106 |-
107 | ${project1Card.technology
108 | .map((iterate) => `
- ${iterate} `) 109 | .join('')} 110 |
${project1Card.title}
127 | 128 | 129 |-
130 |
- html 131 |
- CSS 132 | 133 |
- Javascript 134 |
136 | 
137 |
146 |
147 | `;
148 | backdrop.append(popWindow);
149 | Popup.append(backdrop);
150 |
151 | const removeBtn = document.getElementById('remove');
152 | removeBtn.addEventListener('click', () => {
153 | Popup.removeChild(backdrop);
154 | });
155 | });
156 |
157 | // Code for generating the projectcard
158 | const container = document.createElement('div');
159 | container.className = 'desktopitem';
160 | mobileothercontent.forEach((mobile) => {
161 | const mobilecontent = document.createElement('div');
162 |
163 | mobilecontent.className = 'otherproject';
164 |
165 | mobilecontent.innerHTML = `
166 | ${mobile.title}
167 |${mobile.text} 168 |
169 | 170 |-
171 | ${mobile.technology
172 | .map((items) => `
- ${items} `) 173 | .join('')} 174 |
${data.title}
201 | 202 | 203 |-
204 |
- ${data.technology[0]} 205 |
- ${data.technology[1]} 206 | 207 |
- ${data.technology[2]} 208 |
210 | 
211 |
220 |
221 | `;
222 | backdrop.append(popWindow);
223 | Popup.append(backdrop);
224 |
225 | const removeBtn = document.getElementById('remove');
226 | removeBtn.addEventListener('click', () => {
227 | Popup.removeChild(backdrop);
228 | });
229 | }
230 |
231 | mobileothercontent.forEach((values, val) => {
232 | document.getElementById(val).addEventListener('click', () => {
233 | windowpopup(values);
234 | });
235 | });
236 |
237 | // Email Validation
238 | const form = document.getElementById('contact');
239 | const emailValue = form.elements.email;
240 | const errorMessage = document.querySelector('small');
241 |
242 | form.addEventListener('submit', (event) => {
243 | const email = emailValue.value;
244 | if (email !== email.toLowerCase()) {
245 | event.preventDefault();
246 | errorMessage.className = 'error';
247 | }
248 | });
249 |
250 | // Handling local storage
251 |
252 | const userName = form.elements.Fullname;
253 | const userEmail = form.elements.email;
254 | const userMessage = form.elements.YourMessage;
255 |
256 | function storingInput() {
257 | // storing user input in object
258 | const userObject = {
259 | name: userName.value,
260 | email: userEmail.value,
261 | message: userMessage.value,
262 | };
263 | localStorage.setItem('userObject', JSON.stringify(userObject));
264 | }
265 |
266 | function prePopulateForm() {
267 | const storedValues = JSON.parse(localStorage.getItem('userObject'));
268 | const currentUser = storedValues.name;
269 | const currentEmail = storedValues.email;
270 | const currentMessage = storedValues.message;
271 | form.elements.Fullname.value = currentUser;
272 | form.elements.email.value = currentEmail;
273 | form.elements.YourMessage.value = currentMessage;
274 | }
275 |
276 | if (!localStorage.getItem('userObject')) {
277 | storingInput();
278 | } else {
279 | prePopulateForm();
280 | }
281 |
282 | // if form values are changed
283 |
284 | userName.onchange = storingInput;
285 | userEmail.onchange = storingInput;
286 | userMessage.onchange = storingInput;
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | body {
8 | font-family: 'Crete Round', serif;
9 | }
10 |
11 | header {
12 | width: 100%;
13 | height: 10vh;
14 | margin: 0;
15 | padding: 0;
16 | display: flex;
17 | flex-direction: column;
18 | background-color: #3c3a39;
19 | }
20 |
21 | .mobileMenu {
22 | height: 100%;
23 | width: 100%;
24 | position: fixed;
25 | background-color: #3c3a39;
26 | transition: 0.4s;
27 | display: flex;
28 | flex-direction: column;
29 | left: -100%;
30 | }
31 |
32 | .mobileMenu.active {
33 | padding-top: 10%;
34 | left: 0%;
35 | top: 0%;
36 | }
37 |
38 | .immage.active {
39 | content: url('image/Icon\ -\ Cancel.png');
40 | }
41 |
42 | .languageitem {
43 | display: flex;
44 | flex-direction: row;
45 | align-items: center;
46 | border: 1px solid #8993a4;
47 | height: 100%;
48 | font-weight: 300;
49 | font-size: 16px;
50 | line-height: 20px;
51 | padding: 10%;
52 | justify-content: center;
53 | grid-row: 1;
54 | }
55 |
56 | .popclass {
57 | top: 0;
58 | bottom: 0;
59 | position: fixed;
60 | right: 0;
61 | left: 0;
62 | height: auto;
63 | background-color: #fff;
64 | display: flex;
65 | flex-direction: column;
66 | width: 90vw;
67 | margin: 5%;
68 | padding: 5%;
69 | overflow: scroll;
70 | }
71 |
72 | .img {
73 | margin-top: 3%;
74 | padding: 3.5%;
75 | background-color: #ff6b00;
76 | white-space: nowrap;
77 | display: flex;
78 | align-items: center;
79 | text-align: center;
80 | letter-spacing: 0.03em;
81 | justify-content: center;
82 | font-weight: 700;
83 | font-size: 17px;
84 | line-height: 24px;
85 | color: #fff;
86 | border: none;
87 | width: 38vw;
88 | }
89 |
90 | .popupLanguage .languageitem {
91 | color: #3c3a39;
92 | width: auto;
93 | padding: 4%;
94 | white-space: nowrap;
95 | font-style: normal;
96 | font-weight: 600;
97 | font-size: 4vw;
98 | line-height: 16px;
99 | margin-right: 2.5%;
100 | }
101 |
102 | .popuptextimagemenu {
103 | display: flex;
104 | flex-direction: column;
105 | }
106 |
107 | .popupLanguage {
108 | width: 60vw;
109 | margin-top: 8%;
110 | margin-bottom: 8%;
111 | display: flex;
112 | flex-direction: row;
113 | justify-content: space-between;
114 | }
115 |
116 | .popuptextbuttonmenu {
117 | display: flex;
118 | flex-direction: column;
119 | }
120 |
121 | .popButton {
122 | display: flex;
123 | justify-content: space-between;
124 | }
125 |
126 | #remove {
127 | border: none;
128 | right: 10%;
129 | position: fixed;
130 | width: 10%;
131 | background-color: transparent;
132 | }
133 |
134 | .popprojectsupporttext1 {
135 | width: 100%;
136 | font-weight: 400;
137 | font-size: 4vw;
138 | line-height: 24px;
139 | color: #344563;
140 | text-align: justify;
141 | margin-top: 5%;
142 | }
143 |
144 | .popupHeader {
145 | font-family: 'Roboto', sans-serif;
146 | font-weight: 700;
147 | font-size: 1.7rem;
148 | line-height: 2.75rem;
149 | }
150 |
151 | button.dropdown.active {
152 | position: fixed;
153 | z-index: 5;
154 | }
155 |
156 | .menu-items {
157 | display: block;
158 | color: #fff5e1;
159 | margin-top: 5%;
160 | margin-left: 5%;
161 | font-family: 'Inter', sans-serif;
162 | font-weight: 700;
163 | font-size: 32px;
164 | align-items: center;
165 | text-decoration: none;
166 | }
167 |
168 | .menu-items a {
169 | text-decoration: none;
170 | }
171 |
172 | .line {
173 | width: 90%;
174 | margin: 2% 5%;
175 | }
176 |
177 | .porfolio_container {
178 | display: flex;
179 | flex-direction: column;
180 | }
181 |
182 | .desktopotherproject {
183 | display: none;
184 | }
185 |
186 | .nameplateicons {
187 | margin-left: 65vw;
188 | gap: 3px;
189 | width: 5vw;
190 | justify-content: space-between;
191 | display: flex;
192 | flex-direction: row;
193 | }
194 |
195 | .dropdown {
196 | background: transparent;
197 | border: none;
198 | }
199 |
200 | .dropdown:hover {
201 | background: transparent;
202 | border: none;
203 | cursor: pointer;
204 | transition: none;
205 | transform: none;
206 | }
207 |
208 | .dropdown:enabled {
209 | cursor: pointer;
210 | background: transparent;
211 | border: none;
212 | transition: none;
213 | transform: none;
214 | }
215 |
216 | .text {
217 | color: #fff;
218 | text-decoration: none;
219 | width: 30vw;
220 | white-space: nowrap;
221 | margin-left: 6%;
222 | }
223 |
224 | .header_navigation {
225 | width: 100%;
226 | height: 100%;
227 | display: flex;
228 | justify-content: center;
229 | }
230 |
231 | .item_navigation {
232 | display: flex;
233 | flex-direction: row;
234 | align-items: center;
235 | width: 100%;
236 | height: 80%;
237 | background: #3c3a39;
238 | padding: auto auto;
239 | margin: auto 0;
240 | }
241 |
242 | .desktopitemheader {
243 | display: none;
244 | }
245 |
246 | .primary {
247 | margin-left: 5%;
248 | font-style: normal;
249 | font-weight: 450;
250 | font-size: 56px;
251 | line-height: 64px;
252 | letter-spacing: 0.37px;
253 | color: #ff6b00;
254 | width: 80vw;
255 | margin-bottom: 5%;
256 | }
257 |
258 | .role {
259 | width: 90vw;
260 | font-style: normal;
261 | font-weight: 700;
262 | font-size: 24px;
263 | line-height: 32px;
264 | display: flex;
265 | align-items: center;
266 | color: #fff5e1;
267 | flex: none;
268 | margin: auto;
269 | flex-grow: 0;
270 | margin-bottom: 3%;
271 | }
272 |
273 | h3 {
274 | width: 327px;
275 | height: 123px;
276 | font-style: normal;
277 | font-weight: 400;
278 | font-size: 16px;
279 | line-height: 24px;
280 | color: #fff;
281 | }
282 |
283 | .head {
284 | background: #1c1a19;
285 | width: 100%;
286 | height: 90vh;
287 | background-image: url('image/illustration-header-mobile.png');
288 | background-repeat: no-repeat;
289 | background-position: right bottom;
290 | }
291 |
292 | .headline {
293 | padding-top: 10vh;
294 | display: flex;
295 | flex-direction: column;
296 | gap: 20px;
297 | }
298 |
299 | .union {
300 | flex: 1;
301 | list-style: none;
302 | }
303 |
304 | .item {
305 | width: 5vw;
306 | height: 10vh;
307 | font-style: normal;
308 | font-weight: 600;
309 | font-size: 15px;
310 | line-height: 20px;
311 | display: flex;
312 | align-items: center;
313 | text-align: center;
314 | color: #fff;
315 | flex: 5;
316 | }
317 |
318 | .social_header_navigation {
319 | width: 60vw;
320 | height: 100%;
321 | display: flex;
322 | justify-content: center;
323 | margin-left: 6%;
324 | margin-top: -5%;
325 | }
326 |
327 | .social_navigation {
328 | width: 60vw;
329 | display: flex;
330 | flex-direction: row;
331 | margin: auto;
332 | }
333 |
334 | .supportingtext {
335 | width: 90vw;
336 | height: 123px;
337 | margin: auto;
338 | font-style: normal;
339 | font-weight: 400;
340 | font-size: 16px;
341 | line-height: 24px;
342 | text-align: left;
343 | color: #fff;
344 | }
345 |
346 | .error {
347 | color: red;
348 | display: flex;
349 | margin-left: 8%;
350 | }
351 |
352 | .worksection {
353 | width: 100vw;
354 | height: 600%;
355 | background-color: #fff;
356 | display: grid;
357 | grid-template-columns: 100%;
358 | grid-template-rows: auto auto auto auto auto auto auto auto;
359 | margin: 0;
360 | padding: 0;
361 | gap: 0;
362 | }
363 |
364 | #worksectionheading {
365 | font-style: normal;
366 | font-weight: 400;
367 | font-size: 40px;
368 | line-height: 52px;
369 | display: flex;
370 | align-items: center;
371 | color: #1c1a19;
372 | grid-row: 1/5;
373 | padding-top: 30%;
374 | }
375 |
376 | hr {
377 | height: 1px;
378 | border-width: 0;
379 | color: gray;
380 | background-color: gray;
381 | }
382 |
383 | .workdescription {
384 | width: 100%;
385 | height: 100%;
386 | background-color: white;
387 | background-image: none;
388 | padding: 0;
389 | margin: 0;
390 | }
391 |
392 | #worksectionheader {
393 | width: 100%;
394 | height: 40vh;
395 | justify-content: center;
396 | background-color: white;
397 | background-image: none;
398 | display: grid;
399 | grid-template-columns: auto;
400 | grid-template-rows: auto auto auto auto auto auto;
401 | }
402 |
403 | #project1 {
404 | width: 100%;
405 | height: 100%;
406 | display: flex;
407 | flex-direction: column;
408 | align-items: flex-start;
409 | padding: 5% 5% 3% 5%;
410 | }
411 |
412 | #placeholder {
413 | width: 100%;
414 | }
415 |
416 | #project1text {
417 | width: 90%;
418 | font-style: normal;
419 | font-weight: 400;
420 | font-size: 30px;
421 | line-height: 44px;
422 | display: flex;
423 | align-items: center;
424 | color: #091e42;
425 | }
426 |
427 | #project1supporttext {
428 | width: 90%;
429 | font-weight: 400;
430 | font-size: 14px;
431 | line-height: 24px;
432 | color: #091e42;
433 | margin-bottom: 3%;
434 | }
435 |
436 | #project1language {
437 | display: grid;
438 | grid-template-columns: auto auto auto auto;
439 | list-style: none;
440 | gap: 4%;
441 | width: 70%;
442 | }
443 |
444 | #bootstrap {
445 | width: 24vw;
446 | }
447 |
448 | .seeproject1 {
449 | margin-top: 3%;
450 | width: 34%;
451 | padding: 3%;
452 | background-color: #ff6b00;
453 | white-space: nowrap;
454 | display: flex;
455 | align-items: center;
456 | text-align: center;
457 | letter-spacing: 0.03em;
458 | justify-content: center;
459 | font-weight: 700;
460 | font-size: 17px;
461 | line-height: 24px;
462 | color: #fff;
463 | border: none;
464 | }
465 |
466 | .otherproject {
467 | width: 90vw;
468 | height: 75vh;
469 | margin: 2.5vh auto;
470 | background-image: url('image/Img\ Placeholder\ \(3\).png');
471 | background-repeat: no-repeat;
472 | background-size: cover;
473 | padding-top: 16vh;
474 | display: flex;
475 | flex-direction: column;
476 | }
477 |
478 | .otherprojectheading {
479 | width: 80vw;
480 | height: 15vh;
481 | font-weight: 400;
482 | margin: 0 auto;
483 | font-size: 32px;
484 | line-height: 44px;
485 | color: #fff;
486 | }
487 |
488 | .otherprojecttext {
489 | width: 80vw;
490 | height: 20vh;
491 | margin: 2vh auto 0 auto;
492 | color: #fff;
493 | font-family: 'Inter', sans-serif;
494 | font-style: normal;
495 | font-weight: 400;
496 | font-size: 4vw;
497 | line-height: 24px;
498 | letter-spacing: 0.03em;
499 | }
500 |
501 | #project2language {
502 | display: grid;
503 | grid-template-columns: auto auto auto;
504 | list-style: none;
505 | gap: 4%;
506 | width: 70%;
507 | height: 10vh;
508 | margin: 1.5vh auto 0 5vw;
509 | align-items: center;
510 | }
511 |
512 | .seeproject2 {
513 | height: 10vh;
514 | width: 90vw;
515 | background-color: #ff6b00;
516 | margin: 1.5vh auto 0 0;
517 | display: flex;
518 | align-items: center;
519 | text-align: center;
520 | letter-spacing: 0.03em;
521 | justify-content: center;
522 | font-weight: 700;
523 | font-size: 17px;
524 | line-height: 24px;
525 | color: #fff;
526 | border: none;
527 | }
528 |
529 | .language2item {
530 | display: flex;
531 | flex-direction: row;
532 | align-items: center;
533 | height: 5vh;
534 | justify-content: center;
535 | color: white;
536 | font-weight: 500;
537 | font-size: 15px;
538 | line-height: 20px;
539 | background: rgba(255, 255, 255, 0.24);
540 | }
541 |
542 | .about {
543 | width: 100%;
544 | background-color: #1c1a19;
545 | display: flex;
546 | flex-direction: column;
547 | background-image: url('image/illustration-about-me-mobile.png');
548 | background-repeat: no-repeat;
549 | background-position: right bottom;
550 | padding: 5% 5% 50% 5%;
551 | align-items: flex-start;
552 | flex-wrap: wrap;
553 | }
554 |
555 | .aboutheader {
556 | width: 90vw;
557 | font-weight: 400;
558 | font-size: 72px;
559 | line-height: 88px;
560 | color: #ff6b00;
561 | padding-top: 30%;
562 | letter-spacing: 0.37px;
563 | }
564 |
565 | .aboutsection {
566 | width: 100%;
567 | height: auto;
568 | background: #1c1a19;
569 | display: flex;
570 | flex-wrap: wrap;
571 | flex-direction: column;
572 | padding: 0;
573 | margin: 0;
574 | }
575 |
576 | #aboutmetext {
577 | width: 90vw;
578 | padding-bottom: 5%;
579 | font-weight: 400;
580 | font-size: 16px;
581 | line-height: 24px;
582 | color: #f4f5f7;
583 | }
584 |
585 | .getresumebutton {
586 | display: flex;
587 | flex-direction: row;
588 | align-items: center;
589 | padding: 12px;
590 | gap: 10px;
591 | background: #ff6b00;
592 | width: 45vw;
593 | font-weight: 700;
594 | font-size: 17px;
595 | line-height: 24px;
596 | letter-spacing: 0.03em;
597 | color: #fff;
598 | border: none;
599 | }
600 |
601 | .lang {
602 | color: white;
603 | width: 70vw;
604 | align-content: center;
605 | justify-content: center;
606 | margin: 20vh auto 0 auto;
607 | font-weight: 500;
608 | font-size: 32px;
609 | line-height: 44px;
610 | list-style: none;
611 | padding: 0;
612 | display: flex;
613 | flex-direction: row;
614 | column-gap: 10px;
615 | }
616 |
617 | .skilllist {
618 | display: flex;
619 | flex-direction: column;
620 | width: 100vw;
621 | flex-wrap: wrap;
622 |
623 | /* height: 150vh; */
624 | }
625 |
626 | #first::before {
627 | content: url('image/Rectangle\ 55.png');
628 | margin-left: 2vw;
629 | }
630 |
631 | #first::after {
632 | margin-left: 10vw;
633 | }
634 |
635 | #second::before {
636 | content: url('image/Rectangle\ 56\ \(1\).png');
637 | padding-left: 5vw;
638 | }
639 |
640 | #third::before {
641 | content: url('image/Rectangle\ 57.png');
642 | padding-left: 2vw;
643 | }
644 |
645 | .listitem {
646 | width: 50%;
647 | height: 60vh;
648 | margin: 0 auto 5% auto;
649 | list-style: none;
650 | display: flex;
651 | flex-direction: column;
652 | }
653 |
654 | #first {
655 | margin-top: 15vh;
656 | }
657 |
658 | .list {
659 | text-align: center;
660 | font-weight: 300;
661 | font-size: 22px;
662 | line-height: 43px;
663 | color: #fff;
664 | padding-top: 5%;
665 | padding-bottom: 10%;
666 | }
667 |
668 | #second {
669 | margin-top: 7vh;
670 | }
671 |
672 | #third {
673 | margin-top: 7vh;
674 | }
675 |
676 | .divider {
677 | width: 90%;
678 | margin: auto;
679 | border: 0.5px thin #fff;
680 | }
681 |
682 | .contact-form {
683 | padding-bottom: 10%;
684 | display: flex;
685 | flex-direction: column;
686 | flex-wrap: wrap;
687 | background-color: white;
688 | margin-bottom: 17%;
689 | }
690 |
691 | .footer {
692 | background-color: white;
693 | padding-bottom: 2%;
694 | }
695 |
696 | .footer .item {
697 | color: #505f79;
698 | }
699 |
700 | .footer .liner {
701 | height: 4px;
702 | width: 145px;
703 | margin: 0 auto;
704 | background: #0d151e;
705 | border-radius: 10px;
706 | }
707 |
708 | button {
709 | transition: all 1s ease;
710 | }
711 |
712 | button:enabled {
713 | background: #f55800;
714 | }
715 |
716 | button:hover {
717 | background: #fff5e1;
718 | border: 1px solid #f55800;
719 | cursor: pointer;
720 | transform: scale(1.1);
721 | color: #f55800;
722 | }
723 |
724 | button:active {
725 | background: #e05304;
726 | }
727 |
728 | .contact-form p {
729 | font-family: 'Inter', serif;
730 | font-style: normal;
731 | font-weight: 700;
732 | font-size: 32px;
733 | line-height: 44px;
734 | color: #172b4d;
735 | width: 90vw;
736 | margin: 20% auto 10% auto;
737 | text-align: center;
738 | flex: 1;
739 | }
740 |
741 | .mobile {
742 | display: none;
743 | }
744 |
745 | .form_details {
746 | display: flex;
747 | flex-direction: column;
748 | }
749 |
750 | input {
751 | width: 90%;
752 | padding: 2%;
753 | margin: 3%;
754 | border: 0;
755 | border-bottom: 2px solid #dbd8d7;
756 | }
757 |
758 | textarea {
759 | width: 90%;
760 | margin: 3% auto 5% auto;
761 | border: none;
762 | background-color: #fbf8f7;
763 | }
764 |
765 | .btn {
766 | align-items: center;
767 | width: 35%;
768 | margin: auto;
769 | height: 8vh;
770 | color: #fff;
771 | border: none;
772 | background: #ff6b00;
773 | }
774 |
775 | small {
776 | display: none;
777 | }
778 |
779 | .img > a {
780 | margin-top: 5%;
781 | margin-left: 3%;
782 | text-decoration: none;
783 | color: white;
784 | }
785 |
786 | .backdrop {
787 | position: fixed;
788 | background-color: rgba(0, 0, 0, 0.8);
789 | top: 0;
790 | left: 0;
791 | right: 0;
792 | height: 100%;
793 | width: 100%;
794 | margin: auto;
795 | z-index: 1;
796 | }
797 |
798 | @media only screen and (min-width: 768px) {
799 | .union {
800 | display: none;
801 | }
802 |
803 | .mobile-menu {
804 | display: none;
805 | }
806 |
807 | .desktopitem {
808 | width: 100vw;
809 | display: flex;
810 | padding: 5%;
811 | flex-wrap: wrap;
812 | font-weight: 600;
813 | font-size: 15px;
814 | line-height: 20px;
815 | }
816 |
817 | .item {
818 | font-weight: 700;
819 | font-size: 20px;
820 | line-height: 20px;
821 | }
822 |
823 | .desktoptext {
824 | color: #fff;
825 | text-decoration: none;
826 | font-family: 'Inter', sans-serif;
827 | font-style: normal;
828 | font-weight: 600;
829 | }
830 |
831 | #mail {
832 | padding-top: 0.3%;
833 | }
834 |
835 | .headline {
836 | display: flex;
837 | flex-direction: row;
838 | flex-wrap: wrap;
839 | height: 100%;
840 | align-items: center;
841 | background-image: url('image/Illustration-header.png');
842 | background-repeat: no-repeat;
843 | background-position: right;
844 | background-size: 38%;
845 | padding: 0;
846 | }
847 |
848 | .headline:nth-child(2n) {
849 | margin-right: 0;
850 | }
851 |
852 | .destopheading {
853 | order: 2;
854 | width: 40%;
855 | height: 100%;
856 | display: flex;
857 | flex-direction: column;
858 | flex-wrap: wrap;
859 | justify-content: center;
860 | margin-left: 2.5%;
861 | }
862 |
863 | .social_navigation {
864 | display: flex;
865 | flex-direction: column;
866 | width: 50%;
867 | height: 40%;
868 | justify-content: center;
869 | margin: auto;
870 | }
871 |
872 | .social_header_navigation {
873 | padding: 0;
874 | margin: 0;
875 | width: 5%;
876 | order: 1;
877 | }
878 |
879 | #iconlinkedin {
880 | margin-left: -23%;
881 | }
882 |
883 | .primary {
884 | width: 60%;
885 | margin: 0;
886 | white-space: wrap;
887 | height: 30%;
888 | font-size: 4.6vw;
889 | font-weight: 500;
890 | }
891 |
892 | .role {
893 | width: 100%;
894 | margin: 0;
895 | font-size: 2.5vw;
896 | font-family: 'Inter', sans-serif;
897 | font-style: normal;
898 | }
899 |
900 | .supportingtext {
901 | width: 100%;
902 | margin: 0;
903 | padding-top: 3%;
904 | font-weight: 400;
905 | font-size: 1.9vw;
906 | line-height: 32px;
907 | font-family: 'Inter', sans-serif;
908 | font-style: normal;
909 | }
910 |
911 | .desktopproject1 {
912 | height: fit-content;
913 | width: 80%;
914 | margin: 5% auto 0 auto;
915 | }
916 |
917 | #worksectionheader {
918 | flex-wrap: wrap;
919 | display: flex;
920 | flex-direction: row;
921 | margin: 10% auto 12% auto;
922 | padding: 0;
923 | height: 10%;
924 | align-items: center;
925 | width: 100%;
926 | }
927 |
928 | #worksectionheading {
929 | margin: 0;
930 | padding: 0;
931 | flex: 1;
932 | white-space: wrap;
933 | font-size: 3.3vw;
934 | }
935 |
936 | .desktoprule {
937 | flex: 2;
938 | padding: 0;
939 | margin: 0;
940 | height: 1px;
941 | border-width: 0;
942 | color: gray;
943 | background-color: gray;
944 | }
945 |
946 | #project1 {
947 | display: flex;
948 | flex-direction: row;
949 | padding: 1% 10% 10% 10%;
950 | width: 100%;
951 | }
952 |
953 | .text {
954 | font-family: 'Inter', sans-serif;
955 | font-style: normal;
956 | font-weight: 600;
957 | }
958 |
959 | #placeholder {
960 | width: 50%;
961 | padding: 0;
962 | margin: 0;
963 | object-fit: cover;
964 | height: auto;
965 | }
966 |
967 | .project1container {
968 | display: flex;
969 | width: 50%;
970 | flex-direction: column;
971 | flex-wrap: wrap;
972 | justify-content: center;
973 | padding-left: 2.5%;
974 | }
975 |
976 | .imagecontainer {
977 | width: 50%;
978 | height: 100%;
979 | }
980 |
981 | #project1language {
982 | width: 100%;
983 | display: flex;
984 | flex-wrap: wrap;
985 | padding: 0;
986 | height: 100%;
987 | margin-bottom: 5%;
988 | }
989 |
990 | #project1supporttext {
991 | width: 80%;
992 | padding-bottom: auto;
993 | font-size: 1.3vw;
994 | font-family: 'Inter', sans-serif;
995 | font-style: normal;
996 | color: #091e42;
997 | font-weight: 400;
998 | margin-bottom: 5%;
999 | }
1000 |
1001 | #project1text {
1002 | margin-bottom: 5%;
1003 | font-style: normal;
1004 | font-weight: 400;
1005 | font-size: 3.7vw;
1006 | line-height: 52px;
1007 | width: 80%;
1008 | }
1009 |
1010 | .mobileMenu {
1011 | display: none;
1012 | }
1013 |
1014 | .languageitem {
1015 | padding: 2.5%;
1016 | margin: 0;
1017 | height: 100%;
1018 | color: #091e42;
1019 | font-size: 1.3vw;
1020 | }
1021 |
1022 | #bootstrap {
1023 | padding: 2.5%;
1024 | margin: 0;
1025 | width: 20%;
1026 | height: 100%;
1027 | }
1028 |
1029 | .seeproject1 {
1030 | margin: 0;
1031 | }
1032 |
1033 | .otherproject {
1034 | display: flex;
1035 | flex-direction: column;
1036 | width: 30%;
1037 | margin: 1% auto 10% auto;
1038 | gap: 2%;
1039 | }
1040 |
1041 | small {
1042 | display: none;
1043 | }
1044 |
1045 | .otherprojectheading {
1046 | width: 90%;
1047 | color: #fff;
1048 | font-weight: 400;
1049 | font-size: 3vw;
1050 | line-height: 44px;
1051 | padding-bottom: 3%;
1052 | margin-top: 20%;
1053 | height: 20%;
1054 | }
1055 |
1056 | .project2language {
1057 | display: grid;
1058 | grid-template-columns: auto auto auto;
1059 | list-style: none;
1060 | gap: 4%;
1061 | width: 70%;
1062 | height: 10vh;
1063 | padding-left: 5%;
1064 | align-items: center;
1065 | }
1066 |
1067 | .otherprojecttext {
1068 | width: 90%;
1069 | color: #fff;
1070 | font-weight: 150;
1071 | font-size: 1.3vw;
1072 | line-height: 24px;
1073 | font-family: 'Inter', sans-serif;
1074 | font-style: normal;
1075 | }
1076 |
1077 | .projectdesktop {
1078 | width: 30%;
1079 | padding: 0;
1080 | margin: 0;
1081 | }
1082 |
1083 | #project2language {
1084 | display: grid;
1085 | grid-template-columns: auto auto auto;
1086 | list-style: none;
1087 | gap: 4%;
1088 | width: 70%;
1089 | height: 10vh;
1090 | margin: 1.5vh auto 0 5%;
1091 | align-items: center;
1092 | }
1093 |
1094 | .container {
1095 | height: 85%;
1096 | width: 100%;
1097 | background-image: url('image/Img\ Placeholder\ \(4\).png');
1098 | background-repeat: no-repeat;
1099 | background-size: cover;
1100 | background-position: center;
1101 | }
1102 |
1103 | .seeproject2 {
1104 | height: 15%;
1105 | margin: 0;
1106 | width: 100%;
1107 | background-color: #ff6b00;
1108 | display: flex;
1109 | align-items: center;
1110 | text-align: center;
1111 | letter-spacing: 0.03em;
1112 | justify-content: center;
1113 | font-weight: 700;
1114 | font-size: 17px;
1115 | line-height: 24px;
1116 | color: #fff;
1117 | border: none;
1118 | }
1119 |
1120 | .dashboard {
1121 | height: 100%;
1122 | width: 100%;
1123 | background-image: url('image/Img\ Placeholder\ \(5\).png');
1124 | background-repeat: no-repeat;
1125 | background-size: cover;
1126 | background-position: center;
1127 | margin: 0;
1128 | display: flex;
1129 | flex-direction: column;
1130 | align-items: center;
1131 | }
1132 |
1133 | .dashboardheading {
1134 | width: 90%;
1135 | color: #fff;
1136 | font-weight: 400;
1137 | font-size: 3vw;
1138 | line-height: 44px;
1139 | padding-bottom: 5%;
1140 | margin-top: 40%;
1141 | height: 25%;
1142 | }
1143 |
1144 | .dashboardtext {
1145 | width: 90%;
1146 | color: #fff;
1147 | font-weight: 150;
1148 | font-size: 1.3vw;
1149 | line-height: 24px;
1150 | font-family: 'Inter', sans-serif;
1151 | font-style: normal;
1152 | }
1153 |
1154 | .dashboardlanguage {
1155 | display: flex;
1156 | width: 80%;
1157 | list-style: none;
1158 | justify-content: space-between;
1159 | align-items: flex-start;
1160 | height: 100%;
1161 | padding: 0;
1162 | }
1163 |
1164 | .dashboardling {
1165 | width: 90%;
1166 | height: 25%;
1167 | }
1168 |
1169 | .dasbboaritem {
1170 | height: 60%;
1171 | text-align: center;
1172 | padding: 5%;
1173 | margin-top: 5%;
1174 | color: #fff;
1175 | font-weight: 500;
1176 | font-size: 1.2vw;
1177 | line-height: 20px;
1178 | background-color: #5b5957;
1179 | font-family: 'Inter', sans-serif;
1180 | font-style: normal;
1181 | }
1182 |
1183 | .dashboardheading.web {
1184 | height: 25%;
1185 | margin-top: 50%;
1186 | padding-bottom: 5%;
1187 | font-size: 2.6vw;
1188 | }
1189 |
1190 | .desktopitemheader {
1191 | flex: 0.8;
1192 | display: flex;
1193 | font-weight: 600;
1194 | font-size: 15px;
1195 | line-height: 20px;
1196 | }
1197 |
1198 | .dashboardtext.web {
1199 | padding-bottom: 2.5%;
1200 | font-family: 'Inter', sans-serif;
1201 | font-style: normal;
1202 | }
1203 |
1204 | .dashboard.web {
1205 | background-image: url('image/Img\ Placeholder\ \(8\).png');
1206 | background-repeat: no-repeat;
1207 | background-size: cover;
1208 | background-position: center;
1209 | }
1210 |
1211 | .dashboard.port {
1212 | background-image: url('image/Img\ Placeholder\ \(3\).png');
1213 | background-repeat: no-repeat;
1214 | background-size: cover;
1215 | background-position: center;
1216 | }
1217 |
1218 | .dashboardheading.po {
1219 | margin-top: 37%;
1220 | font-size: 2.5vw;
1221 | }
1222 |
1223 | .about {
1224 | display: flex;
1225 | flex-direction: column;
1226 | justify-items: center;
1227 | padding: 10%;
1228 | background-image: url('image/illustration-about\ me@2x.png');
1229 | background-repeat: no-repeat;
1230 | background-size: 50%;
1231 | background-position: right;
1232 | }
1233 |
1234 | .aboutheader {
1235 | padding-top: 10%;
1236 | font-size: 5vw;
1237 | }
1238 |
1239 | #aboutmetext {
1240 | width: 50%;
1241 | padding-bottom: 5%;
1242 | font-weight: 400;
1243 | font-size: 1.5vw;
1244 | line-height: 24px;
1245 | color: #f4f5f7;
1246 | font-family: 'Inter', sans-serif;
1247 | font-style: normal;
1248 | }
1249 |
1250 | .getresumebutton {
1251 | width: 19%;
1252 | font-weight: 600;
1253 | font-size: 1.5vw;
1254 | }
1255 |
1256 | .holder {
1257 | display: flex;
1258 | flex-direction: column;
1259 | width: 30vw;
1260 | }
1261 |
1262 | .skilllist {
1263 | display: flex;
1264 | flex-direction: row;
1265 | padding-left: 2.5%;
1266 | margin: 0;
1267 | }
1268 |
1269 | .lang {
1270 | width: 10%;
1271 | font-size: 3vw;
1272 | font-family: 'Inter', sans-serif;
1273 | font-style: normal;
1274 | font-weight: 700;
1275 | }
1276 |
1277 | .lang#first {
1278 | margin-top: 7vh;
1279 | }
1280 |
1281 | .contact-form {
1282 | display: flex;
1283 | flex-direction: row;
1284 | align-items: center;
1285 | padding: 10%;
1286 | }
1287 |
1288 | .contact-form p {
1289 | flex: 1;
1290 | margin-top: -1.3%;
1291 | font-size: 2.3vw;
1292 | text-align: left;
1293 | font-family: 'Inter', sans-serif;
1294 | font-style: normal;
1295 | font-weight: 700;
1296 | }
1297 |
1298 | .contact-form form {
1299 | flex: 2;
1300 | margin-left: 4%;
1301 | }
1302 |
1303 | .social_navigation.desk {
1304 | display: flex;
1305 | flex-direction: row;
1306 | width: 30%;
1307 | }
1308 |
1309 | .liner {
1310 | display: none;
1311 | }
1312 |
1313 | .listitem {
1314 | align-items: flex-start;
1315 | }
1316 |
1317 | #third {
1318 | margin-left: 32%;
1319 | }
1320 |
1321 | .list {
1322 | padding-bottom: 2%;
1323 | font-family: 'Inter', sans-serif;
1324 | font-style: normal;
1325 | }
1326 |
1327 | .popclass {
1328 | display: flex;
1329 | width: 80vw;
1330 | height: 90vh;
1331 | margin: auto auto;
1332 | padding: 2%;
1333 | }
1334 |
1335 | .popupHeader {
1336 | width: 70%;
1337 | font-family: 'Crete Round', serif;
1338 | font-style: normal;
1339 | font-weight: 400;
1340 | font-size: 2.5vw;
1341 | line-height: 44px;
1342 | }
1343 |
1344 | .popupLanguage .languageitem {
1345 | color: #3c3a39;
1346 | width: auto;
1347 | padding: 4%;
1348 | white-space: nowrap;
1349 | font-style: normal;
1350 | font-weight: 400;
1351 | font-size: 1.4vw;
1352 | line-height: 16px;
1353 | margin-right: 2.5%;
1354 | }
1355 |
1356 | .popuptextimagemenu {
1357 | width: 100%;
1358 | display: flex;
1359 | flex-direction: row;
1360 | padding: 0;
1361 | margin: 0;
1362 | height: 90%;
1363 | }
1364 |
1365 | .popuptextimagemenu #imagepop {
1366 | height: 80vh;
1367 | }
1368 |
1369 | .popclass #placeholder {
1370 | grid-column: 1/5;
1371 | grid-row: 2/6;
1372 | padding: 0;
1373 | margin: 0;
1374 | object-fit: cover;
1375 | height: auto;
1376 | }
1377 |
1378 | .popupLanguage {
1379 | display: flex;
1380 | width: 30%;
1381 | margin-top: 1%;
1382 | padding-top: 1%;
1383 | margin-bottom: 2%;
1384 | padding-bottom: 0%;
1385 | }
1386 |
1387 | .popuptextbuttonmenu {
1388 | display: flex;
1389 | flex-direction: column;
1390 | width: auto;
1391 | padding-left: 2%;
1392 | }
1393 |
1394 | .popprojectsupporttext1 {
1395 | height: 70%;
1396 | white-space: wrap;
1397 | width: 100%;
1398 | margin-top: 1%;
1399 | flex: 3;
1400 | font-size: 1.2vw;
1401 | line-height: 30px;
1402 | color: #344563;
1403 | text-align: justify;
1404 | font-family: 'Inter', sans-serif;
1405 | font-style: normal;
1406 | font-weight: 400;
1407 | }
1408 |
1409 | .popButton {
1410 | width: 70%;
1411 | display: flex;
1412 | justify-content: space-between;
1413 | }
1414 |
1415 | .popimg {
1416 | margin-left: 6%;
1417 | }
1418 |
1419 | .img {
1420 | font-size: 1vw;
1421 | }
1422 |
1423 | .popButton .img {
1424 | width: 45%;
1425 | }
1426 |
1427 | .img > a {
1428 | color: white;
1429 | font-size: 1.3vw;
1430 | text-decoration: none;
1431 | display: flex;
1432 | align-items: center;
1433 | }
1434 |
1435 | .error {
1436 | color: red;
1437 | margin-left: 5%;
1438 | display: flex;
1439 | }
1440 | }
1441 |
--------------------------------------------------------------------------------