portfolio-next/docs/inspiration.md

Inspiration notes

Lucas's reactions to other portfolios while shaping the new lucaswinther.info. Quotes are Lucas's own words, lightly tidied. "Takeaway" lines are Claude's reading, not Lucas's.

Principles so far

• Not a game engine. The site shouldn't feel like it's rendered in a game engine or one big canvas.
• No loading screen or loading bar. Ever.
• No epilepsy warnings. Nothing flashy or strobing.
• The visitor stays in control. Nothing should happen outside the user's control: no scroll-jacking, nothing that jumps out at you, no autoplay spectacle.
• Calm until touched. "Life" comes from the site responding when you engage (hover details, things to discover, content that's lived-in and updated), not from motion pushed at you. (Claude's framing; Lucas: "closer, yes".)
• A space to explore. "It needs to be a space to explore, inviting you in and getting your curiosity, not a space that shouts in your face and tries to push you indoors."
• Not selling anything. No advertisement or landing-page feel, nothing corporate or jokey.
• Not AI-generic. Colours, layout and copy must not read as AI- or template-generated.
• Fast. Not laggy.
• Varied ways of showing information. Different presentations (timelines, graphs, tags, previews) make you want to dig deeper, but in moderation, not a feature for every section (from sankar.work).
• Normal scrolling pages. Scrolling with things to explore is good; scroll-jacking is not.
• Compact screens. Each screen shouldn't be huge or eat space (from david-estrada.dev).
• Has an identity, but a light one (from ntch.design, kigo.studio).

The site's purpose (from conversation)

The site should show that Lucas has mastered both being a person who develops and reasons by hand, and using AI tools to make something great. Three parts:

Two gates (corrected 2026-11-09):

1. Professional / technical: portfolio, projects, education, skills, and a blog on AI, devops and homelab.
2. Personal: personal writing, creative work, the band and music.

The old 2021 site (React + Material UI) stays reachable as an archive, mainly for visitors who don't want AI-made work, but it isn't promoted as a space of its own.

Project-level AI filter: fully AI-made / some AI help / no AI. The existing info.json already tags two projects made_with_ai. Where the toggle lives is still open; it doesn't have to sit on top of the site.

Unsolved gap: none of the references recognise why someone is visiting (recruiter vs. friend) and show the right side of you.

Round 1: well-known developer sites

Site	Verdict	Notes
maggieappleton.com	👍 Use ideas	Very nice digital garden. Takeaway: content sorted by type (essays/notes/small links) and maturity, technical and personal mixed.
brittanychiang.com	👍 Base	Great, simple, responsive, reactive, has exactly what you need. Lacks life and discoverability: no blog, no differentiating between recruiter and friend. Takeaway: the cursor spotlight is the "responds only when you move" kind of life.
rauno.me	🤔	Good design idea, unsure it fits Lucas.
jhey.dev	🤔 Idea for /simple	Interesting and themed, but too short and uninspiring, like a business card. Could be a shareable endpoint, e.g. lucaswinther.info/simple. The main site needs more life.
bruno-simon.com	👎	Very fun idea, but a project in itself, not a portfolio.
joshwcomeau.com	👎	Some good ideas, but weird, feels like it's selling something, too corporate, jokey and laggy.
emilkowal.ski	👎	Too boring, trying to sell something.
lynnandtonic.com	👎	Doesn't look good. (The yearly-archive idea isn't rejected, just this site.)
simonwillison.net	👎	Ugly and old school.
cassie.codes	—	No longer maintained.

Round 2: design-led portfolios

Positive / closest

