defuss-shadcn / Website / website-resume-portfolio
Resume & Portfolio
Blocks for a developer's or designer's personal site: who you are and whether you can be hired, the projects you did, your open-source work, and a CV with experience, education and skills that prints. Every block is CSS-only and built from the library's components and tokens.
On this page (4)
§The template
The Resume & Portfolio blocks composed into one personal site, with the Project Item, Project Details and Section Header blocks - the source is the page. About, Work and Résumé are routes of defuss-dom-router; a project is a route (#/work/museo-digital) whose page prepare() fills from a data block, and a discipline filters the work (#/work?discipline=design). Her writing is listed on About and under Writing (#/writing), and each note is a page of its own (#/writing/eleven-date-pickers) with the project it comes from - written from a second data block, in English and German. The language switch translates the frame with defuss-i18n - durations come from Intl.DurationFormat, the start date and the rate from the locale's date and currency formats; the projects and the résumé stay in her words as written. The Résumé prints as a CV: the site's chrome, the Site Footer and the buttons leave the page.
§A personal site
About, Work, Writing and Résumé are routes; a project is #/work/museo-digital, a note #/writing/eleven-date-pickers, both filled from a data block; #/work?discipline=design filters. The switch translates the frame. Site Header, Resume Header, Availability, Project Items, Repository Items, Blog Items, Project Details, Article Header and Body, Author Bio, Resume Entries, Skill Matrices and Site Footer - print the Résumé from the full-screen page.
§The blocks
Resume Header
Opens a personal site or a CV - the portrait, the name, the role, a summary, the facts, the actions and the profiles elsewhere.
Availability
Says whether someone can be hired and on what terms - a card or a banner across the page.
Resume Entry
One line of a CV - a position, a degree, a talk; a promotion path, a timeline, or the dates in a column.
Skill Matrix
Skills in groups, each level a native meter - as bars, as five dots, or as tags without levels.
Repository Item
One open-source project - name, description, topics, language, stars, forks and licence.
Portfolio Grid
The work arranged with character - bento mosaic, masonry, scattered polaroids, a film strip, an editorial index.
§Portfolio styles
The same blocks in ten personalities - each a one-page site with its own palette and typefaces set on its root and its own full-screen page, composed with the shape utilities (Shapes), Motion entrances, Parallax reveals, Text Rotate, Typewriter and the page's own CSS.
The template also uses blocks from other sections: Project Item and Project Details (Company) for the work, Section Header (Landing Page) above each part.
Comments, ideas or improvements? Edit this page's source on GitHub