diff --git a/assets/styles.css b/assets/styles.css index 57caadd..93bacd5 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -1,127 +1 @@ -/* Ecosystem Atlas — organisation pages */ -:root { - --accent-color: hsl(0, 84%, 56%); - --bg-color: #0b0d0c; - --paper: #eef1ed; - --text-primary: var(--paper); - --text-secondary: #a1a8a1; - --card-bg: transparent; - --card-border: rgba(238,241,237,.13); - --line: rgba(238,241,237,.13); - --quiet-line: rgba(238,241,237,.075); - --font-heading: Inter, ui-sans-serif, system-ui, sans-serif; - --font-body: Inter, ui-sans-serif, system-ui, sans-serif; - --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; -} - -* { box-sizing: border-box; } -html { scroll-behavior: smooth; } -body { - margin: 0; - min-width: 320px; - color: var(--text-primary); - background: - linear-gradient(90deg, transparent 49.92%, rgba(238,241,237,.035) 50%, transparent 50.08%) center / 12rem 12rem, - linear-gradient(0deg, transparent 49.92%, rgba(238,241,237,.035) 50%, transparent 50.08%) center / 12rem 12rem, - var(--bg-color); - font-family: var(--font-body); - line-height: 1.55; -} -a { color: inherit; text-decoration: none; } - -.navbar { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--quiet-line); background: rgba(11,13,12,.92); backdrop-filter: blur(16px); } -.nav-container { width: min(100% - 2.5rem, 72rem); min-height: 4.25rem; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } -.nav-brand-back { color: var(--text-secondary); font: 600 .7rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; } -.nav-brand-back:hover { color: var(--accent-color); } -.nav-org-title { max-width: 22rem; overflow: hidden; color: var(--paper); font: 700 .8rem/1.2 var(--mono); letter-spacing: .04em; text-align: center; text-overflow: ellipsis; white-space: nowrap; } -.nav-links { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; color: var(--text-secondary); font-size: .8rem; } -.nav-links a:not(.nav-btn):hover { color: var(--paper); } -.nav-btn { padding: .5rem .7rem; border: 1px solid var(--line); color: var(--paper); font: 600 .62rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; } -.nav-btn:hover { border-color: var(--accent-color); color: var(--accent-color); } - -.container { width: min(100% - 2.5rem, 72rem); margin: auto; padding: 0 0 5rem; } -.hero-section { position: relative; min-height: 25rem; padding: clamp(6rem, 12vw, 9rem) 0 3.5rem; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); } -.hero-section::before, .hero-section::after { content: ""; position: absolute; pointer-events: none; } -.hero-section::before { - right: 4%; top: 13%; width: min(36vw, 23rem); aspect-ratio: 1; - border: 1px solid color-mix(in srgb, var(--accent-color) 58%, transparent); - transform: rotate(45deg); - background: - radial-gradient(circle at 17% 24%, var(--accent-color) 0 .3rem, transparent .34rem), - radial-gradient(circle at 76% 20%, var(--accent-color) 0 .3rem, transparent .34rem), - radial-gradient(circle at 28% 76%, var(--accent-color) 0 .3rem, transparent .34rem), - radial-gradient(circle at 72% 70%, var(--accent-color) 0 .3rem, transparent .34rem), - linear-gradient(32deg, transparent 49.6%, color-mix(in srgb, var(--accent-color) 45%, transparent) 50%, transparent 50.4%), - linear-gradient(147deg, transparent 49.6%, color-mix(in srgb, var(--accent-color) 25%, transparent) 50%, transparent 50.4%); - opacity: .75; -} -.hero-section::after { right: 17%; top: 7%; width: 1px; height: 17rem; background: linear-gradient(var(--accent-color), transparent); } -.hero-section > * { position: relative; z-index: 1; } -.badge { width: fit-content; margin-bottom: 1.2rem; color: var(--accent-color); font: 600 .67rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; } -.hero-title { max-width: 13ch; margin: 0; font: 750 clamp(2.7rem, 6vw, 5.4rem)/.94 var(--font-heading); letter-spacing: -.065em; } -.hero-bio { max-width: 43rem; margin: 1.4rem 0 0; color: var(--text-secondary); font-size: 1rem; } - -.info-card-section { padding: 3.25rem 0 0; } -.info-card { max-width: 58rem; padding: 1.2rem 0 0 1.25rem; border: 0; border-left: 2px solid var(--accent-color); background: transparent; border-radius: 0; } -.info-card h3 { margin: 0; color: var(--accent-color); font-size: .74rem; font-family: var(--mono); letter-spacing: .07em; text-transform: uppercase; } -.info-card h3::before { content: "// "; color: var(--text-secondary); } -.info-card p { margin: .65rem 0 1rem; color: var(--text-secondary); font-size: .9rem; } -.related-orgs { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .75rem; padding-top: .8rem; border-top: 1px solid var(--quiet-line); font-size: .75rem; } -.related-orgs strong { font: 600 .62rem/1.4 var(--mono); color: var(--paper); text-transform: uppercase; letter-spacing: .04em; } -.related-links { display: flex; flex-wrap: wrap; gap: .3rem .55rem; } -.related-link { color: var(--accent-color); font: .7rem/1.4 var(--mono); } - -.section { padding: 5rem 0 0; } -.section-header { display: grid; grid-template-columns: minmax(0,1fr) minmax(12rem,.85fr); align-items: end; gap: .75rem 2rem; margin-bottom: 1.75rem; } -.section-title { margin: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.05em; } -.section-title::before { content: "// "; color: var(--accent-color); font: 600 .7rem/1 var(--mono); letter-spacing: 0; vertical-align: middle; } -.section-desc { margin: 0; color: var(--text-secondary); font-size: .86rem; } -.filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; } -.filter-btn { appearance: none; padding: .42rem .55rem; border: 1px solid var(--line); border-radius: 0; color: var(--text-secondary); background: transparent; font: .63rem/1 var(--mono); cursor: pointer; } -.filter-btn:hover, .filter-btn.active { color: var(--accent-color); border-color: var(--accent-color); background: transparent; } - -.projects-grid { border-top: 1px solid var(--line); } -.project-card { display: grid; grid-template-columns: 8rem minmax(12rem,.85fr) minmax(14rem,1.35fr) auto; gap: .8rem 1.2rem; align-items: start; padding: 1.45rem .2rem; border: 0; border-bottom: 1px solid var(--quiet-line); border-radius: 0; background: transparent; box-shadow: none; } -.project-card:hover { background: color-mix(in srgb, var(--accent-color) 5%, transparent); } -.project-card-header { grid-column: 1; } -.project-status { color: var(--accent-color); font: .63rem/1.35 var(--mono); letter-spacing: .04em; text-transform: uppercase; } -.project-card h3 { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.28; letter-spacing: -.015em; } -.project-card > p { grid-column: 3; margin: 0; color: var(--text-secondary); font-size: .82rem; } -.project-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .3rem; margin-top: -.35rem; } -.tag { padding: 0; border: 0; border-radius: 0; color: var(--text-secondary); background: transparent; font: .62rem/1.35 var(--mono); } -.tag::after { content: ","; color: var(--line); margin-right: .25rem; } -.project-related-orgs { display: none; } -.project-links { grid-column: 4; grid-row: 1 / span 2; display: flex; gap: .4rem; justify-content: flex-end; } -.link-btn { padding: .42rem .5rem; border: 1px solid var(--line); border-radius: 0; color: var(--text-secondary); font: .6rem/1 var(--mono); white-space: nowrap; } -.link-btn.primary, .link-btn:hover { color: var(--accent-color); border-color: var(--accent-color); background: transparent; } - -.docs-grid { border-top: 1px solid var(--line); } -.doc-card { display: grid; grid-template-columns: minmax(14rem,.85fr) minmax(16rem,1.35fr); gap: 1rem; padding: 1rem .2rem; border: 0; border-bottom: 1px solid var(--quiet-line); border-radius: 0; background: transparent; } -.doc-card:hover { padding-left: .75rem; background: color-mix(in srgb, var(--accent-color) 5%, transparent); } -.doc-card h4 { margin: 0; font: 600 .72rem/1.35 var(--mono); letter-spacing: .03em; } -.doc-card h4::before { content: "↗ "; color: var(--accent-color); } -.doc-card p { margin: 0; color: var(--text-secondary); font-size: .8rem; } - -.footer { margin-top: 5rem; border-top: 1px solid var(--line); } -.footer-container { width: min(100% - 2.5rem, 72rem); margin: auto; padding: 1.5rem 0 2.5rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--text-secondary); font: .65rem/1.5 var(--mono); } -.footer a { color: var(--paper); } - -@media (max-width: 780px) { - .nav-container { width: min(100% - 1.5rem, 72rem); min-height: auto; padding: 1rem 0; grid-template-columns: 1fr auto; } - .nav-org-title { display: none; } - .nav-links { gap: .5rem; } - .nav-links a:not(.nav-btn) { display: none; } - .container, .footer-container { width: min(100% - 1.5rem, 72rem); } - .hero-section { min-height: 23rem; padding-top: 7rem; } - .hero-section::before { width: 16rem; right: -4rem; } - .section { padding-top: 4rem; } - .section-header { display: block; } - .section-desc { margin-top: .7rem; } - .filters { margin-top: 1rem; } - .project-card { grid-template-columns: 1fr; gap: .55rem; } - .project-card-header, .project-card h3, .project-card > p, .project-tags, .project-links { grid-column: 1; } - .project-links { grid-row: auto; justify-content: flex-start; margin-top: .2rem; } - .doc-card { grid-template-columns: 1fr; gap: .35rem; } - .footer-container { display: block; } - .footer-container p + p { margin-top: .7rem; } -} +:root{--wood-a:#c7a676;--wood-b:#b98e5b;--paper:#f7f0df;--paper-2:#e9dcc1;--ink:#183649;--muted:#596769;--accent:#378c80;--accent-deep:#27665e;--accent-soft:#cfe2d8;--gold:#d4a53a;--shadow:0 18px 38px rgba(64,42,20,.22),0 4px 10px rgba(64,42,20,.13);--sans:"Inter",system-ui,sans-serif;--serif:"Source Serif 4",Georgia,serif;--hand:"Caveat",cursive;}*{box-sizing:border-box;}html{scroll-behavior:smooth;}body{margin:0;min-width:320px;color:var(--ink);font:400 16px/1.62 var(--sans);background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.2),transparent 24rem),repeating-linear-gradient(90deg,rgba(70,38,14,.06) 0 1px,transparent 1px 126px),linear-gradient(105deg,var(--wood-a),var(--wood-b) 52%,#cfb184);}a{color:inherit;}:focus-visible{outline:3px solid var(--gold);outline-offset:4px;}.skip-link{position:fixed;top:.8rem;left:.8rem;z-index:100;transform:translateY(-160%);padding:.65rem .85rem;background:var(--paper);border-radius:.35rem;}.skip-link:focus{transform:none;}.topbar{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(58,36,18,.14);background:rgba(247,240,223,.9);backdrop-filter:blur(18px);}.topbar-inner{width:min(100% - 2rem,1160px);min-height:4.2rem;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;}.back-link,.nav a{text-decoration:none;font-size:.77rem;font-weight:700;}.back-link{color:var(--accent-deep);}.site-name{max-width:28rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 .8rem/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;}.nav{display:flex;justify-content:flex-end;gap:1rem;}.nav a:hover,.back-link:hover{color:var(--accent);}.nav .github-link{padding:.48rem .68rem;border:1px solid rgba(24,54,73,.25);border-radius:.4rem;background:rgba(255,255,255,.35);}.workspace{width:min(100% - 2rem,1160px);margin:auto;padding:clamp(2rem,5vw,5rem) 0 5rem;}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;}.hero-paper,.hero-visual,.connection-card,.facts-card,.projects-ledger,.docs-note{position:relative;box-shadow:var(--shadow);}.hero-paper{padding:clamp(2rem,5vw,4.5rem);background:var(--paper);transform:rotate(-.5deg);}.hero-paper::before{content:"";position:absolute;top:-.7rem;right:12%;width:7rem;height:1.55rem;background:rgba(218,194,144,.67);transform:rotate(1deg);}.badge{margin:0 0 .45rem;color:var(--accent-deep);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}.hero h1{max-width:13ch;margin:0;font:650 clamp(3rem,7vw,5.8rem)/.9 var(--serif);letter-spacing:-.055em;}.hero h1 span{color:var(--accent);}.hero-summary{max-width:43rem;margin:1.4rem 0 0;color:var(--muted);font:500 clamp(1rem,1.7vw,1.2rem)/1.7 var(--serif);}.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem;}.button{padding:.68rem .9rem;border-radius:.42rem;text-decoration:none;font-size:.76rem;font-weight:800;}.button-primary{background:var(--ink);color:var(--paper);}.button-primary:hover{background:var(--accent-deep);}.button-secondary{border:1px solid rgba(24,54,73,.2);background:rgba(255,255,255,.35);}.hero-note{width:fit-content;margin:2rem 0 -.4rem;padding:.55rem .85rem;color:var(--accent-deep);background:var(--accent-soft);box-shadow:0 5px 11px rgba(64,42,20,.13);font:700 1.25rem/1.15 var(--hand);transform:rotate(-1deg);}.hero-visual{min-height:29rem;padding:1.2rem;border:.8rem solid #d6d0c1;border-radius:1rem;background:#17313e;color:#f4eddd;transform:rotate(.7deg);}.hero-visual::after{content:"";position:absolute;left:50%;bottom:-2.65rem;width:80%;height:2.7rem;transform:translateX(-50%);border-radius:0 0 1rem 1rem;background:linear-gradient(145deg,#aaa79d,#74766f);box-shadow:var(--shadow);}.visual-top{display:flex;justify-content:space-between;color:#a7b9ba;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;}.visual-content{height:23rem;display:grid;place-items:center;padding:1.2rem;}.visual-label{position:absolute;left:2rem;bottom:2rem;right:2rem;}.visual-label strong{display:block;color:var(--accent-soft);font-size:1.35rem;}.visual-label span{color:#b7c7c7;font-size:.75rem;}.illustration{position:relative;width:min(90%,22rem);aspect-ratio:1;}.graph-node{position:absolute;width:1.15rem;aspect-ratio:1;border:3px solid var(--accent-soft);border-radius:50%;background:#17313e;z-index:2;}.graph-edge{position:absolute;height:2px;background:color-mix(in srgb,var(--accent-soft) 65%,transparent);transform-origin:left center;}.gn1{left:8%;top:48%}.gn2{left:38%;top:15%}.gn3{left:70%;top:25%}.gn4{left:48%;top:50%}.gn5{left:20%;top:78%}.gn6{left:75%;top:76%}.ge1{left:12%;top:50%;width:43%;transform:rotate(-42deg)}.ge2{left:42%;top:19%;width:36%;transform:rotate(14deg)}.ge3{left:12%;top:53%;width:44%;transform:rotate(2deg)}.ge4{left:26%;top:78%;width:32%;transform:rotate(-50deg)}.ge5{left:53%;top:53%;width:37%;transform:rotate(40deg)}.terminal-window{width:100%;padding:1.2rem;border:1px solid rgba(255,255,255,.16);border-radius:.65rem;background:#0f252e;color:#cbd8d5;font:.82rem/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;}.terminal-window .prompt{color:var(--accent-soft);}.terminal-window .comment{color:#82999d;}.terminal-window .keyword{color:#e8c878;}.math-plot svg{overflow:visible;}.math-plot .axis{fill:none;stroke:#a8bab9;stroke-width:2}.math-plot .curve{fill:none;stroke:var(--accent-soft);stroke-width:4;stroke-linecap:round}.math-plot circle{fill:#e8c878}.math-formula{margin-top:.8rem;color:#d7e2df;font:700 1.1rem/1 var(--hand);text-align:right;}.cube-scene{perspective:650px;display:grid;place-items:center;}.cube{position:relative;width:9rem;height:9rem;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(36deg);}.cube span{position:absolute;inset:0;border:2px solid var(--accent-soft);background:color-mix(in srgb,var(--accent) 16%,transparent);}.cube .front{transform:translateZ(4.5rem);}.cube .back{transform:rotateY(180deg) translateZ(4.5rem);}.cube .right{transform:rotateY(90deg) translateZ(4.5rem);}.cube .left{transform:rotateY(-90deg) translateZ(4.5rem);}.cube .top{transform:rotateX(90deg) translateZ(4.5rem);}.cube .bottom{transform:rotateX(-90deg) translateZ(4.5rem);}.axis-lines{position:absolute;inset:0;border-left:2px solid #e8c878;border-bottom:2px solid #e8c878;transform:translate(15%,-10%);opacity:.7;}.workbench{margin-top:clamp(5rem,9vw,8rem);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:start;}.connection-card,.facts-card{padding:clamp(1.7rem,3vw,2.8rem);background:var(--paper);}.connection-card{transform:rotate(-.35deg);}.facts-card{transform:rotate(.45deg);background:var(--paper-2);}.object-heading{margin:0 0 .8rem;font:700 clamp(2rem,4vw,3.1rem)/1 var(--hand);}.connection-card>p,.facts-card>p{color:var(--muted);}.related-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem;}.related-links a{padding:.5rem .65rem;border:1px solid rgba(24,54,73,.17);border-radius:.38rem;background:rgba(255,255,255,.35);color:var(--accent-deep);text-decoration:none;font-size:.68rem;font-weight:800;}.related-links a:hover{color:var(--paper);background:var(--accent-deep);}.facts{margin:0;}.facts div{display:grid;grid-template-columns:6.5rem 1fr;gap:.8rem;padding:.8rem 0;border-top:1px solid rgba(24,54,73,.15);}.facts dt{color:var(--accent-deep);font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;}.facts dd{margin:0;font-size:.82rem;}.section{margin-top:clamp(5rem,10vw,9rem);}.section-heading{max-width:52rem;margin-bottom:2rem;padding:0 .7rem;}.section-heading h2{margin:.2rem 0 .5rem;font:650 clamp(2.4rem,5vw,4.2rem)/1 var(--serif);letter-spacing:-.04em;}.section-heading>p:last-of-type{color:var(--muted);}.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;}.filter-btn{appearance:none;padding:.48rem .62rem;border:1px solid rgba(24,54,73,.2);border-radius:.36rem;color:var(--ink);background:rgba(247,240,223,.62);font:700 .67rem/1 var(--sans);cursor:pointer;}.filter-btn:hover,.filter-btn.active{color:var(--paper);border-color:var(--accent-deep);background:var(--accent-deep);}.projects-ledger{padding:clamp(1rem,2vw,1.6rem);border-radius:1rem;background:rgba(82,52,28,.15);}.projects-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.9rem,2vw,1.4rem);}.project-card{grid-column:span 6;position:relative;min-height:18rem;padding:clamp(1.4rem,3vw,2.3rem);background:var(--paper);box-shadow:0 10px 24px rgba(64,42,20,.18),0 2px 7px rgba(64,42,20,.12);transform:rotate(var(--tilt,0));}.project-card:nth-child(2n){--tilt:.35deg;}.project-card:nth-child(3n){--tilt:-.35deg;}.project-status{color:var(--accent-deep);font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;}.project-card h3{margin:.7rem 0 .65rem;font-size:clamp(1.25rem,2.3vw,1.7rem);line-height:1.2;}.project-card>p{color:var(--muted);font-size:.86rem;}.project-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem}.tag{padding:.3rem .46rem;border:1px solid rgba(24,54,73,.17);border-radius:.3rem;background:rgba(255,255,255,.38);font-size:.62rem;font-weight:700}.project-related-orgs{display:none;}.project-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}.link-btn{color:var(--accent-deep);font-size:.72rem;font-weight:800;text-decoration:none}.link-btn:hover{text-decoration:underline}.link-btn.primary{color:var(--ink)}.docs-note{padding:clamp(1.7rem,3vw,2.7rem);background-color:var(--paper);background-image:linear-gradient(rgba(65,115,143,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(65,115,143,.12) 1px,transparent 1px);background-size:24px 24px;}.docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}.doc-card{min-height:8rem;padding:1.15rem;border:1px solid rgba(24,54,73,.16);background:rgba(247,240,223,.82);text-decoration:none}.doc-card:hover{border-color:var(--accent);transform:translateY(-2px)}.doc-card h3{margin:0;font-size:.9rem}.doc-card p{margin:.45rem 0 0;color:var(--muted);font-size:.74rem}.footer{width:min(100% - 2rem,1160px);margin:0 auto 2rem;padding:1.4rem 0;display:flex;justify-content:space-between;gap:1rem;color:rgba(48,34,21,.72);font-size:.7rem;font-weight:600}.footer a{text-decoration:none}@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-paper{max-width:46rem}.hero-visual{max-width:42rem;width:100%;margin:auto}.workbench{grid-template-columns:1fr}.facts-card{max-width:42rem}.project-card{grid-column:1/-1}}@media(max-width:650px){.topbar-inner{grid-template-columns:1fr auto}.site-name{display:none}.nav a:not(.github-link){display:none}.workspace{width:min(100% - 1rem,1160px);padding-top:1.3rem}.hero-paper,.connection-card,.facts-card,.project-card{transform:none}.hero-paper::before{display:none}.hero-visual{min-height:23rem}.visual-content{height:17rem}.projects-ledger{padding:.6rem}.projects-grid{display:block}.project-card{margin-bottom:.8rem;min-height:0}.docs-grid{grid-template-columns:1fr}.footer{display:block}}@media(prefers-reduced-motion:no-preference){.project-card,.doc-card,.button,.related-links a{transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}.project-card:hover{transform:translateY(-4px) rotate(0);box-shadow:0 17px 31px rgba(64,42,20,.22),0 4px 9px rgba(64,42,20,.13)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} \ No newline at end of file diff --git a/index.html b/index.html index 93e3996..f920d72 100644 --- a/index.html +++ b/index.html @@ -1,226 +1,122 @@ - - - Machine Learning Compatible Game Engine Lab - GitHub Pages - - - - - + + + + + Machine Learning-Compatible Game Engine Lab + + + + - - + + +
+
+ ← Personal portfolio +
MLCGE Lab
+ +
+
-
- -
-
- Graphics research lab -

Machine Learning Compatible Game Engine Lab

-

A C++/OpenGL playground for small engines, renderers, editor tools, and simulation.

-
+
+
+
+

Graphics and simulation research

+

Machine Learning-Compatible Game Engine

+

A C++ and OpenGL playground for reusable rendering, simulation loops, editor tooling, and environments that can eventually expose clean observation and action interfaces to machine-learning agents.

+ +

Simulation first. Agents as first-class users.

+
+
+
Workspace overview
+
+
Render · simulate · exposeA small engine architecture shaped around explicit state, actions, and reusable components.
+
+
- -
-
-

Connected work

-

Connects graphics experiments with teaching tools, AI exploration, and computer-science work.

- -
-
+
+ + +
- -
-
-

Projects

-

Focused prototypes for rendering, interaction, and simulation.

-
- - - - - -
-
-
- -
-
+
+

Project notebook

Selected work

Repositories and experiments presented with clear status, scope, and technical context.

+
+
- -
-
-

Reference notes

-

Short records for context, architecture, planning, and standards.

-
- -
-
+
+

Reference notes

Context before code.

Short documentation records covering architecture, scope, planning, and engineering standards.

+ +
+
- + - + const container = document.getElementById('projects-container'); + const buttons = [...document.querySelectorAll('.filter-btn')]; + const escapeHtml = value => String(value).replace(/[&<>'"]/g, char => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[char])); + function renderProjects(filter = 'all') { + const visible = projects.filter(project => filter === 'all' || project.status.toLowerCase().includes(filter)); + container.innerHTML = visible.map(project => ` +
+ ${escapeHtml(project.status)} +

${escapeHtml(project.name)}

+

${escapeHtml(project.summary)}

+
${project.tags.map(tag => `${escapeHtml(tag)}`).join('')}
+ +
`).join(''); + if (!visible.length) container.innerHTML = '
No entries

No projects match this filter yet.

'; + } + buttons.forEach(button => button.addEventListener('click', () => { buttons.forEach(item => { item.classList.remove('active'); item.setAttribute('aria-pressed','false'); }); button.classList.add('active'); button.setAttribute('aria-pressed','true'); renderProjects(button.dataset.filter); })); + renderProjects(); +