This case study presents a concept demonstration for portfolio purposes. It is not an active commercial product, operating company, or regulated service. The source for this site is available as a free download. You may use it under the license included in the archive. Download here.
relay
2026personal link in bio style page for a fictional product designer. profile, links, selected work, services, press, and contact in one calm scroll. a design and front end demo i built, not a real profile.
- role
- design & front end
- stack
- html
- css
overview
relay is a fictional personal site i built in the link in bio tradition, but denser and more intentional. one long calm scroll for a made up product designer: profile, socials, links, selected work, services, clients, images, posts, video, testimonials, press, resume, availability, shop picks, events, and contact.
this is not a real person, not a client site, and not a live booking product. it is a personal concept page. the names, quotes, and projects are invented. the craft is what matters: hierarchy, rhythm, and a bio layout that feels complete without turning into clutter.
what it is
relay presents as alex rivera, a product designer based in lisbon. the page opens with a logo, avatar, verified name, and a short line. below that it stacks the blocks people expect from a modern personal surface: social buttons, link list, selected work cards, services, clients, image rows, latest posts, a featured video slot, testimonials, press, resume, availability, affiliate style shop picks, an upcoming event, now playing, support, and contact.
the point was to design a full bio system in one file set, not a thin three link page. every section should feel like it belongs to the same quiet brand.
visually it uses outfit, soft cards, and a lot of breathing room. the scroll is the product.
how i built it
i built relay as a static page. html for structure. css for the bio system. no framework and no backend. that kept the loop fast and forced every block to justify its height.
the constraint was density with calm. a bio page can become a landfill quickly. the work was grouping content, keeping type consistent, and making the long page still feel scannable.
design notes
link in bio pages often look temporary. relay aims for a finished personal brand moment. verified badge, clear sections, and enough content types that the template could flex for a real designer later.
availability and contact close the loop. shop picks and events add modern bio texture without needing real integrations. everything stays fake, but the structure is serious.
what this is not
relay is not a real portfolio or booking page. the designer is fictional. the clients are fictional. the links do not lead to real products. if you treat it as a live personal brand, you will only meet a designed demo.
that honesty is part of the piece. the page is here to show how far a single static bio surface can go. the persona is imaginary. the craft is not.
outcome
i ended with a complete static bio world for a person who does not exist. it sharpened how i handle long personal pages, section rhythm, and quiet density. relay is a personal mock i finished enough to show, clear enough to say out loud that it is not a real profile.
disclaimer
The information on this page is provided for general portfolio and informational purposes only. No representation or warranty is made as to its accuracy, completeness, currency, or correctness, and no reliance should be placed on it as advice or as a statement of fact. All content is offered without guarantee and may be updated or corrected at any time without notice.
