Portfolio

Creative Portfolio

Quick Start

Requirements: Node.js 18+ and pnpm. All images are included as local files in the public/ folder — no external image CDN setup needed.

Download and unzip

After purchase, download the zip file from your order confirmation email and unzip it into your projects folder.

Install dependencies

pnpm install

No pnpm? Install it first: npm install -g pnpm

Start the dev server

pnpm dev

Open http://localhost:3000 to see the portfolio.

Build for production

pnpm build
pnpm start

Folder Structure

Multi-page layout. The home page composes all sections; three additional pages handle case studies, blog posts, and the toolkit:

src/
├── app/
│   ├── layout.tsx              # Root layout — Playfair Display + Inter + Dancing Script
│   ├── globals.css             # Design tokens (CSS variables) + Tailwind imports
│   ├── page.tsx                # Home — imports and orders all sections
│   ├── work/[slug]/page.tsx    # Case study page (dynamic, statically generated)
│   ├── blog/[slug]/page.tsx    # Blog post page (dynamic, statically generated)
│   └── uses/page.tsx           # Toolkit / gear page
├── components/
│   ├── Navbar.tsx              # Fixed navigation bar with mobile menu + theme toggle
│   ├── Hero.tsx                # Hero section with portrait and CTA
│   ├── Marquee.tsx             # Horizontal scrolling text strip
│   ├── About.tsx               # About / bio section with images
│   ├── Services.tsx            # Services cards
│   ├── Works.tsx               # Portfolio grid — links to /work/[slug]
│   ├── Skills.tsx              # Skills section
│   ├── Experience.tsx          # Work history / timeline
│   ├── Testimonials.tsx        # Client testimonials carousel
│   ├── Blog.tsx                # Blog post previews — links to /blog/[slug]
│   ├── Footer.tsx              # Footer with contact info + social links
│   ├── ScrollReveal.tsx        # Scroll animation wrapper
│   ├── SectionHeading.tsx      # Reusable section title component
│   ├── ThemeToggle.tsx         # Dark/light mode toggle button
│   └── icons/                  # SVG icon components
└── lib/
    ├── works-data.ts           # All case study content (slug, images, copy)
    └── blog-data.ts            # All blog post content (slug, typed sections)

public/
    ├── hero-portrait.avif
    ├── about-main.jpg
    ├── about-secondary.jpg
    ├── work-app-design.webp    # Work project images
    ├── work-brand-identity.jpg
    ├── work-dashboard-ui.jpg
    ├── work-fashion-web.webp
    ├── work-mobile-banking.webp
    ├── work-web-design.jpg
    ├── blog-accessible-interfaces.avif
    └── blog-design-systems.avif

To remove a section from the home page, delete its import from app/page.tsx. Each component is self-contained. The inner pages (work/[slug], blog/[slug]) can be removed entirely by deleting their folders.

Customization

Personal content

Most text content is written directly inside each component. Testimonials (Testimonials.tsx) are a data array at the top of the file. Work projects and blog posts each have a dedicated data file:

lib/works-data.ts — add or edit case studies (title, images, overview, challenge, solution, tools, screenshots). The Works grid and /work/[slug] pages update automatically.
lib/blog-data.ts — add or edit posts using typed content sections: paragraph, heading, quote, image. The blog grid and /blog/[slug] pages update automatically.
app/uses/page.tsx — edit the categories array at the top of the file to list your own tools and gear.

Replacing images

All images are local files in the public/ folder. Replace any file with your own and keep the same filename, or update the src path in the component. The template uses next/image for optimized loading — no configuration changes needed for local images.

If you want to use Unsplash or other remote images, add the hostname to remotePatterns in next.config.ts (a starter entry for Unsplash is already there).

Colors and theme tokens

All colors are CSS custom properties in src/app/globals.css, using the same short-alias pattern (--bg, --fg, --primary, etc.). Edit :root for light mode and .dark for dark mode:

:root {
  --bg: #faf7f2;           /* warm cream background */
  --fg: #1a2332;           /* dark navy text */
  --primary: #2d6a6a;      /* teal — change to your brand color */
  --primary-hover: #245858;
  --secondary: #e07c5a;    /* warm orange accent */
  --accent: #d4a853;       /* gold accent */
  --card: #ffffff;
  --border: rgba(26, 35, 50, 0.08);
}

.dark {
  --bg: #1a1d23;
  --fg: #f0ebe3;
  --primary: #4db8b8;      /* lighter teal for dark mode */
  --primary-hover: #5ccfcf;
  --secondary: #e8956f;
  --card: #242830;
}

Fonts

Three fonts are loaded in app/layout.tsx via next/font/google:

Playfair Display — headings (--font-heading, serif)
Inter — body text (--font-body)
Dancing Script — decorative accent text (--font-accent, cursive)

To swap a font, replace its import in layout.tsx and update the corresponding CSS variable in the @theme block in globals.css.

Social links

Social URLs are defined in components/Footer.tsx in the socials array. Update the href values for GitHub, LinkedIn, and Dribbble there.

Deployment

Deploy to Vercel (recommended)

Push to GitHub, then import at vercel.com/new. Vercel detects Next.js automatically — no extra configuration needed.

Deploy to Railway / Render / Fly.io

Build command:  pnpm build
Start command:  pnpm start
Node version:   18+

Static export (Netlify, GitHub Pages, Cloudflare Pages)

The portfolio can be exported as a static site since it has no server-side data fetching. Add the following to next.config.ts:

const nextConfig: NextConfig = {
  output: "export",
  images: {
    unoptimized: true,   // required for static export
  },
};

Then run pnpm build — output goes to the out/ folder. Upload it to any static host.

Environment variables

No environment variables are required. The template has no external API calls or database connections out of the box.

Still stuck?

Email us at support@thekitbase.app with your order number and we'll help you get set up.