Skip to content

Commit fa658a1

Browse files
dragosandreibobudragosandreibobu
committed
feat: rebuild MLCGE Pages as a sunlit simulation workbench
1 parent 8f24cf3 commit fa658a1

1 file changed

Lines changed: 82 additions & 186 deletions

File tree

‎index.html‎

Lines changed: 82 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -1,226 +1,122 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Machine Learning Compatible Game Engine Lab - GitHub Pages</title>
7-
<meta name="description" content="Research lab for experimental graphics, simulation loops, editor tooling, and C++/OpenGL rendering engines moving toward ML-agent compatibility.">
8-
<link rel="preconnect" href="https://fonts.googleapis.com">
9-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
11-
<link rel="stylesheet" href="assets/styles.css">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="theme-color" content="#ead8ca">
7+
<meta name="description" content="A C++ and OpenGL research lab for simulation, rendering, editor tooling, and game-engine interfaces designed with machine-learning agents in mind.">
8+
<title>Machine Learning-Compatible Game Engine Lab</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,650&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="assets/styles.css">
1213
</head>
13-
<body>
14-
<header class="navbar">
15-
<div class="nav-container">
16-
<a href="https://dragosandreibobu.github.io" class="nav-brand-back">
17-
&larr; <span class="brand-text">Personal Hub</span>
18-
</a>
19-
<div class="nav-org-title">Machine Learning Compatible Game Engine Lab</div>
20-
<nav class="nav-links">
21-
<a href="#mission">About</a>
22-
<a href="#connections">Network</a>
23-
<a href="#projects">Work</a>
24-
<a href="#docs">Notes</a>
25-
<a href="https://github.com/Machine-Learning-Compatible-Game-Engine" target="_blank" class="nav-btn">GitHub</a>
26-
</nav>
27-
</div>
28-
</header>
14+
<body style="--accent:#b57555;--accent-deep:#80503b;--accent-soft:#ead8ca">
15+
<a class="skip-link" href="#main">Skip to content</a>
16+
<header class="topbar">
17+
<div class="topbar-inner">
18+
<a class="back-link" href="https://dragosandreibobu.github.io">← Personal portfolio</a>
19+
<div class="site-name">MLCGE Lab</div>
20+
<nav class="nav" aria-label="Primary navigation">
21+
<a href="#projects">Projects</a><a href="#notes">Notes</a><a class="github-link" href="https://github.com/Machine-Learning-Compatible-Game-Engine" target="_blank" rel="noreferrer">GitHub</a>
22+
</nav>
23+
</div>
24+
</header>
2925

30-
<main class="container">
31-
<!-- Hero -->
32-
<section id="mission" class="hero-section">
33-
<div class="hero-glow"></div>
34-
<span class="badge">Graphics research lab</span>
35-
<h1 class="hero-title">Machine Learning Compatible Game Engine Lab</h1>
36-
<p class="hero-bio">A C++/OpenGL playground for small engines, renderers, editor tools, and simulation.</p>
37-
</section>
26+
<main id="main" class="workspace">
27+
<section class="hero" aria-labelledby="site-title">
28+
<article class="hero-paper">
29+
<p class="badge">Graphics and simulation research</p>
30+
<h1 id="site-title">Machine Learning-Compatible <span>Game Engine</span></h1>
31+
<p class="hero-summary">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.</p>
32+
<div class="hero-actions"><a class="button button-primary" href="#projects">Explore projects</a><a class="button button-secondary" href="https://github.com/Machine-Learning-Compatible-Game-Engine/full-suite" target="_blank" rel="noreferrer">Open main project ↗</a></div>
33+
<p class="hero-note">Simulation first. Agents as first-class users.</p>
34+
</article>
35+
<article class="hero-visual" aria-label="Visual summary">
36+
<div class="visual-top"><span>Workspace overview</span><span aria-hidden="true">● ● ●</span></div>
37+
<div class="visual-content"><div class="illustration cube-scene" aria-hidden="true"><div class="axis-lines"></div><div class="cube"><span class="front"></span><span class="back"></span><span class="right"></span><span class="left"></span><span class="top"></span><span class="bottom"></span></div></div></div>
38+
<div class="visual-label"><strong>Render · simulate · expose</strong><span>A small engine architecture shaped around explicit state, actions, and reusable components.</span></div>
39+
</article>
40+
</section>
3841

