/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */ const { useState, useEffect, useRef, useMemo } = React; function useMobile() { const [mobile, setMobile] = useState(() => window.matchMedia("(max-width: 760px)").matches); useEffect(() => { const mq = window.matchMedia("(max-width: 760px)"); const handler = (e) => setMobile(e.matches); mq.addEventListener("change", handler); return () => mq.removeEventListener("change", handler); }, []); return mobile; } // ───────────────────────────────────────────────────────────────────────────── // TWEAKS // ───────────────────────────────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "rainbow", "density": "regular", "logoStyle": "slant", "font": "plex", "typewriter": true } /*EDITMODE-END*/; const PALETTES = { rainbow: { bg: "#000", fg: "#e7e5e2", dim: "#777", border: "#3a3a3a", accent1: "#ff6b9d", // pink — section heads accent2: "#7ee3ff", // cyan — links/nav accent3: "#ffd866", // amber — counts/badges accent4: "#a3e635", // lime — meta accent5: "#fb923c", // orange — emphasis name: "RAINBOW" }, green: { bg: "#000", fg: "#9fff9f", dim: "#3d6b3d", border: "#1a3a1a", accent1: "#00ff66", accent2: "#9fff00", accent3: "#66ff99", accent4: "#33cc33", accent5: "#00ff66", name: "GREEN PHOSPHOR" }, amber: { bg: "#0a0500", fg: "#ffb000", dim: "#7a4d00", border: "#3a2200", accent1: "#ffcc33", accent2: "#ffe066", accent3: "#ff7700", accent4: "#ffb000", accent5: "#ff9d33", name: "AMBER PHOSPHOR" }, mono: { bg: "#000", fg: "#e5e5e5", dim: "#666", border: "#333", accent1: "#ffffff", accent2: "#cccccc", accent3: "#999999", accent4: "#bbbbbb", accent5: "#ffffff", name: "MONO" } }; const DENSITY = { cramped: { fontSize: 12, lineHeight: 1.25, gap: 6 }, regular: { fontSize: 14, lineHeight: 1.45, gap: 10 }, spacious: { fontSize: 16, lineHeight: 1.7, gap: 14 } }; const FONTS = { plex: `"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace`, jb: `"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace`, vt: `"VT323", "IBM Plex Mono", ui-monospace, monospace` }; // ───────────────────────────────────────────────────────────────────────────── // ASCII LOGOS // ───────────────────────────────────────────────────────────────────────────── // Big font (figlet "big") — the requested header look. Composed full-width (no smush) for clean alignment. const LOGO_BIG = String.raw` __ __ _____ _____ _ _ _______ _____ ____ _ _ | \/ | /\ | __ \ / ____| | \ | | /\ |__ __||_ _| / __ \ | \ | | | \ / | / \ | | | || (___ | \| | / \ | | | | | | | || \| | | |\/| | / /\ \ | | | | \___ \ | . ' | / /\ \ | | | | | | | || . ' | | | | | / ____ \ | |__| | ____) | | |\ | / ____ \ | | _| |_ | |__| || |\ | |_| |_|/_/ \_\|_____/ |_____/ |_| \_|/_/ \_\ |_| |_____| \____/ |_| \_| `.replace(/^\n/, ""); const LOGO_SLANT = String.raw` __ ______ ____ _____ _ _____ ______________ _ __ / |/ / | / __ \/ ___/ / | / / |/_ __/ _/ __ \/ | / / / /|_/ / /| | / / / /\__ \ / |/ / /| | / / / // / / / |/ / / / / / ___ |/ /_/ /___/ / / /| / ___ |/ / _/ // /_/ / /| / /_/ /_/_/ |_/_____//____/ /_/ |_/_/ |_/_/ /___/\____/_/ |_/ `.replace(/^\n/, ""); const LOGO_BLOCK = String.raw` __ __ _ ____ ____ _ _ _ _____ ___ ___ _ _ | \/ | / \ | _ \/ ___| | \ | | / \|_ _|_ _|/ _ \ | \ | | | |\/| | / _ \ | | | \___ \ | \| | / _ \ | | | || | | || \| | | | | |/ ___ \| |_| |___) | | |\ |/ ___ \| | | || |_| || |\ | |_| |_/_/ \_\____/|____/ |_| \_/_/ \_\_| |___|\___/ |_| \_| `.replace(/^\n/, ""); const LOGO_SMALL = String.raw` __ __ _ ___ ___ _ _ _ _____ ___ ___ _ _ | \/ | /_\ | \/ __| | \| | /_\_ _|_ _|/ _ \ | \| | | |\/| |/ _ \| |) \__ \ | .' |/ _ \| | | || (_) || .' | |_| |_/_/ \_\___/|___/ |_|\_/_/ \_\_| |___|\___/ |_|\_| `.replace(/^\n/, ""); const LOGOS = { big: LOGO_BIG, slant: LOGO_SLANT, block: LOGO_BLOCK, small: LOGO_SMALL }; // ───────────────────────────────────────────────────────────────────────────── // CONTENT // ───────────────────────────────────────────────────────────────────────────── const NAV = [ { id: "main", label: "MAIN" }, { id: "about", label: "ABOUT" }, { id: "projects", label: "PROJECTS" }, { id: "writing", label: "WRITING" }, { id: "reading", label: "READING" }, { id: "photos", label: "PHOTOS" }, { id: "contact", label: "CONTACT" }]; const PROJECTS = [ { name: "MORNINGPERSON.AI", year: "2026", blurb: "your tailor-made morning report — grab your monday by the balls. see what's ahead before the kids wake up.", href: "#", tag: "shipping" }, { name: "POSTLISTE.AI", year: "2026", blurb: "pulls every available record from norwegian municipal public registers. gives small and mid-size businesses a proactive edge in their sales work.", href: "#", tag: "under development" }, { name: "ELEKTRONISK-TINGLYSING", year: "2026", blurb: "making electronic property registration simpler for small and mid-size businesses.", href: "#", tag: "under development" }, { name: "REP'D", year: "2026", blurb: "workout timer app. build sessions from multiple timer types — intervals, amraps, emoms, rest. stack them, run them.", href: "http://treningstimer-app.vercel.app", tag: "live" }, { name: "BONDE", year: "2026", blurb: "high-end chess merch built around a distinct pawn logo. the weakest piece on the board — but with enormous potential.", href: "#", tag: "building" }, { name: "WORDLE.LOL", year: "2024", blurb: "i had the idea, he has the repo. fair trade.", href: "https://wordle.lol", tag: "shared custody" }]; const WRITING = [ { title: "why the optimists are usually right (eventually)", date: "may '26", n: 47 }, { title: "building houses taught me how to ship software", date: "apr '26", n: 33 }, { title: "notes from a 4am workday", date: "mar '26", n: 91 }, { title: "ålesund is a state of mind", date: "feb '26", n: 12 }]; const READING = [ { title: "the diary of a bookseller", author: "bythell", state: "reading" }, { title: "a confederacy of dunces", author: "toole", state: "reading" }, { title: "poor charlie's almanack", author: "munger", state: "reading" }, { title: "endure", author: "hutchinson", state: "reading" }, { title: "the creative act", author: "rubin", state: "reading" }, { title: "collective suicide", author: "paasilinna", state: "done" }, { title: "shoe dog", author: "knight", state: "done" }, { title: "never finished", author: "goggins", state: "done" }, { title: "walden", author: "thoreau", state: "done" }]; const PHOTOS = [ { label: "fjord trail, summer", src: "photos/cropped_1.png", dim: "320x240" }, { label: "formal night", src: "photos/cropped_2.png", dim: "240x320" }, { label: "summit, bad weather", src: "photos/cropped_3.png", dim: "320x240" }, { label: "ski touring", src: "photos/cropped_4.png", dim: "320x240" }, { label: "cycling", src: "photos/cropped_5.png", dim: "320x240" }]; const LINKS = [ { label: "EMAIL", href: "mailto:mads@nation.no", hint: "mads@nation.no" }, { label: "LINKEDIN", href: "https://www.linkedin.com/in/mads-toll%C3%A5s-nation-77b60420/", hint: "mads tollås nation" }, { label: "INSTAGRAM", href: "https://instagram.com/madsnation", hint: "@madsnation" }, { label: "FACEBOOK", href: "https://facebook.com/nati0n", hint: "/nati0n" }]; const BOOT_LINES = [ "[ ok ] establishing uplink to mads.nation ............ done", "[ ok ] loading personality.exe (beta build 1.67) ..... done", "[ ok ] mounting /offspring (3 dependents) ............ ok", "[ ok ] caffeine subsystem ............................ critical", "[ ok ] optimism daemon ............................... running", "> welcome."]; // ───────────────────────────────────────────────────────────────────────────── // PRIMITIVES // ───────────────────────────────────────────────────────────────────────────── function Hr({ char = "-", color }) { // Fill the row with the char without forcing horizontal scroll. return ( ); } function L({ href = "#", children, color, onClick }) { // CAPS-LOCK link styled like a BBS hyperlink: [LABEL] return ( e.currentTarget.style.textDecoration = "underline"} onMouseLeave={(e) => e.currentTarget.style.textDecoration = "none"}> {children} ); } function SectionHead({ children, color }) { return (
{">> "}{children}
); } // Typewriter — types a list of lines into a fixed-height pre block. function Typewriter({ lines, speed = 18, lineDelay = 120, onDone }) { const [out, setOut] = useState(""); const [done, setDone] = useState(false); useEffect(() => { let cancelled = false; let buf = ""; let i = 0; // line idx let j = 0; // char idx function tick() { if (cancelled) return; const line = lines[i]; if (line === undefined) { setDone(true); onDone && onDone(); return; } if (j < line.length) { buf += line[j]; j++; setOut(buf); setTimeout(tick, speed); } else { buf += "\n"; i++; j = 0; setOut(buf); setTimeout(tick, lineDelay); } } tick(); return () => {cancelled = true;}; }, []); // eslint-disable-line return ( 
      {out}
      {done ? "█" : "▌"}
); } function Marquee({ items, color }) { const text = items.join(" ◆ "); return (
{text} ◆ {text}
); } // ───────────────────────────────────────────────────────────────────────────── // SECTIONS // ───────────────────────────────────────────────────────────────────────────── function Header({ logoStyle }) { const logo = LOGOS[logoStyle] || LOGO_BIG; const wrapRef = useRef(null); const preRef = useRef(null); const [scale, setScale] = useState(1); const [preH, setPreH] = useState(0); useEffect(() => { if (!wrapRef.current || !preRef.current) return; const obs = new ResizeObserver(() => { const s = Math.min(1, wrapRef.current.offsetWidth / preRef.current.scrollWidth); setScale(s); setPreH(preRef.current.scrollHeight); }); obs.observe(wrapRef.current); return () => obs.disconnect(); }, [logo]); return ( 
{logo}
); } function Nav({ gap = "0 18px", sepMargin = 18 }) { return (
{NAV.map((n, i) => {n.label} {i < NAV.length - 1 && |} )}
); } function StatusBars() { // Two compact rows of IRC-style stats — original copy, not copying SoGamed labels. return (
STATUS:{" "} shipping {" · "} OFFSPRING:{" "} 3 {" · "} LOCATION:{" "} ålesund, nor{" "} (62.47°N, 6.15°E) {" · "} UPTIME:{" "} 39 yrs{" "} (stable)
BUILT:{" "} houses{" "} (prev) {" · "} technology & companies{" "} (now) {" · "} FUEL:{" "} coffee · curiosity · spite {" · "} {" "} {" "}
NOW:{" "} a startup in the oven, a marathon in mind, strength and prosperity on the inside and love on the outside.
); } function GuestbookBar() { const [val, setVal] = useState(""); const [status, setStatus] = useState(null); // null | "sending" | "ok" | "err" async function submit() { if (!val.trim() || status === "sending") return; setStatus("sending"); try { const res = await fetch("/api/guestbook", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: val.trim() }) }); setStatus(res.ok ? "ok" : "err"); if (res.ok) setVal(""); } catch { setStatus("err"); } } return (
guest@mads.nation:~$ echo { setVal(e.target.value); setStatus(null); }} onKeyDown={(e) => { if (e.key === "Enter") submit(); }} placeholder="say hi, and leave your name" style={{ background: "#0a0a0a", border: "1px solid var(--border)", color: "var(--fg)", font: "inherit", padding: "2px 6px", minWidth: 220, flex: "0 1 320px", outline: "none" }} /> {">"} guestbook.log { e.preventDefault(); submit(); }}>[SEND] [CONTACT] [NOW] {status === "sending" && sending...} {status === "ok" && ← logged ✓} {status === "err" && ← failed ✗}
); } function About() { return (
about.txt
father of 3.{" "} (the loudest threshold of love.)
based in ålesund, norway.
known for{" "} building houses{" "} in ålesund. home for families. 
now building technology & companies. same job, different tools.
tech savy{" / "} optimistic{" / "} business minded{" / "} entrepreneurial
); } function Education() { const edu = [ { school: "NTNU / NHH", location: "Trondheim & Bergen, NO", degree: "MSc Technology Management", years: "2026–2027", state: "ongoing", notes: ["AI strategy & change management", "tech-driven innovation"] }, { school: "Barcelona GSE", location: "Barcelona, ES", degree: "MSc Economics", years: "2011–2012", state: "done", notes: ["innovation economics · game theory · econometrics", "innovation policy & management"] }, { school: "Hawaii Pacific University", location: "Honolulu, HI", degree: "BA Psychology", years: "2007–2010", state: "done", notes: ["GPA 3.74 / 4.00", "social & cross-cultural psychology · cognition"] } ]; const stateColor = { ongoing: "var(--a3)", done: "var(--a4)" }; return (
education.txt
); } function Projects() { return (
projects.dir
); } function Writing() { return (
writing/
// placeholder titles — i'll publish for real soon. drafts in /tmp.
[ALL POSTS]{" "} ·{" "} [RSS]
); } function Work() { const jobs = [ { company: "Nation Eiendom AS", role: "chairman / founder", years: "2011–", state: "current", note: "real estate development on undervalued properties" }, { company: "1904 Eiendom", role: "CEO", years: "2020–", state: "current", note: "buy-to-rent residential — 8 units, stable affordable housing" }, { company: "Lampholmen AS", role: "sales · strategy", years: "2012–2025", state: "done", note: "full-stack operator — sales, project dev, business development" }, { company: "AI Works AS", role: "co-founder", years: "2023", state: "exit", note: "AI agent for internal comms · exit: sold shares" }, ]; const stateColor = { current: "var(--a3)", done: "var(--a4)", exit: "var(--a2)" }; return (
work.txt
); } function Reading() { const stateColor = { reading: "var(--a3)", done: "var(--a4)", queued: "var(--dim)" }; return (
reading.log
); } function Photos() { return (
photo.log
{PHOTOS.map((p, i) => { const [w, h] = p.dim.split("x").map(Number); const ratio = h / w; return (
{p.label}
▸ {p.label}
); })}
[FULL ROLL]{" "} (disk usage: 3.4 gb)
); } function cssVar(c) { return `var(--${c})`; } function Contact() { return (
contact.sh
); } function Now() { // Live clock — Ålesund time, updating every second. const [t, setT] = useState(new Date()); useEffect(() => { const id = setInterval(() => setT(new Date()), 1000); return () => clearInterval(id); }, []); const aalesund = t.toLocaleString("en-GB", { timeZone: "Europe/Oslo", hour12: false, weekday: "short", hour: "2-digit", minute: "2-digit", second: "2-digit" }); return (
/now
local time (cet):{" "} {aalesund}
currently:{" "} cooking morningperson.ai · scaling postliste.ai · launching elektronisk-tinglysing.no for the people · building BONDE high-end chess merch · teaching kid #2 to read.
); } function Footer() { return (
mads.nation © {new Date().getFullYear()} built in ålesund @ 62°N no cookies. no tracking. design inspired by sogamed & tekst TV.
); } // ───────────────────────────────────────────────────────────────────────────── // APP // ───────────────────────────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const pal = PALETTES[t.palette] || PALETTES.rainbow; const dens = DENSITY[t.density] || DENSITY.regular; const font = FONTS[t.font] || FONTS.plex; const [bootDone, setBootDone] = useState(!t.typewriter); const isMobile = useMobile(); useEffect(() => {setBootDone(!t.typewriter);}, [t.typewriter]); // Set CSS vars on :root for the whole tree. useEffect(() => { const r = document.documentElement.style; r.setProperty("--bg", pal.bg); r.setProperty("--fg", pal.fg); r.setProperty("--dim", pal.dim); r.setProperty("--border", pal.border); r.setProperty("--a1", pal.accent1); r.setProperty("--a2", pal.accent2); r.setProperty("--a3", pal.accent3); r.setProperty("--a4", pal.accent4); r.setProperty("--a5", pal.accent5); r.setProperty("--font", font); r.setProperty("--fs", dens.fontSize + "px"); r.setProperty("--lh", String(dens.lineHeight)); document.body.style.background = pal.bg; document.body.style.color = pal.fg; }, [t.palette, t.density, t.font]); return (