Premium Portfolio Template

A modern, animated portfolio template for developers, designers, freelancers, and creative agencies. It is built for buyers who want a polished portfolio they can customize from one file without editing complex component code.

Tech Stack

• Next.js App Router
• React
• TypeScript
• Tailwind CSS
• Framer Motion
• Lucide React
• SEO metadata and Open Graph image
• Vercel-ready configuration

Install

npm install

Run Locally

npm run dev

Open http://localhost:3000.

Production Build

npm run build
npm run start

Customize Content

Edit one file:

src/config/site.ts

This file controls the name, role, headline, bio, about text, profile image, projects, project links, services, process, clients, testimonials, playground items, social links, email, SEO metadata, and theme colors.

Replace Images

Place new files in:

public/images/

Then update image paths in src/config/site.ts, for example:

image: "/images/my-project.jpg"

Local images are loaded with next/image for responsive rendering.

Edit Projects

In src/config/site.ts, update the projects array. Each project supports:

• title
• category
• year
• description
• image
• href
• liveUrl
• repoUrl
• tags

Change Colors

In src/config/site.ts, edit theme.light and theme.dark. Colors use RGB values so opacity works correctly with Tailwind:

accent: "78 92 255"

Deploy to Vercel

1. Push the project to GitHub.
2. Go to Vercel.
3. Click Add New Project.
4. Import the GitHub repository.
5. Keep the default Next.js settings.
6. Deploy.

The included vercel.json uses:

{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "installCommand": "npm install"
}

Upload to GitHub

git add .
git commit -m "Initial portfolio template"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

Folder Structure

src/
  app/          Next.js App Router pages, layout, metadata, global CSS
  components/   Shared UI components
  config/       Single editable portfolio configuration file
  lib/          Utilities and icon mapping
  sections/     Homepage sections
public/
  images/       Replaceable profile, project, and social preview images
README.md
README-PTBR.md
vercel.json

Troubleshooting

• If styles do not update, restart the dev server.
• If an image does not show, confirm the file exists in public/images and the path starts with /images/.
• If Vercel fails to build, run npm run build locally and fix the first reported TypeScript or import error.
• If social links open the wrong page, update socialLinks in src/config/site.ts.
• If the contact form should send email, connect it to a form provider or API route. The included form is accessible UI markup only.