39-
<!-- Connection -->
40-
<section id="connections" class="info-card-section">
41-
<div class="info-card">
42-
<h3>Connected work</h3>
43-
<p>Connects graphics experiments with teaching tools, AI exploration, and computer-science work.</p>
44-
<div class="related-orgs">
45-
<strong>Related organizations:</strong>
46-
<div class="related-links">
47-
<a href="https://DigitalChalkLab.github.io" class="related-link">DigitalChalkLab</a> <a href="https://Hyperspace-Intelligence.github.io" class="related-link">Hyperspace-Intelligence</a> <a href="https://UAIC-BSc-ComputerScience.github.io" class="related-link">UAIC-BSc-ComputerScience</a>
48-
</div>
49-
</div>
50-
</div>
51-
</section>
42+
<section class="workbench" aria-label="Context and facts">
43+
<article class="connection-card"><p class="badge">Connected work</p><h2 class="object-heading">Part of a wider desk.</h2><p>The lab combines Computer Science foundations, graphics experiments, software architecture, and machine-learning questions while remaining small enough to understand and rebuild.</p><div class="related-links"><a href="https://UAIC-BSc-ComputerScience.github.io" target="_blank" rel="noreferrer">Computer Science archive</a><a href="https://curricula-live.github.io" target="_blank" rel="noreferrer">curricula.live</a><a href="https://dragosandreibobu.github.io" target="_blank" rel="noreferrer">Personal portfolio</a></div></article>
44+
<aside class="facts-card"><p class="badge">At a glance</p><h2 class="object-heading">Working notes</h2><dl class="facts"><div><dt>Core</dt><dd>C++ · OpenGL · rendering and simulation loops</dd></div><div><dt>Interface goal</dt><dd>Explicit observations · actions · resets · rewards</dd></div><div><dt>Origin</dt><dd>BSc thesis and independent engine experiments</dd></div><div><dt>Direction</dt><dd>Web-facing demos, reusable modules, and ML bridges</dd></div></dl></aside>
45+
</section>
5246

53-
<!-- Projects grid -->
54-
<section id="projects" class="section">
55-
<div class="section-header">
56-
<h2 class="section-title">Projects</h2>
57-
<p class="section-desc">Focused prototypes for rendering, interaction, and simulation.</p>
58-
<div class="filters">
59-
<button class="filter-btn active" data-filter="all">All</button>
60-
<button class="filter-btn" data-filter="active">Active</button>
61-
<button class="filter-btn" data-filter="research">Research</button>
62-
<button class="filter-btn" data-filter="teaching">Teaching</button>
63-
<button class="filter-btn" data-filter="archived">Archived</button>
64-
</div>
65-
</div>
66-
<div class="projects-grid" id="projects-container">
67-
<!-- Dynamically populated -->
68-
</div>
69-
</section>
47+
<section id="projects" class="section" aria-labelledby="projects-heading">
48+
<div class="section-heading"><p class="badge">Project notebook</p><h2 id="projects-heading">Selected work</h2><p>Repositories and experiments presented with clear status, scope, and technical context.</p><div class="filters" role="group" aria-label="Filter projects"><button class="filter-btn active" data-filter="all" aria-pressed="true">All</button><button class="filter-btn" data-filter="active" aria-pressed="false">Active</button><button class="filter-btn" data-filter="research" aria-pressed="false">Research</button><button class="filter-btn" data-filter="teaching" aria-pressed="false">Teaching</button><button class="filter-btn" data-filter="archive" aria-pressed="false">Archive</button></div></div>
49+
<div class="projects-ledger"><div class="projects-grid" id="projects-container"></div></div>
50+
</section>
7051

