/* ================================================================ style.css — Main Stylesheet for [Your Name]'s Portfolio ---------------------------------------------------------------- TABLE OF CONTENTS: 1. CSS Custom Properties (Design Tokens) 2. Reset & Base Styles 3. Background Effects (Starfield + Scanlines) 4. Utility Classes 5. Navigation Bar 6. Page Hero Banner (used on inner pages) 7. Section Titles 8. Buttons 9. Divider 10. Terminal Card (About page) 11. Skill Cards & Bars (Skills page) 12. Project Cards (Projects page) 13. Contact Section 14. Footer 15. Scroll-Reveal Animation 16. Responsive / Mobile ================================================================ */ /* ================================================================ 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS) Change ONE value here and it updates the whole site instantly. ================================================================ */ :root { /* --- Colours --- */ --clr-bg: #050510; /* Very dark navy-black — main background */ --clr-panel: #0a0a1f; /* Slightly lighter — card/panel background */ --clr-border: #1a1a4a; /* Subtle purple-blue border colour */ --clr-primary: #00f0ff; /* Neon cyan — primary accent */ --clr-secondary: #bf00ff; /* Electric purple — secondary accent */ --clr-tertiary: #ff006e; /* Hot pink — danger / highlight */ --clr-text: #c8d8e8; /* Soft blue-white — body text */ --clr-muted: #4a5a7a; /* Muted blue — less important text */ /* --- Typography --- */ --font-display: 'Orbitron', monospace; /* Futuristic headings */ --font-body: 'Share Tech Mono', monospace; /* Code / body text */ --font-ui: 'Rajdhani', sans-serif; /* UI labels & paragraphs */ /* --- Glow Effects (box-shadow / text-shadow shorthand) --- */ --glow-cyan: 0 0 8px #00f0ff, 0 0 24px #00f0ff44; --glow-purple: 0 0 8px #bf00ff, 0 0 24px #bf00ff44; --glow-pink: 0 0 8px #ff006e, 0 0 24px #ff006e44; /* --- Misc --- */ --radius: 4px; /* Border radius used on cards */ --transition: 0.25s ease; /* Default transition speed */ } /* ================================================================ 2. RESET & BASE STYLES Zero out browser defaults so we start with a clean slate. ================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; /* Padding/border included in element width */ } html { scroll-behavior: smooth; /* Smooth scroll when clicking anchor links */ } body { background-color: var(--clr-bg); color: var(--clr-text); font-family: var(--font-body); font-size: 16px; line-height: 1.7; overflow-x: hidden; /* Prevent horizontal scrollbar */ cursor: crosshair; /* Subtle sci-fi crosshair cursor */ } /* ================================================================ 3. BACKGROUND EFFECTS 3a. STARFIELD — pseudo-element on creates floating dots using radial-gradient() at different x/y positions. ================================================================ */ body::before { content: ''; position: fixed; /* Stays in place as you scroll */ inset: 0; /* Fills the entire viewport */ background-image: /* White stars — various sizes & opacity */ radial-gradient(1px 1px at 10% 20%, #ffffff33 0%, transparent 100%), radial-gradient(1px 1px at 30% 50%, #ffffff22 0%, transparent 100%), radial-gradient(1px 1px at 60% 10%, #ffffff44 0%, transparent 100%), radial-gradient(1px 1px at 80% 70%, #ffffff22 0%, transparent 100%), radial-gradient(1px 1px at 50% 85%, #ffffff33 0%, transparent 100%), radial-gradient(1px 1px at 90% 30%, #ffffff22 0%, transparent 100%), /* Coloured glowing stars */ radial-gradient(2px 2px at 15% 75%, #00f0ff22 0%, transparent 100%), radial-gradient(2px 2px at 70% 45%, #bf00ff22 0%, transparent 100%); pointer-events: none; /* Clicks pass through this layer */ z-index: 0; animation: starDrift 60s linear infinite; /* Slowly float upward */ } /* The starfield slowly drifts upward over 60 seconds */ @keyframes starDrift { 0% { transform: translateY(0); } 100% { transform: translateY(-100px); } } /* ---------------------------------------------------------------- 3b. SCANLINES — CRT monitor effect using a repeating gradient. z-index 9999 puts it above everything as a pure overlay. ---------------------------------------------------------------- */ body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, /* Thin dark line every 4px */ rgba(0, 0, 0, 0.03) 4px ); pointer-events: none; /* Never blocks clicks */ z-index: 9999; } /* ================================================================ 4. UTILITY CLASSES Small reusable helpers used throughout all pages. ================================================================ */ /* Centres content and caps max width */ .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; /* Sits above the body::before starfield */ } /* Neon text colours with matching glow shadow */ .glow-cyan { color: var(--clr-primary); text-shadow: var(--glow-cyan); } .glow-purple { color: var(--clr-secondary); text-shadow: var(--glow-purple); } .glow-pink { color: var(--clr-tertiary); text-shadow: var(--glow-pink); } /* Generic section padding — used on every page section */ section { padding: 100px 0; position: relative; } /* ================================================================ 5. NAVIGATION BAR Fixed at the top with frosted-glass background. ================================================================ */ nav { position: fixed; /* Sticks to top of viewport on scroll */ top: 0; left: 0; right: 0; z-index: 1000; /* Above all page content */ padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; background: rgba(5, 5, 16, 0.85); /* Dark semi-transparent */ backdrop-filter: blur(12px); /* Frosted/blurred glass effect */ border-bottom: 1px solid var(--clr-border); } /* Site logo / name on the left */ .nav-logo { font-family: var(--font-display); font-size: 1.1rem; font-weight: 900; color: var(--clr-primary); text-shadow: var(--glow-cyan); text-decoration: none; letter-spacing: 2px; } /* Terminal-style ">" prefix before the logo */ .nav-logo::before { content: '> '; color: var(--clr-muted); } /* Horizontal list of page links */ .nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: var(--clr-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; transition: color var(--transition), text-shadow var(--transition); position: relative; /* Needed for the ::after underline */ } /* Animated underline that slides in from the left on hover */ .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; /* Starts at zero width */ height: 1px; background: var(--clr-primary); box-shadow: var(--glow-cyan); transition: width var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--clr-primary); text-shadow: var(--glow-cyan); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; /* Underline slides fully across */ } /* ================================================================ 6. PAGE HERO BANNER Used at the top of inner pages (about, skills, projects, contact) instead of the full-screen hero on index.html. ================================================================ */ .page-hero { padding: 160px 0 80px; /* Extra top padding to clear the fixed nav */ position: relative; overflow: hidden; border-bottom: 1px solid var(--clr-border); } /* Giant decorative background word */ .page-hero::before { content: attr(data-bg-text); /* Set in HTML: data-bg-text="ABOUT" etc. */ position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: clamp(100px, 18vw, 220px); font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(0, 240, 255, 0.05); pointer-events: none; user-select: none; } .page-hero-eyebrow { font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 4px; text-transform: uppercase; color: var(--clr-secondary); text-shadow: var(--glow-purple); margin-bottom: 12px; } .page-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 16px; } /* The coloured word in the title */ .page-hero-title .accent { color: var(--clr-primary); text-shadow: var(--glow-cyan); } .page-hero-subtitle { font-family: var(--font-ui); font-size: 1.05rem; color: var(--clr-muted); max-width: 500px; line-height: 1.8; } /* ================================================================ 7. SECTION TITLES Used inside page content sections, with a coloured left bar. ================================================================ */ .section-title { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 700; color: var(--clr-primary); text-shadow: var(--glow-cyan); margin-bottom: 48px; position: relative; padding-left: 20px; } /* Vertical accent bar on the left of every section title */ .section-title::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--clr-primary), var(--clr-secondary)); box-shadow: var(--glow-cyan); } /* The ">>" prefix shown in muted colour */ .section-title span { color: var(--clr-muted); font-size: 0.6em; margin-right: 10px; } /* ================================================================ 8. BUTTONS Two variants: primary (filled neon) and secondary (ghost). Both use a diagonal clip-path for the cyberpunk angled shape. ================================================================ */ /* Primary — filled cyan button */ .btn-primary { display: inline-block; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding: 14px 28px; border: 1px solid var(--clr-primary); color: var(--clr-bg); background: var(--clr-primary); box-shadow: var(--glow-cyan), inset 0 0 20px rgba(0, 240, 255, 0.2); clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); transition: all var(--transition); cursor: pointer; } .btn-primary:hover { background: transparent; color: var(--clr-primary); box-shadow: var(--glow-cyan), 0 0 40px rgba(0, 240, 255, 0.3); } /* Secondary — transparent ghost button */ .btn-secondary { display: inline-block; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding: 14px 28px; border: 1px solid var(--clr-border); color: var(--clr-text); background: transparent; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); transition: all var(--transition); cursor: pointer; } .btn-secondary:hover { border-color: var(--clr-secondary); color: var(--clr-secondary); box-shadow: var(--glow-purple); } /* ================================================================ 9. DIVIDER A glowing horizontal line between sections. ================================================================ */ .divider { width: 100%; height: 1px; background: linear-gradient( to right, transparent, var(--clr-border), var(--clr-primary), /* Brightest at the centre */ var(--clr-border), transparent ); margin: 0; } /* ================================================================ 10. TERMINAL CARD (used on about.html) Looks like a real code terminal / text editor window. ================================================================ */ .terminal-card { background: var(--clr-panel); border: 1px solid var(--clr-border); border-radius: var(--radius); overflow: hidden; /* Clip children to the rounded corners */ } /* Fake macOS-style title bar with coloured dots */ .terminal-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--clr-border); } /* Each circle "button" in the title bar */ .terminal-dot { width: 10px; height: 10px; border-radius: 50%; } .terminal-dot.red { background: #ff5f57; } .terminal-dot.yellow { background: #febc2e; } .terminal-dot.green { background: #28c840; } /* Filename shown in the terminal title bar */ .terminal-title { margin-left: 8px; font-size: 0.75rem; color: var(--clr-muted); letter-spacing: 1px; } /* The actual "code" content area */ .terminal-body { padding: 24px; font-size: 0.9rem; line-height: 1.9; } .terminal-line { margin-bottom: 8px; } /* The $ prompt symbol */ .terminal-prompt { color: var(--clr-primary); margin-right: 8px; user-select: none; /* Can't accidentally copy the prompt */ } /* JSON key (purple) */ .terminal-key { color: var(--clr-secondary); } /* JSON string value (green like VS Code) */ .terminal-string { color: #98c379; } /* JSON number value (yellow like VS Code) */ .terminal-number { color: #e5c07b; } /* ================================================================ 11. SKILL CARDS & BARS (used on skills.html) ================================================================ */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } /* A single skill category card */ .skill-card { background: var(--clr-panel); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 28px; position: relative; overflow: hidden; transition: border-color var(--transition), transform var(--transition); } /* Coloured top border — colour set via --card-accent inline CSS var */ .skill-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--card-accent, var(--clr-primary)); box-shadow: 0 0 10px var(--card-accent, var(--clr-primary)); } /* Lift card on hover */ .skill-card:hover { border-color: var(--card-accent, var(--clr-primary)); transform: translateY(-4px); } /* Category label at the top of each card */ .skill-card-title { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--card-accent, var(--clr-primary)); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } /* Icon emoji before title — set via --card-icon CSS variable */ .skill-card-title::before { content: var(--card-icon, '⬡'); font-size: 1.2em; } /* One skill row: name + bar */ .skill-item { margin-bottom: 14px; } /* Name on the left, percentage on the right */ .skill-meta { display: flex; justify-content: space-between; margin-bottom: 6px; } .skill-name { font-family: var(--font-ui); font-size: 0.9rem; color: var(--clr-text); } .skill-pct { font-family: var(--font-display); font-size: 0.75rem; color: var(--card-accent, var(--clr-primary)); } /* Grey track behind the fill bar */ .skill-bar { height: 4px; background: var(--clr-border); border-radius: 2px; overflow: hidden; } /* Coloured fill — width set via inline style (e.g. style="width:75%") */ .skill-fill { height: 100%; background: var(--card-accent, var(--clr-primary)); box-shadow: 0 0 6px var(--card-accent, var(--clr-primary)); border-radius: 2px; /* Animates from 0 → full width when the page loads */ animation: fillBar 1.5s ease forwards; transform-origin: left; } /* Scale from 0 to 1 on the X axis */ @keyframes fillBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ================================================================ 12. PROJECT CARDS (used on projects.html) ================================================================ */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; } /* The card itself */ .project-card { background: var(--clr-panel); border: 1px solid var(--clr-border); border-radius: var(--radius); overflow: hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; /* Stack banner on top of content */ } .project-card:hover { transform: translateY(-6px); border-color: var(--clr-primary); box-shadow: 0 20px 40px rgba(0, 240, 255, 0.08); } /* Coloured top banner area with an emoji icon */ .project-banner { height: 140px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--banner-bg, linear-gradient(135deg, #00f0ff22, #bf00ff22)); } /* Big icon in the banner */ .project-banner-icon { font-size: 4rem; filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.5)); animation: floatIcon 4s ease-in-out infinite; /* Gentle up-down float */ } /* The icon gently bobs up and down */ @keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Grid-line decoration overlaid on the banner */ .project-banner::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; } /* White space below the banner */ .project-content { padding: 24px; flex: 1; /* Fills remaining height so cards are equal length */ display: flex; flex-direction: column; } /* "// Project 01" label */ .project-number { font-family: var(--font-display); font-size: 0.7rem; color: var(--clr-muted); letter-spacing: 3px; margin-bottom: 8px; } .project-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 12px; } .project-description { font-family: var(--font-ui); font-size: 0.95rem; color: var(--clr-muted); line-height: 1.7; flex: 1; /* Pushes tags + links to the bottom of the card */ margin-bottom: 20px; } /* Technology tags row */ .project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } /* Individual tag pill */ .tag { font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(0, 240, 255, 0.3); color: var(--clr-primary); background: rgba(0, 240, 255, 0.05); border-radius: 2px; } /* GitHub / Live Demo links at the bottom */ .project-links { display: flex; gap: 16px; } .project-link { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--clr-primary); text-decoration: none; letter-spacing: 1px; text-transform: uppercase; transition: text-shadow var(--transition); } .project-link:hover { text-shadow: var(--glow-cyan); } .project-link::before { content: '→ '; } /* ================================================================ 13. CONTACT SECTION (used on contact.html) ================================================================ */ #contact { text-align: center; } .contact-intro { font-family: var(--font-ui); font-size: 1.15rem; color: var(--clr-muted); max-width: 500px; margin: 0 auto 48px; line-height: 1.8; } /* Large glowing clickable email address */ .contact-email { display: inline-block; font-family: var(--font-display); font-size: clamp(1.2rem, 4vw, 2rem); font-weight: 700; color: var(--clr-primary); text-shadow: var(--glow-cyan); text-decoration: none; margin-bottom: 48px; transition: text-shadow var(--transition); } .contact-email:hover { text-shadow: var(--glow-cyan), 0 0 40px var(--clr-primary); } /* Row of social platform links */ .social-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; } .social-link { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding: 12px 24px; border: 1px solid var(--clr-border); color: var(--clr-muted); /* Angled parallelogram shape */ clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%); transition: all var(--transition); } .social-link:hover { border-color: var(--clr-secondary); color: var(--clr-secondary); box-shadow: var(--glow-purple); } /* ================================================================ 14. FOOTER ================================================================ */ footer { padding: 32px 0; border-top: 1px solid var(--clr-border); text-align: center; } .footer-text { font-family: var(--font-ui); font-size: 0.85rem; color: var(--clr-muted); letter-spacing: 1px; } /* The heart ♥ rendered in hot pink */ .footer-text span { color: var(--clr-tertiary); } /* ================================================================ 15. SCROLL-REVEAL ANIMATION Elements start invisible (opacity 0, shifted down 30px). JavaScript adds .visible when they enter the viewport. ================================================================ */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Cascade delays — children appear one after another */ .reveal:nth-child(2) { transition-delay: 0.1s; } .reveal:nth-child(3) { transition-delay: 0.2s; } .reveal:nth-child(4) { transition-delay: 0.3s; } /* ================================================================ 16. RESPONSIVE / MOBILE ================================================================ */ /* Tablet and below */ @media (max-width: 768px) { /* Two-column grids collapse to one column */ .about-grid { grid-template-columns: 1fr !important; } } /* Small phones */ @media (max-width: 600px) { .nav-links { display: none; } /* Hide nav on tiny screens */ .hero-buttons { flex-direction: column; } /* Stack buttons vertically */ .stats-row { gap: 24px; } .social-links { flex-direction: column; align-items: center; } }