/* styles.css — All visual styling for the site ============================================= This file controls everything you see: colours, fonts, layout, spacing, animations and responsive behaviour. It is linked from index.html. Think of HTML as the skeleton and CSS as the skin/clothing on top. A "selector" (e.g. .card, #navbar, body) targets an element, then the rules inside {} describe how it should look. File structure: 1. Reset & Base — zero out browser defaults, set font/colours on body 2. CSS Variables — colour palette and shared values defined once 3. Buttons — shared .btn styles + primary/secondary variants 4. Nav — fixed top navigation bar 5. Hero — full-screen landing section + particle canvas 6. Sections — shared padding/background rules for all sections 7. About — two-column bio + skills list 8. Portfolio — card grid and individual card styles 9. Game — snake canvas + score UI layout 10. Footer — bottom bar 11. Responsive — mobile overrides (screens under 768px wide) */ /* ── 1. Reset & Base ─────────────────────────────────────────────────────── Browsers apply their own default margins/padding which differ between Chrome, Firefox etc. This zeroes them all out so we start from a clean slate. box-sizing: border-box makes width/height calculations more predictable (padding is included inside the element size, not added on). ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* CSS custom properties (variables) — defined once here on :root (the element) and reused throughout the file with var(--name). This means you can change the whole colour scheme by editing just this block. e.g. change --accent to #ff0000 and every purple element turns red. */ :root { --bg: #0d0d12; /* page background — near black with a blue tint */ --surface: #13131a; /* slightly lighter background for alternating sections */ --border: #1e1e2e; /* subtle border colour for cards/nav */ --accent: #7c6ff7; /* primary accent — purple */ --accent2: #50e3c2; /* secondary accent — teal */ --text: #e2e2f0; /* main body text colour */ --muted: #7a7a9a; /* dimmed text for descriptions, labels */ --font-mono: 'Courier New', Courier, monospace; /* monospace font for code-like labels */ --radius: 8px; /* consistent corner rounding used on cards, buttons etc */ --nav-h: 60px; /* navbar height — used in multiple places so defined once */ } /* Makes clicking nav links animate smoothly down to the section instead of jumping */ html { scroll-behavior: smooth; } /* Base styles applied to the entire page */ body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 16px; line-height: 1.7; } /* All links default to accent colour with no underline; teal on hover */ a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent2); } /* .container centres content and limits it to 1100px wide with side padding. Wrap any section's content in
to keep it aligned. */ .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } /* ── 3. Buttons ──────────────────────────────────────────────────────────── Base .btn class shared by all buttons, with two variants: .btn-primary — solid purple (main actions) .btn-secondary — transparent with teal border (secondary actions) transition: animates the hover effect smoothly over 0.2s. ── */ .btn { display: inline-block; padding: .65rem 1.5rem; border-radius: var(--radius); font-weight: 600; font-size: .9rem; cursor: pointer; transition: opacity .2s, transform .15s; border: none; } /* Slightly fades and lifts the button up 1px when hovered */ .btn:hover { opacity: .85; transform: translateY(-1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-secondary { background: transparent; color: var(--accent2); border: 1.5px solid var(--accent2); } /* ── 4. Nav ───────────────────────────────────────────────────────────────── position:fixed keeps the nav visible as you scroll (it doesn't scroll away). backdrop-filter:blur gives the frosted glass effect over the hero below it. z-index:100 ensures it always sits on top of other content. ── */ #navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background: rgba(13,13,18,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; z-index: 100; } .nav-logo { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--accent2); letter-spacing: .1em; } .nav-links { list-style: none; display: flex; gap: 1.8rem; align-items: center; } .nav-links a { color: var(--muted); font-size: .9rem; transition: color .2s; } .nav-links a:hover { color: var(--text); } .nav-github { display: flex; align-items: center; gap: .4rem; color: var(--accent) !important; border: 1px solid var(--border); padding: .3rem .8rem; border-radius: var(--radius); transition: border-color .2s !important; } .nav-github:hover { border-color: var(--accent) !important; } /* display:none hides the hamburger button on desktop — shown only on mobile via @media */ .nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer; } /* ── 5. Hero ───────────────────────────────────────────────────────────────── 100vh = 100% of the viewport height, so the hero fills the whole screen. The canvas sits behind everything (position:absolute, no z-index). .hero-content sits on top with z-index:1. ── */ #hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Stretches the canvas to fill the entire hero section behind the text */ #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-content { position: relative; text-align: center; z-index: 1; max-width: 700px; padding: 2rem; } .hero-label { font-family: var(--font-mono); color: var(--accent2); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .75rem; } /* clamp(min, preferred, max) — font size scales with viewport width (7vw) but never goes below 2.5rem or above 5rem. Handles all screen sizes automatically. */ .hero-content h1 { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; background: linear-gradient(135deg, #fff 30%, var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; } .hero-sub { color: var(--muted); font-size: 1.1rem; margin-bottom: 2rem; } .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: .75rem; color: var(--muted); letter-spacing: .1em; animation: pulse 2s infinite; } /* @keyframes defines a reusable animation. "pulse" fades opacity from 0.4 → 1 → 0.4 The .hero-scroll-hint uses it with "animation: pulse 2s infinite" */ @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} } /* ── 6. Sections ───────────────────────────────────────────────────────────── All sections except hero get generous vertical padding. nth-child(even) alternates the background colour between --bg and --surface so sections visually separate without needing explicit dividers. ── */ section:not(#hero) { padding: 6rem 0; } section:nth-child(even) { background: var(--surface); } .section-title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; margin-bottom: .5rem; position: relative; display: inline-block; } /* ::after adds a decorative purple underline bar below each section title. It's a "pseudo-element" — generated by CSS, not in the HTML. */ .section-title::after { content: ''; display: block; height: 3px; width: 40px; background: var(--accent); margin-top: .4rem; border-radius: 2px; } .section-sub { color: var(--muted); margin-bottom: 2.5rem; } /* ── 7. About ──────────────────────────────────────────────────────────────── CSS Grid splits the section into two equal columns (1fr 1fr). On mobile this collapses to a single column via the @media rule at the bottom. ── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; align-items: start; } .about-text p { color: var(--muted); margin-bottom: 1rem; } .skills-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; } .skills-list li { font-family: var(--font-mono); font-size: .9rem; color: var(--accent2); padding-left: 1.2rem; position: relative; } /* ::before injects the ▸ arrow before each skill item without it being in the HTML */ .skills-list li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); } /* ── 8. Portfolio ──────────────────────────────────────────────────────────── auto-fill + minmax: CSS automatically decides how many columns fit. Cards are at least 280px wide; if there's room for more, they grow equally. So on desktop you get 4 columns, tablet 2, mobile 1 — automatically. ── */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .25s, transform .25s; } /* Cards lift up 4px and get a purple border on hover — the transition on .card makes this smooth */ .card:hover { border-color: var(--accent); transform: translateY(-4px); } /* The coloured banner at the top of each card. These use CSS gradients as placeholders — replace with a real screenshot later: e.g. background-image: url('images/water-shader.jpg'); */ .card-thumb { height: 160px; background-size: cover; background-position: center; } .card-thumb--shader { background: linear-gradient(135deg, #1a0533, #7c6ff7, #50e3c2); } .card-thumb--tool { background: linear-gradient(135deg, #0a1628, #1a6b9a, #50e3c2); } .card-thumb--vfx { background: linear-gradient(135deg, #2a0a00, #c0392b, #f39c12); } .card-thumb--proc { background: linear-gradient(135deg, #001a0a, #27ae60, #a8e6cf); } .card-body { padding: 1.2rem 1.4rem; } .card-tag { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent2); display: block; margin-bottom: .4rem; } .card-body h3 { font-size: 1.05rem; margin-bottom: .5rem; } .card-body p { color: var(--muted); font-size: .88rem; margin-bottom: 1rem; } .card-link { font-size: .88rem; font-weight: 600; color: var(--accent); } .card-link:hover { color: var(--accent2); } /* ── 9. Game ───────────────────────────────────────────────────────────────── The canvas and the score/button UI sit side by side using flexbox. flex-wrap: wrap lets them stack on smaller screens. ── */ #game .section-sub { margin-top: .5rem; } .game-wrapper { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; margin-top: 2rem; } #snake-canvas { border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg); display: block; max-width: 100%; } .game-ui { display: flex; flex-direction: column; gap: 1rem; min-width: 140px; } .game-score, .game-best { font-family: var(--font-mono); font-size: 1rem; color: var(--muted); } .game-score span, .game-best span { color: var(--accent2); font-weight: 700; } .game-controls { font-size: .82rem; color: var(--muted); } kbd { background: var(--border); border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono); font-size: .78rem; } /* ── 10. Footer ───────────────────────────────────────────────────────────── */ #footer { background: var(--surface); border-top: 1px solid var(--border); padding: 2rem 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: .88rem; } .footer-github { display: flex; align-items: center; gap: .4rem; color: var(--muted) !important; } .footer-github:hover { color: var(--text) !important; } /* ── 11. Responsive ────────────────────────────────────────────────────────── @media (max-width: 768px) means: only apply these rules on screens narrower than 768px (tablets and phones). Everything outside this block applies to ALL screen sizes. ── */ @media (max-width: 768px) { .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--surface); padding: 1rem 2rem; border-bottom: 1px solid var(--border); gap: 1rem; } .nav-links.open { display: flex; } .nav-toggle { display: block; } .about-grid { grid-template-columns: 1fr; gap: 2rem; } .game-wrapper { justify-content: center; } #snake-canvas { width: 100%; height: auto; } }