71-
<!-- Docs standard -->
72-
<section id="docs" class="section">
73-
<div class="section-header">
74-
<h2 class="section-title">Reference notes</h2>
75-
<p class="section-desc">Short records for context, architecture, planning, and standards.</p>
76-
</div>
77-
<div class="docs-grid">
78-
<a href="docs/overview.md" class="doc-card">
79-
<h4>Overview & Context</h4>
80-
<p>Comprehensive description of this workspace's mission and targets.</p>
81-
</a>
82-
<a href="docs/architecture.md" class="doc-card">
83-
<h4>Architecture & Topology</h4>
84-
<p>Internal software architecture and design pattern guidelines.</p>
85-
</a>
86-
<a href="docs/roadmap.md" class="doc-card">
87-
<h4>Ecosystem Roadmap</h4>
88-
<p>Milestones, feature integrations, and future project phases.</p>
89-
</a>
90-
<a href="docs/projects.md" class="doc-card">
91-
<h4>Project Catalog Specification</h4>
92-
<p>Detailed technical inventory of code repositories.</p>
93-
</a>
94-
<a href="docs/documentation-standard.md" class="doc-card">
95-
<h4>Engineering Standards</h4>
96-
<p>Source directory structures, naming schemes, and git flow rules.</p>
97-
</a>
98-
</div>
99-
</section>
100-
</main>
52+
<section id="notes" class="section" aria-labelledby="notes-heading">
53+
<div class="section-heading"><p class="badge">Reference notes</p><h2 id="notes-heading">Context before code.</h2><p>Short documentation records covering architecture, scope, planning, and engineering standards.</p></div>
54+
<div class="docs-note"><div class="docs-grid"><a class="doc-card" href="docs/overview.md"><h3>Overview & context</h3><p>Mission, scope, and how this workspace fits the broader ecosystem.</p></a><a class="doc-card" href="docs/architecture.md"><h3>Architecture & topology</h3><p>Design boundaries, components, and technical decisions.</p></a><a class="doc-card" href="docs/roadmap.md"><h3>Roadmap</h3><p>Milestones, pending work, and future directions.</p></a><a class="doc-card" href="docs/projects.md"><h3>Project catalog</h3><p>A structured inventory of repositories and experiments.</p></a><a class="doc-card" href="docs/documentation-standard.md"><h3>Documentation standard</h3><p>Conventions for readable repositories, Git workflow, and technical notes.</p></a></div></div>
55+
</section>
56+
</main>
10157

102-
<footer class="footer">
103-
<div class="footer-container">
104-
<p>Part of the Dragoș-Andrei Bobu project ecosystem &bull; <a href="https://dragosandreibobu.github.io">https://dragosandreibobu.github.io</a></p>
105-
<p><a href="https://github.com/Machine-Learning-Compatible-Game-Engine" target="_blank">GitHub Organization</a></p>
106-
</div>
107-
</footer>
58+
<footer class="footer"><p>Part of the Dragoș-Andrei Bobu project ecosystem · 2026</p><p><a href="https://dragosandreibobu.github.io">Personal portfolio</a> · <a href="https://github.com/Machine-Learning-Compatible-Game-Engine" target="_blank" rel="noreferrer">GitHub organization</a></p></footer>
10859

