/* ============================================ STUDENT PROFILE STYLESHEET ============================================ CSS (Cascading Style Sheets) controls how HTML looks. Think of HTML as the skeleton (structure) and CSS as the skin & clothes (appearance). This is a "dark theme" design - popular with developers and easy on the eyes! */ /* ---------- CSS VARIABLES (CUSTOM PROPERTIES) ---------- */ /* Variables let us define values once and reuse them throughout. If we want to change the color, we only change it in ONE place! They start with -- and are accessed with var(--name) */ :root { /* :root selects the element (the root of the document). Variables defined here are available everywhere in the CSS. */ /* Colors - using HSL format (Hue, Saturation, Lightness) */ --bg-primary: #0f172a; /* Dark navy blue - main background */ --bg-secondary: #1e293b; /* Slightly lighter blue - for cards/sections */ --bg-card: #334155; /* Even lighter - for interactive elements */ /* Text colors */ --text-primary: #f8fafc; /* Almost white - main text */ --text-secondary: #94a3b8; /* Grayish - less important text */ --text-muted: #64748b; /* Darker gray - for subtle text */ /* Accent colors - used for highlights and interactive elements */ --accent-primary: #38bdf8; /* Bright cyan blue - links, buttons */ --accent-secondary: #818cf8; /* Purple - secondary highlights */ --accent-success: #4ade80; /* Green - success states, progress bars */ /* Spacing scale - consistent spacing throughout the site */ --space-xs: 0.5rem; /* 8px - tiny gaps */ --space-sm: 1rem; /* 16px - small gaps */ --space-md: 1.5rem; /* 24px - medium gaps */ --space-lg: 2rem; /* 32px - large gaps */ --space-xl: 3rem; /* 48px - extra large gaps */ /* Border radius - how rounded corners are */ --radius-sm: 8px; /* Slightly rounded */ --radius-md: 12px; /* Medium rounded */ --radius-lg: 16px; /* Very rounded */ /* Shadows - add depth to elements */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); /* rgba() = Red, Green, Blue, Alpha (transparency) 0, 0, 0 = black 0.3 = 30% opacity (70% transparent) */ /* Max width for content - prevents text from stretching too wide */ --max-width: 1200px; } /* ---------- RESET & BASE STYLES ---------- */ /* Browsers have default styles that vary between them. A "reset" removes these defaults so we start fresh. */ /* * = universal selector - selects EVERY element on the page box-sizing: border-box makes padding and borders included in element's total width/height Without this, padding adds to the width, making layouts break */ * { margin: 0; /* Remove default margins */ padding: 0; /* Remove default padding */ box-sizing: border-box; } /* Smooth scrolling makes anchor links animate instead of jumping instantly html is the root element */ html { scroll-behavior: smooth; } /* Body styles apply to the entire page content. font-family lists fonts in order of preference. If the first font isn't available, it tries the next one. */ body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* 'Segoe UI' = Windows default nice font system-ui = Uses the system's default font -apple-system = macOS/iOS system font sans-serif = Generic fallback (no decorative strokes) */ background-color: var(--bg-primary); /* Uses our CSS variable for the dark background */ color: var(--text-primary); /* Default text color - almost white */ line-height: 1.6; /* Line height controls spacing between lines of text. 1.6 means 1.6 times the font size (good readability). No units needed for line-height ratios! */ min-height: 100vh; /* Minimum height is 100% of the viewport height. vh = viewport height (the visible area of the browser). This ensures the footer stays at the bottom even with little content. */ } /* ---------- UTILITY CLASSES ---------- */ /* Utility classes are reusable styles for common patterns. The .container class centers content and limits its width. */ .container { max-width: var(--max-width); /* Content won't get wider than 1200px */ margin: 0 auto; /* margin: 0 auto is the classic CSS centering technique! 0 = top and bottom margins auto = left and right margins (automatically equal, centering the element) */ padding: 0 var(--space-md); /* 0 = top and bottom padding var(--space-md) = left and right padding This adds breathing room on the sides on mobile devices. */ } /* ---------- TYPOGRAPHY ---------- */ /* Typography = the art of styling text. Good typography makes content readable and beautiful. */ /* Headings */ h1, h2, h3 { /* This selector targets h1 AND h2 AND h3 at once. The comma separates multiple selectors. */ font-weight: 700; /* 700 = bold (400 is normal, 700 is bold) */ line-height: 1.2; /* Headings need less line height than body text */ margin-bottom: var(--space-sm); /* Space below headings to separate from content */ } h1 { font-size: 3rem; /* rem = "root em" - relative to the root font size (usually 16px). 3rem = 3 × 16px = 48px. Using rem makes text scalable for accessibility. */ background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); /* Creates a gradient background from cyan to purple. 135deg = the angle of the gradient (diagonal). */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* These two properties together make the gradient show THROUGH the text. The text becomes transparent and shows the gradient background. -webkit- prefix is needed for Safari browser support. */ } h2 { font-size: 2rem; color: var(--text-primary); position: relative; /* position: relative allows us to position child elements relative to this one. Also needed for the decorative underline below. */ } /* ::after creates a pseudo-element after the h2 content. Pseudo-elements are like invisible HTML elements we can style. */ h2::after { content: ''; /* Required for pseudo-elements - can be empty */ display: block; /* Makes it behave like a block element (takes full width) */ width: 60px; height: 4px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); /* Horizontal gradient for the underline */ margin-top: var(--space-xs); border-radius: 2px; } h3 { font-size: 1.25rem; color: var(--text-primary); } /* Paragraphs */ p { margin-bottom: var(--space-sm); color: var(--text-secondary); } /* ---------- HEADER SECTION ---------- */ header { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); /* Gradient from lighter to darker blue */ padding: var(--space-xl) 0; /* Large vertical padding, no horizontal padding */ text-align: center; /* Centers all text inside the header */ border-bottom: 1px solid var(--bg-card); /* Subtle border at the bottom */ } .tagline { font-size: 1.25rem; color: var(--text-secondary); letter-spacing: 2px; /* Spaces out the letters slightly for style */ text-transform: uppercase; /* Converts text to ALL CAPS via CSS */ } /* ---------- SECTIONS ---------- */ /* Sections divide the page into logical chunks. We alternate background colors for visual separation. */ section { padding: var(--space-xl) 0; /* Large vertical padding between sections */ } /* :nth-child(even) selects every even-numbered section. This creates a zebra-stripe effect. */ section:nth-child(even) { background-color: var(--bg-secondary); } /* ---------- PROJECT CARDS ---------- */ .card-grid { display: grid; /* CSS Grid is a 2D layout system. It can arrange items in rows AND columns. */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* This is a responsive grid magic spell! - repeat = create multiple columns - auto-fit = fit as many columns as possible - minmax(300px, 1fr) = each column is at least 300px, at most 1 fraction of available space - 1fr = 1 fraction (equal share of remaining space) Result: On small screens = 1 column, medium = 2 columns, large = 3 columns */ gap: var(--space-md); /* Space between grid items */ margin-top: var(--space-md); } .card { background-color: var(--bg-card); padding: var(--space-md); border-radius: var(--radius-md); box-shadow: var(--shadow-md); /* transition makes changes animate smoothly over 0.3 seconds. We'll use this for the hover effect below. */ transition: transform 0.3s ease, box-shadow 0.3s ease; } /* :hover applies when the mouse is over the element. This creates an interactive "lift" effect. */ .card:hover { transform: translateY(-5px); /* Moves the card up 5 pixels */ box-shadow: var(--shadow-lg); /* Increases the shadow for a "floating" effect */ } .card h3 { color: var(--accent-primary); margin-bottom: var(--space-xs); } /* Tags for technologies used */ .tag { display: inline-block; /* inline-block flows with text but allows block-level properties. Unlike block, it doesn't force a new line. */ background-color: var(--bg-secondary); color: var(--accent-primary); padding: 4px 12px; border-radius: 20px; /* Rounded pill shape */ font-size: 0.875rem; /* Slightly smaller text */ margin-right: var(--space-xs); margin-top: var(--space-xs); } /* ---------- SUBJECTS LIST ---------- */ .subject-list { list-style: none; /* Removes default bullet points */ margin-top: var(--space-md); } .subject-list li { padding: var(--space-sm); margin-bottom: var(--space-sm); background-color: var(--bg-card); border-radius: var(--radius-sm); border-left: 4px solid var(--accent-primary); /* Colored left border for visual interest */ } .subject-list strong { color: var(--accent-primary); } /* ---------- SKILLS PROGRESS BARS ---------- */ .skill-bars { margin-top: var(--space-md); } .skill { margin-bottom: var(--space-md); } .skill label { display: block; /* Makes the label take up its own line */ margin-bottom: var(--space-xs); font-weight: 600; /* Semi-bold */ color: var(--text-primary); } /* The outer container of the progress bar */ .progress-bar { background-color: var(--bg-card); height: 30px; border-radius: var(--radius-sm); overflow: hidden; /* overflow: hidden clips any content that goes outside the container. This keeps the inner bar's corners rounded too. */ } /* The colored part that shows the percentage */ .progress { height: 100%; /* Fills the full height of the parent */ background: linear-gradient(90deg, var(--accent-primary), var(--accent-success)); /* Gradient from cyan to green */ display: flex; /* Flexbox for centering the text */ align-items: center; /* Vertical centering */ justify-content: flex-end; /* Horizontal alignment to the right */ padding-right: var(--space-sm); color: var(--bg-primary); /* Dark text on the bright bar */ font-weight: 700; border-radius: var(--radius-sm); /* Animation for the bar to grow when page loads */ animation: fillBar 1s ease-out; } /* @keyframes defines an animation. It describes how properties change over time. */ @keyframes fillBar { from { width: 0; /* Start with no width */ } /* 'to' is determined by the inline style in HTML */ } /* ---------- FOOTER ---------- */ footer { background-color: var(--bg-secondary); padding: var(--space-lg) 0; text-align: center; border-top: 1px solid var(--bg-card); } footer p { margin-bottom: var(--space-xs); color: var(--text-muted); } /* ---------- RESPONSIVE DESIGN ---------- */ /* Media queries change styles based on screen size. This makes the site work on phones, tablets, and desktops. */ /* Tablet and smaller screens */ @media (max-width: 768px) { /* These styles only apply when screen is 768px or narrower. Common tablet breakpoint. */ h1 { font-size: 2rem; /* Smaller heading on mobile */ } h2 { font-size: 1.5rem; } .card-grid { grid-template-columns: 1fr; /* Single column on mobile */ } } /* Small phones */ @media (max-width: 480px) { :root { /* Reduce spacing on very small screens */ --space-xl: 2rem; --space-lg: 1.5rem; } .container { padding: 0 var(--space-sm); /* Less side padding on small screens */ } } /* ---------- ACCESSIBILITY IMPROVEMENTS ---------- */ /* :focus-visible shows focus styles only when navigating with keyboard. This helps users who can't use a mouse. */ *:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* @media (prefers-reduced-motion) respects user preferences. Some users disable animations for medical reasons. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }