/* This selects the element */ /* GLOBAL RESET: This ensures consistent spacing across browsers */ * { margin: 0; /* Remove default outer space */ padding: 0; /* Remove default inner space */ box-sizing: border-box; /* Crucial for responsive design; border/padding are included in the element's total width/height */ scroll-behavior: smooth; scroll-padding-top: 80px; /* Adjust '80px' to match the actual height of your nav bar */ } old body { /* Temporary styles for testing the OG template hoa-hoa-hoa season background-color: lightblue; /* Temporary color to check the link //comment end here font-family: sans-serif; /* Set a clean default font //comment end here */ } /* BASE STYLES: Define the look for the entire page */ :root { /* Define primary color variables (easy to change later!) */ --primary-color: #007aff; /* Apple-like blue for buttons/links */ --background-color: #f7f7f7; /* Very light gray/off-white for a clean look */ --text-color: #1c1c1e; /* Dark, almost black text */ --secondary-text-color: #6c757d; /* Lighter text for context */ --max-width: 1200px; } body { background-color: var(--background-color); color: var(--text-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; /* Improves readability */ padding-top: 80px; /* Space for a fixed header (we'll implement this later) */ } /* END OF BODY STYLES */ /* UTILITY CLASSES */ .container { max-width: var(--max-width); margin: 0 auto; /* Center the content container horizontally */ padding: 0 20px; /* Add some padding on the sides for smaller screens */ } /* STYLE THE HEADER (Navigation Bar) */ header { width: 100%; position: fixed; /* Keep the header visible when scrolling */ top: 0; left: 0; z-index: 1000; /* Ensure the header is always on top of other elements */ background-color: rgba(255, 255, 255, 0.95); /* Slightly translucent white background */ backdrop-filter: blur(10px); /* Modern, clean blur effect (like iOS/macOS menus) */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */ } header .container { display: flex; /* Use Flexbox for easy arrangement */ justify-content: space-between; /* Push name to left, nav links to right */ align-items: center; height: 80px; /* Define the height of the navigation bar */ } header h1 { font-size: 1.5rem; font-weight: 600; /* Slightly bolder */ } /* NAVIGATION LINKS */ nav ul { list-style: none; /* Remove bullet points */ display: flex; } nav ul li a { text-decoration: none; /* Remove underlines from links */ color: var(--text-color); padding: 0 15px; transition: color 0.3s ease; /* Smooth color change on hover */ } nav ul li a:hover { color: var(--primary-color); } /* HERO SECTION STYLES */ #hero { /* Height: 100vh means "100% of the Viewport Height" (full screen) */ height: 100vh; /* Flexbox magic to center content vertically and horizontally */ display: flex; flex-direction: column; /* Stack text vertically */ justify-content: center; /* Center vertically */ align-items: center; /* Center horizontally */ text-align: center; /* Ensure text lines are centered */ /* Add a little padding so it doesn't hit the edges on mobile */ padding: 0 20px; } #hero h2 { font-size: 2rem; /* Make the main text big (Apple style) */ font-weight: 700; margin-bottom: 20px; /* Space between title and subtitle */ color: var(--text-color); } #hero p { font-size: 1.5rem; color: var(--secondary-text-color); margin-bottom: 40px; /* Space before the button */ max-width: 900px; /* Stop the line from getting too long to read */ } /* BUTTON STYLE */ .button { display: inline-block; background-color: var(--primary-color); /*background-color: #007aff; /* Replaced var(--primary-color) with the actual hard-code */ color: white; padding: 12px 30px; border-radius: 30px; /* Pill shape */ text-decoration: none; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease; } .button:hover { background-color: #005ecb; /* Darker blue on hover */ transform: translateY(-2px); /* Slight lift effect */ } /* above here is original base. testing out button layout and a résumé download button, is below. */ /* end of hero section styles */ /* ========================= */ /* ABOUT ME_SECTION STYLES */ #about { padding: 100px 0; /* Flexbox magic to center content vertically and horizontally */ display: flex; flex-direction: column; /* Stack text vertically */ justify-content: center; /* Center vertically */ align-items: center; /* Center horizontally */ text-align: center; /* Ensure text lines are centered */ /* Add a little padding so it doesn't hit the edges on mobile */ padding: 0 20px; } #about h2 { font-size: 2rem; /* Make the main text big (Apple style) */ font-weight: 700; margin-bottom: 20px; /* Space between title and subtitle */ color: var(--text-color); } #about p { font-size: 1.5rem; color: var(--secondary-text-color); margin-bottom: 40px; /* Space before the button */ max-width: 900px; /* Stop the line from getting too long to read */ } /* ========================= PROJECTS SECTION ========================= */ #projects { padding: 100px 0; /* Vertical breathing room */ } #projects h3 { font-size: 2rem; text-align: center; margin-bottom: 40px; } /* THE GRID CONTAINER */ .project-grid { display: grid; /* This command is magic: it automatically fits as many 300px cards as possible into the row before wrapping to the next line. */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; /* Space between the cards */ padding: 0 20px; } /* THE CARDS */ .project-item { background: white; padding: 30px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.05); /* Very faint border */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Subtle shadow */ transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Hover effect: Pop up and glow */ .project-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .project-item h4 { font-size: 1.25rem; margin-bottom: 10px; color: var(--primary-color); /* This should work now! */ } .project-item p { font-size: 1rem; color: var(--secondary-text-color); margin-bottom: 15px; } /* FOOTER STYLES */ footer { background-color: white; /* Match the cards or use var(--text-color) for dark mode look */ padding: 40px 0; margin-top: 50px; border-top: 1px solid rgba(0, 0, 0, 0.05); /* Subtle separation line */ text-align: center; } footer p { color: var(--secondary-text-color); font-size: 0.9rem; margin-bottom: 10px; } /* Optional: If you add links to LinkedIn/GitHub later */ footer a { color: var(--primary-color); text-decoration: none; margin: 0 10px; } /* SCRIBE PROJECT STYLES */ #scribe-btn { background-color: var(--primary-color); color: white; border: none; /* Removes default ugly border */ padding: 10px 20px; border-radius: 20px; /* Pill-shape button*/ font-size: 0.9rem; font-weight: 600; cursor: pointer; /* Changes mouse cursor to a hand pointer */ transition: background-color 2s ease; /* block display to center the button */ display: block; margin: 15px auto 0 auto; } #scribe-btn:hover { background-color: #005ecb; /* Darker blue on hover */ } #scribe-display { min-height: 80px; /* Prevent the card from jumping size too much */ background-color: #f0f0f5; /* Light gray background for the text area */ padding: 15px; border-radius: 8px; margin-bottom: 10px; } /* PROJECT CARD BUTTON (Mimics the Scribe Button) */ .card-btn { background-color: var(--primary-color); color: white; border: none; padding: 10px 20px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 2s ease; display: block; margin: 15px auto 0 auto; width: fit-content; /* CRITICAL: Stops the tag from stretching across the whole card */ text-decoration: none; /* Removes the default hyperlink underline */ } .card-btn:hover { background-color: #005ecb; } /* ========================= SOCIAL LINKS ========================= */ .social-links { /* margin-top: 25px; Spacing from the buttons */ } .social-links a { color: var(--text-color); /* Matches the site's text color */ font-size: 2.2rem; /* Makes the icon nice and large */ display: inline-block; transition: color 2s ease, transform 0.5s ease; /* Smooth (dope) animations */ } /* The Hover Effect */ .social-links a:hover { color: var(--primary-color); /* Changes to your primary color on hover */ color: indigo; /* For testing, indigo (league) to see the effect */ transform: translateY(-3px) scale(1.2); /* Lifts up and grows slightly */ } /* end of styles.css */