160 |
161 |
164 |
165 |
166 |
167 |
168 |
169 |
170 | About
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
185 |
186 |
187 |
188 |
191 |
192 |
193 | Creativity is my fuel, I bring your vision to life with a touch of uniqueness . Challenges are the opportunity for me, I tackle problems head-on with determination and finesse. I possess a versatile skill set that spans the latest technology and trends for a front-end magic. As I'm an engineer of the digital age, I can craft solution with AI.
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 | My skills
203 |
204 |
205 |
206 |
207 |
208 |
209 |
PROGRAMING LANGUAGES - C++ , PYTHON
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
Web Technologies - HTML, CSS, JavaScript
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
TOOLS - WordPress , Figma , MYSQL and can also use Some AI Tools
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
Other skills - social media manager, Digital marketing
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 | My Projects
253 |
254 |
255 |
256 |
257 |
258 |
259 |
261 |
264 |
ROLLS-ROYCE PREVIEW
265 |
266 |
267 | 3D Ghost preview watch it with
268 | patience
269 |
270 |
LIVE
271 |
274 |
275 |
276 |
277 |
278 |
279 |
282 |
TODO LIST
283 |
284 |
285 | Build a sleek and dynamic todo list by HTML, CSS, and JavaScript
286 |
287 |
LIVE
288 |
291 |
292 |
293 |
294 |
295 |
296 |
299 |
LINK TO QR
300 |
301 |
302 | Builted a Dynamic project which can genrate QR by Link
303 |
304 |
305 |
LIVE
306 |
309 |
310 |
311 |
312 |
313 |
314 |
317 |
PYTHON PROJECTS
318 |
319 |
320 | Crafted a engaging and Useful python projects
321 |
322 |
LIVE
323 |
324 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | // element toggle function
3 | const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
4 | // sidebar variables
5 | const sidebar = document.querySelector("[data-sidebar]");
6 | const sidebarBtn = document.querySelector("[data-sidebar-btn]");
7 | // sidebar toggle functionality for mobile
8 | sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
9 | // add click event to modal close button
10 | modalCloseBtn.addEventListener("click", testimonialsModalFunc);
11 | overlay.addEventListener("click", testimonialsModalFunc);
12 | // custom select variables
13 | const select = document.querySelector("[data-select]");
14 | const selectItems = document.querySelectorAll("[data-select-item]");
15 | const selectValue = document.querySelector("[data-selecct-value]");
16 | const filterBtn = document.querySelectorAll("[data-filter-btn]");
17 | select.addEventListener("click", function () { elementToggleFunc(this); });
18 | // add event in all select items
19 | for (let i = 0; i < selectItems.length; i++) {
20 | selectItems[i].addEventListener("click", function () {
21 |
22 | let selectedValue = this.innerText.toLowerCase();
23 | selectValue.innerText = this.innerText;
24 | elementToggleFunc(select);
25 | filterFunc(selectedValue);
26 |
27 | });
28 | }
29 | // filter variables
30 | const filterItems = document.querySelectorAll("[data-filter-item]");
31 | const filterFunc = function (selectedValue) {
32 | for (let i = 0; i < filterItems.length; i++) {
33 | if (selectedValue === "all") {
34 | filterItems[i].classList.add("active");
35 | } else if (selectedValue === filterItems[i].dataset.category) {
36 | filterItems[i].classList.add("active");
37 | } else {
38 | filterItems[i].classList.remove("active");
39 | }
40 | }
41 | }
42 | // add event in all filter button items for large screen
43 | let lastClickedBtn = filterBtn[0];
44 |
45 | for (let i = 0; i < filterBtn.length; i++) {
46 |
47 | filterBtn[i].addEventListener("click", function () {
48 |
49 | let selectedValue = this.innerText.toLowerCase();
50 | selectValue.innerText = this.innerText;
51 | filterFunc(selectedValue);
52 |
53 | lastClickedBtn.classList.remove("active");
54 | this.classList.add("active");
55 | lastClickedBtn = this;
56 |
57 | });
58 |
59 | document.addEventListener('DOMContentLoaded', function() {
60 | const portfolioButton = document.querySelector('[data-nav-link="Portfolio"]');
61 | const portfolioSection = document.querySelector('[data-page="portfolio"]');
62 |
63 | if (portfolioButton && portfolioSection) {
64 | portfolioButton.addEventListener('click', function(event) {
65 | event.preventDefault(); // Prevent default button behavior
66 | portfolioSection.scrollIntoView({ behavior: 'smooth' }); // Scroll to portfolio section
67 | });
68 | }
69 | });
70 | }
71 | // contact form variables
72 | const form = document.querySelector("[data-form]");
73 | const formInputs = document.querySelectorAll("[data-form-input]");
74 | const formBtn = document.querySelector("[data-form-btn]");
75 |
76 | // add event to all form input field
77 | for (let i = 0; i < formInputs.length; i++) {
78 | formInputs[i].addEventListener("input", function () {
79 |
80 | // check form validation
81 | if (form.checkValidity()) {
82 | formBtn.removeAttribute("disabled");
83 | } else {
84 | formBtn.setAttribute("disabled", "");
85 | }
86 |
87 | });
88 | }
89 | // page navigation variables
90 | const navigationLinks = document.querySelectorAll("[data-nav-link]");
91 | const pages = document.querySelectorAll("[data-page]");
92 |
93 | // add event to all nav link
94 | for (let i = 0; i < navigationLinks.length; i++) {
95 | navigationLinks[i].addEventListener("click", function () {
96 |
97 | for (let i = 0; i < pages.length; i++) {
98 | if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
99 | pages[i].classList.add("active");
100 | navigationLinks[i].classList.add("active");
101 | window.scrollTo(0, 0);
102 | } else {
103 | pages[i].classList.remove("active");
104 | navigationLinks[i].classList.remove("active");
105 | }
106 | }
107 |
108 | });
109 | }
110 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* css style */
2 | :root {
3 |
4 | /**
5 | * colors
6 | */
7 |
8 | /* gradient */
9 |
10 | --bg-gradient-onyx: linear-gradient(
11 | to bottom right,
12 | hsl(240, 1%, 25%) 3%,
13 | hsl(0, 0%, 19%) 97%
14 | );
15 | --bg-gradient-jet: linear-gradient(
16 | to bottom right,
17 | hsla(240, 1%, 18%, 0.251) 0%,
18 | hsla(240, 2%, 11%, 0) 100%
19 | ), hsl(240, 2%, 13%);
20 | --bg-gradient-yellow-1: linear-gradient(
21 | to bottom right,
22 | hsl(45, 100%, 71%) 0%,
23 | hsla(36, 100%, 69%, 0) 50%
24 | );
25 | --bg-gradient-yellow-2: linear-gradient(
26 | 135deg,
27 | hsla(45, 100%, 71%, 0.251) 0%,
28 | hsla(35, 100%, 68%, 0) 59.86%
29 | ), hsl(240, 2%, 13%);
30 | --border-gradient-onyx: linear-gradient(
31 | to bottom right,
32 | hsl(0, 0%, 25%) 0%,
33 | hsla(0, 0%, 25%, 0) 50%
34 | );
35 | --text-gradient-yellow: linear-gradient(
36 | to right,
37 | hsl(45, 100%, 72%),
38 | hsl(35, 100%, 68%)
39 | );
40 |
41 | /* solid */
42 |
43 | --jet: hsl(0, 0%, 22%);
44 | --onyx: hsl(240, 1%, 17%);
45 | --eerie-black-1: hsl(240, 2%, 13%);
46 | --eerie-black-2: hsl(240, 2%, 12%);
47 | --smoky-black: hsl(0, 0%, 7%);
48 | --white-1: hsl(0, 0%, 100%);
49 | --white-2: hsl(0, 0%, 98%);
50 | --orange-yellow-crayola: hsl(45, 100%, 72%);
51 | --vegas-gold: hsl(45, 54%, 58%);
52 | --light-gray: hsl(0, 0%, 84%);
53 | --light-gray-70: hsla(0, 0%, 84%, 0.7);
54 | --bittersweet-shimmer: hsl(0, 43%, 51%);
55 |
56 | /**
57 | * typography
58 | */
59 |
60 | /* font-family */
61 | --ff-poppins: 'Poppins', sans-serif;
62 |
63 | /* font-size */
64 | --fs-1: 24px;
65 | --fs-2: 18px;
66 | --fs-3: 17px;
67 | --fs-4: 16px;
68 | --fs-5: 15px;
69 | --fs-6: 14px;
70 | --fs-7: 13px;
71 | --fs-8: 11px;
72 |
73 | /* font-weight */
74 | --fw-300: 300;
75 | --fw-400: 400;
76 | --fw-500: 500;
77 | --fw-600: 600;
78 |
79 | /**
80 | * shadow
81 | */
82 |
83 | --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
84 | --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
85 | --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
86 | --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
87 | --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
88 |
89 | /**
90 | * transition
91 | */
92 |
93 | --transition-1: 0.25s ease;
94 | --transition-2: 0.5s ease-in-out;
95 |
96 | }
97 |
98 | /* project of kavya trivedi */
99 |
100 | /*-----------------------------------*\
101 | #RESET
102 | \*-----------------------------------*/
103 |
104 | *, *::before, *::after {
105 | margin: 0;
106 | padding: 0;
107 | box-sizing: border-box;
108 | }
109 |
110 | a { text-decoration: none; }
111 |
112 | li { list-style: none; }
113 |
114 | img, ion-icon, a, button, time, span { display: block; }
115 |
116 | button {
117 | font: inherit;
118 | background: none;
119 | border: none;
120 | text-align: left;
121 | cursor: pointer;
122 | }
123 |
124 | input, textarea {
125 | display: block;
126 | width: 100%;
127 | background: none;
128 | font: inherit;
129 | }
130 |
131 | ::selection {
132 | background: var(--orange-yellow-crayola);
133 | color: var(--smoky-black);
134 | }
135 |
136 | :focus { outline-color: var(--orange-yellow-crayola); }
137 |
138 | html { font-family: var(--ff-poppins); }
139 |
140 | body { background: var(--smoky-black); }
141 |
142 |
143 |
144 |
145 | /* project of kavya trivedi */
146 | /*-----------------------------------*\
147 | #REUSED STYLE
148 | \*-----------------------------------*/
149 |
150 | .sidebar,
151 | article {
152 | background: var(--eerie-black-2);
153 | border: 1px solid var(--jet);
154 | border-radius: 20px;
155 | padding: 15px;
156 | box-shadow: var(--shadow-1);
157 | z-index: 1;
158 | }
159 |
160 | .separator {
161 | width: 100%;
162 | height: 1px;
163 | background: var(--jet);
164 | margin: 16px 0;
165 | }
166 |
167 | .icon-box {
168 | position: relative;
169 | background: var(--border-gradient-onyx);
170 | width: 30px;
171 | height: 30px;
172 | border-radius: 8px;
173 | display: flex;
174 | justify-content: center;
175 | align-items: center;
176 | font-size: 16px;
177 | color: var(--orange-yellow-crayola);
178 | box-shadow: var(--shadow-1);
179 | z-index: 1;
180 | }
181 |
182 | .icon-box::before {
183 | content: "";
184 | position: absolute;
185 | inset: 1px;
186 | background: var(--eerie-black-1);
187 | border-radius: inherit;
188 | z-index: -1;
189 | }
190 |
191 | .icon-box ion-icon { --ionicon-stroke-width: 35px; }
192 |
193 | article { display: none; }
194 |
195 | article.active {
196 | display: block;
197 | animation: fade 0.5s ease backwards;
198 | }
199 |
200 | @keyframes fade {
201 | 0% { opacity: 0; }
202 | 100% { opacity: 1; }
203 | }
204 |
205 | .h2,
206 | .h3,
207 | .h4,
208 | .h5 {
209 | color: var(--white-2);
210 | text-transform: capitalize;
211 | }
212 |
213 | .h2 { font-size: var(--fs-1); }
214 |
215 | .h3 { font-size: var(--fs-2); }
216 |
217 | .h4 { font-size: var(--fs-4); }
218 |
219 | .h5 {
220 | font-size: var(--fs-7);
221 | font-weight: var(--fw-500);
222 | }
223 |
224 | .article-title {
225 | position: relative;
226 | padding-bottom: 7px;
227 | }
228 |
229 | .article-title::after {
230 | content: "";
231 | position: absolute;
232 | bottom: 0;
233 | left: 0;
234 | width: 30px;
235 | height: 3px;
236 | background: var(--text-gradient-yellow);
237 | border-radius: 3px;
238 | }
239 |
240 | .has-scrollbar::-webkit-scrollbar {
241 | width: 5px; /* for vertical scrollbar */
242 | height: 5px; /* for horizontal scrollbar */
243 | }
244 |
245 | .has-scrollbar::-webkit-scrollbar-track {
246 | background: var(--onyx);
247 | border-radius: 5px;
248 | }
249 |
250 | .has-scrollbar::-webkit-scrollbar-thumb {
251 | background: var(--orange-yellow-crayola);
252 | border-radius: 5px;
253 | }
254 |
255 | .has-scrollbar::-webkit-scrollbar-button { width: 20px; }
256 |
257 | .content-card {
258 | position: relative;
259 | background: var(--border-gradient-onyx);
260 | padding: 15px;
261 | padding-top: 45px;
262 | border-radius: 14px;
263 | box-shadow: var(--shadow-2);
264 | cursor: pointer;
265 | z-index: 1;
266 | }
267 |
268 | .content-card::before {
269 | content: "";
270 | position: absolute;
271 | inset: 1px;
272 | background: var(--bg-gradient-jet);
273 | border-radius: inherit;
274 | z-index: -1;
275 | }
276 |
277 | /* project of kavya trivedi */
278 | /*-----------------------------------*\
279 | #MAIN
280 | \*-----------------------------------*/
281 |
282 | main {
283 | margin: 15px 12px;
284 | margin-bottom: 75px;
285 | min-width: 259px;
286 | }
287 |
288 | /*-----------------------------------*\
289 | #SIDEBAR
290 | \*-----------------------------------*/
291 |
292 | .sidebar {
293 | margin-bottom: 15px;
294 | max-height: 112px;
295 | overflow: hidden;
296 | transition: var(--transition-2);
297 | }
298 |
299 | .sidebar.active { max-height: 405px; }
300 |
301 | .sidebar-info {
302 | position: relative;
303 | display: flex;
304 | justify-content: flex-start;
305 | align-items: center;
306 | gap: 15px;
307 | }
308 |
309 | .avatar-box {
310 | background: var(--bg-gradient-onyx);
311 | border-radius: 20px;
312 | }
313 |
314 | .info-content .name {
315 | color: var(--white-2);
316 | font-size: var(--fs-3);
317 | font-weight: var(--fw-500);
318 | letter-spacing: -0.25px;
319 | margin-bottom: 10px;
320 | }
321 |
322 | .info-content .title {
323 | color: var(--white-1);
324 | background: var(--onyx);
325 | font-size: var(--fs-8);
326 | font-weight: var(--fw-300);
327 | width: max-content;
328 | padding: 3px 12px;
329 | border-radius: 8px;
330 | }
331 |
332 | .info_more-btn {
333 | position: absolute;
334 | top: -15px;
335 | right: -15px;
336 | border-radius: 0 15px;
337 | font-size: 13px;
338 | color: var(--orange-yellow-crayola);
339 | background: var(--border-gradient-onyx);
340 | padding: 10px;
341 | box-shadow: var(--shadow-2);
342 | transition: var(--transition-1);
343 | z-index: 1;
344 | }
345 |
346 | .info_more-btn::before {
347 | content: "";
348 | position: absolute;
349 | inset: 1px;
350 | border-radius: inherit;
351 | background: var(--bg-gradient-jet);
352 | transition: var(--transition-1);
353 | z-index: -1;
354 | }
355 |
356 | .info_more-btn:hover,
357 | .info_more-btn:focus { background: var(--bg-gradient-yellow-1); }
358 |
359 | .info_more-btn:hover::before,
360 | .info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); }
361 |
362 | .info_more-btn span { display: none; }
363 |
364 | .sidebar-info_more {
365 | opacity: 0;
366 | visibility: hidden;
367 | transition: var(--transition-2);
368 | }
369 |
370 | .sidebar.active .sidebar-info_more {
371 | opacity: 1;
372 | visibility: visible;
373 | }
374 |
375 | .contacts-list {
376 | display: grid;
377 | grid-template-columns: 1fr;
378 | gap: 16px;
379 | }
380 |
381 | .contact-item {
382 | min-width: 100%;
383 | display: flex;
384 | align-items: center;
385 | gap: 16px;
386 | }
387 |
388 | .contact-info {
389 | max-width: calc(100% - 46px);
390 | width: calc(100% - 46px);
391 | }
392 |
393 | .contact-title {
394 | color: var(--light-gray-70);
395 | font-size: var(--fs-8);
396 | text-transform: uppercase;
397 | margin-bottom: 2px;
398 | }
399 |
400 | .contact-info :is(.contact-link, time, address) {
401 | color: var(--white-2);
402 | font-size: var(--fs-7);
403 | }
404 |
405 | .contact-info address { font-style: normal; }
406 |
407 | .social-list {
408 | display: flex;
409 | justify-content: flex-start;
410 | align-items: center;
411 | gap: 15px;
412 | padding-bottom: 4px;
413 | padding-left: 7px;
414 | }
415 |
416 | .social-item .social-link {
417 | color: var(--light-gray-70);
418 | font-size: 18px;
419 | }
420 |
421 | /* project of kavya trivedi */
422 | .social-item .social-link:hover { color: var(--light-gray); }
423 |
424 | /*-----------------------------------*\
425 | #NAVBAR
426 | \*-----------------------------------*/
427 |
428 | .navbar {
429 | position: fixed;
430 | bottom: 0;
431 | left: 0;
432 | width: 100%;
433 | background: hsla(240, 1%, 17%, 0.75);
434 | backdrop-filter: blur(10px);
435 | border: 1px solid var(--jet);
436 | border-radius: 12px 12px 0 0;
437 | box-shadow: var(--shadow-2);
438 | z-index: 5;
439 | }
440 |
441 | .navbar-list {
442 | display: flex;
443 | flex-wrap: wrap;
444 | justify-content: center;
445 | align-items: center;
446 | padding: 0 10px;
447 | }
448 |
449 | .navbar-link {
450 | color: var(--light-gray);
451 | font-size: var(--fs-8);
452 | padding: 20px 7px;
453 | transition: color var(--transition-1);
454 | }
455 | /* project of kavya trivedi */
456 | .navbar-link:hover,
457 | .navbar-link:focus { color: var(--light-gray-70); }
458 |
459 | .navbar-link.active { color: var(--orange-yellow-crayola); }
460 |
461 |
462 | /*-----------------------------------*\
463 | #ABOUT
464 | \*-----------------------------------*/
465 |
466 | .about .article-title { margin-bottom: 15px; }
467 |
468 | .about-text {
469 | color: var(--light-gray);
470 | font-size: var(--fs-6);
471 | font-weight: var(--fw-300);
472 | line-height: 1.6;
473 | }
474 |
475 | .about-text p { margin-bottom: 15px; }
476 |
477 | /**
478 | * #service
479 | */
480 | /* project of kavya trivedi */
481 | .service { margin-bottom: 35px; }
482 |
483 | .service-title { margin-bottom: 20px; }
484 |
485 | .service-list {
486 | display: grid;
487 | grid-template-columns: 1fr;
488 | gap: 20px;
489 | }
490 |
491 | .service-item {
492 | position: relative;
493 | background: var(--border-gradient-onyx);
494 | padding: 20px;
495 | border-radius: 14px;
496 | box-shadow: var(--shadow-2);
497 | z-index: 1;
498 | }
499 |
500 | .service-item::before {
501 | content: "";
502 | position: absolute;
503 | inset: 1px;
504 | background: var(--bg-gradient-jet);
505 | border-radius: inherit;
506 | z-index: -1;
507 | }
508 | /* project of kavya trivedi */
509 | .service-icon-box { margin-bottom: 10px; }
510 |
511 | .service-icon-box img { margin: auto; }
512 |
513 | .service-content-box { text-align: center; }
514 |
515 | .service-item-title { margin-bottom: 7px; }
516 |
517 | .service-item-text {
518 | color: var(--light-gray);
519 | font-size: var(--fs-6);
520 | font-weight: var(--fw-3);
521 | line-height: 1.6;
522 | }
523 |
524 | /*-----------------------------------*\
525 | #RESUME
526 | \*-----------------------------------*/
527 |
528 | .article-title { margin-bottom: 30px; }
529 | /* project of kavya trivedi */
530 |
531 | /**
532 | * skills
533 | */
534 |
535 | .skills-title { margin-bottom: 20px; }
536 |
537 | .skills-list { padding: 20px; }
538 |
539 |
540 | .skills-item:not(:last-child) { margin-bottom: 15px; }
541 |
542 | .skill .title-wrapper {
543 | display: flex;
544 | align-items: center;
545 | gap: 5px;
546 | margin-bottom: 8px;
547 | }
548 |
549 | .skill .title-wrapper data {
550 | color: var(--light-gray);
551 | font-size: var(--fs-7);
552 | font-weight: var(--fw-300);
553 | }
554 |
555 | .skill-progress-bg {
556 | background: var(--jet);
557 | width: 100%;
558 | height: 8px;
559 | border-radius: 10px;
560 | }
561 | /* project of kavya trivedi */
562 | .skill-progress-fill {
563 | background: var(--text-gradient-yellow);
564 | height: 100%;
565 | border-radius: inherit;
566 | }
567 |
568 |
569 |
570 | .contact-form { margin-bottom: 10px; }
571 |
572 | /* project of kavya trivedi */
573 | textarea.form-input::-webkit-resizer { display: none; }
574 |
575 | .form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }
576 |
577 | /*-----------------------------------*\
578 | #RESPONSIVE
579 | \*-----------------------------------*/
580 |
581 | /**
582 | * responsive larger than 450px screen
583 | */
584 |
585 | @media (min-width: 450px) {
586 |
587 | /* project of kavya trivedi */
588 | /**
589 | * responsive larger than 580px screen
590 | */
591 |
592 | @media (min-width: 580px) {
593 |
594 | /**
595 | * CUSTOM PROPERTY
596 | */
597 |
598 | :root {
599 |
600 | /**
601 | * typography
602 | */
603 |
604 | --fs-1: 32px;
605 | --fs-2: 24px;
606 | --fs-3: 26px;
607 | --fs-4: 18px;
608 | --fs-6: 15px;
609 | --fs-7: 15px;
610 | --fs-8: 12px;
611 |
612 | }
613 |
614 | /**
615 | * #REUSED STYLE
616 | */
617 |
618 | .sidebar, article {
619 | width: 520px;
620 | margin-inline: auto;
621 | padding: 30px;
622 | }
623 |
624 | .article-title {
625 | font-weight: var(--fw-600);
626 | padding-bottom: 15px;
627 | }
628 |
629 | .article-title::after {
630 | width: 40px;
631 | height: 5px;
632 | }
633 |
634 | .icon-box {
635 | width: 48px;
636 | height: 48px;
637 | border-radius: 12px;
638 | font-size: 18px;
639 | }
640 |
641 | /**
642 | * #MAIN
643 | */
644 |
645 | main {
646 | margin-top: 60px;
647 | margin-bottom: 100px;
648 | }
649 |
650 | /**
651 | * #SIDEBAR
652 | */
653 |
654 | .sidebar {
655 | max-height: 180px;
656 | margin-bottom: 30px;
657 | }
658 |
659 | .sidebar.active { max-height: 584px; }
660 |
661 | .sidebar-info { gap: 25px; }
662 |
663 | .avatar-box { border-radius: 30px; }
664 |
665 | .avatar-box img { width: 120px; }
666 |
667 | .info-content .name { margin-bottom: 15px; }
668 |
669 | .info-content .title { padding: 5px 18px; }
670 |
671 | .info_more-btn {
672 | top: -30px;
673 | right: -30px;
674 | padding: 10px 15px;
675 | }
676 |
677 | .info_more-btn span {
678 | display: block;
679 | font-size: var(--fs-8);
680 | }
681 |
682 | .info_more-btn ion-icon { display: none; }
683 |
684 | .separator { margin: 32px 0; }
685 |
686 | .contacts-list { gap: 20px; }
687 |
688 | .contact-info {
689 | max-width: calc(100% - 64px);
690 | width: calc(100% - 64px);
691 | }
692 |
693 | /**
694 | * #NAVBAR
695 | */
696 |
697 | .navbar { border-radius: 20px 20px 0 0; }
698 |
699 | .navbar-list { gap: 20px; }
700 |
701 | .navbar-link { --fs-8: 14px; }
702 |
703 | /**
704 | * #ABOUT
705 | */
706 |
707 | .about .article-title { margin-bottom: 20px; }
708 |
709 | .about-text { margin-bottom: 40px; }
710 |
711 | /* service */
712 |
713 | .service-item {
714 | display: flex;
715 | justify-content: flex-start;
716 | align-items: flex-start;
717 | gap: 18px;
718 | padding: 30px;
719 | }
720 |
721 | .service-icon-box {
722 | margin-bottom: 0;
723 | margin-top: 5px;
724 | }
725 |
726 | .service-content-box { text-align: left; }
727 |
728 | .skills-item:not(:last-child) { margin-bottom: 25px; }
729 |
730 | /**
731 | * responsive larger than 768px screen
732 | */
733 |
734 | @media (min-width: 768px) {
735 |
736 | /**
737 | * REUSED STYLE
738 | */
739 |
740 | .sidebar, article { width: 700px; }
741 |
742 | .has-scrollbar::-webkit-scrollbar-button { width: 100px; }
743 |
744 | /* project of kavya trivedi */
745 | /**
746 | * SIDEBAR
747 | */
748 |
749 | .contacts-list {
750 | grid-template-columns: 1fr 1fr;
751 | gap: 30px 15px;
752 | }
753 |
754 | /**
755 | * NAVBAR
756 | */
757 |
758 | .navbar-link { --fs-8: 15px; }
759 |
760 | /**
761 | * PORTFOLIO
762 | */
763 |
764 | .article-title { padding-bottom: 20px; }
765 |
766 | /* project of kavya trivedi */
767 | /**
768 | * responsive larger than 1024px screen
769 | */
770 |
771 | @media (min-width: 1024px) {
772 |
773 | /**
774 | * CUSTOM PROPERTY
775 | */
776 |
777 | :root {
778 |
779 | /**
780 | * shadow
781 | */
782 |
783 | --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
784 | --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
785 | --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
786 |
787 | }
788 |
789 | /**
790 | * REUSED STYLE
791 | */
792 |
793 | .sidebar, article {
794 | width: 950px;
795 | box-shadow: var(--shadow-5);
796 | }
797 |
798 | /**
799 | * MAIN
800 | */
801 |
802 | main { margin-bottom: 60px; }
803 |
804 | .main-content {
805 | position: relative;
806 | width: max-content;
807 | margin: auto;
808 | }
809 |
810 | /**
811 | * NAVBAR
812 | */
813 |
814 | .navbar {
815 | position: absolute;
816 | bottom: auto;
817 | top: 0;
818 | left: auto;
819 | right: 0;
820 | width: max-content;
821 | border-radius: 0 20px;
822 | padding: 0 20px;
823 | box-shadow: none;
824 | }
825 |
826 | .navbar-list {
827 | gap: 30px;
828 | padding: 0 20px;
829 | }
830 |
831 | .navbar-link { font-weight: var(--fw-500); }
832 |
833 | /* project of kavya trivedi */
834 | /**
835 | * ABOUT
836 | */
837 |
838 | /* service */
839 |
840 | .service-list {
841 | grid-template-columns: 1fr 1fr;
842 | gap: 20px 25px;
843 | }
844 |
845 | /**
846 | * responsive larger than 1250px screen
847 | */
848 |
849 | @media (min-width: 1250px) {
850 |
851 | /**
852 | * RESET
853 | */
854 |
855 | body::-webkit-scrollbar { width: 20px; }
856 |
857 | body::-webkit-scrollbar-track { background: var(--smoky-black); }
858 |
859 | body::-webkit-scrollbar-thumb {
860 | border: 5px solid var(--smoky-black);
861 | background: hsla(0, 0%, 100%, 0.1);
862 | border-radius: 20px;
863 | box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
864 | inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
865 | }
866 |
867 | body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }
868 |
869 | body::-webkit-scrollbar-button { height: 60px; }
870 |
871 | /**
872 | * REUSED STYLE
873 | */
874 |
875 | .sidebar, article { width: auto; }
876 |
877 | article { min-height: 100%; }
878 |
879 | /**
880 | * MAIN
881 | */
882 |
883 | main {
884 | max-width: 1200px;
885 | margin-inline: auto;
886 | display: flex;
887 | justify-content: center;
888 | align-items: stretch;
889 | gap: 25px;
890 | }
891 |
892 | .main-content {
893 | min-width: 75%;
894 | width: 75%;
895 | margin: 0;
896 | }
897 |
898 | /**
899 | * SIDEBAR
900 | */
901 |
902 | .sidebar {
903 | position: sticky;
904 | top: 60px;
905 | max-height: max-content;
906 | height: 100%;
907 | margin-bottom: 0;
908 | padding-top: 60px;
909 | z-index: 1;
910 | }
911 |
912 | .sidebar-info { flex-direction: column; }
913 | /* project of kavya trivedi */
914 | .avatar-box img { width: 150px; }
915 |
916 | .info-content .name {
917 | white-space: nowrap;
918 | text-align: center;
919 | }
920 |
921 | .info-content .title { margin: auto; }
922 |
923 | .info_more-btn { display: none; }
924 |
925 | .sidebar-info_more {
926 | opacity: 1;
927 | visibility: visible;
928 | }
929 |
930 | .contacts-list { grid-template-columns: 1fr; }
931 |
932 | .contact-info :is(.contact-link) {
933 | white-space: nowrap;
934 | overflow: hidden;
935 | text-overflow: ellipsis;
936 | }
937 |
938 | .contact-info :is(.contact-link, time, address) {
939 | --fs-7: 14px;
940 | font-weight: var(--fw-300);
941 | }
942 |
943 | .separator:last-of-type {
944 | margin: 15px 0;
945 | opacity: 0;
946 | }
947 | /* project of kavya trivedi */
948 | .social-list { justify-content: center; }
949 |
950 | }
951 | }
952 | }
953 | }
954 | }
955 |
--------------------------------------------------------------------------------
261 | 264 |272 | 273 |.png)
279 | 282 |289 | 290 |
296 | 299 |307 | 308 |
314 | 317 |325 | 326 |