Portfolio Web with Next.js

A modern portfolio website built with Next.js 14, TypeScript, and Tailwind CSS. Features smooth page transitions, interactive particle animations, service showcases, project galleries, customer testimonials, and a contact form.

Demo · Report issue · Suggest something

Table of Contents

• Table of Contents
• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Running locally
  • Build
• Project Structure
• Demo
• Contributing
• License

Features

• Smooth page transitions with Framer Motion
• Interactive particle animations on hero section
• Responsive design with Tailwind CSS
• Dark theme with custom color palette
• Service showcase with Swiper carousel
• Project gallery with expandable hover cards
• Customer testimonials slider
• Animated stat counters (experience, customers, projects, awards)
• Contact form with name, email, and message fields
• Social media integration (Instagram, YouTube, TikTok, Pinterest, Twitter, Behance)
• Multi-page navigation with route-based sections
• Optimized image loading with skeleton animations
• Built with Next.js 14 App Router

Tech Stack

• Next.js 14
• TypeScript
• Tailwind CSS
• React
• Framer Motion
• tsParticles
• Swiper
• React CountUp
• React Icons
• Vercel

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

git clone https://github.com/wrujel/portfolio-web-template.git
cd portfolio-web-template
npm install

Running locally

npm run dev

Open http://localhost:3000 with your browser to see the result.

Build

npm run build

Project Structure

/
├── public/
│   └── assets/
│       ├── avatar.png
│       ├── about.png
│       ├── avatar_with_tablet.png
│       ├── project-1.png ... project-5.png
│       └── review-1.jpg ... review-5.jpg
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── globals.css
│   │   ├── about/
│   │   ├── contacts/
│   │   ├── customers/
│   │   ├── projects/
│   │   └── services/
│   ├── components/
│   │   ├── About/
│   │   ├── Avatar/
│   │   ├── Contact/
│   │   ├── Cover/
│   │   ├── Customers/
│   │   ├── Header/
│   │   ├── ImageContainer/
│   │   ├── Introduction/
│   │   ├── Navbar/
│   │   ├── Projects/
│   │   ├── Services/
│   │   └── Transition/
│   └── utils/
│       └── motionTransition.ts
├── next.config.js
├── tailwind.config.ts
├── tsconfig.json
└── package.json

Demo

You can check out the demo:

Contributing

Contributions are welcome! If you have suggestions or find bugs, please open an issue or submit a pull request.

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

License

This project is licensed under the MIT License.

---