defuss-shadcn / Website / Resume & Portfolio / portfolio-brutalist
Brutalist Portfolio
A portfolio that shouts - acid yellow, black rules, a name in capitals as big as the screen, a tilted portrait with a hard shadow, a spinning sticker, work in thick frames that opens a page each, a process in numbered boxes, a rate card, a CV that prints and a cut-corner call to action. One of the Resume & Portfolio styles.
Knut Berg, creative developer
Acid yellow, black, no radius and Archivo Black + Space Mono on the page's root (inverted in dark mode); a Site Header under a thick rule; News Ticker (inverse); Resume Header (poster) with a frame-thick, shadow-retro portrait and a shape-burst sticker; Portfolio Grid (strip) in frame-thick + shadow-hard - each piece opens its page (#/work/synth-in-a-tab: Project Details from a data block, with previous and next); Process Step (horizontal); a rate card; Skill Matrix (dots); Availability (spotlight) with cut-corners; a CV route that prints (#/cv); a Site Footer (dark) closing on the name. Motion flips, skews and slides things in.
Built from Site Header, News Ticker (inverse), Resume Header (poster), Portfolio Grid (strip), Process Step (horizontal), Skill Matrix (dots), Availability (spotlight) and Site Footer (dark, with the wordmark). Every project and the CV are routes of defuss-dom-router: #/work/synth-in-a-tab fills Project Details from a data block, with Article Navigation to the previous and the next project; #/cv is a page that prints on its own (the header and the footer stay off the paper); the header's sections are anchors of the home view. The palette, the zero radius and the two typefaces are set on the page's root. frame-thick, shadow-retro, shadow-hard, shape-burst and cut-corners are Shapes utilities, the flip, skew and slide entrances Motion's.
Comments, ideas or improvements? Edit this page's source on GitHub