DevPortfolio — Next.js Portfolio Template for Developers & Designers

DevPortfolio is a professional Next.js portfolio template built for developers and designers who want to make a strong first impression without spending days on setup. It gives you a complete, polished personal site that showcases your work, skills, and experience in a way that converts visitors into clients or employers. The template covers everything a developer portfolio needs: hero section with your introduction, about section, skills and technologies, project showcase with detail pages, work experience timeline, and a contact section. The design is modern, minimal, and professional — it gets out of the way and lets your work speak. Built with Next.js App Router, Tailwind CSS, and shadcn/ui. Fully responsive, fast, and SEO-optimized out of the box. Customizing it takes minutes — swap your name, projects, and links and you're done. Who is this for? Frontend developers, full-stack developers, and designers who need a personal portfolio fast. Freelancers looking to attract clients, new grads trying to stand out, or anyone who's been using an outdated portfolio and needs a fresh start. If you've been searching for a Next.js portfolio template, a developer portfolio starter, or a shadcn/ui personal site — DevPortfolio is exactly what you need. What's included: Full portfolio with 6+ sections, project showcase, responsive design, SEO-ready, TypeScript, Tailwind CSS, shadcn/ui, and full source code. Your work is great. Your portfolio should show it.

DevPortfolio — Next.js Portfolio Template for Developers & Designers

Stop starting from scratch. DevPortfolio is a production-ready portfolio template designed to help developers and designers land clients and opportunities — fast.

Every section is built to communicate credibility, showcase work and convert visitors into inquiries. The design is dark, minimal and intentional — nothing generic, nothing that looks like every other dev portfolio out there.

What's inside

5 fully responsive pages

Home — hero, featured work, skills, experience, testimonials and CTA
/work — filterable project grid (All / Web / Design / Mobile / OSS)
/work/[slug] — MDX case study with prev/next navigation
/about — bio, full stack, experience timeline, education and CV download
/contact — validated form with project type selector and FAQ sidebar
404 — glitch effect page with navigation fallback

9 home sections

Navbar — logo, links, "Hire me" CTA with availability dot
Hero — name, role, tagline, avatar, social links, scroll indicator
Featured work — 3 projects, first card full-width on desktop
Skills — grid by category with level indicators
About strip — bio, stats (4+ years, 20+ projects), interests
Experience — expandable timeline with highlights
Testimonials — 3 cards with auto-rotate and dot navigation
CTA — "Let's build something remarkable" with animated gradient
Footer — brand, navigation, social links, availability pill

Technical highlights

Next.js 15 App Router — Server + Client Components correctly split
Tailwind CSS v4 with oklch color system — retheme with 2 variables
shadcn/ui component system
Motion animations — staggered reveals, spring transitions, AnimatePresence
MDX content — write case studies in Markdown, zero code changes
Full SEO — Open Graph, Twitter Cards, canonical URLs, robots
TypeScript strict — fully typed, no any
Single source of truth — edit config.ts once, update everywhere
Responsive — every section tested from 375px to 1920px

Customization

Edit one file — src/lib/config.ts — to make it yours: name, role, bio, projects, skills, experience, testimonials, social links.

Add projects by dropping an .mdx file into content/work/. No code changes needed. The grid and slug pages update automatically.

Retheme entirely by changing two CSS variables in globals.css.

What you get

Complete Next.js project (ZIP) — ready to run with npm install && npm run dev
.env.example included
README with setup, customization and deployment instructions
Contact form ready to connect to Resend or Formspree

Requirements

Node.js 18+
npm / yarn / pnpm
Basic knowledge of Next.js (to customize beyond config.ts)

Designed for

Freelance developers looking to land more clients UI/UX designers showcasing their work Full stack developers entering the job market Anyone who wants a portfolio that converts