Site	Verdict	Notes
sankar.work	👍 Closest	Closer to what Lucas had in mind and generally good. Still feels a bit like an advertisement, and the colours feel way too AI-generated. What's right: "the page scrolls and has stuff to explore without being a game. It feels reactive, without taking away control. And it displays information in different ways, making you want to look deeper." What's wrong: the AI chatbot, the generic AI colour scheme, and "perhaps doing a bit too much" across many features.
ntch.design	👍	Good identity without being too heavy. (Keyboard shortcuts, tagged project list.)
beige.zone	👍 Not bad	(Works grouped by year, tag filters, archival "Fig. 01" labels.)
adriangnzl.es	👍 Not bad
poulo.site	👍 Not bad
kigo.studio	🤔	Too disorganised, but mixes liveliness with site identity well.
marcomadonnadesign.com	🤔	Somewhat okay perhaps.
blue2purple.com	🤔	Not a bad idea, but not quite it.

Negative

Site	Why
iamsunnywang.com, its-tomo.dev	Cool art identity, but way too heavy and game-feeling.
lcg.media, macmillan.studio	Too in your face; too much happening outside the user's control.
grubogrubo.com	Somewhat better, but too gimmicky.
worksruthi.com	Shouldn't need an epilepsy warning.
effepinnastudio.com, webdrift.be	Too much jumps out at you.
suho.studio, robertoattanasio.com	Too game-feeling.
jozue.fr, stevenatallah.com	Too "interactive".
danielebuser.com	Meh, too interactive.
juliamoresco.com.br	Cute, but too interactive and game-feeling.
vantra-studio.webflow.io	Meh.
gianlucaboccia.me	Has identity, but too gamey.
sebg.ch	Too interactive and game-feeling.
david-estrada.dev	Too much happening; each screen too big, takes too much space.
two26.studio	Too much happening.
nesilnoble.com, aat-architecten.be	Too interactive and game-feeling.
onlines.com.ar	Too much happening on scroll.
designbyency.com	Way too old school.
jithinrp.com	Too much happening, and has a loading bar.

Round 3: personal, music and blog sites

Site	Verdict	Notes
marcschuster.com/blog	🤔	Better visual style and feel, but too uninteractive.
8sided.blog, onetwoxu.de, 333sound.com, globalvariables.net, breakingmorewaves.blogspot.com, cardrossmaniac2.blogspot.com, chorus.fm	👎	Boring or too basic; feel like blogs or news feeds.

| digidi.net/KALALUNA/page/bio | 🤔 Closer in some parts | Danish singer-songwriter on the DIGIDI artist platform. Clean two-column bio (portrait + text), simple top navigation (Bio, Videos, Backstage, Contact), restrained blue palette. |

Takeaway: the personal side can't be a plain chronological feed.

| mindofakira.com | 🤔 Cool elements | "Too interactive" overall, but cool elements: you can play music with a spinning record player and do a DJ scratch. |

| awwwards.com/sites/the-story-of-the-king-of-pop | 🤔 | Somewhat interesting aesthetic. | | alexandracapitanescu.com, ty1official.com | 👎 | Too much happening; would need an epilepsy warning. | | kalohane.com | 👎 | Too game-feeling. |

What Lucas wants from the music corner: "letting the user play some of the music, and then letting the user interact and explore the music." (The record player was about this, not the scratching itself.)

Rejected idea: a chronological logbook of gigs (date, venue, handcam video, photos). "A bit too boring. There's not enough for a chronological feed, and it cannot feel like just another blog."

What the music actually is (Lucas): not a well-known band with albums on Spotify or Apple Music. It's small projects and handcam-recorded concerts from his small band. Standard band-site patterns (streaming links, release pages, press kits) mostly don't apply. It needs the same explore-and-discover feel as the technical side.

Still missing

• Positive references for the music side (band sites, musician sites).
• A clear "yes, that" for overall visual identity.

Current site facts (recon, 2026-10-28)

