/*=============== GOOGLE FONTS ===============*/ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); /*=============== VARIABLES CSS ===============*/ :root { --header-height: 3.5rem; /*========== Colors (Dark as default) ==========*/ --first-hue: 250; --sat: 66%; --lig: 75%; --second-hue: 219; --first-color: hsl(var(--first-hue), var(--sat), var(--lig)); --first-color-alt: hsl(var(--first-hue), var(--sat), 71%); --title-color: hsl(var(--second-hue), 15%, 95%); --text-color: hsl(var(--second-hue), 8%, 75%); --text-color-light: hsl(var(--second-hue), 4%, 55%); --body-color: hsl(var(--second-hue), 48%, 8%); --container-color: hsl(var(--second-hue), 32%, 12%); /* Extra surfaces (so themes can swap them) */ --light-bg: hsl(var(--second-hue), 32%, 16%); /* project cards in dark */ --nav-bg: hsla(var(--second-hue), 32%, 16%, .8); /* mobile bottom nav pill */ /*========== Font and typography ==========*/ --body-font: 'Poppins', sans-serif; --biggest-font-size: 1.6rem; /* slightly smaller hero on mobile */ --h1-font-size: 1.5rem; --h2-font-size: 1.25rem; --h3-font-size: 1rem; --normal-font-size: .938rem; --small-font-size: .813rem; --smaller-font-size: .75rem; --tiny-font-size: .625rem; /*========== Font weight ==========*/ --font-medium: 500; --font-semibold: 600; /*========== z index ==========*/ --z-tooltip: 10; --z-fixed: 100; --z-modal: 1000; } /* Light theme overrides (apply when ) */ .light-theme{ --title-color: hsl(var(--second-hue), 15%, 15%); --text-color: hsl(var(--second-hue), 8%, 35%); --text-color-light: hsl(var(--second-hue), 4%, 55%); --body-color: hsl(var(--second-hue), 100%, 99%); --container-color: hsl(var(--second-hue), 20%, 96%); --light-bg: #ffffff; --nav-bg: hsla(var(--second-hue), 30%, 92%, .8); /* you can also soften --first-color-alt if desired */ } /* Responsive typography */ @media screen and (min-width: 968px) { :root { --biggest-font-size: 2.1rem; /* slightly smaller hero on desktop */ --h1-font-size: 2rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --small-font-size: .875rem; --smaller-font-size: .813rem; } } /*=============== BASE ===============*/ * { box-sizing: border-box; padding: 0; margin: 0; } html { scroll-behavior: smooth; } body, button, input, textarea { font-family: var(--body-font); font-size: var(--normal-font-size); } body { background-color: var(--body-color); color: var(--text-color); transition: .4s; /* smooth theme toggle */ } h1, h2, h3 { color: var(--title-color); font-weight: var(--font-semibold); } ul { list-style: none; } a { text-decoration: none; } button { cursor: pointer; border: none; outline: none; } img { max-width: 100%; height: auto; } /*=============== REUSABLE CSS CLASSES ===============*/ .container { max-width: 968px; margin-left: 1rem; margin-right: 1rem; } .grid { display: grid; gap: 1.25rem; } .main { overflow: hidden; } .section { padding: 4.5rem 0 1rem; } .section__title, .section__subtitle { text-align: center; } .section__title { font-size: var(--h2-font-size); color: var(--first-color); margin-bottom: 2rem; } .section__subtitle { display: block; font-size: var(--smaller-font-size); color: var(--text-color-light); } /*=============== HEADER & NAV ===============*/ .header{ position: fixed; top: 0; left: 0; width: 100%; background-color: var(--body-color); z-index: var(--z-fixed); } .nav{ height: var(--header-height); /* fixed: was --deader-height */ display: flex; justify-content: space-between; align-items: center; gap: .75rem; } .nav__logo{ color: var(--first-color); font-weight: var(--font-medium); transition: .4s; } .nav__logo:hover{ color: var(--first-color-alt); } /* Mobile bottom pill menu */ .nav__menu{ position: fixed; bottom: 1rem; background-color: var(--nav-bg); width: 90%; border-radius: 4rem; padding: 1rem 2.25rem; backdrop-filter: blur(10px); left: 0; right: 0; margin: 0 auto; } .nav__list{ display:flex; justify-content: space-between; align-items: center; } .nav__link{ color: var(--text-color); font-size: 1.25rem; padding: .4rem; display: flex; border-radius: 5rem; } /* Top nav (desktop/tablet) */ .nav__top{ display: none; /* hidden on phones */ align-items: center; gap: 1rem; list-style: none; margin: 0; padding: 0; justify-content: flex-end; /* pushes items to the right */ flex: 1; } .nav__top-link{ color: var(--text-color); font-weight: var(--font-medium); font-size: .95rem; padding: .25rem .4rem; border-radius: .4rem; transition: .2s; text-decoration: none; } .nav__top-link:hover{ color: var(--title-color); } /* Active state for top nav links */ .nav__top-link.active-link { background: linear-gradient(180deg, hsla(var(--first-hue), var(--sat), var(--lig), 1), hsla(var(--first-hue), var(--sat), var(--lig), .2) ); box-shadow: 0 0 16px hsla(var(--first-hue), var(--sat), var(--lig), .4); color: var(--title-color); } /* Show top nav & hide bottom pill on wider screens */ @media screen and (min-width: 768px){ .nav__menu{ display: none; } .nav__top{ display: flex; } } /* Active link */ .active-link{ background: linear-gradient(180deg, hsla(var(--first-hue),var(--sat), var(--lig), 1), hsla(var(--first-hue),var(--sat), var(--lig), .2) ); box-shadow: 0 0 16px hsla(var(--first-hue),var(--sat), var(--lig), .4); } /* Change background header on scroll */ .scroll-header{ box-shadow: 0 4px 4px hsla(0, 0%, 4%, .3); } /*=============== HOME ===============*/ .home__container{ position: relative; row-gap: 4.5rem; padding-top: 2rem; } .home__data{ text-align: center; } .home__greeting{ font-size: var(--small-font-size); font-weight: var(--font-medium); } .home__greeting{ display: block; color: var(--title-color); margin-bottom: .25rem; } .home__education{ font-size: var(--small-font-size); font-weight: var(--font-medium); } .home__education{ color: var(--text-color); margin-bottom: 2.5rem; } /* fixed var name */ .home__name{ font-size: var(--biggest-font-size); } /* fixed var name */ .home_img{ width: 150px; } /* a touch smaller */ .home__handle{ justify-self: center; width: 170px; /* smaller */ height: 270px; /* smaller */ background: linear-gradient(180deg, hsla(var(--first-hue), var(--sat), var(--lig),1), hsla(var(--first-hue), var(--sat), var(--lig),.2) ); border-radius: 10rem 10rem 1rem 1rem; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .home__buttons{ display: flex; justify-content: center; align-items: center; gap: 1.5rem; } .home__social, .home__scroll{ position: absolute; } .home__social{ bottom: 5rem; left: 0; display: grid; row-gap: .5rem; } .home__social-link{ width: max-content; background-color: var(--container-color); color: var(--first-color); padding: 0.25rem; border-radius: 0.25rem; display: flex; font-size: 1rem; transition: .4s; } .home__social-link:hover{ background-color: var(--first-color); color: #fff; } .home__scroll{ color: var(--first-color); right: -1.5rem; bottom: 4rem; display: grid; row-gap: 2.25rem; justify-items: center; } .home__scroll-icon{ font-size: 1.25rem; } .home__scroll-name{ font-size: var(--smaller-font-size); transform: rotate(-90deg); } /*=============== BUTTONS ===============*/ .button{ display: inline-block; background-color: var(--first-color); color: var(--body-color); padding: 0.75rem 1rem; border-radius: .5rem; font-weight: var(--font-medium); transition: .4s; } .button--ghost{ background-color: var(--first-color); border: 2px solid var(--first-color); color: var(--body-color); } .button:hover{ background-color: var(--body-color); color: var(--first-color); } .button2{ display: inline-block; background-color: var(--container-color); color: var(--first-color); padding: 0.75rem 1rem; border-radius: .5rem; font-weight: var(--font-medium); transition: .4s; } .button2--ghost{ background-color: var(--first-color); border: 2px solid var(--first-color); color: var(--body-color); } .button2:hover{ background-color: var(--first-color); color: var(--body-color); } /*=============== ABOUT ===============*/ .about__container{ row-gap: 2.5rem; } .about__data{ text-align: center; } .about__info{ display:grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 2rem; } .about__box{ background-color: var(--container-color); border-radius: 0.75rem; padding: .75rem .5rem; } .about__icon{ font-size: 1.5rem; color: var(--first-color); margin-bottom: .5rem; } .about__title{ font-size: var(--small-font-size); } about__subtitle{ font-size: var(--tiny-font-size); } .about__description{ text-align: center; margin-bottom: 2rem; } /* optional custom grid helpers you added */ .two-row-grid{ display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 2rem; } .research-center{ grid-column: 1 / -1; justify-self: center; text-align: center; width: 50%; padding: 1.5rem; box-sizing: border-box; } /*=============== EXPERIENCE / EDUCATION ===============*/ .experience__container{ row-gap: 2rem; padding-top: 1rem; } .experience__content{ background-color: var(--container-color); padding: 1.5rem; border-radius: 1.25rem; } .experience__title{ font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--first-color); text-align: center; margin-bottom: 1.5rem; } .experience__data{ display: flex; flex-direction: column; text-align: center; gap: .5rem; } .experience__location{ font-size: var(--small-font-size); font-weight: 500; } .experience__duration{ font-size: var(--smaller-font-size); color: var(--first-color); } .experience__details{ text-align: left; } .experience__details ul{ list-style: none; padding: 0; } .experience__details li{ padding: .25rem 0; } @media (max-width: 768px){ .experience__box{ flex-direction: column; text-align: center; } } .education__container{ display: grid; grid-template-columns: 1fr; row-gap: 2rem; padding-top: 1rem; max-width: 1000px; margin: 0 auto; } .education__content{ background-color: var(--container-color); padding: 1.5rem; border-radius: 1.25rem; text-align: center; position: relative; } .education__title{ font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--first-color); text-align: center; margin-bottom: 1.5rem; } .timeline{ position: relative; padding-left: 2rem; } .timeline-entry{ position: relative; padding-bottom: 2rem; } .timeline-icon{ position: center; left: 17rem; top: 6px; font-size: 1rem; color: var(--first-color); } .timeline-content{ padding-left: 1.5rem; color: var(--text-color); } .timeline-content h4{ font-size: 1.1rem; font-weight: bold; color: var(--title-color); } .timeline-content p{ font-size: .95rem; color: var(--text-color-light); } .gpa{ font-weight: bold; color: var(--first-color); } /*=============== SKILLS ===============*/ .skills__container{ row-gap: 2rem; padding-top: 1rem; } .skills__content{ background-color: var(--container-color); padding: 1.5rem; border-radius: 1.25rem; } .skills__title{ font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--first-color); text-align: center; margin-bottom: 1.5rem; } .skills__box{ display: flex; justify-content: center; column-gap: 5rem; } .skills__group{ display: grid; align-content: flex-start; row-gap: 1rem; } .skills__data{ display: flex; column-gap: .5rem; } .skills .bxs-badge-check{ font-size: 1rem; color: var(--first-color); } /*=============== PROJECTS ===============*/ .projects__container{ display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem; padding-top: 1rem; } .projects__content{ background-color: var(--container-color); padding: 1.5rem; border-radius: 1.25rem; } .projects__title{ font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--first-color); text-align: center; margin-bottom: 1.5rem; } .projects__group{ display: flex; flex-direction: column; gap: 1rem; flex: 1; } .project__data{ background-color: var(--light-bg); padding: 1rem; border-radius: .75rem; box-shadow: 0 4px 8px rgba(0,0,0,.1); transition: transform .3s ease-in-out; } .project__data:hover{ transform: translateY(-5px); } .project__name{ font-size: 1.2rem; font-weight: 600; margin-bottom: .5rem; } .project__description{ font-size: 1rem; color: var(--text-color-light); margin-bottom: .5rem; } .project__link{ font-size: .9rem; font-weight: 500; color: var(--first-color); text-decoration: none; transition: color .3s ease-in-out; } .project__link:hover{ color: var(--first-color-alt); } @media (max-width: 768px){ .projects__container{ grid-template-columns: 1fr; } .projects__box{ flex-direction: column; gap: 1rem; } } /*=============== CONTACT ===============*/ .contact__container{ row-gap: 3rem; padding-bottom: 3rem; } .contact__title{ text-align: center; font-size: var(--h3-font-size); margin-bottom: 1.5rem; } .contact__info{ display: grid; gap:1rem; } .contact__card{ background-color: var(--container-color); padding: 1rem; border-radius: .75rem; text-align: center; } .contact__card-icon{ font-size: 2rem; color: var(--title-color); margin-bottom: .25rem; } contact__card-title, contact__card-data{ font-size: var(--small-font-size); } .contact__card-title{ font-weight: var(--font-medium); } .contact__card-data{ display: block; margin-bottom: .75rem; } .contact__button{ color: var(--first-color); font-size: var(--small-font-size); display: flex; align-items: center; justify-content: center; column-gap: .25rem; } .contact__button:hover .contact__button-icon{ transform: translateX(.25rem); } .contact__button-icon{ font-size: 1rem; transition: .4s; } .contact__form-div{ position: relative; margin-bottom: 2rem; height: 4rem; } .contact_form-input{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid var(--text-color); background: none; color: var(--text-color); outline: none; padding: 1.5rem; border-radius: .75rem; z-index: 1; } .contact__form-tag{ position: absolute; top: -.75rem; left: 1.25rem; font-size: var(--smaller-font-size); padding: .25rem; background-color: var(--body-color); z-index: 10; } .contact__form-area{ height: 11rem; } .contact__form-area textarea{ resize: none; } /*=============== FOOTER ===============*/ .footer{ background-color: var(--first-color); } .footer__container{ padding: 2rem 0 6rem; } /*=============== BREAKPOINTS ===============*/ /* For medium devices */ @media screen and (min-width: 576px){ .nav__menu{ width: 328px; left: 0; right: 0; margin: 0 auto; } } /* For large devices */ @media screen and (min-width: 992px){ .container{ margin-left: auto; margin-right: auto; } .section{ padding: 6.5rem 0 1rem; } .section_title{ margin-bottom: 3.5rem; } .nav{ height: calc(var(--header-height) + 1rem); } .home__handle{ width: 250px; height: 360px; } /* smaller than before */ .home_img{ width: 200px; } .home__social-link{ padding: .4rem; font-size: 1.5rem; } .home__social::after{ transform: rotate(90deg) translate(16px,0); } .home__scroll-icon{ font-size: 2rem; } } /* ===== Compact Header & Top Nav ===== */ .header { height: 2.8rem; /* smaller than 3.5rem */ padding: 0 .75rem; } .nav { height: 100%; gap: .5rem; } .nav__logo { font-size: 1rem; /* smaller logo font */ } .nav__top-link { font-size: 0.85rem; /* smaller link font */ padding: .2rem .3rem; /* tighter padding */ gap: .5rem; } /* ===== Compact Hero Section ===== */ .home__container { row-gap: 2.5rem; /* was 4.5rem */ padding-top: 1rem; /* less padding above */ } .home__handle { width: 200px; /* smaller portrait container */ height: 290px; } .home_img { width: 400px; /* smaller image */ } /* Reduce space after hero image */ .home__buttons { margin-top: 1rem; /* instead of larger gaps */ } /* ===== Bottom Nav Always Visible ===== */ /* remove the media query hiding .nav__menu */ .nav__menu { display: block !important; bottom: 0.5rem; } .project__data { padding: .75rem; } .project__name { font-size: 1rem; } .project__description { font-size: .85rem; } .section { padding: 3rem 0 .5rem; /* was 4.5–6.5rem */ } .section__title { margin-bottom: 1rem; } .section__subtitle { font-size: 0.7rem; } .about__box, .experience__content, .education__content, .skills__content, .projects__content, .contact__card { padding: 0.8rem; /* reduce from 1.5rem+ */ border-radius: .5rem; /* less rounded */ } .education__container { row-gap: 1rem; /* less vertical gap */ padding-top: .5rem; } .education__content { padding: 0.8rem; border-radius: .75rem; } .education__title { font-size: .95rem; margin-bottom: .75rem; } .experience__title { margin-bottom: .75rem; } .experience__details { font-size: .8rem; } .timeline { padding-left: 1rem; /* less left padding */ } .timeline-entry { padding-bottom: 1rem; /* reduce spacing between entries */ } .timeline-content h4 { font-size: .9rem; /* smaller heading */ } .timeline-content p { font-size: .75rem; } .gpa { font-size: .8rem; }