Portfolio Showcase Profile Block for React

Edit PROJECTS. A project has a title, a category (identity, print or digital), a year, your role, three short paragraphs (the brief, the work, how it ended) and the drawing its cover and spread use. Each cover is a small drawing of at most six shapes; in your app replace Scene with an img that fills its box and keep the case as it is. The counts on the category chips and the status line are worked out from the list, so nothing is typed twice. Keep every case to three paragraphs of about the same length: the panel reserves the height of the tallest.

Pressing a cover opens its case in the same place as the covers: the covers become unseen and inert and the case appears, and focus moves to its title so a keyboard or screen reader user starts reading there. "Back to projects" does the reverse and returns focus to the cover you opened, so you do not lose your place. The status line says which one you opened or that you went back. Nothing is loaded and nothing is routed: to give each case its own address, make each cover a link to its page.

No. The chips narrow the covers to one category and say how many are shown, and an unseen copy of all six covers holds the grid's height, so the panel does not move. The group is a single choice that is never empty, so there is no empty state to design.

Nothing leaves the page. It puts "Hello noted. Nothing was sent." in the status line. To make it real, open a mail link or a contact form from the button and keep the answer in the same line.

Every cover is a real button named by its title, category and year, the drawings are hidden from assistive technology, and the case is written in text beside them. The levels that are not showing are hidden from assistive technology and cannot be focused. The status line is a polite live region present from the start. Titles, years and counts keep their order in a right-to-left layout, and the Back arrow flips.

The person comes first in a compact row with her skills under it, then the category chips (scrolling sideways) and the covers two across. A case fills the same space, with its paragraphs one under the other. The foot stays pinned to the bottom of the screen while the panel scrolls, so Say hello is always in reach, and settles at the panel's end from the medium breakpoint.