html,
body {
height: 100%;
}
/* The page gradient lives on , not , for two reasons:
1. The wave canvas (#bganim) is fixed at z-index:-1. A *negative* z-index
paints above the root element's background but BELOW a normal block's
background, so an opaque background would cover the waves --
whereas a background on sits behind the canvas, as intended.
2. Giving a real background also stops iOS rubber-band overscroll
from flashing white above and below the page. */
html {
background-color: var(--bg-dark);
background-image: linear-gradient(to top, var(--bg-dark) 0%, var(--bg-dark-top) 100%);
}
@font-face {
font-family: 'Geo';
src: url('../fonts/geo/Geo-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Geo';
src: url('../fonts/geo/Geo-Italic.ttf') format('truetype');
font-style: italic;
}
@font-face {
font-family: 'Aldrich';
src: url('../fonts/aldrich/Aldrich-Regular.ttf') format('truetype');
}
:root {
--bg-dark: #0c0451;
/* slightly lighter indigo used at the top of the page's vertical gradient */
--bg-dark-top: #2c1fa3;
--panel-bg: rgba(26, 35, 114, 0.7);
/* grey panel tint shared by the links & cv sections */
--panel-grey: rgba(58, 62, 72, 0.7);
--card-bg: #3c50c4;
--btn-bg: #696bd2;
--btn-hover-bg: #7a85e0;
--card-hover-bg: #99a1e1;
--border-glow: #1a6fa8;
/* bright electric-blue conduits for the skill-tree lines/diamonds (FFX grid) */
--line-core: #6fd2ff;
--line-glow: #1e9bff;
--normal-text: #ffffff;
--accent-gold: #c9a84c;
--text-primary: #e8e8f0;
--nav-hover-bg: rgba(26, 111, 168, 0.3);
--nav-hover-text: #7ecef4;
--btn-text: #fff;
}
.comp{
color: #9d74db;
}
.about-me h1 {
margin-bottom: 5px;
text-align: center;
}
.page {
margin: 0;
display: grid;
/* gradient moved to (see above) so the fixed wave canvas paints
over it; the body itself stays transparent */
background: transparent;
color: #fff;
font-family: 'Geo';
}
.panels {
display: flex;
height: 100%;
width: 100%;
margin: 40px auto;
max-width: 1200px;
max-height: 800px;
gap: 30px;
}
.panel {
background-color: var(--panel-bg);
padding: 20px;
border: 5px solid var(--border-glow);
box-shadow: 0 0 12px rgba(26, 111, 168, 0.4), inset 0 0 20px rgba(0,0,0,0.5);
display: flex;
border-radius: 8px;
}
.sidebar {
display: flex;
width: 200px;
}
.mainsec {
display: grid;
flex: 1;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
}
li {
font-size: 1.5rem;
padding: 10px 14px;
cursor: pointer;
transition: all 0.2s ease;
color: var(--text-primary);
}
li:hover {
background-color: var(--nav-hover-bg);
}
li.active, li.active:hover {
background-color: var(--nav-hover-bg);
color: var(--accent-gold);
}
.section {
display: none;
}
.section.active {
display: block;
}
.proj-card {
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
color: inherit;
background-color: var(--card-bg);
padding: 15px;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
min-height: 200px;
}
.proj-card h3 {
margin-top: 0;
color: var(--normal-text);
}
.proj-card p {
margin: 10px 0;
color: var(--text-primary);
font-size: 1.2rem;
}
.proj-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.4);
background-color: var(--card-hover-bg);
}
.proj-card > div:last-child {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.stack {
display: inline-block;
padding: 3px 8px;
border: 1px solid var(--border-glow);
border-radius: 4px;
font-size: 0.8rem;
color: var(--nav-hover-text);
background-color: var(--btn-bg);
}
.current-card{
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
color: inherit;
background-color: var(--card-bg);
padding: 15px;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
min-height: 100px;
}
.current-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.4);
background-color: var(--card-hover-bg);
}
.curr-left h3 {
margin-top: 0;
}
.curr-left{
align-self: flex-start;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.curr-right{
align-self: flex-start;
text-align: right;
font-size: 1.5rem;
white-space: nowrap;
}
#projects.active {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding: 15px;
align-content: start;
}
/* cv */
#cv.active {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow-y: auto;
padding: 10px 25px;
box-sizing: border-box;
/* Firefox scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--btn-bg) var(--bg-dark);
}
/* WebKit/Chromium scrollbar -- themed to match the panels */
#cv.active::-webkit-scrollbar {
width: 12px;
}
#cv.active::-webkit-scrollbar-track {
background: var(--bg-dark);
border-radius: 6px;
}
#cv.active::-webkit-scrollbar-thumb {
background: var(--btn-bg);
border: 2px solid var(--bg-dark);
border-radius: 6px;
}
#cv.active::-webkit-scrollbar-thumb:hover {
background: var(--accent-gold);
}
.cv-btn {
color: var(--btn-text);
display: block;
padding: 12px 30px;
margin: 10px;
border: 2px solid var(--border-glow);
border-radius: 6px;
background-color: var(--btn-bg);
text-decoration: none;
font-size: 2.0rem;
text-align: center;
--border-glow: None;
}
.cv-btn:hover {
background-color: var(--btn-hover-bg);
}
/* cv header: name, location, contact links, download button */
.cv-header {
text-align: center;
margin-bottom: 20px;
}
.cv-header h1 {
margin-bottom: 5px;
color: var(--accent-gold);
}
.cv-location {
margin: 0 0 10px;
font-size: 1.2rem;
color: var(--text-primary);
}
.cv-contact {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 15px;
}
.cv-contact a {
color: var(--text-primary);
text-decoration: none;
font-size: 1rem;
transition: color 0.2s ease;
}
.cv-contact a:hover {
color: var(--accent-gold);
}
.cv-contact i {
margin-right: 5px;
}
/* download button reuses .cv-btn, scaled down to sit inline in the header */
.cv-download {
align-self: center;
font-size: 1.2rem;
padding: 8px 24px;
}
/* a major cv section: Education / Projects / Technical Skills */
.cv-block {
margin-bottom: 22px;
}
.cv-block > h2 {
margin-bottom: 12px;
padding-bottom: 4px;
color: var(--accent-gold);
border-bottom: 2px solid var(--border-glow);
text-transform: uppercase;
letter-spacing: 1px;
}
.cv-entry {
background-color: var(--card-bg);
padding: 15px;
margin-bottom: 12px;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
/* title left, date/tech right -- mirrors the .current-card layout */
.cv-entry-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}
.cv-entry-head h3 {
margin: 0;
color: var(--normal-text);
}
.cv-subtitle {
font-style: italic;
font-weight: normal;
color: var(--text-primary);
}
.cv-entry-right {
text-align: right;
white-space: nowrap;
color: var(--text-primary);
}
.cv-entry-right .date {
display: block;
font-size: 1.1rem;
}
.cv-loc {
display: block;
font-style: italic;
font-size: 0.95rem;
}
.cv-tech {
display: block;
font-size: 1rem;
color: var(--nav-hover-text);
}
/* bullet lists inside entries -- override the sidebar-oriented global li rules */
.cv-entry ul {
width: 100%;
margin: 10px 0 0;
padding-left: 20px;
list-style: disc;
}
.cv-entry li {
padding: 2px 0;
font-size: 1.05rem;
color: var(--text-primary);
cursor: default;
}
.cv-entry li:hover {
background-color: transparent;
}
.cv-skills p {
margin: 6px 0;
font-size: 1.05rem;
color: var(--text-primary);
}
/* home */
.about-me {
display: flex;
flex-direction: column;
padding: 10px;
font-size: 1.8rem;
}
.sprite-field{
height: 20%;
border-bottom: 1px solid var(--border-glow);
margin-bottom: 15px;
position: relative;
overflow: hidden;
}
/* actual sprite display */
.sprite-wrapper {
width: 128px;
height: 128px;
overflow: hidden;
position: absolute;
animation: movein 1.4s linear forwards;
}
.sprite {
width: 128px;
height: 128px;
background-image: url('../char/walk.png');
background-repeat: no-repeat;
background-position: 0 -128px;
background-size: 1664px 512px;
image-rendering: pixelated;
animation: walk 0.9s steps(9) infinite;
}
@keyframes walk {
from { background-position: 0 -128px; }
to { background-position: -1152px -128px; }
}
@keyframes movein{
from { left: 100%; }
to { left: 40%; }
}
/* about me links */
.social-links {
display: flex;
gap: 15px;
margin-top: 10px;
align-self: center;
}
.social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid var(--border-glow);
color: var(--text-primary);
text-decoration: none;
font-size: 1.2rem;
transition: all 0.2s ease;
}
.social-btn:hover {
border-color: var(--accent-gold);
color: var(--accent-gold);
}
/* skilltree styling for links */
.skilltree {
position: relative;
width: 100%;
height: 100%;
}
/* when the links or cv section is showing, tint the main panel's translucent fill
grey (instead of the default blue) */
.panel.mainsec:has(#links.active),
.panel.mainsec:has(#cv.active) {
background-color: var(--panel-grey);
}
#links.active{
height: 100%;
}
/* connecting lines sit behind the nodes and ignore clicks */
.constellation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* bright, glowing electric conduits — the dominant visual element, like FFX.
A thin bright core stroke wrapped in layered blue glow via stacked drop-shadows. */
.constellation line {
/* default conduit is white so any cluster colour reads clearly on hover */
stroke: #f5fbff;
stroke-width: 2.6;
opacity: 0.9;
filter:
drop-shadow(0 0 1px #ffffff)
drop-shadow(0 0 4px #ffffff)
drop-shadow(0 0 9px rgba(255, 255, 255, 0.7));
animation: line-pulse 3.2s ease-in-out infinite alternate;
transition: stroke 0.2s ease, filter 0.2s ease;
}
/* lit while its end node is hovered; --hl is the node's colour, set inline by JS */
.constellation line.lit {
stroke: var(--hl);
filter:
drop-shadow(0 0 2px var(--hl))
drop-shadow(0 0 6px var(--hl))
drop-shadow(0 0 12px var(--hl));
}
@keyframes line-pulse {
from { opacity: 0.7; }
to { opacity: 1; }
}
/* tiny glowing light-blue circle marking each branch point (added by skilltree.js) */
.junction {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: #cdeeff;
box-shadow: 0 0 4px var(--line-core), 0 0 8px var(--line-glow);
z-index: 0;
pointer-events: none;
}
/* central hub node */
.hub {
position: absolute;
/* top/left mark the centre so the trunk lines meet it cleanly */
transform: translate(-50%, -50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
/* distinctly larger than the nodes + a gold ring = unmistakable focal point */
width: 132px;
height: 132px;
padding: 16px;
box-sizing: border-box;
border-radius: 50%;
/* same glassy-orb recipe as .node, but a neutral grey core */
--node-color: #82858d;
background:
radial-gradient(circle at 36% 30%,
color-mix(in srgb, var(--node-color) 10%, #fff) 0%,
var(--node-color) 34%,
color-mix(in srgb, var(--node-color) 78%, #000) 80%,
color-mix(in srgb, var(--node-color) 50%, #000) 100%);
border: 1px solid color-mix(in srgb, var(--node-color) 45%, #000);
box-shadow:
inset 0 3px 6px color-mix(in srgb, var(--node-color) 20%, #fff),
inset 0 -9px 16px color-mix(in srgb, var(--node-color) 60%, #000),
0 4px 10px rgba(0, 0, 0, 0.5),
0 0 0 3px var(--bg-dark), /* dark gap */
0 0 0 6px var(--accent-gold), /* detached gold ring */
0 0 28px rgba(201, 168, 76, 0.55); /* outer gold glow */
color: var(--text-primary);
/* strong dark halo so the label stays legible over the glossy grey orb */
text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.85);
text-align: center;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
position: relative;
}
/* hub gets a smaller highlight kept up top so it doesn't wash over the text */
.hub::before {
top: 9%;
left: 24%;
width: 32%;
height: 20%;
background: radial-gradient(circle at 50% 50%,
rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
/* keep the hub label above its own specular highlight */
.hub {
z-index: 1;
}
.hub::before { z-index: -1; }
.node {
position: absolute;
/* top/left mark the node's centre so SVG line endpoints line up exactly */
transform: translate(-50%, -50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
/* small, like the FFX grid — the nodes hang off the lines, not vice versa */
width: 64px;
height: 64px;
border-radius: 50%;
/* --node-color is set per data-cluster below; falls back to the default glow.
Tighter off-centre highlight + dark rim = a glassy 3D orb, not a flat disc. */
--node-color: var(--card-bg);
background:
radial-gradient(circle at 36% 30%,
color-mix(in srgb, var(--node-color) 10%, #fff) 0%,
var(--node-color) 34%,
color-mix(in srgb, var(--node-color) 78%, #000) 78%,
color-mix(in srgb, var(--node-color) 50%, #000) 100%);
/* border is a much darker shade of the node's own colour */
border: 3px solid color-mix(in srgb, var(--node-color) 35%, #000);
/* bright inset rim-light up top, deep inset terminator at the base for curvature,
and a tight contact drop shadow so the orb sits in space */
box-shadow:
inset 0 3px 4px color-mix(in srgb, var(--node-color) 8%, #fff),
inset 0 -5px 8px color-mix(in srgb, var(--node-color) 60%, #000),
0 3px 6px rgba(0, 0, 0, 0.5);
color: var(--text-primary);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
text-decoration: none;
font-size: 1rem;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* glassy specular highlight near the top-left of every orb (hub + nodes) */
.node::before,
.hub::before {
content: "";
position: absolute;
top: 12%;
left: 18%;
width: 40%;
height: 30%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%,
rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
pointer-events: none;
z-index: 2;
}
.node i {
font-size: 1.65rem;
z-index: 1;
/* sit the glyph above the sphere's shading with a soft drop shadow */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
/* white-silhouette PNGs in icons/white/ stand in where there's no brand glyph */
.node img {
width: 32px;
height: 32px;
object-fit: contain;
z-index: 1;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.node:hover {
transform: translate(-50%, -50%) scale(1.12);
box-shadow:
inset 0 2px 3px color-mix(in srgb, var(--node-color) 20%, #fff),
inset 0 -5px 8px color-mix(in srgb, var(--node-color) 60%, #000),
0 0 16px var(--node-color);
}
/* cluster colour coding, mirroring the FFX sphere-grid node palette
but in muted, earthier tones rather than bright primaries */
.node[data-cluster="professional"] { --node-color: #b8954a; } /* aged amber */
.node[data-cluster="music"] { --node-color: #6e9457; } /* sage/olive green */
.node[data-cluster="media"] { --node-color: #876f9e; } /* muted plum */
.node[data-cluster="social"] { --node-color: #5a7fa0; } /* slate blue */
/* background animation */
#bganim {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* ------------------------------------------------------------------ */
/* Mobile / narrow screens */
/* The desktop layout is a fixed-width sidebar beside a flexible main */
/* panel with fixed heights. On a phone we stack everything into a */
/* single scrolling column, turn the sidebar into a horizontal nav, */
/* drop the projects grid to one column, and scale type/spacing down. */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
html,
body {
height: auto;
min-height: 100%;
/* hard stop on any sideways scroll: nothing on a phone should
extend past the viewport width */
overflow-x: hidden;
max-width: 100%;
}
.page {
display: block;
max-width: 100%;
overflow-x: hidden;
}
.panels {
flex-direction: column;
/* fill the viewport so the panels reach the bottom of the screen
instead of leaving a dead band of background underneath; min-
height (not height) still lets long sections like the CV grow */
height: auto;
min-height: calc(100vh - 32px);
max-height: none;
margin: 16px auto;
width: auto;
gap: 16px;
padding: 0 12px;
box-sizing: border-box;
}
.panel {
padding: 14px;
border-width: 3px;
/* without this the panel is content-box, so when it stretches to
fill the column its padding + border spill ~17px past each edge
and run off the right of the screen */
box-sizing: border-box;
}
/* sidebar -> horizontal nav across the top */
.sidebar {
width: auto;
}
.sidebar ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
}
.sidebar li {
font-size: 1.1rem;
padding: 8px 12px;
border-radius: 4px;
}
/* main panel grows to absorb the leftover height so it reaches the
bottom of the screen; its content stays anchored at the top */
.mainsec {
width: 100%;
min-width: 0;
flex: 1;
}
/* home */
.about-me {
font-size: 1.1rem;
padding: 4px;
}
.about-me h1 {
font-size: 1.8rem;
}
.sprite-field {
height: 120px;
}
.sprite-wrapper,
.sprite {
width: 96px;
height: 96px;
}
.sprite {
background-size: 1248px 384px;
background-position: 0 -96px;
}
@keyframes walk {
from { background-position: 0 -96px; }
to { background-position: -864px -96px; }
}
/* projects -> single column, shorter cards */
#projects.active {
grid-template-columns: 1fr;
padding: 4px;
}
.proj-card {
min-height: 0;
}
.proj-card p {
font-size: 1rem;
}
/* in the works */
.current-card {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.curr-right {
text-align: left;
font-size: 1.2rem;
}
/* cv -- it scrolls inside its own panel on desktop; on mobile let it
grow with the page instead so the whole document scrolls as one */
#cv.active {
height: auto;
overflow-y: visible;
padding: 8px 12px;
}
/* keep cards within the panel and stop long words / the bullet indent
from spilling past the card's right edge */
.cv-entry {
box-sizing: border-box;
}
.cv-entry ul {
padding-left: 18px;
}
.cv-entry li,
.cv-skills p {
overflow-wrap: break-word;
word-break: break-word;
}
.cv-entry-head {
flex-direction: column;
gap: 4px;
}
.cv-entry-right {
text-align: left;
white-space: normal;
}
.cv-download {
font-size: 1.1rem;
}
/* links skill-tree: nodes are positioned by % of the container, so it
needs an explicit height once the panel is no longer full-height.
Shrink the orbs so they don't collide on a narrow screen. */
#links.active {
height: 70vh;
min-height: 440px;
}
/* keep the edge orbs (e.g. Instagram at left:86%) from pushing past
the panel and creating a sideways scroll */
.skilltree {
overflow: hidden;
}
.hub {
width: 96px;
height: 96px;
padding: 10px;
font-size: 0.85rem;
}
.node {
width: 48px;
height: 48px;
}
.node i {
font-size: 1.2rem;
}
.node img {
width: 24px;
height: 24px;
}
}