/* Copy 'Poppins' font family from google fonts : import here */ @import url("https://fonts.googleapis.com/css2?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&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; /* to add padding, margin inside total width and height specified to elements */ text-decoration: none; border: none; /* Part of the element's box model.:-- Affects the layout and takes up space around the element....... : Can be styled on specific sides (top, right, bottom, left).*/ /* ^^ Example : border: 3px solid blue; --> Border: Blue line surrounds the element and affects its size. */ outline: none; /* Outside the element's box model.....: Does not take up space or affect the layout..... : Cannot be styled on specific sides; it surrounds the entire element. */ /* ^^ Example : outline: 3px solid red; ---> Outline: Red line surrounds the element without affecting its size. */ scroll-behavior: smooth; /* Work as name suggestes (bydefault is => scroll-behavior: auto;*/ font-family: "Poppins", sans-serif; } /* ---------------------- Some global variables --------------------- */ :root { --bg-color: #111111; /* Black */ --second-bg-color: #151515; /* Blackish */ --text-color: #fff; /* White */ --main-color: #6A9AB0; /* Greyish tone */ } html { font-size: 63%; /* ->By default, browsers typically use a font size of 16px. So, 63% of 16px is approximately 10px (16 × 0.63 = 10.08px). Why it's useful: -> Developers often use this technique to make font sizes easier to calculate in rem units. -> For example: 1rem = 10px (with 63% as base size). 1.6rem = 16px, 2rem = 20px, and so on. -> This makes scaling responsive designs simpler. */ overflow-x: hidden; /* Prevents horizontal scrolling by hiding any content that overflows the viewport width.*/ } body { /* using the above created variables */ background-color: var(--bg-color); color: var(--text-color); } /* --------------------------------- Header ---------------------------- */ .header { position: fixed; top: 0; /* Gets applied since its position is fixed (Not static)... */ left: 0; width: 100%; /* w.r.t its parent i.e., body (which inturn html) */ padding: 2rem 8%; /* acha khasa : bcz it is 10% of its parent width ( which is that takes 100vw) */ display: flex; justify-content: space-between; align-items: center; /* z-index: since header is fixed, so we need to put it on the top of text when user scroll on webppage */ z-index: 100; backdrop-filter: blur(10px); /* (mostly used to created frosted glass effects- blur in styled way-> do google search to see demo images */ /* ^^ 'backdrop-filter' IS CSS property that provides a way to apply graphical effects such as blurring or color shifting to the area behind an element. syntax:- backdrop-filter: ; functions (to apply to the backdrop) like : blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), and sepia() */ /* word-wrap: nowrap; */ } .logo { font-size: 2.5rem; color: var(--text-color); font-weight: 700; cursor: pointer; transition: all 0.3s ease-in-out; } .logo span { color: var(--main-color); } .logo:hover { transform: scale(1.1); /* scale along x and y both : following above transition property defined (Smoothly) */ } /* .navbar{ word-wrap: nowrap; } */ .navbar a { font-size: 1.8rem; color: var(--text-color); margin-left: 4rem; /* to create space between elements of .navbar */ font-weight: 500; transition: all 0.3s ease-in-out; } .navbar a:hover, a.active { /* a.active ( with class 'active' in .navbar' class) -> active initially, so make it effect like selected(to highlight */ color: var(--main-color); border-bottom: 3px solid var(--main-color); } /* Make menu icon display:none for large screens : LATER CHANGE IT FOR SMALLER SCREENS */ .header #menu-icon { font-size: 3.6rem; color: var(--main-color); /* make invisible for now (with no space reserved):-------- It will be visible for smaller screens (Below media query) AND We will add listener in javascript to define it's working.*/ display: none; } .header .cross-icon { font-size: 3.6rem; color: var(--main-color); /* make invisible*/ display: none; } /* --------------------------------------------Every Section : Section ------------------------------------- */ section { min-height: 80vh; padding: 8rem 9% 7rem; } /* ----------------------------- Home section --------------------- */ .home { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; background-color: var(--second-bg-color); } .home-content { display: flex; flex-direction: column; justify-content: center; align-items: center; /* text-align: center; */ margin-top: 3rem; } span { color: va r(--main-color); } .home-content h1 { margin-top: 1.8rem; font-size: 5rem; font-weight: 700; line-height: 1; /* Line height refers to the vertical space between lines of text in an element (line-height: 1; sets the height of a line box for an element to be equal to the font size of the element's text) */ } .home-content h3 { margin-bottom: 2rem; margin-top: 1rem; font-size: 3rem; } .home-img { border-radius: 50%; } .home-img img { position: relative; /* Relative to itself */ top: 3rem; width: 22vw; height: 22vw; border-radius: 50%; box-shadow: 0 0 25px var(--main-color); cursor: pointer; transition: all 1s ease-in-out; } .home-img img:hover { box-shadow: 0 0 60px var(--main-color); } .home-content p { font-size: 1.5rem; font-weight: 500; max-width: 1000px; } /* -------- .text-animation ------------ */ .home-content .text-animation { font-size: 2.2rem; font-weight: 600; min-width: 280px; } /* we have not added content to .text-animation's span element */ .text-animation span { position: relative; /* w.r.t to itself */ } .text-animation span::before { /* pseudo-elements in CSS that are used to add content before the actual content of an element*/ content: "Data Analyst..."; color: var(--main-color); animation: words 20s infinite; /* words: animation defined below - @keyframe */ /* animation: name duration timing-function delay iteration-count direction fill-mode; */ } .text-animation span::after { /* This code styles a pseudo-element (::after) for the span inside .text-animation OR pseudo-elements in CSS that are used to add content after the actual content of an element*/ content: ""; /* -The content property is required for pseudo-elements (::after) to display. - An empty string means the pseudo-element itself will be invisible unless styled. */ background-color:var(--bg-color); position: absolute; /* Positions the pseudo-element absolutely relative to its nearest positioned ancestor (likely the span here). */ width: calc(100% + 8px ); /* Calculates the width of the pseudo-element as 100% of the parent span's width, plus an additional 8px (pseudo-element extends slightly beyond the span's boundary.) */ height: 100%; border-left: 3px solid var(--bg-color); right: -8px; /*Moves the pseudo-element 8px to the left of the parent element's right edge, ensuring proper alignment with the added width. */ /* 2 animations */ animation: cursor .6s infinite, typing 20s steps(19) infinite; /* ^^ Blinking cursor 5s: Bcz words each take will take 5 sec, so that it matches with speed and gives typing effect */ } /* What Above code does ^^ IT does:- -> It creates an animated effect, commonly used for typing text animations, such as a blinking cursor or text being typed. */ /* define custom animations */ @keyframes cursor { to { border-left: 2px solid var(--main-color); /* like '|' wehen we type in ms word and | blinks */ } } @keyframes words { /* Its duration is defined as 20s , so each take will take 5s */ 0%, 25% { content: "Data Analyst..."; } 26%, 50% { content: "Business Strategist..."; } 51%, 75% { content: "AI Enthusiast..."; } 76%, 100% { content: "Data Analyst..."; } } @keyframes typing { 0%, 15%, 30%, 45%, 60%, 75%, 90%, 95% { width:0; } 0%, 25%, 50%, 75%, 95% { width: calc(100% + 8px); } /* Explain : #0%, 15%, 30%, 45%, 60%, 75%, 90%, 95%: These keyframes specify that at the beginning (0% progress) and during the first part of the animation (up to 95% progress), the width of the element should be 0. This means that the element starts with no width and gradually increases in width. # 0%, 25%, 50%, 75%, 95%: These keyframes specify that at the beginning (0% progress) and during the second part of the animation (up to 95% progress), the width of the element should be calculated as 100% + 8px. This means that after the initial 0 width, the element will expand to 100% of its parent's width plus an additional 8 pixels, creating a typing effect where the element appears to grow as if it's being typed out. */ } /* ----- social icons --------- */ .home .social-icons a { display: inline-flex; /* makes the container an inline-level element, allowing it to be placed alongside other inline elements on the same line.*/ justify-content: center; align-items: center; width: 4.5rem; height: 4.5rem; background: transparent; border: 0.2rem solid var(--main-color); font-size: 2.5rem; border-radius: 50%; color: var(--main-color); margin: 3rem 1.5rem 3rem 0; transition: all 0.3s ease-in-out; } .social-icons a:hover { color: var(--text-color); transform: scale(1.2) translateY(-5px); /* -5px: upwards */ box-shadow: 0 0 15px var(--main-color); background-color: var(--main-color); } .home .btn { display: inline-block; /* Complete row */ padding: 1rem 2.8rem; background-color: var(--main-color); color: #111; font-size: 1.8rem; font-weight: 600; border: 2px solid transparent; border-radius: 4rem; letter-spacing: 0.3rem; cursor: pointer; transition: all 0.3s ease-in-out; } .btn:hover { transform: scale(.8); box-shadow: 0 0 12px var(--main-color); } /* -------------------------------------------------------------------------------------------------------------- */ /* ---------------------------- About Section -------------------------------------------- */ .about { display: flex; justify-content: center; align-items: center; gap: 10rem; /* between img and content */ background-color: var(--bg-color); color: var(--text-color); line-height: 2.7rem; } .about h2 span { color: var(--main-color); text-shadow: 0 0 50px var(--main-color); } .about-img { /* border-radius: 50%; */ } .about-img img { position: relative; width: 32vw; height: 32vw; border-radius: 50%; box-shadow: 0 0 25px var(--main-color); top: 1rem; cursor: pointer; transition: all 0.6s ease-in-out; } .about-img img:hover { box-shadow: 0 0 50px var(--main-color), 0 0 70px var(--main-color); } .about-content .heading { /* to 'About Me' */ text-align: center; font-size: 6rem; } .about-content h2 { text-align: left; line-height: 1.5; } .about-content h3 { font-size: 2.5rem; } .about-content p { font-size: 1.5rem; font-weight: 500; margin: 2rem 0 2rem; } .about-content .text-animation span::before { /* pseudo-elements in CSS that are used to add content before the actual content of an element*/ content: "Data Analyst..."; color: var(--main-color); animation: words 20s infinite; /* words: anination defined below - @keyframe */ /* animation: name duration timing-function delay iteration-count direction fill-mode; */ } .about-content .text-animation span::after { /* pseudo-elements in CSS that are used to add content after the actual content of an element*/ content: ""; background-color: var(--second-bg-color); position: absolute; /* w.r.t to its parent element */ width: calc(100% + 8px); height: 100%; /* border-left: 3px solid var(--bg-color); */ right: -8px; /* 2 animations */ animation: cursor 0.6s infinite, typing 20s steps(19) infinite; } .about .btn { display: inline-block; /* Complete row */ padding: 1rem 2.8rem; background-color: var(--main-color); color: var(--bg-color); font-size: 1.8rem; font-weight: 600; border: 2px solid transparent; border-radius: 4rem; letter-spacing: 0.3rem; cursor: pointer; transition: all 0.3s ease-in-out; } .btn:hover { transform: scale(.8); margin-left: 15px; box-shadow: 0 0 12px var(--main-color); } .about #fullParagraph { /* Initially hidden : Make height 0 (nospace but it makes now content overflow) , hide overflow */ max-height: 0px; overflow: hidden; /* Apply transition: Smooth */ transition: max-height 0.8s; /* Smooth expansion */ transition-timing-function:ease-in-out; } .about #fullParagraph.expanded { max-height:500px; /* Adjust this value based on the content's height */ } /* ---------------------------------- Projects Section & Job_Simulations Section & Certifications Section------------------------ */ .projects, .Job_Simulations, .certifications { background-color: var(--second-bg-color); color: var(--text-color); } .projects h2, .Job_Simulations h2, .certifications h2{ margin-bottom: 4rem; color: var(--text-color); } .projects .heading, .Job_Simulations .heading, .certifications .heading { /* Actually above h2 tag : We can do this in above block as well */ /* same as 'About Me' */ text-align: center; font-size: 5rem; } /* .projects-Container */ .projects-container, .cert-container { /* using the grid system */ display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 2.5rem; } /* .JS-Container */ .JS-container { /* using the grid system */ display: grid; grid-template-columns: repeat(1, 1fr); align-items: center; gap: 2.5rem; } /* container boxes */ .project-box, .JS-box, .cert-box { background-color: var(--main-color); color: var(--bg-color); /* black */ height: 290px; border-radius: 3rem; cursor: pointer; transition: all 0.3s ease-in-out; padding-top: 10px; } .project-box:hover, .JS-box:hover, .cert-box:hover { background-color: #fff; color: var(--main-color); transform: scale(1.03); } /* info of boxes */ .project-box .project-info, .JS-box .JS-info, .cert-box .cert-info { display: flex; flex-direction: column; align-items: baseline; /* cross-axis adjust (x-axis this time) */ justify-content: center; padding: 5rem; /* five times the current font size of the element */ text-align: left; max-height: 250px; /* Its parent has given 300px height above */ } .project-info h4, .JS-info h4, .cert-info h4 { font-size: 2.5rem; font-weight: 600; margin-bottom: 1rem; } .project-info p, .cert-info p { font-size: 1.45rem; font-weight: 400; margin: auto; max-height: 120px; } .JS-info p { font-size: 1.45rem; font-weight: 400; max-height: 120px; } .project-info a, .JS-info a, .cert-info a { margin-top: 1rem; font-size: 1.7rem; font-weight: 600; text-decoration: none; color: black; } /* -------------------------- Skils Secttion _-------------------------- */ .skills { background-color: var(--bg-color); } /* .skills h2 { margin-bottom: 3rem; color: var(--text-color); } */ /* Done next operation */ .skills .heading { margin-bottom: 3rem; color: var(--text-color); text-align: center; font-size: 6rem; } .skills .heading span{ color: var(--main-color); } .skills .skill-box { display: flex; /* All skills aligned */ justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; } .skill-box .box { /* To put img and its label (

) in 2 lines */ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; } .skill-box .box > div { /* img's div */ width: 110px; height: 110px; background-color: var(--main-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease-in-out; } .skill-box .box > div:hover { transform: scale(1.05); box-shadow: 0 0 30px var(--main-color); } .skill-box .box img { width: 90px; height: 70px; border-radius: 10px; } /* Manually changes to some images of skills */ .skill-box .box div .mysql, .skill-box .box div .excel, .skill-box .box div .powerbi, .skill-box .box div .python, .skill-box .box div .github, .skill-box .box div .chatgpt, .skill-box .box div .gemini, .skill-box .box div .copilot, .skill-box .box div .jupyter{ width: 70px; height: 60px; border-radius: 10px; } .skill-box .box p { font-size: 1.5rem; font-weight: 400; } /* --------------------------------------- Contact Section ------------------------ */ .contact { background-color: var(--second-bg-color); } .contact h2 { margin-bottom: 3rem; color: var(--text-color); } .contact .heading { text-align: center; font-size: 6rem; } .contact .heading span { color: var(--main-color); } .contact form { max-width: 70rem; margin: 1rem auto; /* SO that it will be in center covering side spaces as margin by default */ margin-bottom: 3rem; /* Change bottom ,argin from 1rem to 3rem */ text-align: center; } .contact form .input-box { display: flex; justify-content: center; flex-wrap: wrap; /* So that take seperate line */ } .contact form .input-box input, .contact form textarea { width: 100%; /* Closest positioned ancestor i.e., form here */ padding: 1.5rem; font-size: 1.6rem; color: var(--text-color); background-color: var(--bg-color); border: 2px solid var(--main-color); border-radius: 0.8rem; margin: 1rem 0; resize: none; /* to prevent users from resizing an element, typically a textarea(Provides by default resize:both (Horizontal handle, vertical handle) resizing on screen */ } .contact form .btn { /* same as above buttons */ display: inline-block; padding: 1.2rem 2.8rem; background-color: var(--main-color); color: var(--bg-color); font-size: 1.6rem; font-weight: 600; border: 2px solid transparent; border-radius: 4rem; letter-spacing: 0.3rem; cursor: pointer; transition: all 0.3s ease-in-out; } .btn:hover { margin-top: 2rem; transform: scale(1.5); box-shadow: 0 0 20px var(--main-color); } /* ---------------------------------------- Footer ---------------------- */ .footer { position: relative; /* wrt itself */ bottom: 0; /* width: 100%; */ padding: 40px 0; /* Gives height to footer section */ background-color: var(--bg-color); } .footer h2 { margin-bottom: 1rem; color: var(--text-color); } .footer .heading { text-align: center; font-size: 6rem; } .footer .heading span { color: var(--main-color); } .social { display: flex; /* BLOCK-LEVEL FLEX CONTAINER -The flex container occupies the full width available, pushing other elements to the next line. -Child elements (flex items) are aligned according to flexbox rules. */ align-items: center; justify-content: center; } /* same as .social-icons above */ .footer .social a { width: 4.5rem; height: 4.5rem; border: 0.2rem solid var(--main-color); border-radius: 50%; font-size: 2.5rem; background: transparent; color: var(--main-color); /* PROPER ALLIGNMENT */ display: inline-flex; /* makes the element an inline-level container ( here ), allowing it to be placed alongside other inline elements on the same line. ->It takes only as much width as its content needs, allowing other elements to appear on the same line. -> Child elements (flex items) are still arranged according to flexbox rules. */ justify-content: center; align-items: center; /* To be placed properly in center of border */ margin: 3rem 1.5rem 3rem 0; transition: all 0.3s ease-in-out; } .social a:hover { background-color: var(--main-color); color: var(--text-color); transform: scale(1.2) translateY(-5px); /* -5px: upwards */ box-shadow: 0 0 20px var(--main-color); } /* ----------------------------------------------------------------------------- */ /* -------------------------- Responsivness ------------------------------------ */ /* 1.. */ @media (max-width: 1280px) { html { font-size: 55%; } .projects-container, .cert-container { padding-bottom: 7rem; grid-template-columns: repeat(2, 1fr); /* margin: 0 5rem; */ } .JS-container { padding-bottom: 7rem; grid-template-columns: repeat(1, 1fr); /* margin: 0 5rem; */ } } /* ----------------------------------------- */ /* 2.. */ @media (max-width: 990px) { .header { padding: 2rem 3%; } section { padding: 10rem 4% 5rem; } } /* ---------------------------------------------- */ /* 3.. tablets and less */ @media (max-width: 868px) { /* headings change */ .heading { font-size: 5rem; } /* navbar as sidebar: onclick menu-icon , toggle it */ .header #menu-icon { display: block; } .navbar { position: absolute; top: 100%; right: 0; width: 50%; background-color: rgb(0, 0, 0, 0.9); backdrop-filter: blur(20px); border-bottom-left-radius: 2rem; border-left: 2px solid var(--main-color); border-bottom: 2px solid var(--main-color); padding: 1rem 3%; /* ------ make it invisible : JS make it visible on toggleing on menu-icon -------- */ display: none; } .navbar a { display: block; /* from inline to block (So that in diffecernt line and make menu as sidebar which open on clicking on menuicon) */ font-size: 2rem; margin: 3rem 0; color: var(--text-color); } /* ------ home section ------- */ .home { flex-direction: column; /* as above */ margin: 5rem 0rem; } .home-content h1 { font-size: 6rem; margin-top: 3rem; } .home-content h3 { font-size: 2.4rem; } .home-content p { max-width: 600px; margin: 0 auto; text-align: center; } .home-img img { width: 45vw; height: 45vw; margin-top: -2rem; /* upwards */ } /* --- about section ---- */ .about { flex-direction: column-reverse; /* to put items in cross axis - but in reverse order (last itmes 1st and 1st to later) */ } .about-content { margin: 0 2rem 4rem; } .about img { width: 50vw; height: 50vw; margin-top: -3rem; margin-bottom: -2rem; } .projects h2, .Job_Simulations h2, .certifications h2 { margin-bottom: 3rem; margin-top: -1rem; } .projects-container , .JS-container, .cert-container{ grid-template-columns: repeat(1, 1fr); } } /* ========== For Job Simulations ========== */ @media (max-width: 430px) { .project-info h4, .JS-info h4 { font-size: 2.2rem; font-weight: 600; margin-bottom: 1rem; } .JS-info p { font-size: 1.3rem; font-weight: 400; max-height: 120px; } .JS-info a { margin-top: 1rem; font-size: 1.5rem; font-weight: 600; text-decoration: none; color: black; } }