/* style.css Merged: Current responsive layout + Nord palette + local fonts + light/dark toggle - Fonts assumed to be in: assets/fonts/poppins/*.woff2 and assets/fonts/jetbrains-mono/*.woff2 */ /* === Local fonts (only the weights you use) === */ @font-face { font-family: "Poppins"; src: url("assets/fonts/poppins/Poppins-Regular.otf") format("otf"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("assets/fonts/poppins/Poppins-Italic.otf") format("otf"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Poppins"; src: url("assets/fonts/poppins/Poppins-SemiBold.otf") format("otf"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("assets/fonts/poppins/Poppins-Bold.otf") format("otf"); font-weight: 700; font-style: normal; font-display: swap; } /* JetBrains Mono for code-like headings (coder-gxrl) */ @font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono/JetBrainsMono-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* === Nord color variables === Default = dark (Polar Night) Toggle light by setting: */ :root{ /* Polar Night / Snow Storm mapping (Nord palette) */ --bg: #2E3440; /* main background (Polar Night) */ --bg-2: #3B4252; /* darker panels */ --fg: #D8DEE9; /* main foreground (Snow Storm - light text) */ --muted: #A3AFC1; /* secondary text */ --heading: #ECEFF4;/* headings */ --panel: #3B4252; /* panel background (def) */ --accent: #88C0D0; /* primary accent (Frost) */ --info: #81A1C1; --success: #A3BE8C; --warning: #EBCB8B; --error: #BF616A; --radius: 8px; --gap: 1rem; --container-max: 70rem; /* Font stacks */ --main-font: "Poppins", "Arial", "Helvetica", sans-serif; --secondary-font: "JetBrains Mono", "Courier New", monospace; --ui-font: "Poppins", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --mono-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* convenience aliases so existing selectors keep working */ --dark-blue: var(--bg); /* legacy name mapped to nord bg */ --white-blue: var(--heading); /* legacy headings */ --light-blue: var(--fg); /* legacy body text */ --accent-opaque: var(--accent); /* legacy accent */ --accent-translucent: rgba(136,192,208,0.72); /* translucent accent fallback */ --secondary-teal: var(--info); /* legacy teal -> nord info */ --soft-sage: var(--bg-2); /* legacy soft-sage -> panel/bg-2 */ } /* Light theme overrides (Snow Storm primary) */ [data-theme="light"]{ --bg: #ECEFF4; --bg-2: #E5E9F0; --fg: #2E3440; --muted: #4C566A; --heading: #2E3440; --panel: #E5E9F0; /* keep aliases updated automatically by referencing the base vars */ --dark-blue: var(--bg); --white-blue: var(--heading); --light-blue: var(--fg); --accent-opaque: var(--accent); --secondary-teal: var(--info); --soft-sage: var(--bg-2); } /* Reset + base */ * { box-sizing: border-box; margin: 0; } html, body { height: 100%; } body { display: flex; background-color: var(--dark-blue); /* uses alias -> var(--bg) */ color: var(--light-blue); /* alias -> var(--fg) */ font-family: var(--ui-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; transition: background-color .20s ease, color .20s ease; } /* Layout: left column fixed + right content column (keeps your responsive behaviour) */ #left-column { position: fixed; top: 0; left: 0; height: 100vh; width: 30vw; padding: 5rem 2rem; margin-left: 5vw; display: flex; flex-direction: column; justify-content: space-around; } /* main content column */ #right-column { margin-left: 45vw; width: 50vw; box-sizing: border-box; padding: 5rem 2rem 2rem 2rem; } /* sections common */ .section { scroll-margin-top: 50px; } /* links */ a { text-decoration: none; color: var(--accent-opaque); } /* accent */ a:hover { text-decoration: underline; } /* headings */ h1 { color: var(--white-blue); /* heading alias -> var(--heading) */ font-size: 48px; font-weight: 600; } h2 { font-size: 24px; color: var(--white-blue); font-weight: 500; } h2 span { font-size: 22px; font-weight: bold; } h3 { font-size: 16px; } p { font-size: 16px; color: var(--muted); } /* left column small text scaling */ #left-column p, #projects p, #resume p, #technologies p { font-size: 14px; } /* about paragraph */ #about p { line-height: 24px; padding-top: 15px; } /* small hero job title tweaks */ #job-title { font-weight: normal; font-size: 20px; margin: -10px auto 20px auto; } /* spacing and titles */ .title { margin-bottom: 4rem; padding-top: 20px; } .responsive-paragraph { display: none; } /* resume specifics */ #resume .flex-container h2 { font-size: 24px; font-weight: 500; } #resume .flex-container h3 { font-size: 20px; font-weight: 300; color: var(--white-blue); } /* coder font usage */ .coder-gxrl { font-family: var(--secondary-font); } /* navbar */ #navbar { display: flex; flex-direction: column; justify-content: left; width: 100%; line-height: 1.75rem; margin-top: 1rem; } #navbar a { display: flex; align-items: center; gap: 0.5rem; width: 75%; text-decoration: none; } #navbar .slash { flex-shrink: 0; color: var(--accent-opaque); font-weight: normal; font-size: 16px; } .nav-label-container { width: 100%; position: relative; overflow: hidden; } #navbar .nav-label { display: inline-block; width: 100%; transition: transform 0.3s ease, letter-spacing 0.2s ease; } #navbar a:hover .nav-label { transform: translateX(30px); letter-spacing: 0.2em; } #navbar a.active .nav-label { transform: translateX(80%); letter-spacing: normal; font-weight: bolder; } #navbar a.active .nav-label.projects { transform: translateX(65%); } #navbar a.active .nav-label.resume { transform: translateX(75%); } .responsive-slash { display: none; } /* quick links */ #resume a { margin: 10px auto 10px 0px; } .quick-link, .quick-link a { color: var(--secondary-teal); } /* muted / info */ .quick-link { width: 75%; } .quick-link .row { display: flex; flex-direction: row; align-items: center; } .quick-link img { min-width: 15px; width: 1.2rem; margin: 8px; } /* containers */ .block-container, .flex-container { width: 100%; } .block-container { display: block; margin: 0 auto 8rem auto; padding: 10px; } .flex-container { display: flex; gap: 30px; flex-direction: row; flex-wrap: wrap; width: 100%; } #projects .flex-container, #resume .flex-container { gap: 75px; } /* cards */ .card { display: flex; flex-direction: row; gap: 20px; background: var(--panel); /* uses nord panel color via alias */ color: var(--fg); border-radius: var(--radius); padding: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,0.06); } /* inner card styling kept */ .card div div { display:flex; gap:20px; margin-top:.25rem; } .wrap { flex-wrap: wrap; } .column { float: left; } .column-small { align-items: end; padding: 10px; min-width: 150px; } .column-large { align-items: start; padding: 10px; width: 60%; min-width: 200px; } /* flex rows/columns */ .flex-row { display:flex; flex-direction:row; flex-wrap:wrap; width:100%; } #projects .flex-row { gap: 20px; } .flex-column { display:flex; flex-direction:column; width:100%; } .column-justify-right { flex:1; } .column-justify-left { flex:3; } .column-small, .column-large { width:100%; max-width:100%; } /* bubble / tech tags */ .bubble-container { display:flex; flex-wrap:wrap; justify-content:start; gap:15px; width:100%; max-width:1000px; position:relative; z-index:1; align-items:baseline; } .bubble { width:125px; height:100px; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; transition: transform .2s ease-in-out; position:relative; font-size:14px; background: transparent; } .bubble:hover { transform: scale(1.2); } /* hobbies */ .hobbies-section { padding:2rem 1rem; max-width:1000px; margin:0 auto; } .hobbies-text { font-size:1rem; margin-bottom:1.5rem; text-align:left; } .hobbies-gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:3rem 4rem; margin-top:3rem; } /* photos */ .photo { overflow:hidden; box-shadow: 10px 10px var(--secondary-teal); } /* teal shadow */ .photo img { width:100%; height:100%; object-fit:cover; } .photo.small { flex:1 1 calc(33.333% - 1rem); aspect-ratio:1/1; max-width:150px; max-height:150px; } .photo.tall { flex:1 1 calc(50% - 1rem); aspect-ratio:2/3; max-width:175px; } /* skills area */ #skills { margin-top: 50px; } footer a { display:inline-block; text-align:center; width:100%; margin:0 auto 20px auto; color:var(--secondary-teal); } /* icons and thumbnails */ .tool-icon { width:50px; margin-bottom:5px; } .thumbnail { width:100%; aspect-ratio:3/2; border-radius:5px; border:3px solid var(--accent-opaque); margin-right:20px; overflow:hidden; display:block; } .thumbnail img { width:100%; height:100%; object-fit:cover; display:block; } #projects .thumbnail:hover { border-color: var(--secondary-teal); } /* vertical text */ .vertical-text { writing-mode: sideways-lr; margin:auto 10px; text-align:end; } /* chips */ .chip { display:inline-flex; white-space:nowrap; padding: 0 25px; height:50px; font-size:16px; line-height:50px; } .chip img { float:left; margin:0 10px 0 -25px; height:50px; width:50px; } /* ovals */ .oval-container { display:inline-flex; gap:10px; padding:5px 0; flex-wrap:wrap; } .oval { white-space:nowrap; padding:0 10px; border-radius:12px; background-color: var(--soft-sage); /* alias -> bg-2 */ color: var(--white-blue); /* alias -> heading */ font-weight:600; } /* emphasized spans */ span { font-weight:600; font-size:18px; color:var(--white-blue); letter-spacing:0.04em; } /* feather SVG styles (keeps strokes in the new palette) */ svg.feather, #resume .quick-link svg.feather { width:18px; height:18px; margin-left:.2rem; vertical-align:top; stroke: var(--secondary-teal); stroke-width:2; transition: transform .2s ease; } a:hover svg.feather, #resume .quick-link a:hover svg.feather { transform: translateX(4px) rotate(3deg); stroke: var(--accent-opaque); } /* quick-link hover */ .quick-link a:hover { color: var(--accent-opaque); } .quick-link svg.feather { stroke: var(--secondary-teal); } .quick-link a:hover svg.feather { stroke: var(--accent-opaque); } /* resume sublabel */ #resume .sublabel { font-size:16px; } /* link color fallbacks */ #projects a, #projects a span, #resume a, footer a { color: var(--secondary-teal); } #projects a:hover, #projects a span:hover, #resume a:hover, footer a:hover { color: var(--accent-opaque); } /* link groups */ .links-full-size { width:100%; padding:15px 0; text-align:right; line-height:1.8; } .links-mobile-size { display:none; } /* small helpers */ .vertical-text { writing-mode: sideways-lr; } .svg-inline { display:inline-block; vertical-align:middle; } /* hamburger and mobile-specific interactions are below (kept from your CSS) */ /* responsive adjustments */ @media (max-width: 1360px) { #navbar a.active .nav-label { transform: translateX(60%); } #navbar a.active .nav-label.projects { transform: translateX(45%); } #navbar a.active .nav-label.resume { transform: translateX(50%); } #my-name { font-size: 36px; } #job-title { font-size: 20px; } .quick-link { width: 100%; } .hobbies-gallery { gap: 2rem; } .photo.tall { flex: 1 1 calc(33.333% - 1rem); aspect-ratio: 1/1; max-width:150px; max-height:150px; } } @media (max-width: 1072px) { body { flex-direction: column; } #left-column { position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 1000; padding: 1.5rem 1.5rem; background-color: var(--dark-blue); border-bottom: 2px solid var(--soft-sage); display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: .25rem; overflow-y: auto; margin: 0; } #right-column { width: 100%; padding: 2rem 1.5rem; height: auto; margin: 110px 0 0 0; } .section { scroll-margin-top: 100px; } #left-column #name-title-container { flex:1; justify-content:flex-start; } .responsive-paragraph { display:flex; color: var(--secondary-teal); text-align:center; } #my-name { font-size: 22px; font-weight:500; } #job-title { font-size: 14px; font-weight:300; line-height:12px; margin:auto; } .coder-gxrl { font-size:14px; } #navbar { display:flex; flex-direction: row; justify-content: space-around; align-items:center; padding:0; gap:.25rem; margin:0; flex:2; } #navbar a { flex-direction: row; justify-content: space-around; align-items:flex-end; gap:.25rem; padding:.5rem; font-size:12px; } #navbar .slash { color: var(--accent-opaque); font-weight: normal; font-size:12px; display:none; } .nav-label-container { width:auto; } .nav-label-container.about { justify-content:right; } #navbar .nav-label, #navbar a:hover .nav-label, #navbar a.active .nav-label { transform:none !important; } #navbar a:hover .nav-label, #navbar a.active .nav-label { letter-spacing: .5rem; font-weight: bolder; font-size:16px; transition: font-size .2 ease, letter-spacing .2s ease; } .responsive-slash { display: contents; align-items:center; color: var(--accent-opaque); } #quick-link-container { display:flex; flex-direction:row; gap:10px; flex:1; justify-content:flex-end; margin-right:10px; } .quick-link { width:auto; margin:0; } .quick-link .row { flex-direction: row; align-items:center; justify-content:flex-end; } .quick-link p, #name-title-container p, #name-title-container h3 { display:none; } .quick-link img { width:20px; height:20px; margin:0 0 0 10px; } .hobbies-gallery { margin-top:4rem; } .links-full-size { display:flex; flex-direction:row; justify-content:space-around; } } @media (max-width: 768px) { #left-column { display:flex; justify-content:space-between; align-items:center; padding:1rem; position:fixed; top:0; left:0; width:100%; background-color: var(--dark-blue); z-index:1000; border-bottom:2px solid var(--soft-sage); height:auto; gap:15px; } #right-column { margin-top:60px; padding: 2rem 1rem; } .section { scroll-margin-top:70px; } .hamburger { display:flex; flex-direction:column; justify-content:space-between; height:18px; cursor:pointer; } .hamburger div { width:24px; height:3px; background-color: var(--secondary-teal); border-radius:2px; } #navbar { display:flex; flex-direction:column; align-items:flex-start; text-align:left; position:fixed; top:60px; left:0; width:100%; background-color: var(--dark-blue); z-index:999; max-height:0; overflow:hidden; transition: max-height .4s ease-in-out, padding .3s ease-in-out; padding:0; border-bottom:none; } #navbar.open { max-height:500px; padding:1rem 0; } #navbar a { padding:.75rem 2rem; font-size:16px; border:none; display:flex; justify-content:flex-start; align-items:center; gap:1rem; font-weight: normal; width:100%; } #navbar .slash { display:inline-block; width:1rem; text-align:left; font-size:16px; color: var(--accent-opaque); } #navbar::after { content:""; display:block; height:2px; width:100%; background-color: var(--soft-sage); margin-top:1rem; opacity:0; transition:opacity .3s ease; } #navbar.open::after { opacity:1; } .responsive-slash { display:none; } #name-title-container p, #name-title-container h3 { display:none; } #navbar .nav-label, #navbar a:hover .nav-label, #navbar a.active .nav-label { transform:none !important; letter-spacing: normal !important; font-size:16px !important; font-weight: normal; } #navbar a.active .nav-label { font-weight: bold; } .nav-label-container { display:flex; align-items:center; justify-content:flex-start; flex-grow:1; } #my-name { font-size: 18px; } #job-title { font-size: 12px; line-height: 4px; } .nav-label { width:auto; text-align:left; } .quick-link img { width:20px; height:20px; margin:0 0 0 3px; } .bubble-container { justify-content:center; } .bubble { width:75px; height: unset; aspect-ratio: 5/4; padding: 20px; } .tool-icon { width:30px; margin-bottom:5px; } .coder-gxrl { font-size:14px; } .block-container { margin-bottom:4rem; } .flex-row { flex-direction:column; } .flex-row, #projects .flex-row { gap:15px; } .links-full-size { display:none; } .links-mobile-size { display:inline-flex; font-size:18px; gap:20px; } #projects .flex-column > p { font-size:1rem; } #projects .column-justify-left { gap:10px; } } /* Accessibility: focus outlines */ :focus { outline: 3px solid rgba(136,192,208,0.16); outline-offset: 2px; }