portfolio-next/mockups/BRIEF.md

Mockup brief (shared by all mockup agents)

You're designing throwaway HTML mockups for Lucas Winther's new personal site (replacing lucaswinther.info). Lucas reacts to them in a browser. The goal is to find out what he likes, so each mockup in your set must be a clearly different direction: different layout idea, different navigation mechanic, different visual identity. Five variations on one theme would waste the round.

Read first

/home/user/portfolio-next/docs/inspiration.md lists every site Lucas has reacted to, with his own words, plus the principles distilled from them. Treat the principles as hard constraints. Re-read the negative list before finishing.

What the site is

The site proves Lucas can craft things by hand and use AI tools well. Three spaces:

1. By hand, before: the old 2021 React portfolio, frozen as an archive (old.lucaswinther.info or similar). Visitors who don't want AI work get pointed here.
2. With AI, now: the technical portfolio. Projects, education, skills, a blog on AI, devops and homelab.
3. As a person: personal writing, musings, findings, creative bits, and his small band (handcam concert recordings and small projects, not albums on Spotify).

Cross-cutting:

• AI filter on projects: fully AI-made / some AI help / no AI. Where and how it appears is open; it does not have to sit at the top of the site.
• Different visitors want different sides: a recruiter vs. a friend vs. a fellow musician.
• /simple: a separate one-page business card. Not your job unless your brief says so.

Hard constraints

• Ordinary HTML/CSS pages, scrolling normally. No canvas or WebGL scenes, no game-engine feel, no 3D worlds.
• No loading screens, preloaders or intro animations. Content is visible on first paint.
• Nothing moves unless the visitor does. No autoplay, no scroll-jacking, no flashing, no big scroll-triggered spectacles. Hover, focus, click and expand are the "life". Small, quick transitions (≤300ms) are fine.
• Calm until touched, a space to explore. Things to discover, information shown in a few varied shapes (timelines, tag clouds, maps, lists that expand, previews on hover) that invite you to dig, but restrained: a handful of well-made ideas per page, not a feature in every section.
• Not selling anything. No CTAs like "Hire me!", no landing-page hero with three feature cards, no testimonials carousel, no corporate or jokey tone.
• Must not look AI-generated. Avoid purple/blue/indigo gradients, glassmorphism, emoji as icons, rounded-card grids with drop shadows, Inter-on-white defaults, "✨", neon-on-black dev-terminal clichés, and generic bento grids. Pick type and colour like a person with taste would: a real typeface pairing (Google Fonts via <link> is fine), a considered palette.
• Compact. Screens shouldn't be giant full-viewport panels with one sentence each.
• Fast and light. Vanilla HTML/CSS/JS in a single self-contained file. No frameworks, no CDNs except Google Fonts. No external images: use CSS shapes, inline SVG, solid colour blocks or simple patterns as image placeholders, labelled e.g. "photo: rehearsal room".
• Responsive enough that it doesn't break at about 400px wide, but design for desktop first.

Content

Use real content where it exists. Lucas's real projects, from the old site's info.json:

• Event Tracker for Gacha Games: scraping, webapp, JS. Made with AI. Live demo plus GitHub.
• Config: Ansible, IaC, docker-compose deployment management. Made with AI.
• Bachelor Report (HyperCache): reputation systems in peer-to-peer archival. Node.js. Thesis PDF.
• Student Dashboard: React, built on user studies. Report PDF plus demo.
• Chessswap: chess where the board swaps every few turns. React.
• Monthly Expenses Tracker: JS webapp, DKK.
• Mixed-Reality Rowing Game: Unity, Arduino, C#, two real oars.
• VR-Classroom: Node.js prototype, report plus video.
• LoL Winrate Discord Bot: Node.js.
• Censor Simulator: VR high-school exam project, Unity.
• BreakoutPython: high-school exam project.
• Tribute to Norman Borlaug: one of his first websites (freecodecamp).
• Portfolio: the old React site itself.

Real links: GitHub StereotypicalCat, LinkedIn lucas-winther, email lucas@lucaswinther.info, blog blog.lucaswinther.info. Old tagline: "Computer Scientist with passion for development."

Anything else (band name, gig venues, blog titles, current job, city, education details beyond "bachelor in computer science") is unknown. Invent plausible placeholders and mark them visibly, e.g. with a subtle dotted underline and a title="placeholder", or a small "placeholder" note in the footer listing what's invented. Lucas is Danish (prices in DKK, a Danish university), but don't assume a city.

Music: there are no real audio files. Mock the player UI convincingly (play/pause toggles state, a fake progress bar that only advances after the visitor presses play, song list, timestamps). Handcam concert video = a placeholder frame with a play affordance.

Output format

• One standalone HTML file per mockup, full document (<!DOCTYPE html>), in /home/user/portfolio-next/mockups/, named as your brief says.
• At the very top of <body>, include a small fixed, dismissible note (top-right, unobtrusive, not part of the design) with the mockup's ID, a name, and 1–2 sentences on the idea and which reference sites it borrows from.
• Make it feel like a real page someone could scroll, with enough content to judge, but it's a mockup: one main page per mockup. Extra "pages" can be sections or expandable states.
• Don't start servers or install anything. Check that each file is well-formed (e.g. it parses, there are no JS errors you can spot by reading). If node is available you can sanity-check inline JS syntax.

When done

Report back: for each file, its name, a one-line idea, the typeface and palette, and what's placeholder. Keep the report short.