109-
<script>
110-
const projects = [
60+
<script>
61+
const projects = [
11162
{
112-
"name": "Machine Learning Compatible Game Engine (full-suite)",
113-
"slug": "mlcge-full-suite",
114-
"organization": "Machine-Learning-Compatible-Game-Engine",
115-
"status": "Research / Thesis",
116-
"summary": "Experimental graphics suite combining a C++/OpenGL rendering core, PyQt editor interface, and simulation loops prepared for future ML-agent bridges.",
63+
"name": "Machine Learning-Compatible Game Engine — full suite",
64+
"status": "Research Thesis",
65+
"summary": "A modular C++ engine combining rendering, simulation environments, editor tooling, and reusable interfaces intended to support future machine-learning agent integration.",
11766
"repo": "https://github.com/Machine-Learning-Compatible-Game-Engine/full-suite",
11867
"live": "",
11968
"tags": [
12069
"C++",
12170
"OpenGL",
12271
"PyQt",
123-
"Game Engine",
124-
"Simulation"
125-
],
126-
"related": [
127-
"DigitalChalkLab",
128-
"Hyperspace-Intelligence",
129-
"UAIC-BSc-ComputerScience"
72+
"Simulation",
73+
"Architecture"
13074
]
13175
},
13276
{
13377
"name": "supEngine",
134-
"slug": "sup-engine",
135-
"organization": "Machine-Learning-Compatible-Game-Engine",
136-
"status": "Active / Research",
137-
"summary": "Focused C++/FreeGLUT engine prototype supporting primitive drawing, simple component-based game objects, and input layers.",
78+
"status": "Active Research",
79+
"summary": "A focused C++ and FreeGLUT prototype for primitive rendering, component-oriented game objects, input handling, and compact experimentation.",
13880
"repo": "https://github.com/Machine-Learning-Compatible-Game-Engine/supEngine",
13981
"live": "",
14082
"tags": [
14183
"C++",
142-
"OpenGL",
14384
"FreeGLUT",
144-
"Simulation Core"
145-
],
146-
"related": [
147-
"DigitalChalkLab"
85+
"Components",
86+
"Rendering"
14887
]
14988
},
15089
{
151-
"name": "abstract-template-for-opengl-render-engine",
152-
"slug": "opengl-render-engine",
153-
"organization": "Machine-Learning-Compatible-Game-Engine",
154-
"status": "Research",
155-
"summary": "Shader compilation wrappers, vertex array layouts, textures, and ImGui diagnostics diagnostics helper engine.",
90+
"name": "Abstract OpenGL render-engine template",
91+
"status": "Research Archive",
92+
"summary": "Reusable wrappers for shaders, vertex arrays, textures, layouts, and ImGui diagnostics, kept as a practical reference for future renderer work.",
15693
"repo": "https://github.com/Machine-Learning-Compatible-Game-Engine/abstract-template-for-opengl-render-engine",
15794
"live": "",
15895
"tags": [
159-
"C++",
16096
"OpenGL",
97+
"Shaders",
16198
"ImGui",
16299
"Renderer"
163-
],
164-
"related": [
165-
"UAIC-BSc-ComputerScience"
166100
]
167101
}
168102
];
169-
const container = document.getElementById('projects-container');
170-
const filterBtns = document.querySelectorAll('.filter-btn');
171-
172-
function renderProjects(filter = 'all') {
173-
container.innerHTML = '';
174-
projects.forEach(p => {
175-
const statusLower = p.status.toLowerCase();
176-
let shouldShow = false;
177-
178-
if (filter === 'all') {
179-
shouldShow = true;
180-
} else if (filter === 'active' && statusLower.includes('active')) {
181-
shouldShow = true;
182-
} else if (filter === 'research' && statusLower.includes('research')) {
183-
shouldShow = true;
184-
} else if (filter === 'teaching' && statusLower.includes('teaching')) {
185-
shouldShow = true;
186-
} else if (filter === 'archived' && statusLower.includes('archived')) {
187-
shouldShow = true;
188-
}
189-
190-
if (!shouldShow) return;
191-
192-
const card = document.createElement('div');
193-
card.className = 'project-card fade-in';
194-
195-
const badges = p.tags.map(t => `<span class="tag">${t}</span>`).join('');
196-
const relatedLinks = p.related ? p.related.map(r => `<span class="related-org-tag">${r}</span>`).join(' ') : '';
197-
198-
card.innerHTML = `
199-
<div class="project-card-header">
200-
<span class="project-status">${p.status}</span>
201-
</div>
202-
<h3>${p.name}</h3>
203-
<p>${p.summary}</p>
204-
<div class="project-tags">${badges}</div>
205-
${relatedLinks ? `<div class="project-related-orgs"><strong>Related Orgs:</strong> ${relatedLinks}</div>` : ''}
206-
<div class="project-links">
207-
<a href="${p.repo}" target="_blank" class="link-btn">Code Repository</a>
208-
${p.live ? `<a href="${p.live}" target="_blank" class="link-btn primary">Live Demo</a>` : ''}
209-
</div>
210-
`;
211-
container.appendChild(card);
212-
});
213-
}
214-
215-
filterBtns.forEach(btn => {
216-
btn.addEventListener('click', (e) => {
217-
filterBtns.forEach(b => b.classList.remove('active'));
218-
btn.classList.add('active');
219-
renderProjects(btn.dataset.filter);
220-
});
221-
});
222-
223-
renderProjects();
224-
</script>
103+
const container = document.getElementById('projects-container');
104+
const buttons = [...document.querySelectorAll('.filter-btn')];
105+
const escapeHtml = value => String(value).replace(/[&<>'"]/g, char => ({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[char]));
106+
function renderProjects(filter = 'all') {
107+
const visible = projects.filter(project => filter === 'all' || project.status.toLowerCase().includes(filter));
108+
container.innerHTML = visible.map(project => `
109+
<article class="project-card">
110+
<span class="project-status">${escapeHtml(project.status)}</span>
111+
<h3>${escapeHtml(project.name)}</h3>
112+
<p>${escapeHtml(project.summary)}</p>
113+
<div class="project-tags">${project.tags.map(tag => `<span class="tag">${escapeHtml(tag)}</span>`).join('')}</div>
114+
<div class="project-links"><a class="link-btn" href="${escapeHtml(project.repo)}" target="_blank" rel="noreferrer">Repository ↗</a>${project.live ? `<a class="link-btn primary" href="${escapeHtml(project.live)}" target="_blank" rel="noreferrer">Live project ↗</a>` : ''}</div>
115+
</article>`).join('');
116+
if (!visible.length) container.innerHTML = '<article class="project-card"><span class="project-status">No entries</span><h3>No projects match this filter yet.</h3></article>';
117+
}
118+
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); }));
119+
renderProjects();
120+
</script>
225121
</body>
226122
</html>

0 commit comments

Comments
 (0)