// Main portfolio app — brutalist/bold, 3 variants, PL/EN, dark/light, live GitHub const { useState, useEffect, useRef, useMemo } = React; const DEFAULTS = /*EDITMODE-BEGIN*/{ "variant": "mono", "lang": "pl", "dark": false }/*EDITMODE-END*/; // ============================================================================ // REPO MODAL (private repos detail view) // ============================================================================ function RepoModal({ repo, lang, t, onClose }) { const shots = repo.screenshots || []; const [idx, setIdx] = useState(0); const [lightbox, setLightbox] = useState(false); const lightboxRef = useRef(false); lightboxRef.current = lightbox; useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") { if (lightboxRef.current) setLightbox(false); else onClose(); } if (e.key === "ArrowRight" && shots.length > 1) setIdx(i => (i + 1) % shots.length); if (e.key === "ArrowLeft" && shots.length > 1) setIdx(i => (i - 1 + shots.length) % shots.length); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); }; }, [onClose, shots.length]); return ( <>
e.stopPropagation()}>
{t.private_label} {repo.year}

{repo.name}

{repo.desc[lang]}

{repo.stack.map((s, i) => {s})}
{shots.length > 0 ? ( <>
setLightbox(true)}> {`${repo.name}
{shots.length > 1 && (
{idx + 1} / {shots.length}
{shots.map((_, i) => (
)} ) : (
{t.screenshot_placeholder}
)}
{lightbox && (
setLightbox(false)}> {shots.length > 1 && ( <> )} {`${repo.name} e.stopPropagation()}/> {shots.length > 1 && (
{idx + 1} / {shots.length}
)}
)} ); } // ============================================================================ // GITHUB LIVE DATA HOOK // ============================================================================ function useGithubRepos(username) { const [repos, setRepos] = useState(null); const [error, setError] = useState(null); useEffect(() => { let cancelled = false; fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=12`) .then(r => r.ok ? r.json() : Promise.reject(r.status)) .then(data => { if (cancelled) return; const filtered = (data || []) .filter(r => !r.fork) .sort((a, b) => (b.stargazers_count - a.stargazers_count) || (new Date(b.updated_at) - new Date(a.updated_at))); setRepos(filtered); }) .catch(e => !cancelled && setError(String(e))); return () => { cancelled = true; }; }, [username]); return { repos, error }; } // ============================================================================ // ICONS (minimal, monoline, brutalist) // ============================================================================ const Icon = { arrow: (p) => , arrowUp: (p) => , github: (p) => , linkedin: (p) => , mail: (p) => , star: (p) => , fork: (p) => , download: (p) => , sun: (p) => , moon: (p) => , dot: (p) => , }; // ============================================================================ // HEADER / NAV // ============================================================================ function Header({ lang, setLang, dark, setDark, variant, t, D }) { return (
WC
); } // ============================================================================ // HERO // ============================================================================ function Hero({ lang, t, D, variant }) { return (
{t.available} · {t.based_in} {D.yearsExperience}+ {lang === "pl" ? "lat w IT" : "years in IT"}

{D.name.split(" ")[0]} {D.name.split(" ")[1]}.

// {D.role[lang]}

{D.tagline[lang].map((line, i) => ( {line} ))}

{D.intro[lang].split("\n").map((line, i) => ( {line}{i < D.intro[lang].split("\n").length - 1 && <>

} ))}

LinkedIn GitHub {D.email}
{D.name}
WALDEMAR CHROBOK / PORTRAIT
KATOWICE · 2026 N°{D.yearsExperience}
{D.stats.map((s, i) => (
{s.n}
{s.l[lang]}
))}
{t.scroll}
); } // ============================================================================ // EXPERIENCE SECTION // ============================================================================ function Experience({ lang, t, D }) { return (
{t.section_01}

{t.experience_title}

{t.experience_sub}