• lucaswinther.info: Create React App + Material UI, dark theme. Fixed left panel with avatar, "Computer Scientist with passion for development", and links to LinkedIn, email, GitHub (StereotypicalCat) and the blog. Right side: a searchable grid of 13 projects from /info.json.
• Blog lives separately at blog.lucaswinther.info.
• Projects: Gacha Event Tracker (AI), Config/Ansible (AI), Bachelor thesis on P2P archival reputation systems, Student Dashboard, Chessswap, Monthly Expenses Tracker, Mixed-Reality Rowing Game (Arduino + real oars), VR-Classroom, LoL Winrate Discord Bot, Censor Simulator (VR), BreakoutPython, Tribute to Norman Borlaug, Portfolio.

Mockup round 1 (2026-11-09)

13 throwaway mockups live in mockups/ (brief: mockups/BRIEF.md): nav-a/b/c (three doors, switchable lens, one garden), personal-1..5 (crate, desk, garden, almanac, zine) and tech-1..5 (catalogue, two chapters, evolved split page, skills map, lab notebook). Lucas's reactions go here.

Overall site: A (three doors) is the favourite. B and C "take away too much reason to explore the other spaces".

Correction to the structure: the split is two gates, professional/technical vs. personal, not three spaces. The old by-hand site should not be promoted as a space of its own. The AI toggles are a filter, not a section. Next step: a new mockup based on A with just two gates, the left side technical and the right side art-y, more interesting and more clearly different from each other (nav-d.html).

Garden as a third, small way in: Lucas likes the garden (C) too, as a small third link under the two gates, not a gate of its own. Added to nav-d as a pill under the seam ("or wander through everything at once", key G).

Decision (2026-11-09): nav-d is the starting page. "Enter work" and "come in" should lead into the chosen tech and personal designs (still to be picked from T1–T5 and P1–P5), not the placeholder rooms.

Tech mockups (T1–T5) feedback: none are quite it; all are a bit too boring and/or hard to navigate.

• T5 lab notebook: the pick if forced. Cohesive style, presents things well. But the timeline view isn't it: wants a more project-focused view.
• T4 skills map: cool graphs, and the inspector is nice, but it takes away from actually learning about the projects. Latest writing is nice. Skills-over-time is not useful.
• T3 split page: a clean template, a bit boring. Could be the /simple view. "Pointing at" is not interesting.
• T2 timeline: not interesting or good.
• T1 catalogue: not a bad overview but no character. Could be useful somewhere (e.g. a full index).

Real work history is now in extra_info.txt (Aarhus University IT Research Tech 2025–now, ScienceAtHome internship 2019, TERMA student helper 2016–2018).

Tech round 2 (2026-11-09)

Brief: mockups/BRIEF-tech-r2.md. tech-r2-a (notebook, project-first), tech-r2-b (spec sheets), tech-r2-c (project explorer), tech-r2-d (featured, then everything). All in the left gate's visual family, with real work history.

Round 2 feedback (partial): the notebook idea (tech-r2-a) is fun, but set aside for now. Wants to also explore something that feels modern and alive. Correction: not "alive", just modern. Round 3 (mockups/BRIEF-tech-r3.md) drops the paper/print metaphors: tech-r3-a project stage (light, list + live preview, ⌘K), tech-r3-b Swiss index (big type, rows expand in place, hover preview), tech-r3-c dark showcase (featured panels, side-sheet detail). The gate's left side may change to match.

Round 3 feedback: the drawn project showcases in A and C are a really nice touch, so keep them in some form. C's structure is really good (Now / Writing / CV strip, featured panels, filterable list with side sheet). Overall it still feels "pretty basic and old-web-y", not as sleek or modern as Lucas wants. No single reference for "sleek"; "take it a bit further", using tech-r3 as the baseline. Principle update: the round-1 ban on gradients, glass, shadows and glow is relaxed. Layered depth, cursor-responsive light, backdrop blur, tonal gradients and crisp user-triggered motion are allowed with restraint (Linear/Vercel/Raycast level). Still no purple/blue AI gradients, neon, autoplay loops, scroll-jacking or loading screens. Round 4 (mockups/BRIEF-tech-r4.md): tech-r4-a dark sleek, tech-r4-b light sleek, both evolved from tech-r3-c.

