single-page-portfolio-site — Next.js 作品集模板

SHA-256: 630688de01771a4b59d8dd7a59751b84f2977f4bc2599c59a4256368fb8d8203

2026-10-14T08:38:40.593Z

# Minimal Single Page Portfolio

> A modern, minimal single-page portfolio template showcasing your work and skills. Built with Next.js, React, and Tailwind CSS with smooth animations.

## 📋 Table of Contents

- [Overview](#overview)
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Project Structure](#project-structure)
- [Available Scripts](#available-scripts)
- [Configuration](#configuration)
- [Deployment](#deployment)
- [License](#license)

## Overview

This project is a lightweight, fully responsive single-page portfolio template designed to showcase your work, skills, and achievements. It features a clean, minimal design with smooth animations and modern UI patterns. Whether you're a developer, designer, or creative professional, this template provides an elegant foundation for your personal brand.

Built with the latest versions of Next.js and React, with TypeScript for type safety and Tailwind CSS for styling, this template is production-ready and optimized for performance.

## ✨ Features

- **Responsive Design** - Mobile-first approach, optimized for all screen sizes
- **Smooth Animations** - Motion library integration for engaging page interactions
- **TypeScript** - Full type safety and better developer experience
- **SEO Ready** - Optimized for search engines with proper Next.js configurations
- **Performance Optimized** - Automatic code splitting and image optimization
- **Tailwind CSS** - Utility-first styling with minimal custom CSS
- **Dark Theme** - Modern dark color scheme with excellent readability
- **Easy to Customize** - Modular component structure for quick modifications
- **Text Reveal Animations** - Custom hooks for dynamic text animations

## 🛠️ Tech Stack

- **Framework**: [Next.js](https://nextjs.org/) 16.0.7
- **Language**: [TypeScript](https://www.typescriptlang.org/) 5
- **UI Library**: [React](https://react.dev/) 19.2.1
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) 3.4.1
- **Animation**: [Motion](https://www.motion.dev/) 12.23.25
- **Text Animation**: [Split Type](https://www.npmjs.com/package/split-type) 0.3.4
- **Utility**: [Tailwind Merge](https://github.com/dcastil/tailwind-merge) 2.5.5
- **Development**: [ESLint](https://eslint.org/) 9.39.1, PostCSS 8

## 📦 Prerequisites

Before you begin, ensure you have the following installed:

- **Node.js** 18.17 or later
- **npm**, **yarn**, **pnpm**, or **bun** (recommended: pnpm)
- **Git** (for version control)

## 🚀 Installation

1. **Clone the repository**

```bash
git clone https://github.com/jmarellanes/single-page-portfolio-site.git
cd minimal-single-page-portfolio
```

2. **Install dependencies**

```bash
pnpm install
```

Or with your preferred package manager:

```bash
npm install
# or
yarn install
# or
bun install
```

## 🏃 Getting Started

### Development

Start the development server:

```bash
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser to see the portfolio.

The app will automatically reload when you make changes to files. Start editing `src/app/page.tsx` to customize your portfolio content and see updates in real time.

### Building for Production

Create an optimized production build:

```bash
pnpm build
```

### Starting the Production Server

After building, start the production server:

```bash
pnpm start
```

## 📁 Project Structure

```
src/
├── app/
│   ├── page.tsx           # Main portfolio page
│   ├── layout.tsx         # Root layout component
│   └── globals.css        # Global styles
├── components/
│   ├── Button.tsx         # Reusable button component
│   └── Testimonial.tsx    # Testimonial card component
├── sections/
│   ├── Header.tsx         # Header/Navigation section
│   ├── Hero.tsx           # Hero/Introduction section
│   ├── Intro.tsx          # About/Intro section
│   ├── Projects.tsx       # Projects showcase section
│   ├── Testimonials.tsx   # Client testimonials section
│   ├── FAQs.tsx           # Frequently asked questions
│   └── Footer.tsx         # Footer section
├── hooks/
│   └── useTextRevealAnimation.ts  # Custom text reveal animation hook
├── assets/
│   ├── icons/             # SVG icons
│   └── images/            # Images and graphics
public/                    # Static assets

Configuration Files:
├── next.config.mjs        # Next.js configuration
├── tailwind.config.ts     # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
├── postcss.config.mjs     # PostCSS configuration
└── package.json           # Project dependencies
```

## 📜 Available Scripts

| Script | Command | Description |
|--------|---------|-------------|
| `dev` | `pnpm dev` | Start development server |
| `build` | `pnpm build` | Build optimized production bundle |
| `start` | `pnpm start` | Start production server |
| `lint` | `pnpm lint` | Run ESLint to check code quality |

## ⚙️ Configuration

### Tailwind CSS

Customize colors, fonts, spacing, and other design tokens in `tailwind.config.ts` to match your brand identity.

### TypeScript

Modify TypeScript settings in `tsconfig.json`. The project is pre-configured with strict type checking for better code quality.

### Next.js

Configure Next.js behavior in `next.config.mjs` (e.g., image optimization, rewrite rules, environment variables).

### Animations

- **Motion**: Configure animation behaviors in your components using the `motion` library
- **Text Animations**: Use the `useTextRevealAnimation` hook for custom text reveal effects
- **Split Type**: Leverage Split Type for advanced text manipulation

### Environment Variables

Create a `.env.local` file in the root directory for environment-specific variables:

```bash
# .env.local
NEXT_PUBLIC_SITE_URL=https://yourportfolio.com
[email protected]
```

## 🌐 Deployment

### Deploy on Vercel (Recommended)

The easiest way to deploy is using [Vercel](https://vercel.com), created by the Next.js team:

1. Push your code to GitHub, GitLab, or Bitbucket
2. Visit [Vercel Dashboard](https://vercel.com/dashboard)
3. Click "New Project" and import your repository
4. Click "Deploy"

Your portfolio will be live with automatic deployments on every push to your main branch.

### Deploy Elsewhere

#### Netlify

```bash
# Configure build settings
Build command: pnpm build
Publish directory: .next
```

Connect your GitHub repo to Netlify and follow the setup wizard.

#### Docker

```dockerfile
FROM node:18-alpine AS base
WORKDIR /app

FROM base AS deps
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile

FROM base AS builder
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile
COPY . .
RUN pnpm build

FROM base AS runtime
RUN npm install -g pnpm
COPY --from=deps /app/node_modules ./node_modules
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000
CMD ["pnpm", "start"]
```

#### Other Platforms

- **AWS Amplify**: Follow the [AWS Amplify Next.js deployment guide](https://docs.amplify.aws/nextjs/start/quickstart/)
- **GitHub Pages**: Use `next export` (static export) for static hosting
- **Firebase**: Deploy using Firebase Hosting with Cloud Functions

## 🎨 Customization Tips

1. **Update your content** in the respective section components (`Header.tsx`, `Hero.tsx`, etc.)
2. **Customize colors** in `tailwind.config.ts`
3. **Modify animations** by adjusting Motion library props
4. **Add your images** to `src/assets/images/`
5. **Update metadata** in `src/app/layout.tsx` for SEO

## 🚀 Performance Tips

- Use Next.js Image component for optimized image loading
- Implement lazy loading for sections below the fold
- Monitor bundle size with `npm run build`
- Use TypeScript strict mode to catch potential issues early

## 🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit changes (`git commit -m 'Add amazing feature'`)
4. Push to branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License. See [LICENSE](LICENSE) for details.

## 🔗 Resources

- [Next.js Documentation](https://nextjs.org/docs)
- [React Documentation](https://react.dev)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [Motion Documentation](https://www.motion.dev/)
- [Split Type Documentation](https://www.npmjs.com/package/split-type)
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)

## 💬 Support

For issues, questions, or suggestions, please [open an issue](https://github.com/your-username/minimal-single-page-portfolio/issues) on the repository.

---

Made with ❤️ by the Frontend Tribe