defuss-shadcn / Website / Resume & Portfolio / portfolio-editorial
Editorial Portfolio
A portfolio set like a magazine - warm paper, a masthead, a serif name beside an arched portrait, a pull quote that rises into view, an index of work whose pictures appear on hover and focus and open a case study each, a feature with a drop cap and a colophon. One of the Resume & Portfolio styles.
Clara Moreau, art director
The page sets its own palette on its root (warm paper, ink, terracotta) - every block inside takes it. A Site Header set as a masthead (its sections are anchors of the home view - a case study gives way to them); Resume Header (split) with a corner-arch portrait that wipes up (Motion); a Parallax reveal pull quote; Portfolio Grid (index) whose entries open a case study each (#/work/the-quiet-atlas - Project Details filled from a data block, with previous and next); a feature with a drop cap; Resume Entry (columns); Availability (banner); a Site Footer set as a colophon.
Built from Site Header (set as the masthead), Resume Header (split), Portfolio Grid (index), Resume Entry (columns), Availability (banner), Project Details with Article Navigation for the case studies and Site Footer (set as the colophon). Every case study is a route of defuss-dom-router: #/work/maison-verre fills it from a data block, with the previous and the next case; the masthead's sections are anchors of the home view, which a case study gives way to. The palette is the page's own: tokens set on its root, so every block inside follows it, in dark mode too. The arch is corner-arch from Shapes, the entrances are Motion's, the quote and the feature picture are Parallax reveals.
Comments, ideas or improvements? Edit this page's source on GitHub