Portfoly: Shadcn Portfolio Template
A premium shadcn portfolio template for designers and developers, built with Next.js 16, Tailwind CSS v4, and Motion — with a signature that draws itself, a filterable project grid, and a blog that earns you search traffic after launch.
Oct 06, 2026
Oct 06, 2026
v1.0.0
Most portfolio templates give you a hero, a grid, and a contact form. Portfoly gives you a site that earns attention — from visitors who land on it and from search engines that index it long after you launch.
It's a premium shadcn portfolio template built on Next.js 16, React 19, Tailwind CSS v4, and shadcn/ui. Motion handles every animation — scroll reveals, staggered entrances, and the portrait flight that carries your photo from the hero down into the About section as the visitor scrolls. These aren't flourishes bolted on at the end. They're built into the layout and tuned to land cleanly at every scroll speed.
The live demo is styled as a UI/UX designer's portfolio, but the layout isn't locked to that niche. Projects are grouped into tabs (websites, applications, dashboards), and every card links to wherever your work already lives: Dribbble, Behance, a live product, or a full case study. Rename the categories and the same shadcn portfolio website works for a frontend developer, a design engineer, a freelancer, or a one-person studio.
As a visitor scrolls, the page tells a story in order: who you are, a sample of your work, the services you offer, your work history, what clients say about you, your latest writing, and how to reach you. The sequence matters. It moves a stranger from "who is this?" to "I want to work with them" without a hard sell.
It also ships a working blog, not a placeholder. Drop a Markdown or MDX file into the content folder and it appears on the blog index, the homepage, the RSS feed, and the sitemap — complete with tag filters, a table of contents, syntax-highlighted code, a reading progress bar, and previous and next links. For designers and developers alike, writing is what keeps a portfolio earning search traffic long after launch.
SEO is done before you touch it: per-page metadata, generated Open Graph images for the homepage and every post, sitemap.xml, robots.txt, canonical URLs, and Person and WebSite structured data so search engines understand the site is about you.
Your name, role, links, and socials live in one config file. Each section keeps its copy at the top of its own component file. The accent colour is a single CSS variable — one change restyles the entire site. Making Portfoly yours is an afternoon of editing, not a rebuild. Prefer to pick colours visually? Our free shadcn theme generator exports a token set that drops straight in.
Launching a product rather than a personal brand? FoxCopy is our AI SaaS landing page template. Want to try the stack before buying? Start with our free shadcn templates.
Features
Self-Drawing Signature Hero
Your signature writes itself stroke by stroke above your name, alongside a scrolling name marquee, portrait, experience badge, client avatars, and a "Talk to me" button — so the first thing visitors see moves.
Portrait Flight Animation
As the visitor scrolls, your hero portrait travels down the page and lands in the About section. It's the kind of motion detail that makes this shadcn ui portfolio feel built, not assembled.
Filterable Project Grid
Category tabs for websites, applications, and dashboards, a "View more" button, and cards that link out to Dribbble, Behance, live sites, or case studies. Rename any category in one place.
About & Client Logos
A short bio paired with the companies you have worked with, shown as grayscale logos that turn full colour on hover and invert cleanly in dark mode — no extra styling needed.
Services & Stat Counters
Consultation, design, and development services next to an interactive honeycomb showing the tools you use, and animated counters for websites, apps, and dashboards delivered. Numbers that update on scroll outperform static claims.
Experience Accordion
Work history in an expandable accordion with roles, dates, company logos, and bullet points, so a long career stays easy to scan without taking over the page.
Chat-Bubble Testimonials
Client quotes styled as message bubbles with avatars and names — a more personal take on social proof than a standard testimonial carousel, and easier for visitors to read.
Built-In MDX Blog
Markdown and MDX posts with tag filters, table of contents, Shiki code highlighting, reading progress, draft posts, and previous and next navigation. Write a post, drop the file, it appears everywhere automatically.
SEO & Structured Data
Generated Open Graph images, sitemap, robots.txt, RSS, canonical URLs, and Person schema — so your shadcn portfolio website is search-ready on day one, with no SEO plugin required.
Dock Navigation & Dark Mode
A macOS-style dock for section navigation and a light and dark theme toggle with an animated circular transition between modes. Both themes are fully designed, not just inverted.
Contact Section
Your email, availability, and location next to a validated contact form with name, email, project type, and message fields. The documentation covers connecting it to Formspree or Resend.
Accessibility & Draggable 404
Full prefers-reduced-motion support, keyboard-friendly focus states throughout, and ARIA labels on interactive elements. Plus a playful 404 page where visitors can drag the digits around — a small detail that sticks.
Related Resources
Explore more ways to customize this build, compare options, or find another starting point for your next project.
- Browse all Shadcn templates for more landing page and portfolio starting points.
- Explore free Shadcn templates if you want an open-source option first.
- Use the Shadcn Theme Editor to test colors, radius, and typography before editing the codebase.
- Read the free Shadcn template roundup for a comparison of live, maintained starter kits.
Questions, Answered
Clear answers to common questions - without the sales talk.