Portfolio Page
A full single-screen portfolio with a clip-path page wipe. A dark landing reveals its wordmark line-by-line from behind masking bars, lists projects whose thumbnails slide open on hover, and carries a grainy noise overlay; clicking a project wipes the whole screen into a light project view and back. Built with Motion and AnimatePresence.
npx shadcn@latest add https://ui.aryank.space/r/portfolio-page.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| primaryLines / secondaryLines | [string, string, string] | ["blank","visual","dev."] / … | The two big landing wordmark columns. |
| projects | PortfolioProject[] | 5 sample projects | Each { name, category, year, image, description }; click opens the project view. |
| aboutLead / aboutBody | string | (about this guy) / … | The about section's small label and paragraph. |
| socials | { label, href }[] | email / twitter / linkedin | Links in the about column. |
| credits | [string, string, string] | "currently creating at|aryank.space" … | Three label|value credits in the landing footer. |
| bg / text / projectBg | string | "#191c1a" / "#b0b0b0" / "#b0b0b0" | Landing background, ink, and project-view background. |
bg / textcolorLanding backdrop and ink color.
projectBgcolorThe project view's background — usually the inverse.
projectsasset-urlEach project's name, copy, and thumbnail — hosted through https://ui.aryank.space/assets/portfolio-page/project-1.jpg and the numbered set.
motion