{D.experience.map((job, i) => { if (job.roles) { return (
{job.totalPeriod[lang]}
{job.totalDuration[lang]}

{job.company}

{job.roles.map((r, j) => (
{j < job.roles.length - 1 &&
}
{r.role[lang]}
{r.period[lang]} · {r.duration[lang]} · {r.location}

{r.desc[lang]}

{r.tags.map((tag, k) => {tag})}
))}
); } return (
{job.period[lang]}
{job.duration[lang]}

{job.company}

{job.featured && {lang === "pl" ? "WŁASNA FIRMA" : "OWN COMPANY"}}
{job.role[lang]}
{job.location}

{job.desc[lang]}

{job.tags.map((tag, j) => {tag})}
); })}
); } // ============================================================================ // PROJECTS SECTION // ============================================================================ function Projects({ lang, t, D }) { return (
{t.section_02}

{t.projects_title}

{t.projects_sub}

{D.projects.map((p, i) => (
{String(i + 1).padStart(2, "0")}
{p.status[lang]}

{p.title}

{p.subtitle[lang]}

{p.desc[lang]}

{p.stack.map((s, j) => {s})}
{p.year}
))}
); } // ============================================================================ // SKILLS SECTION // ============================================================================ function Skills({ lang, t, D }) { return (
{t.section_03}

{t.skills_title}

{t.skills_sub}

{D.skillGroups.map((g, i) => (
{String(i + 1).padStart(2, "0")}

{g.title[lang]}

{g.items.map((item, j) => ( {item} ))}
))}
); } // ============================================================================ // GITHUB SECTION (LIVE) // ============================================================================ function GithubSection({ lang, t, D }) { const { repos, error } = useGithubRepos(D.githubUser); const [selectedRepo, setSelectedRepo] = useState(null); return (
{t.section_04}

{t.github_title}

@{D.githubUser}

{t.github_sub}

{/* PRIVATE REPOS */}
{t.private_label} {t.private_repos_sub}
{D.privateRepos.map((repo, i) => ( ))}
{/* PUBLIC REPOS */}
{t.public_repos_label} {t.public_repos_sub}
{!repos && !error && (
{t.loading}
)} {error && (
⚠ {lang === "pl" ? "Nie udało się załadować repozytoriów." : "Couldn't load repositories."} {t.view_on_github} →
)} {repos && repos.length === 0 && (
{t.no_repos}
)} {repos && repos.length > 0 && (
{repos.filter(r => !(D.githubExclude || []).includes(r.name)).slice(0, 8).map((r, i) => (
{String(i + 1).padStart(2, "0")}
{r.name}

{r.description || (lang === "pl" ? "Bez opisu" : "No description")}

{r.language && {r.language}} {r.stargazers_count} {r.forks_count}
))}
)} {selectedRepo && ( setSelectedRepo(null)}/> )}
); } // ============================================================================ // CONTACT / FOOTER // ============================================================================ function Contact({ lang, t, D }) { return (
{t.section_05}

{t.lets_talk}.

{t.lets_talk_sub}

EMAIL
{D.email}
LINKEDIN
/in/waldemarchrobok
GITHUB
@{D.githubUser}
 { e.preventDefault(); window.print(); }} className="pf-contact-card pf-contact-cv">
CV
{t.cta_cv}
); } // ============================================================================ // ROOT APP // ============================================================================ function App() { const [tweaks, _setTweak] = useTweaks(DEFAULTS); const setTweaks = (partial) => Object.entries(partial).forEach(([k, v]) => _setTweak(k, v)); const { variant, lang, dark } = tweaks; const D = window.PORTFOLIO_DATA; const t = D.t[lang]; // apply variant + theme via data attrs useEffect(() => { document.documentElement.setAttribute("data-variant", variant); document.documentElement.setAttribute("data-theme", dark ? "dark" : "light"); }, [variant, dark]); return (
setTweaks({ lang: l })} dark={dark} setDark={(d) => setTweaks({ dark: d })} variant={variant} t={t} D={D} />
setTweaks({ variant: v })} /> setTweaks({ lang: v })} /> setTweaks({ dark: v })} />
); } ReactDOM.createRoot(document.getElementById("root")).render();