Portfolio Page React template for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Portfolio Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import PortfolioPage from @/components/templates/portfolio-page.

// app/page.tsx
"use client"

import Link from "next/link"
import { PortfolioPage, type PortfolioContactValues } from "@/components/templates/portfolio-page"

async function sendMessage(values: PortfolioContactValues) {
  await fetch("/api/contact", { method: "POST", body: JSON.stringify(values) })
}

export default function HomeRoute() {
  return <PortfolioPage linkComponent={Link} layout="grid" onContact={sendMessage} />
}

Props

• ownerdefault "PORTFOLIO_OWNER"
  PortfolioOwner

  { name, role, location?, avatar?, email, socials? }: the person in the header, hero, contact band, sticky bar and footer. Without an avatar url the initials show.

• projectsdefault "PORTFOLIO_PROJECTS"
  PortfolioProject[]

  { slug, title, client, summary, year, role, duration?, tags, color, cover, image?, problem, process, outcome, metrics, gallery?, href? }. cover is a drawn picture (app, mobile, dashboard, brand, flow, type) tinted with color; image replaces it with a photo.

• experiencedefault "PORTFOLIO_EXPERIENCE"
  PortfolioExperience[]

  { company, role, start, end?, location?, description, highlight? } roles for the timeline; a role without end is the current one and gets the Now pill.

• servicesdefault "PORTFOLIO_SERVICES"
  PortfolioService[]

  { id, title, description, price, unit?, duration?, features, icon?, featured? }. The featured one is ringed with a Most booked badge; the services are also the choices in the contact form.

• testimonialsdefault "PORTFOLIO_TESTIMONIALS"
  Testimonial[]

  Client quotes for the testimonials grid (the TestimonialsSection shape).

• postsdefault "PORTFOLIO_POSTS"
  PortfolioPost[]

  Posts for the writing list (the BlogCardsSection post shape); they link to /blog/<slug>.

• postCategoriesdefault "PORTFOLIO_POST_CATEGORIES"
  Record<string, BlogCardsCategory>

  The categories the posts point to: { label, icon?, color? }.

• factsdefault "PORTFOLIO_FACTS"
  PortfolioFact[]

  { value, label } key facts under the hero actions; an empty array hides them.

• labels
  Partial<PortfolioPageLabels>

  Every string on the page, including the hero headline and bio, the section headings, the form and its errors; a few are functions (period, basedIn, successDescription).

• availabledefault true
  boolean

  Open for work: a pulsing green pill reading Available for new projects. false shows an amber Booked through January 2027 (labels.unavailable) in the hero, the contact band and the sticky bar.

• layoutdefault "grid"
  "grid" | "list"

  The work section: grid shows two large cards per row; list shows one wide card per row with the cover beside the text, alternating sides, and two outcome numbers. Both are one column on phones.

• project
  string

  The slug of the open case study (controlled); "" closes the sheet.

• defaultProjectdefault ""
  string

  The case study open on first render (uncontrolled), e.g. northwind-planner.

• onProjectChange
  (slug: string) => void

  Fires with the slug when a case study opens or changes, and with "" when it closes.

• onContact
  (values: PortfolioContactValues) => void | Promise<unknown>

  Runs on Send message with { name, email, projectType, message }. A returned promise keeps the button loading; a rejection keeps the form and shows labels.failed. Without it the page pretends for 900 ms, then thanks the sender.

• currencydefault "USD"
  string

  ISO currency of the service prices.

• localedefault ""
  string

  Intl locale for prices and post dates; empty uses the UIProvider's, else en-US.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: the process step numbers, the featured service ring and badge, the timeline's current role and the testimonial metrics. A non-neutral tone also tints the page glow.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Hire me, Start a project, Book this on the featured service and Send message.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corners of the project and service cards: 0 / 12 / 16 / 24px; the covers inside follow.

• backgrounddefault "glow"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The main background: plain is the bare page color; the others tint the page and add a glow, an aurora, a grid or dots over the first screen.

• backgroundColordefault "oklch(0.62 0.14 275)"
  string

  The tint and glow color of the main background; left at the default it follows tone when tone is not neutral.

• bandBackgrounddefault "muted"
  "muted" | "tinted" | "gradient" | "dots"

  The secondary background of the experience, testimonials and contact bands. Cards and fields inside are lifted one step above it.

• bandColordefault "oklch(0.62 0.14 275)"
  string

  The tint of tinted and gradient bands; left at the default it follows backgroundColor.

• showExperiencedefault true
  boolean

  The experience timeline (and its link in the header).

• showServicesdefault true
  boolean

  The services with starting prices; off also removes them from the form's choices.

• showTestimonialsdefault true
  boolean

  The testimonials band.

• showWritingdefault true
  boolean

  The writing list.

• showContactdefault true
  boolean

  The contact band with the email and the form. Off, Hire me opens a mailto link instead.

• stickyBardefault true
  boolean

  Phones only: a Hire me bar pinned to the bottom (above the home indicator) once the hero scrolls away, hidden again at the contact band and while a case study is open.

• headerdefault true
  boolean

  The sticky header with the name, the section links and Hire me. Off when a site layout already has one.

• footerdefault true
  boolean

  The simple footer with the section links and the copyright line.

• headerProps
  Partial<MarketingHeaderProps>

  Anything for MarketingHeader (layout, variant, items...); wins over the page's own values.

• footerProps
  Partial<MarketingFooterProps>

  Anything for MarketingFooter (variant, columns, socials...).

• experienceProps
  Partial<TimelineSectionProps>

  Anything for the experience TimelineSection (layout, card, marker...); wins over the page's values.

• testimonialsProps
  Partial<TestimonialsSectionProps>

  Anything for the TestimonialsSection (layout, columns, card...).

• writingProps
  Partial<BlogCardsSectionProps>

  Anything for the writing BlogCardsSection (layout, limit, viewAllHref, basePath...).

• animateIndefault true
  boolean

  The hero rises in once when the page mounts on the client; never during hydration, under reduced motion or in thumbnails.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the header, footer and post links (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<PortfolioPageSlot, string>>

  Classes for header, hero, heroMedia, work, project, cover, caseStudy, experience, services, service, testimonials, writing, contact, form, stickyBar and footer.

Parts

FAQ