laywill / laywill/laywill.github.io

Design study: landing page mockups (pick a direction)

Open
#26 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

design needs-william
Dominant language
HTML
Stars
0
Forks
0
Avg merge
8h 17m
Merged PRs (30d)
58

Description

Produce 2–3 landing-page mockups for William to choose from. Read design-brief.md, colour-scheme.md, typography.md first. Check the CV name treatment in laywill/cv (deedy-resume-openfont-wjl.cls) and mirror it in the hero.

Ready-to-paste Claude Design prompt:

Design 3 alternative landing-page mockups for williamlay.co.uk, the personal site of William Lay — software engineer / DevOps / agile coach / engineering leader. Audience: recruiters clicking through from LinkedIn or a CV, deciding in seconds whether he's interesting. Primary CTA above the fold: "Connect on LinkedIn"; secondary: "Download CV".

Theme: Developer Dark Mode built strictly from the VS Code Dark+ palette — background #1E1E1E, panels #252526, text #D4D4D4, accents used semantically: keyword blue #569CD6, variable #9CDCFE, type teal #4EC9B0, function yellow #DCDCAA, string orange #CE9178, comment green #6A9955, status-bar blue #007ACC. Typography: Raleway for the name/display, Lato body, JetBrains Mono for code/IDE elements.

IDE motifs to explore (sparingly, semantically): a VS Code-style status bar as the footer, editor-tab or breadcrumb navigation, syntax-coloured skill tags, terminal prompt touches, Obsidian-style callout blocks. Layouts must be diagram-led and visually structured (Gestalt): icon grids for the toolbox/skills, a timeline for career, strong groupings over labelled sections.

Hard exclusions: no oatmeal/beige/cream backgrounds, no uppercase eyebrow labels above headings, no Inter/Roboto, no purple/violet gradients or glow effects, no symmetrical centered card grids with drop shadows. Make the three mockups genuinely different in layout strategy, not palette swaps.

Acceptance criteria

  • 2–3 mockups produced and linked here
  • William picks a direction (comment on this issue)
  • Chosen direction's decisions folded back into docs/overhaul/

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Read docs/overhaul/design-brief.md, docs/overhaul/colour-scheme.md, and docs/overhaul/typography.md first, then check deedy-resume-openfont-wjl.cls in laywill/cv for the hero name treatment. Produce 2–3 genuinely different landing-page mockups following the prompt, and finish when William selects a direction and the chosen decisions are folded into docs/overhaul/.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
design, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.