Decision (2026-11-09): the tech space is tech-r3-c (dark showcase), as it is. "It works well, and fits without being too modern." Round 4 (tech-r4-a, tech-r4-b) is kept as reference mockups only. nav-d's "enter work" now links to tech-r3-c, and tech-r3-c links back to the gate and across to nav-d.html#art.

Personal mockups (P1–P5) feedback

• P1 crate: not my thing.
• P2 desk: closer, fun to look at, but might scale weirdly as more topics and interests get added.
• P3 garden, P4 almanac: don't fit how Lucas would actually use the site.
• P5 zine: an interesting idea, or at least an addition to how he'd use the site.

The mockups focused too much on the band. What the personal side should actually host:

• thoughts on a movie or game he really likes
• a song he wants to share right now
• pages from a comic he likes (as he does on Bluesky: bsky.app/profile/stereotypicalcat.bsky.social)
• links to Trakt (film/TV) and Hardcover (books)
• small random essays on things he cares about
• life history, and thoughts on the meaning of life
• a little drawing he made, commissioned art, a Kickstarter he backed and is now playing
• (plus music and the band, as one topic among many)

Confirmed playback (personal side): a place for things Lucas loves and things he thinks. Mostly small, visual shares (a game or movie and why, a song, a few comic pages with a line, a Kickstarter game, commissioned art, own doodles), some slower writing (essays, life story, meaning of life), and Trakt/Hardcover pulled in rather than logged twice. Browsable by interest and by what's new. The band is one topic among many. The zine could work as a seasonal roundup on top. Volume: only 1–3 things a month. The design must look good sparse and grow slowly over years. Real recent shares (Bluesky): comic pages from Now Recharging (nowrecharging.com, "i cried so much in this chapter"), Junkwraith (a coming-of-age comic with a unique world), the MangaPlus one-shot Cupid 13, a "villainess reborn" manga trope he's into, a Halloween pumpkin. Tone: warm, casual, heartfelt, the odd emoji.

Personal round 2 (2026-11-09)

Brief: mockups/BRIEF-personal-r2.md. personal-r2-a (shelves of things I love), -b (one big rich wall), -c (the zine, grown up), -d (a personal homepage).

Decision (2026-11-09): the personal space is personal-r2-b (one big, rich wall), plus a half-yearly version of the zine/newspaper (from personal-r2-c) as a roundup. nav-d's "come in" now links to personal-r2-b. tech-r3-c's "off the clock" edge links to personal-r2-b, and personal-r2-b's "work" edge links to tech-r3-c.

Decisions so far (summary, 2026-11-09)

• Start page: mockups/nav-d.html, with two gates (work on the left, off the clock on the right) and a small "wander through everything at once" link to the garden (nav-c.html idea).
• Tech space: mockups/tech-r3-c.html (dark showcase), as it is. Round 4 (tech-r4-a/b) is kept as reference only.
• Personal space: mockups/personal-r2-b.html (one big, rich wall), plus a half-yearly zine/newspaper roundup (from personal-r2-c).
• /simple: a one-page card; tech-3.html (evolved split page) is the candidate.
• Old 2021 site: an archive, reachable but not promoted (via "by hand only").
• AI filter: any way / not fully by AI / by hand only, as a site-wide preference.
• Stack (agreed): Bun + TypeScript + React, with Astro as the framework. Static pages rendered at build time, React islands only for interactive parts (⌘K palette, AI filter, side sheet, players, comic reader, showcases). Content as Markdown/MDX files with frontmatter (type, interest, AI level, images), posted by git push. Trakt and Hardcover fetched at build time, with scheduled rebuilds. Self-hosted as static files in a small container, possibly deployed via Lucas's Ansible config repo.

Screenshots of every mockup are in mockups/shots/. The visual companion's index screens are in .superpowers/brainstorm/.