// THE POLISHED COMMIT
// Carbon palette (near-black + cad-yellow) + Blueprint fonts (Crimson Pro serif
// + JetBrains Mono) + tightened IA:
// - Home: slogan, doors, recent log. No stats dashboard.
// - Engineering: three-pane drill, terse blurbs.
// - Topic: course tag, title, summary, sections, sidebar formulas. No filler.
// - Garage: 3 tabs (Vehicles · Service Log · Buying Guides). Reliability is
// a property of each vehicle card — no separate tab, no column in the log.
// - Vehicle: hero + spec + reliability + service log (for this car) + ownership.
// - Service Log table: Date · Type · Job · Vehicle · Cost. That's it.
// - Project: steps + parts + tools + shop note.
(() => {
const C = {
bg: '#0b0c0e',
panel: '#131418',
panelW: '#171a1f',
panelD: '#0f1013',
ink: '#ecead8', // slightly warm paper-white (matches Blueprint's cream-on-dark feel)
ink2: '#b9b8a8',
mute: '#7a7869',
line: '#22231e',
lineL: '#1a1b17',
lineS: '#2f302a',
accent: '#e6b022', // cad yellow, slightly warmer than pure CAD yellow to read serif
accentD:'#c4920f',
blue: '#7299c9',
red: '#c8634d',
green: '#7aa05c',
};
const fontHead = '"Crimson Pro", "Iowan Old Style", "Palatino Linotype", Georgia, serif';
const fontMono = '"JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace';
if (!document.getElementById('nb-fonts')) {
const link = document.createElement('link');
link.id = 'nb-fonts'; link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap';
document.head.appendChild(link);
}
if (!document.getElementById('nb-styles')) {
const s = document.createElement('style');
s.id = 'nb-styles';
s.textContent = `
.nb { font-family:${fontMono}; color:${C.ink}; background:${C.bg}; height:100%; overflow:auto; font-size:13px; line-height:1.55; }
.nb *::-webkit-scrollbar { display:none; }
.nb * { scrollbar-width:none; }
.nb-serif { font-family:${fontHead}; font-weight:500; letter-spacing:-0.005em; }
.nb-mono { font-family:${fontMono}; font-feature-settings:"tnum"; }
.nb-sc { font-family:${fontMono}; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:${C.mute}; }
.nb-mute { color:${C.mute}; }
.nb-ink2 { color:${C.ink2}; }
.nb-acc { color:${C.accent}; }
.nb-rule { border:0; border-top:1px solid ${C.line}; margin:0; }
.nb-rule-l { border:0; border-top:1px solid ${C.lineL}; margin:0; }
.nb-rule-strong { border:0; border-top:1px solid ${C.ink2}; margin:0; }
.nb-card { background:${C.panelW}; border:1px solid ${C.line}; }
.nb-row { cursor:pointer; transition: background .12s; }
.nb-row:hover { background:${C.panel}; }
.nb-row:hover .nb-row-title { color:${C.accent}; }
.nb-tag {
display:inline-flex; align-items:center; gap:5px; padding:2px 8px;
border:1px solid ${C.lineS}; font-family:${fontMono}; font-size:10.5px;
letter-spacing:.08em; text-transform:uppercase; color:${C.ink2};
}
.nb-tag-acc { background:${C.accent}; color:${C.bg}; border-color:${C.accent}; font-weight:500; }
.nb-btn {
display:inline-flex; align-items:center; gap:10px; padding:11px 22px;
background:transparent; color:${C.ink}; border:1px solid ${C.ink2}; cursor:pointer;
font-family:${fontMono}; font-size:12px; font-weight:500; letter-spacing:.02em;
transition: background .12s, color .12s, border-color .12s;
}
.nb-btn:hover { background:${C.ink}; color:${C.bg}; border-color:${C.ink}; }
.nb-btn-acc { background:${C.accent}; color:${C.bg}; border-color:${C.accent}; font-weight:600; }
.nb-btn-acc:hover { background:${C.accentD}; border-color:${C.accentD}; color:${C.bg}; }
.nb-tab {
padding:10px 0; background:transparent; border:none; cursor:pointer;
color:${C.mute}; font-family:${fontMono}; font-size:13px; font-weight:500;
border-bottom:2px solid transparent; margin-right:28px;
}
.nb-tab[data-active="true"] { color:${C.ink}; border-bottom-color:${C.accent}; }
.nb-tab:hover { color:${C.ink}; }
.nb-navbtn {
display:flex; align-items:baseline; gap:6px; padding:14px 16px;
background:transparent; border:none; cursor:pointer;
font-family:${fontMono}; font-size:13px; transition:color .12s;
}
.nb-navbtn[data-active="true"] { color:${C.ink}; }
.nb-navbtn[data-active="false"] { color:${C.mute}; }
.nb-navbtn:hover { color:${C.ink}; }
`;
document.head.appendChild(s);
}
// ───────── Mark — small square with a corner cut + radish accent dot
const Mark = ({ size = 18 }) => (
);
// ───────── Vehicle technical drawing
const VehicleTech = ({ kind, height = 100, stroke = C.ink2 }) => {
if (kind === 'ranger') return (
);
if (kind === 'civic') return (
);
return (
);
};
// Reliability color — one source of truth so every appearance agrees.
const relColor = (r) => r >= 7.5 ? C.green : r >= 6 ? C.accent : C.red;
// Service-log type color (Repair / PM / Mod / Diag). Used in vehicle service
// list and in the main Service Log table.
const kindColor = (k) => k === 'Repair' ? C.red : k === 'PM' ? C.green : k === 'Mod' ? C.blue : C.accent;
// ───────── FRAME
function Frame({ page, setPage, children }) {
const nav = [['home','Home','00'],['eng','Engineering','01'],['cars','Garage','02']];
return (
{nav.map(([id,label,n]) => (
))}
M. Radysh · NJIT '27
{children}
);
}
// ───────── HOME
// Layout: confident asymmetric hero on the left, "currently studying" on the
// right. Below: two doors (Engineering / Garage) as a flat two-column list of
// contents. Bottom: recent service log strip.
// No stats dashboard. No reliability anywhere on home.
function Home({ go }) {
const s = window.SITE;
return (
{/* Hero */}
Personal reference · since 2025
A working notebook for an EE student
who keeps his own cars running.
);
}
// ───────── GARAGE
// Tabs: Vehicles · Service Log · Buying Guides. Reliability is NOT a tab —
// it's a property of each vehicle. Service Log does NOT carry a reliability
// column — the log is about jobs done, not vehicle health.
function Garage({ go }) {
const s = window.SITE;
const [tab, setTab] = React.useState('vehicles');
return (
{[
{ era:'1998-2011', what:'Ford Ranger 3.0 / 4.0', verdict:'BUY', color:C.green,
body:'Cheap, simple, parts everywhere. The 3.0 Vulcan is anemic but bulletproof. 4.0 SOHC has a timing-chain reputation — verify service.' },
{ era:'2016-2021', what:'Honda Civic 2.0 NA', verdict:'BUY', color:C.green,
body:'Avoid the 1.5T head-gasket lottery. The 2.0 NA is the sensible choice. CVT is fine.' },
{ era:'2014-2020', what:'Nissan Rogue (JF017E)', verdict:'PASS', color:C.red,
body:'Or commit to 30k fluid swaps for the life of the car. JF017E CVT is the catch.' },
].map((g,i)=>(
{g.era}{g.verdict}
{g.what}
{g.body}
))}
)}
);
}
// ───────── VEHICLE DETAIL
// Reliability lives here — with the rest of the spec.
// Ownership totals live here — not on the home page.
function VehicleDetail({ go, id }) {
const v = window.findVehicle(id) || window.SITE.vehicles[0];
const idx = window.SITE.vehicles.indexOf(v);
return (
);
}
// ───────── PROJECT DETAIL
function ProjectDetail({ go }) {
const p = window.SITE.projectDetail;
const v = window.findVehicle(p.vehicle);
const partsTotal = p.parts.reduce((a,b)=>a+b.cost,0);
return (
Job{p.date}{p.duration}
{p.title}
Difficulty {p.difficulty}/5${p.cost.toFixed(2)}
{p.summary}
Procedure
{p.steps.map((step,i)=>(
{String(i+1).padStart(2,'0')}
{step}
))}
Shop note
{p.notes}
Parts
{p.parts.map((part,i)=>(
{part.name}
P/N {part.pn}
${part.cost.toFixed(2)}
))}
Subtotal${partsTotal.toFixed(2)}
Tools
{p.tools.map((t,i)=>(
{String(i+1).padStart(2,'0')}
{t}
))}
);
}
// ───────── ROUTER
function VariantNotebook() {
const [page, setPage] = React.useState({ name:'home' });
let body;
switch (page.name) {
case 'eng': body = ; break;
case 'topic': body = ; break;
case 'cars': body = ; break;
case 'vehicle': body = ; break;
case 'project': body = ; break;
default: body = ;
}
return {body};
}
window.VariantNotebook = VariantNotebook;
})();