John Doe - Portfolio Template

A modern portfolio template built with Next.js 16+ and Tailwind CSS. Designed for creative professionals who want a distinctive online presence—without building from scratch.

This is a starting point, not a finished product. Replace placeholder content with your real story, projects, and personality.

What's Included

4 Complete Pages

Page Route Purpose Homepage / Hero, about preview, skills, project grid, contact CTA About /about Bio, career timeline, values, personal story Work /work Project showcase with stats and process breakdown Contact /contact Contact form, social links, FAQ

Reusable Components

UI: Button (4 variants), ProjectCard, ThemeToggle

Layout: Navbar (sticky with blur, mobile menu)

Animation: FadeUp, FadeIn, SlideIn, Parallax, StaggerContainer, ScaleOnHover, MagneticHover

Tech Stack

Technology Version Purpose Next.js 16+ React framework with App Router React 19 UI library TypeScript 5 Type-safe development Tailwind CSS 4 Utility-first styling Framer Motion 12 Physics-based animations

Design System

Colors

Token Light Dark Usage --background #fafaf9 #0a0a0a Page backgrounds --foreground #1c1917 #fafaf9 Primary text --muted #78716c #a8a29e Secondary text --accent #dc2626 #f87171 Highlights, buttons

Typography

• Headings: Syne (geometric sans-serif)

• Body: Outfit (clean, readable)

• Tracking: Tight letter-spacing on headings

Visual Style

• Asymmetric layouts

• 60-30-10 color ratio

• Dramatic whitespace

• Subtle gradient glows and noise textures

• Rounded corners and soft shadows

Key Features

Interactive Elements

• Sticky navigation with blur-on-scroll

• Light/dark theme toggle

• Mobile hamburger menu

• Hover effects on cards and buttons

• Styled contact form

Animations

• Scroll-triggered fade and slide

• Staggered list animations

• Parallax scrolling

• Spring-based hover effects

Project Structure

app/
├── layout.tsx          # Global wrapper
├── page.tsx            # Homepage
├── globals.css         # Design tokens
├── about/page.tsx
├── work/page.tsx
└── contact/page.tsx

components/
├── Navbar.tsx
├── Button.tsx
├── ProjectCard.tsx
├── ThemeToggle.tsx
├── ThemeProvider.tsx
└── Motion.tsx

public/                 # Images

Customization

What How Your name Edit hero <h1> in app/page.tsx Your photo Replace public/john_doe_headshot.jpg Projects Update projects array in page files Skills Edit skills array in app/page.tsx Timeline Update journey array in app/about/page.tsx Colors Modify CSS variables in globals.css Contact info Replace john@example.com throughout

Integrations

Forms: Designed for Formspark (submission storage, email notifications, spam protection)

Content: Compatible with Sanity CMS for visual editing

Ideal For

• Developer portfolios

• Designer portfolios

• Freelancer personal sites

• Creative professional showcases

• Agency founder sites

Getting Started

1. Create a new project with this template

2. Tell the AI about yourself and your work

3. Replace placeholder content

4. Customize colors, fonts, and layout

5. Add your projects with real screenshots

6. Preview, iterate, and deploy

Summary

4 complete pages, 7+ reusable components, cohesive design system, smooth Framer Motion animations. Go from template to personalized portfolio faster than building from scratch.

This template is designed to become yours.