redesign 07 — components (rows, plates, cards, 404) #12

Merged

michalvankodev merged 4 commits from redesign/07-components into redesign/00-foundation 2026-09-08 15:11:20 +02:00

Conversation 0 Commits 4 Files changed 20 +308 -150

michalvankodev commented 2026-08-21 12:31:08 +02:00

Owner

Copy link

What

Slice 7/9 of the selected redesign (base: #11). Components.

• Talent/skill cards → definition rows (v3): 32–40px fill-blue-950 icon cue, semibold blue-950 term, reading-voice description at reading size, hairline border-b separators. No box/border/bg — the description gets the space the chrome was wasting, and non-clickable rows no longer look like UI units.
• Project cards → borderless plates: hairline rounded-xs cover, title link, reading-voice description, mono classification + #tags footer; view-transition-name kept. Rework flag stays open — layout/typography/content upgrade to be iterated during review.
• Social cards: white cards, blue hover border (rounded-md); all four brand hover effects preserved (twitch shift, youtube scale, instagram dim, tiktok glitch — the only decorative effects on the site).
• Contact: definition rows in reading voice (not mono), each row a simple full-row link; hover flips icon + label to blue-500 together (fill-current); email note.
• 404: kicker-style ~/requested-path (leading slash trimmed in NotFoundPage), 404: page not found at display size (text-display-1), one-line suggestion copy — check out introduction page, blog or get in touch.
• anime.js logo — the one sanctioned animation exception: kept as authored, displayed as a side plate beside the portfolio intro (was a standalone 320px block). Pointer events live; animation skipped for reduced-motion users — static final state, including the gradient fill.

Review iteration (in-branch follow-ups)

• Portfolio hero: max-w-image two-column header — name fits one line at full text-display-1, tagline de-indented, contact links as definition rows, logo back to 320px and vertically centered. Symmetric bottom margins after the header and after the intro text.
• Skillsets restructured: the 3-column grid is gone — one topic at a time in the read measure, order Skills → Technologies → Work experience → Education, flush headings, same section rhythm (mt-12/16).
• Work experience & Education → definition rows: white plates dropped for the same hairline-row anatomy as the talent cards (shared skill_card component).
• Technologies list: added AI, Agents, Automation.

Preview: https://redesign-07-components.dev.michalvanko.dev — see /portfolio, /contact, homepage socials, and any 404 URL.

## What Slice 7/9 of the selected redesign (base: #11). Components. - **Talent/skill cards → definition rows** (v3): 32–40px `fill-blue-950` icon cue, semibold `blue-950` term, reading-voice description at reading size, hairline `border-b` separators. No box/border/bg — the description gets the space the chrome was wasting, and non-clickable rows no longer look like UI units. - **Project cards → borderless plates**: hairline `rounded-xs` cover, title link, reading-voice description, mono `classification` + `#tags` footer; `view-transition-name` kept. **Rework flag stays open** — layout/typography/content upgrade to be iterated during review. - **Social cards**: white cards, blue hover border (`rounded-md`); all four brand hover effects preserved (twitch shift, youtube scale, instagram dim, tiktok glitch — the only decorative effects on the site). - **Contact**: definition rows in **reading voice** (not mono), each row a simple full-row link; hover flips icon + label to `blue-500` together (`fill-current`); email note. - **404**: kicker-style `~/requested-path` (leading slash trimmed in `NotFoundPage`), `404: page not found` at display size (`text-display-1`), one-line suggestion copy — *check out introduction page, blog or get in touch*. - **anime.js logo — the one sanctioned animation exception**: kept as authored, displayed as a side plate beside the portfolio intro (was a standalone 320px block). Pointer events live; **animation skipped for reduced-motion users** — static final state, including the gradient fill. ## Review iteration (in-branch follow-ups) - **Portfolio hero**: `max-w-image` two-column header — name fits one line at full `text-display-1`, tagline de-indented, contact links as definition rows, logo back to 320px and vertically centered. Symmetric bottom margins after the header and after the intro text. - **Skillsets restructured**: the 3-column grid is gone — one topic at a time in the read measure, order **Skills → Technologies → Work experience → Education**, flush headings, same section rhythm (`mt-12/16`). - **Work experience & Education → definition rows**: white plates dropped for the same hairline-row anatomy as the talent cards (shared `skill_card` component). - Technologies list: added AI, Agents, Automation. **Preview:** https://redesign-07-components.dev.michalvanko.dev — see `/portfolio`, `/contact`, homepage socials, and any 404 URL.

michalvankodev added 1 commit 2026-08-21 12:31:08 +02:00

redesign: components — definition rows, plates, social cards, terminal 404 ... c497cb832b

- Talent/skill cards → definition rows (v3): icon cue 32-40px
  fill-blue-950, semibold blue-950 term, reading-voice description,
  hairline border-b separators — no box/border/bg (the description gets
  the space the chrome was wasting; rows are not clickable so they
  don't look like UI units)
- Project cards → borderless plates (v3): hairline rounded-xs cover,
  title link, description, mono classification+tags footer;
  view-transition-name kept. Rework flag stays open — layout/typography
 /content upgrade to be iterated during review
- Social cards: white cards + blue hover border (rounded-md), brand
  hover effects preserved (twitch shift, youtube scale, instagram dim,
  tiktok glitch)
- Contact page: definition rows in reading voice (not mono), each row a
  simple full-row link; email note
- Terminal 404: $ GET <real url> → 404: page not found (NotFoundPage
  gains url field), quiet link suggestions
- anime.js logo: kept, displayed cover-style (w-56/md:w-72 side plate
  beside the intro, replacing the 320px m-10 block); pointer events
  live; animation skipped for reduced-motion users (static final state)

michalvankodev referenced this pull request 2026-08-21 14:37:51 +02:00

redesign 08 — syndication & perf (JSON feed, sitemap, OG) #13

michalvankodev referenced this pull request 2026-08-21 14:40:14 +02:00

WIP: redesign 09 — a11y & print sweep (stack tip) #14

michalvankodev force-pushed redesign/07-components from c497cb832b to 515eb5bfd3 2026-08-21 16:17:17 +02:00 Compare

michalvankodev force-pushed redesign/07-components from 515eb5bfd3 to 9dd9b9bae0 2026-08-23 12:37:13 +02:00 Compare

michalvankodev force-pushed redesign/07-components from 9dd9b9bae0 to c021253212 2026-08-23 12:49:42 +02:00 Compare

michalvankodev force-pushed redesign/07-components from c021253212 to cc6d7957cb 2026-08-23 12:58:03 +02:00 Compare

michalvankodev force-pushed redesign/07-components from cc6d7957cb to f02c9b8abc 2026-08-24 10:19:50 +02:00 Compare

michalvankodev referenced this pull request 2026-09-04 13:23:31 +02:00

redesign 04 — list pages (year archives, 2-col rows) #9

michalvankodev changed target branch from redesign/06-content-rendering to redesign/00-foundation 2026-09-07 15:10:57 +02:00

michalvankodev force-pushed redesign/07-components from f02c9b8abc to 6abf01f9cc 2026-09-07 15:10:59 +02:00 Compare

michalvankodev added 2 commits 2026-09-07 16:09:45 +02:00

redesign: portfolio — bigger header hero, stacked skillsets, definition-row experience ... 902a023c3d

- header: max-w-image two-col hero, name/tagline breathe, contact links
  as v3 definition rows (hover via fill-current), logo back to 320px,
  vertically centered; reduced-motion static state now also sets the
  gradient stop (matches animation end state)
- rhythm: symmetric bottom margins after header and after intro
  (pb-12/16, mb-12/16)
- skillsets: 3-col grid dropped — one topic at a time in the read
  measure, order Skills → Technologies → Work experience → Education;
  flush headings (no m-5/m-6 grid insets), mt-12/16 between topics
- skill cards: white plates → definition rows (border-b, hairline,
  reading-voice description), matching talent cards; row lists gap-0
- technologies: add AI, Agents, Automation

redesign: 404 kicker + display heading; contact definition-row hover fix ... d8c389b645

- 404: $ GET line → kicker (~/{url}, leading slash trimmed in handler,
  overflow-wrap for long query strings); 404 heading to text-display-1;
  suggestions copy: check out introduction page, blog or get in touch
- contact: rows keep text-blue-950 but hover now actually flips
  icon+label to blue-500 (fill-current, color on the anchor)

michalvankodev added 1 commit 2026-09-08 10:52:43 +02:00

redesign: showcase two-tier rework — featured plates + archive rows ... 2943dc84e3

- featured projects become editorial plates (16:9 cover side-plate,
  article-listing meta line above the name, technology list at bottom)
- non-featured become quiet hairline rows with 48px thumbnails (blue
  initial plate for cover-less projects), same anatomy as plates
- fake masonry grid removed; section pulled onto the max-w-image rail
- year derived from slug; tags duplicating classification filtered
- HeyLady! promoted to featured; beIN Sports cover recomposed on a
  square canvas (was a 5.6:1 strip butchered by center-crop); The
  Expert SVG cover cropped to 16:9 to match the other plates
- homepage featured projects sorted newest-first (was fs order)

michalvankodev changed title from WIP: redesign 07 — components (rows, plates, cards, 404) to redesign 07 — components (rows, plates, cards, 404) 2026-09-08 15:11:12 +02:00

michalvankodev merged commit 782c83abd2 into redesign/00-foundation 2026-09-08 15:11:20 +02:00

michalvankodev referenced this pull request from a commit 2026-09-08 15:11:20 +02:00

Merge pull request 'redesign 07 — components (rows, plates, cards, 404)' (#12) from redesign/07-components into redesign/00-foundation

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

michalvankodev/michalvankodev-site!12

No description provided.