# Portfolio Kit > 133 composable React components and 15 full-page templates for building portfolio websites, plus a theme builder. Built on shadcn/ui + Tailwind CSS v4 and installed with the shadcn CLI (`npx shadcn@latest add @portfolio-kit/`). Individual guides, components and templates have Markdown counterparts linked below. Components are installed as source into `components/portfolio/`, compose as compound parts (`ProjectCard` + `ProjectCardTitle`…), accept `className` on every part and follow the theme tokens. Pick a template for a whole page, or compose sections from components. ## Docs - [Agent integration instructions](https://www.parthjadhav.com/products/portfolio-kit/AGENTS.md): inspect the consumer, install components, preserve accessibility and verify the result. - [Product brief](https://www.parthjadhav.com/products/portfolio-kit/agent.md): scope, installation model and development-only availability. - [Introduction](https://www.parthjadhav.com/products/portfolio-kit/docs/introduction.md): What Portfolio Kit is, how it's organized, and how to use it. - [Installation](https://www.parthjadhav.com/products/portfolio-kit/docs/installation.md): Connect the registry once, then add components and templates with the shadcn CLI. - [Build your portfolio](https://www.parthjadhav.com/products/portfolio-kit/docs/build-your-portfolio.md): A ten-minute walkthrough: install a template, theme it, swap in your content, add a project gallery and deploy. - [Theming](https://www.parthjadhav.com/products/portfolio-kit/docs/theming.md): Make your own theme in the builder, the tokens behind it, dark mode, and several themes on one site. - [Customization](https://www.parthjadhav.com/products/portfolio-kit/docs/customization.md): Compose parts, restyle anything with className, pick variants, and edit the source. - [AI & agents](https://www.parthjadhav.com/products/portfolio-kit/docs/agents.md): Markdown versions of every page, llms.txt, the shadcn MCP server and rules to paste into your AGENTS.md. - [Theme builder](https://www.parthjadhav.com/products/portfolio-kit/themes.md): make a theme (accent, neutrals, fonts, radius, shadows); options, share-URL format and the default CSS. ## Templates - [Article](https://www.parthjadhav.com/products/portfolio-kit/templates/article.md): A single long-form post: a magazine title block, a reading column with margin sidenotes, link previews, a wide figure and a pull quote, then the author, a newsletter sign-up and related posts. Prints cleanly. - [Case Study](https://www.parthjadhav.com/products/portfolio-kit/templates/case-study.md): A long-form case study page for a single project, with a facts header, chapter navigation, mockups, a before/after slider and results. - [Creative Developer](https://www.parthjadhav.com/products/portfolio-kit/templates/creative.md): An award-site portfolio for a creative developer, with a short intro, smooth scrolling, a custom cursor, sideways work and a curtain footer. - [Designer](https://www.parthjadhav.com/products/portfolio-kit/templates/designer.md): An image-led studio site for a designer or art director, with a big typographic intro, large project images and a short studio page. - [Developer](https://www.parthjadhav.com/products/portfolio-kit/templates/developer.md): A software engineer's site with a pinned intro and ⌘K menu on the left, and experience, projects, open source and writing on the right. - [Freelancer](https://www.parthjadhav.com/products/portfolio-kit/templates/freelancer.md): A one-person studio site that sells: a clear offer, case studies with results, services with prices, an FAQ and a contact form next to a call booker. - [Links](https://www.parthjadhav.com/products/portfolio-kit/templates/links.md): A link-in-bio page for your social profiles: portrait, name and one line, availability, a stack of link buttons with one featured, your latest post, what you're listening to and a newsletter sign-up. - [Minimal](https://www.parthjadhav.com/products/portfolio-kit/templates/minimal.md): A text-first, single-column personal site: a short intro, then quiet labelled lists of work, writing and talks. - [Not Found](https://www.parthjadhav.com/products/portfolio-kit/templates/not-found.md): A 404 page with some personality: a huge scrambling “404”, one honest sentence, the pages people usually want instead, and a ⌘K search to find the rest. - [Photographer](https://www.parthjadhav.com/products/portfolio-kit/templates/photographer.md): A quiet, image-first portfolio for a photographer or filmmaker, with a featured series, a filterable index with a lightbox and a short bio. - [Résumé](https://www.parthjadhav.com/products/portfolio-kit/templates/resume.md): A one-page, Swiss-style CV that reads well on screen and prints cleanly to A4 or Letter: positioning, contact row, experience, selected projects, skills, education, recognition and languages. - [Speaker](https://www.parthjadhav.com/products/portfolio-kit/templates/speaker.md): A site for people who mainly talk and teach: the next talk up front, every talk by year, podcast clips you can play, and a way for organisers to book you. - [Studio](https://www.parthjadhav.com/products/portfolio-kit/templates/studio.md): A small studio or agency site: a statement, a reel, stacked featured work, clients, services, awards and the team, behind a full-screen menu. - [Uses](https://www.parthjadhav.com/products/portfolio-kit/templates/uses.md): A quiet side page for a developer's site: what I'm doing now, the hardware, software and desk I use, what I'm reading and listening to, the sites I follow and a short page history. - [Writer](https://www.parthjadhav.com/products/portfolio-kit/templates/writer.md): A warm, editorial home for an essayist or newsletter author: a masthead with sign-up, the latest letter and recent essays, a book spread, a reading shelf, talks and a closing subscribe band. ## Layout - [Announcement Bar](https://www.parthjadhav.com/products/portfolio-kit/components/announcement-bar.md): Slim banner above the header for launches and availability. Static, accent-filled or scrolling, with an optional close button that can be remembered. - [Bento Grid](https://www.parthjadhav.com/products/portfolio-kit/components/bento-grid.md): Six-column grid of spanning cards with labels, titles and full-bleed visuals, for about sections, stats and tool stacks. - [Footer Reveal](https://www.parthjadhav.com/products/portfolio-kit/components/footer-reveal.md): The curtain footer: the page lifts away at the end to reveal the footer waiting underneath. Pure CSS sticky, with an optional lift-in effect. - [Section](https://www.parthjadhav.com/products/portfolio-kit/components/section.md): Page section with container widths, vertical spacing and a composable header: eyebrow, title, description and actions. - [Site Footer](https://www.parthjadhav.com/products/portfolio-kit/components/site-footer.md): Site footer with link columns, a small-print row and an optional giant wordmark that fills the full width. - [Sticky Layout](https://www.parthjadhav.com/products/portfolio-kit/components/sticky-layout.md): Two-column page layout: a pinned intro with scrollspy navigation on the left and scrolling sections on the right. ## Navigation - [Back To Top](https://www.parthjadhav.com/products/portfolio-kit/components/back-to-top.md): Floating button that appears after scrolling, shows page progress around its edge and scrolls back to the top. - [Command Menu](https://www.parthjadhav.com/products/portfolio-kit/components/command-menu.md): A ⌘K palette for jumping to pages, projects and actions, with fuzzy search, grouped results and keyboard hints. Pass data or compose the parts yourself. - [Floating Dock](https://www.parthjadhav.com/products/portfolio-kit/components/floating-dock.md): A macOS-style navigation dock. Icons grow toward the pointer, labels appear above them and the current page gets a dot. - [Language Switch](https://www.parthjadhav.com/products/portfolio-kit/components/language-switch.md): Links to the translated versions of a page, as “EN / DE / FR” text, a segmented pill or a globe menu. Sets `hrefLang`, `lang` and `aria-current` for you. - [Overlay Menu](https://www.parthjadhav.com/products/portfolio-kit/components/overlay-menu.md): Full-screen menu with a Menu ↔ Close morphing trigger, big numbered links, hover previews and a footer slot. - [Pill Nav](https://www.parthjadhav.com/products/portfolio-kit/components/pill-nav.md): Segmented navigation with a sliding pill that follows the pointer and rests on the current page. - [Scroll Progress](https://www.parthjadhav.com/products/portfolio-kit/components/scroll-progress.md): Reading-progress indicator for the page or a single article, as a thin bar across the top or a small ring with a percentage. - [Site Header](https://www.parthjadhav.com/products/portfolio-kit/components/site-header.md): Sticky header with brand, nav, actions and a full-screen mobile menu. Bar or floating-pill style, optional hide-on-scroll. - [Table Of Contents](https://www.parthjadhav.com/products/portfolio-kit/components/table-of-contents.md): Scrollspy navigation for case studies and articles, as a rail with a moving marker or a plain list. Clicking scrolls to the heading and updates the URL hash. - [Theme Picker](https://www.parthjadhav.com/products/portfolio-kit/components/theme-picker.md): Switch between `data-theme` presets with round color swatches or a labelled list, on or any element, and optionally remember the choice. - [Theme Toggle](https://www.parthjadhav.com/products/portfolio-kit/components/theme-toggle.md): Light, dark and system switch, as a sun/moon icon button or a three-way segmented control, that remembers the choice and follows the OS. ## Hero - [Availability Badge](https://www.parthjadhav.com/products/portfolio-kit/components/availability-badge.md): Status pill with a pulsing dot that says whether you're taking work, e.g. “Available for work” or “Booked until March”. - [Hero Intro](https://www.parthjadhav.com/products/portfolio-kit/components/hero-intro.md): The main portfolio hero: eyebrow, display title, lead, actions, optional media and a bottom meta row, with a staggered CSS entrance. Stacked, split or centered. - [Hero Statement](https://www.parthjadhav.com/products/portfolio-kit/components/hero-statement.md): Oversized typographic hero. Lines slide up from a mask, inline media pills widen on hover, and a labeled meta grid sits underneath. - [Hero Video](https://www.parthjadhav.com/products/portfolio-kit/components/hero-video.md): A full-bleed hero over a muted, looping background video, with a legible scrim and a visible pause button; it shows the poster under reduced motion or Save-Data and rests while off screen. - [Local Time](https://www.parthjadhav.com/products/portfolio-kit/components/local-time.md): Live clock for your city (“Lisbon 14:32 GMT+1”) with a day/night icon and an optional blinking colon. - [Location Tag](https://www.parthjadhav.com/products/portfolio-kit/components/location-tag.md): “Based in Lisbon, Portugal” with a map pin, optional coordinates in mono and an optional link to a map. - [Profile Card](https://www.parthjadhav.com/products/portfolio-kit/components/profile-card.md): Link-in-bio style card with avatar, name, role, location, status, bio, socials and a primary action. Vertical card or compact row. - [Scroll Cue](https://www.parthjadhav.com/products/portfolio-kit/components/scroll-cue.md): “Scroll” indicator for full-height heroes: a moving line, a mouse with a rolling wheel or a bobbing arrow. Can link to the next section. - [Showreel](https://www.parthjadhav.com/products/portfolio-kit/components/showreel.md): A large poster with a play button that follows the cursor; it opens your reel in a full-screen player (or plays it in place), with a duration label and a quiet coming-soon state. - [Word Rotate](https://www.parthjadhav.com/products/portfolio-kit/components/word-rotate.md): Cycles words inside a headline with a slide-and-blur swap, in a slot as wide as the widest word so the line never reflows. Screen readers get one static sentence. ## About - [Bio](https://www.parthjadhav.com/products/portfolio-kit/components/bio.md): About-me block with a captioned portrait, prose that opens with a lead paragraph, a facts list and an optional sign-off. - [Credentials](https://www.parthjadhav.com/products/portfolio-kit/components/credentials.md): Education, certifications, courses and awards as rows with a kind icon, issuer, date and an optional verify link. - [Credits List](https://www.parthjadhav.com/products/portfolio-kit/components/credits-list.md): Colophon-style credits: roles paired with the people behind them (optionally linked), as ruled columns, centered film credits or one compact inline line. - [Dot Map](https://www.parthjadhav.com/products/portfolio-kit/components/dot-map.md): A dotted world map with pins for where you’re based, your clients or your travels, plus optional pulsing and connecting arcs. Pure SVG, no map library. - [Experience](https://www.parthjadhav.com/products/portfolio-kit/components/experience.md): Work history as a hover-focus list, a vertical timeline that marks the current role, or compact résumé rows. - [Now](https://www.parthjadhav.com/products/portfolio-kit/components/now.md): A /now page block listing what you're building, reading and learning, with an “updated” date. Card grid or divided list. - [Photo Stack](https://www.parthjadhav.com/products/portfolio-kit/components/photo-stack.md): A pile of 3–5 photos that fans out on hover or keyboard focus. Click, tap or press Enter to send the top photo to the back. - [Portrait](https://www.parthjadhav.com/products/portfolio-kit/components/portrait.md): A personal photo as a matted frame, tilted polaroid, arch or circle, with a subtle hover effect. - [Principles](https://www.parthjadhav.com/products/portfolio-kit/components/principles.md): Numbered values or process steps (01, 02, 03…) as a card grid or divided rows with large numbers. - [Signature](https://www.parthjadhav.com/products/portfolio-kit/components/signature.md): A handwritten SVG signature that writes itself, stroke by stroke, when it scrolls into view — the sign-off at the end of a bio or letter. - [Skill Groups](https://www.parthjadhav.com/products/portfolio-kit/components/skill-groups.md): Skills grouped by discipline, as chips or level bars. Each skill can show a 1–5 level, years of use and an icon. - [Stats](https://www.parthjadhav.com/products/portfolio-kit/components/stats.md): Headline numbers (years, projects, stars, awards) that count up as they scroll into view. Plain, divided or card layouts. - [Timeline](https://www.parthjadhav.com/products/portfolio-kit/components/timeline.md): Milestones on a vertical or alternating rail with dates, icons or media, a current step, and dots that can fill as they scroll into view. - [Tool Grid](https://www.parthjadhav.com/products/portfolio-kit/components/tool-grid.md): A /uses page: tools grouped by category, with logos or monogram tiles, short notes, favorites and optional links. ## Work - [Archive Table](https://www.parthjadhav.com/products/portfolio-kit/components/archive-table.md): Sortable table of every project (year, name, client, stack and link), grouped by year, with columns that collapse on small screens. - [Before After](https://www.parthjadhav.com/products/portfolio-kit/components/before-after.md): Comparison slider for redesigns. Drag, click or use the keyboard to wipe between two layers, horizontally or vertically. - [Case Study Header](https://www.parthjadhav.com/products/portfolio-kit/components/case-study-header.md): Opening of a case study: back link, display title, summary, a ruled facts grid (client, role, timeline, live site) and a cover image. - [Case Study Section](https://www.parthjadhav.com/products/portfolio-kit/components/case-study-section.md): Case study chapter with a sticky numbered label, styled prose, pull quotes, outcome metrics and figures that can span the label column. - [Color Swatches](https://www.parthjadhav.com/products/portfolio-kit/components/color-swatches.md): A project’s palette for case studies: named swatches with hex and OKLCH values you click to copy, WCAG contrast labels, and grid, strip or proportional (by usage) layouts. - [Device Frame](https://www.parthjadhav.com/products/portfolio-kit/components/device-frame.md): Browser, phone, laptop and window frames for screenshots, videos or artwork, drawn with theme tokens. - [Draggable Canvas](https://www.parthjadhav.com/products/portfolio-kit/components/draggable-canvas.md): An endless canvas of project tiles you drag, flick, scroll or arrow around, the award-site signature. Without JavaScript it’s a plain grid. - [Expanding Panels](https://www.parthjadhav.com/products/portfolio-kit/components/expanding-panels.md): A row of tall project panels: hover or focus one and it widens to show its title and details while the others fold into vertical labels. Stacks into an accordion on phones. - [Image Gallery](https://www.parthjadhav.com/products/portfolio-kit/components/image-gallery.md): Images in a grid, masonry columns or a scrolling strip, with a lightbox you can use by keyboard, swipe or buttons. - [Lab Grid](https://www.parthjadhav.com/products/portfolio-kit/components/lab-grid.md): Dense grid of side projects, experiments and toys, each with a status (live, WIP, archived), a small preview and a one-line meta row. Also renders as compact text rows. - [Lightbox](https://www.parthjadhav.com/products/portfolio-kit/components/lightbox.md): Click-to-expand viewer for images, artwork and video: the thumbnail zooms into a full-screen view you browse with arrows, keys or swipes. - [Next Project](https://www.parthjadhav.com/products/portfolio-kit/components/next-project.md): End-of-case-study pager: a large “next project” link whose cover widens on hover, as a full-width hero or a previous/next split. - [Photo Meta](https://www.parthjadhav.com/products/portfolio-kit/components/photo-meta.md): EXIF-style caption for photographs and film stills (camera, lens, focal length, aperture, shutter, ISO, place and date) as a mono line, a spec grid or an overlay on the image. - [Project Card](https://www.parthjadhav.com/products/portfolio-kit/components/project-card.md): Composable work card with media, meta, title, summary and tags, in card, minimal or overlay style. The whole card is one link. - [Project Carousel](https://www.parthjadhav.com/products/portfolio-kit/components/project-carousel.md): Scroll-snap carousel for projects with mouse drag, arrow keys, previous/next buttons, a slide counter and a progress bar. No dependencies. - [Project Grid](https://www.parthjadhav.com/products/portfolio-kit/components/project-grid.md): Responsive grid for project cards: even rows, staggered columns, or a featured first project that spans two columns. - [Project List](https://www.parthjadhav.com/products/portfolio-kit/components/project-list.md): Projects as large text rows, with a preview image that follows the cursor on desktop and thumbnails on mobile. - [Scroll Steps](https://www.parthjadhav.com/products/portfolio-kit/components/scroll-steps.md): Scrollytelling for case studies and process write-ups: steps of text scroll past a sticky media panel that cross-fades to the active step's image. - [Stacked Cards](https://www.parthjadhav.com/products/portfolio-kit/components/stacked-cards.md): Featured projects as large sticky cards that stack while you scroll. Each card shrinks and dims as the next one covers it. - [Type Specimen](https://www.parthjadhav.com/products/portfolio-kit/components/type-specimen.md): A typeface showcase for case studies: a big “Aa”, the font’s name and foundry, its weights, the character set and a size ladder, all set in the project’s font. - [View Toggle](https://www.parthjadhav.com/products/portfolio-kit/components/view-toggle.md): Segmented grid / list / index switch with a sliding indicator, for choosing how a work section is laid out. ## Social Proof - [Awards List](https://www.parthjadhav.com/products/portfolio-kit/components/awards-list.md): Awards table with award, organization, project and year per row, a “×3” count for repeat wins and an optional summary of totals. - [Logo Cloud](https://www.parthjadhav.com/products/portfolio-kit/components/logo-cloud.md): Client logos or wordmarks as a bordered grid, a wrapping row or an endless marquee with a pause button. Muted by default, full color on hover. - [Press List](https://www.parthjadhav.com/products/portfolio-kit/components/press-list.md): Press mentions with publication, headline, kind and date, as divided rows or a card grid. Each linked item is a single link. - [Social Post](https://www.parthjadhav.com/products/portfolio-kit/components/social-post.md): A post from a social network as a card: author, handle, network icon, date, text with linked mentions, tags and URLs, optional media and reply/repost/like counts. - [Testimonial Card](https://www.parthjadhav.com/products/portfolio-kit/components/testimonial-card.md): Client quote with author (avatar or initials), optional star rating and source link, shown as a card, a plain block or a large featured quote. - [Testimonial Spotlight](https://www.parthjadhav.com/products/portfolio-kit/components/testimonial-spotlight.md): One large quote at a time with prev/next, dots or author tabs, and optional autoplay that pauses on hover, focus and reduced motion. ## Services - [FAQ](https://www.parthjadhav.com/products/portfolio-kit/components/faq.md): Accordion of questions and answers, as ruled lines or cards, with optional FAQPage JSON-LD for search engines. - [Pricing Table](https://www.parthjadhav.com/products/portfolio-kit/components/pricing-table.md): Two to four offers side by side (audit, sprint, retainer) with a featured tier, prices that switch with a billing toggle, aligned sections and a footnote. - [Process Steps](https://www.parthjadhav.com/products/portfolio-kit/components/process-steps.md): How-I-work timeline of numbered steps with heading, description and duration, joined by a line. Stacks on mobile, runs in a row on large screens, and can mark a current step. - [Service Card](https://www.parthjadhav.com/products/portfolio-kit/components/service-card.md): Offer or pricing card with name, description, price, a checklist of what's included and a call to action. A featured variant highlights the offer you recommend. - [Service List](https://www.parthjadhav.com/products/portfolio-kit/components/service-list.md): Numbered list of services with big headings that expand to reveal details, deliverables, duration and price. Keyboard-accessible accordion. ## Content - [Audio Player](https://www.parthjadhav.com/products/portfolio-kit/components/audio-player.md): An inline player for podcast clips, music, voice reels and sound design: a play button, a seek slider over an optional precomputed waveform and the time, on a native audio element, with one track playing at a time. - [Blogroll](https://www.parthjadhav.com/products/portfolio-kit/components/blogroll.md): An indie-web “sites I read” list: a monogram tile, site name, author, one line on why, the domain and when it last posted, as a list or a compact grid, with an OPML/RSS row. - [Bookshelf](https://www.parthjadhav.com/products/portfolio-kit/components/bookshelf.md): Reading list as a shelf of standing covers that tilt on hover, or as a detailed list with status, rating and notes. Books without artwork get a generated cover. - [Changelog](https://www.parthjadhav.com/products/portfolio-kit/components/changelog.md): A dated "what changed" log for a portfolio or product page: releases with version, date and optional permalink, and changes labelled Added, Changed or Fixed in words. - [Code Window](https://www.parthjadhav.com/products/portfolio-kit/components/code-window.md): Code for case studies and developer portfolios: file tabs, a language label, copy, line numbers, highlighted and diff lines, and soft wrap. Plain text by default; bring your own highlighter. - [Contribution Graph](https://www.parthjadhav.com/products/portfolio-kit/components/contribution-graph.md): GitHub-style activity heatmap: weeks by weekdays in five levels of the theme's accent, with month and weekday labels, a legend and a total. Scrolls to the latest weeks on small screens. - [Link Preview](https://www.parthjadhav.com/products/portfolio-kit/components/link-preview.md): An inline link that shows a small card (cover, title, description, site) on hover or keyboard focus; Escape closes it. On touch screens it's just a link. - [Media Appearances](https://www.parthjadhav.com/products/portfolio-kit/components/media-appearances.md): Podcast episodes, video interviews and livestreams you appeared on, with show artwork, date, duration and listen/watch links per platform, as rows or cards. - [Newsletter Form](https://www.parthjadhav.com/products/portfolio-kit/components/newsletter-form.md): Email sign-up form with inline validation and loading, success and error states. Pill-shaped inline field, stacked form or titled card. - [Now Playing](https://www.parthjadhav.com/products/portfolio-kit/components/now-playing.md): Music widget: album art, track and artist with an animated equalizer while playing, or “Last played” with a date or relative time. Card or one-line inline style. - [Post Card](https://www.parthjadhav.com/products/portfolio-kit/components/post-card.md): Article card with cover, category, title, excerpt, date, reading time and author, in vertical, horizontal or large overlay styles. - [Post List](https://www.parthjadhav.com/products/portfolio-kit/components/post-list.md): Writing index for blogs and notes: compact dated rows, an archive grouped by year with a sticky year label, or detailed entries with excerpt and tags. - [Product Card](https://www.parthjadhav.com/products/portfolio-kit/components/product-card.md): Shop card for courses, prints and templates: cover, badge, details, price with a compare-at discount and a call to action. The whole card is one link. - [Prose](https://www.parthjadhav.com/products/portfolio-kit/components/prose.md): Article typography for blog posts and case studies: headings, lists, quotes, code, figures, tables and footnotes styled from your theme, with no typography plugin. - [Repo Card](https://www.parthjadhav.com/products/portfolio-kit/components/repo-card.md): GitHub-style repository card with owner/name, description, language, stars, forks, last update and topics. The whole card is one link. - [Sidenote](https://www.parthjadhav.com/products/portfolio-kit/components/sidenote.md): Tufte-style margin notes: numbered references in the text with the notes beside it on wide screens, and tap-to-expand inline notes on phones. - [Talk List](https://www.parthjadhav.com/products/portfolio-kit/components/talk-list.md): Talks, workshops and podcast appearances with event, location, date and links to slides or recordings. Future dates get an “Upcoming” badge. ## Contact - [Availability Calendar](https://www.parthjadhav.com/products/portfolio-kit/components/availability-calendar.md): The next months at a glance, each marked open, limited or booked in words and a fill pattern, so clients see when you can start. - [Booking Card](https://www.parthjadhav.com/products/portfolio-kit/components/booking-card.md): An “intro call” card with the host, meeting details and the next open slots as selectable chips. The button links to your scheduler with the chosen time. - [Contact Bar](https://www.parthjadhav.com/products/portfolio-kit/components/contact-bar.md): A slim bar pinned to the bottom of the screen on phones that keeps “Email me” and “Book a call” one tap away once the hero has scrolled past, without covering the end of the page. - [Contact CTA](https://www.parthjadhav.com/products/portfolio-kit/components/contact-cta.md): Closing section of a portfolio with a large invitation, availability, a copy-email button and actions. Centered, split, or under a scrolling “Let's talk” line. - [Contact Form](https://www.parthjadhav.com/products/portfolio-kit/components/contact-form.md): Project inquiry form with name, email, company, budget and project-type chips and a message with a character count. Includes inline validation and sending, success and error states. - [Copy Email](https://www.parthjadhav.com/products/portfolio-kit/components/copy-email.md): Your email as a button that copies it on click and briefly shows “Copied!”. Pill, ghost or display-size styles, with an optional mailto link. - [Resume Link](https://www.parthjadhav.com/products/portfolio-kit/components/resume-link.md): Download-your-CV link as a button with a bouncing download icon, or a file card with type, size and last-updated date. - [Social Links](https://www.parthjadhav.com/products/portfolio-kit/components/social-links.md): Profile links as icons, pills or text. Pass URLs and the brand icon and label are detected automatically. ## Effects - [Aurora](https://www.parthjadhav.com/products/portfolio-kit/components/aurora.md): Slowly drifting gradient blobs in hues around your theme's highlight, used as a hero or card backdrop. Static under reduced motion. - [Background Pattern](https://www.parthjadhav.com/products/portfolio-kit/components/background-pattern.md): Grid, dot, line, cross or diagonal background in pure CSS, colored from theme tokens, with edge fades and an optional highlight glow. - [Circular Text](https://www.parthjadhav.com/products/portfolio-kit/components/circular-text.md): A rotating badge of text set around a circle (“Available for work · Available for work ·”) with a slot in the middle for an icon or link. Pauses on hover and keyboard focus; can speed up or reverse with scrolling. - [Custom Cursor](https://www.parthjadhav.com/products/portfolio-kit/components/custom-cursor.md): A dot and trailing ring that follow the pointer, grow over links and buttons, and show a text label over elements with `data-cursor`. Page-wide or scoped to a container. - [Grain](https://www.parthjadhav.com/products/portfolio-kit/components/grain.md): Film-grain noise overlay for the whole page or a single element, built from one cached SVG tile, with optional jitter and any blend mode. - [Horizontal Scroll](https://www.parthjadhav.com/products/portfolio-kit/components/horizontal-scroll.md): A pinned section whose row of cards travels sideways as you scroll down, with a progress bar. On touch screens, small or short viewports, reduced motion and in print it's a native swipeable row with snap points. - [Image Trail](https://www.parthjadhav.com/products/portfolio-kit/components/image-trail.md): Images that spawn along the cursor's path and fade out behind it, over a hero or section. Touch screens and reduced motion get a still collage instead. - [Magnetic](https://www.parthjadhav.com/products/portfolio-kit/components/magnetic.md): Pulls a button or icon toward a nearby pointer and springs back when it leaves. An optional inner layer moves further for depth. - [Marquee](https://www.parthjadhav.com/products/portfolio-kit/components/marquee.md): Endlessly scrolling row or column for client names, skills or testimonials, with edge fades, reverse direction, pause on hover or on demand and an optional scroll-velocity drive. - [Page Transition](https://www.parthjadhav.com/products/portfolio-kit/components/page-transition.md): View Transitions helpers for any router: `startPageTransition()`, preset animations (fade, slide-up, curtain, zoom) and shared-element names. Instant with reduced motion or without browser support. - [Parallax](https://www.parthjadhav.com/products/portfolio-kit/components/parallax.md): Scroll-linked depth: layers that drift slower or faster than the page, and media that glides inside its frame. One shared animation frame, paused offscreen, still with reduced motion and in print. - [Preloader](https://www.parthjadhav.com/products/portfolio-kit/components/preloader.md): Intro screen with a 0–100 counter or cycling greetings, then a curtain lifts to reveal the page. Skippable with a click or any key, can show once per session, and skipped with reduced motion. - [Reveal](https://www.parthjadhav.com/products/portfolio-kit/components/reveal.md): Fades, lifts and un-blurs elements as they scroll into view, one by one or staggered across a group. Respects reduced motion. - [Scramble Text](https://www.parthjadhav.com/products/portfolio-kit/components/scramble-text.md): Text that decodes from random glyphs, left to right, on mount, when it scrolls into view or on hover. The layout never shifts. - [Scroll Text](https://www.parthjadhav.com/products/portfolio-kit/components/scroll-text.md): A statement paragraph whose words light up one after another as the reader scrolls through it, tied to scroll position rather than played once. - [Scroll Zoom](https://www.parthjadhav.com/products/portfolio-kit/components/scroll-zoom.md): A cover image or video that starts as an inset card and grows to full-bleed while the reader scrolls past it, for case-study openers and showreels. - [Smooth Scroll](https://www.parthjadhav.com/products/portfolio-kit/components/smooth-scroll.md): Lenis-powered inertial scrolling for the page or a container, with smooth anchor links and a useLenis() hook. Off under reduced motion; touch stays native. - [Spotlight Card](https://www.parthjadhav.com/products/portfolio-kit/components/spotlight-card.md): Card with a soft glow that follows the pointer and a brighter rim on its border. Wrap cards in a group so one pointer lights the borders across a grid. - [Sticker Board](https://www.parthjadhav.com/products/portfolio-kit/components/sticker-board.md): Playful stickers and polaroids scattered over a section that visitors can pick up, drag, drop and nudge with the arrow keys, with a spring settle and a reset. - [Text Reveal](https://www.parthjadhav.com/products/portfolio-kit/components/text-reveal.md): Splits a headline into words or characters that slide up from a mask, staggered, when it scrolls into view. The original text stays accessible. - [Tilt Card](https://www.parthjadhav.com/products/portfolio-kit/components/tilt-card.md): 3D card that tilts toward the pointer with a moving glare and parallax layers (`data-depth`), easing back when the pointer leaves. Off on touch and reduced motion. ## Utilities - [Arrow Link](https://www.parthjadhav.com/products/portfolio-kit/components/arrow-link.md): Text link with an animated underline and a nudging arrow, for the end of a teaser or a section action. Detects external URLs and opens them safely. - [Brand Icons](https://www.parthjadhav.com/products/portfolio-kit/components/brand-icons.md): Dependency-free social/brand glyphs (GitHub, X, LinkedIn, Dribbble…) plus URL → brand detection. - [Filter Chips](https://www.parthjadhav.com/products/portfolio-kit/components/filter-chips.md): Single- or multi-select pill chips with optional counts — for filtering projects, posts or tags by category. Arrow-key navigable. - [Fit Text](https://www.parthjadhav.com/products/portfolio-kit/components/fit-text.md): Text that scales to exactly fill its container's width, for giant footer wordmarks and hero names. Each line fits on its own, with any font. - [Generative Art](https://www.parthjadhav.com/products/portfolio-kit/components/generative-art.md): Deterministic SVG placeholder art from a seed string: product screenshots, landscapes and portraits, or abstract mesh, bauhaus, rings, waves and orb. Use it for covers, photos and avatars; it can take its colors from the theme. - [Hover Video](https://www.parthjadhav.com/products/portfolio-kit/components/hover-video.md): A muted clip that plays while its card is hovered or focused with the keyboard, over a poster or artwork. Loads nothing until then, pauses off screen and in background tabs, and stays still on touch screens, with reduced motion or when saving data. - [Kbd](https://www.parthjadhav.com/products/portfolio-kit/components/kbd.md): Keycaps and shortcut hints ("⌘K to search", "Press Esc") that show ⌘ or Ctrl for the visitor's platform and read as words to screen readers. - [Marker](https://www.parthjadhav.com/products/portfolio-kit/components/marker.md): Hand-drawn highlights, underlines, circles, boxes and strikes for key words in a bio or headline, drawn on when they scroll into view. - [Media](https://www.parthjadhav.com/products/portfolio-kit/components/media.md): Aspect-ratio frame for images, video or artwork, with blur-up loading, optional hover zoom and an optional caption. - [Number Ticker](https://www.parthjadhav.com/products/portfolio-kit/components/number-ticker.md): Counts up to a number when it scrolls into view — locale-aware formatting, compact notation, prefix/suffix and zero layout shift. - [Sound Toggle](https://www.parthjadhav.com/products/portfolio-kit/components/sound-toggle.md): A "Sound — On/Off" toggle button with equalizer bars for sites with ambient audio or UI sounds: off by default, remembered, and readable anywhere through `useSound()`. - [Tag List](https://www.parthjadhav.com/products/portfolio-kit/components/tag-list.md): Pill tags for skills, stacks and topics — outline, soft or solid, with optional links, leading dots or icons and counts. - [Terminal](https://www.parthjadhav.com/products/portfolio-kit/components/terminal.md): Terminal window for developer portfolios. When it scrolls into view, commands type themselves out (in at most 5 seconds), output lines follow and a block cursor blinks at the end. - [Version Label](https://www.parthjadhav.com/products/portfolio-kit/components/version-label.md): Small-print footer line with version, last-updated date, copyright and edition number, plus a colophon that credits typefaces and tools. ## Optional - [Full docs in one file](https://www.parthjadhav.com/products/portfolio-kit/llms-full.txt) - [Registry index](https://www.parthjadhav.com/products/portfolio-kit/r/registry.json): shadcn registry with every item.