A modern, responsive portfolio template built with Next.js, TypeScript, and CSS. Perfect for developers, designers, and creative professionals looking to showcase their work and skills.
- 🎨 Modern Design - Clean, minimal, and professional aesthetics
- 📱 Fully Responsive - Works seamlessly on desktop, tablet, and mobile devices
- ⚡ High Performance - Built with Next.js for optimal speed and SEO
- 🎯 Type-Safe - Full TypeScript support for better code quality
- 🌙 Customizable - Easy to personalize colors, fonts, and sections
- 📦 Production Ready - Deploy immediately to Vercel or any hosting platform
- ♿ Accessible - Built with accessibility best practices in mind
- 🔍 SEO Optimized - Meta tags and structured data for better search rankings
- Node.js 16.x or higher
- npm, yarn, pnpm, or bun package manager
-
Clone the repository
git clone https://github.com/Code2With-Pratik/portfolio-template.git cd portfolio-template -
Install dependencies
npm install # or yarn install # or pnpm install # or bun install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open in browser
Navigate to http://localhost:3000 to see your portfolio in action. The page auto-updates as you edit files.
portfolio-template/
├── app/
│ ├── page.tsx # Main portfolio page
│ ├── layout.tsx # Root layout component
│ └── globals.css # Global styles
├── components/ # Reusable React components
├── public/ # Static assets (images, fonts, etc.)
├── styles/ # CSS modules and stylesheets
├── package.json # Project dependencies
├── tsconfig.json # TypeScript configuration
└── next.config.js # Next.js configuration
Edit app/page.tsx to add your information:
- Your name and headline
- Professional bio
- Skills and expertise
- Project showcases
- Contact information
- Global styles are in
app/globals.css - Customize colors, fonts, and spacing to match your brand
- CSS Modules can be used for component-specific styles in the
styles/directory
Create project cards with images, descriptions, and links to showcase your work.
npm run testnpm run build
npm run start- Linting: Run
npm run lintto check code style - Type Checking: TypeScript provides full type safety
- Next.js - React framework for production
- TypeScript - Type-safe JavaScript
- CSS - Styling
- Vercel - Deployment platform
- Next.js Documentation
- Learn Next.js - Interactive tutorial
- TypeScript Handbook
- CSS Tricks
The easiest way to deploy your portfolio is with the Vercel Platform.
- Push your code to GitHub
- Connect your GitHub repository to Vercel
- Vercel will automatically build and deploy on every push
Learn more about Next.js deployment
- Netlify - Connect your GitHub repo for automatic deployments
- GitHub Pages - Static site hosting
- AWS - EC2, S3, CloudFront, or Amplify
- Google Cloud - App Engine or Cloud Run
- Self-Hosted - Use any VPS or dedicated server
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Have questions or feedback? Feel free to:
- Built with Next.js
- Inspired by modern portfolio designs
- Thanks to all contributors and users
Made with ❤️ by Code2With-Pratik
⭐ If you found this helpful, please consider giving it a star!