A modern, responsive portfolio website template built with React, TypeScript, Tailwind CSS, and Vite. This template is designed to be easily customizable and ready to deploy.
- 🎨 Modern and responsive design
- 🌙 Dark/Light theme support
- 🌍 Multi-language support (English/Spanish)
- 📱 Mobile-first approach
- ⚡ Fast performance with Vite
- 🎯 SEO optimized
- 📧 Contact form
- 🔧 Fully configurable
- React 18 - UI library
- TypeScript - Type safety
- Tailwind CSS - Styling
- Vite - Build tool
- React Router - Navigation
- Lucide React - Icons
- Radix UI - Accessible components
- React Query - Data fetching
- Node.js 18+
- npm, yarn, or bun
- Clone the repository:
git clone <your-repo-url>
cd portfolio-template- Install dependencies:
npm install
# or
yarn install
# or
bun install- Start the development server:
npm run dev
# or
yarn dev
# or
bun dev- Open http://localhost:5173 in your browser.
Run the interactive setup script to quickly configure your portfolio:
npm run setupThis will guide you through entering your personal information and automatically generate the configuration file.
All personal data is stored in the configuration file at src/config/portfolio.ts. Update this file with your information:
personal: {
name: "Your Name",
title: "Your Title",
subtitle: "Your Subtitle",
greeting: "Hello, I'm",
profilePhoto: "/path/to/your/photo.jpg",
cvUrl: "/path/to/your/cv.pdf" // Optional
}contact: {
email: "[email protected]",
phone: "+1 (555) 123-4567",
location: "Your City, Country",
social: {
github: "https://github.com/yourusername",
linkedin: "https://linkedin.com/in/yourusername",
twitter: "https://twitter.com/yourusername", // Optional
instagram: "https://instagram.com/yourusername" // Optional
}
}about: {
description: "Your description here...",
experience: "Your experience description...",
highlights: [
{
icon: "Code2", // Lucide React icon name
title: "5+ Years",
description: "Professional Experience"
}
// Add more highlights...
]
}projects: [
{
title: "Project Title",
description: "Project description...",
image: "/path/to/project/image.jpg",
technologies: ["React", "TypeScript", "Node.js"],
github: "https://github.com/yourusername/project",
demo: "https://project-demo.vercel.app"
}
// Add more projects...
]skills: {
categories: [
{
title: "Frontend",
skills: [
{ name: "React", level: 95 },
{ name: "TypeScript", level: 90 }
// Add more skills...
]
}
// Add more categories...
],
technologies: ["React", "TypeScript", "Node.js"] // Technology badges
}The template uses Tailwind CSS for styling. You can customize the design by:
- Modifying the color scheme in
tailwind.config.ts - Updating CSS variables in
src/index.css - Adding custom classes to components
- Create a new component in
src/components/ - Add it to the main page in
src/pages/Index.tsx - Update the navigation if needed
- Add translations to
src/contexts/LanguageContext.tsx - Update the language selector component
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically
- Build the project:
npm run build - Upload the
distfolder to Netlify
The template works with any static hosting service. Just run npm run build and upload the dist folder.
src/
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── About.tsx # About section
│ ├── Contact.tsx # Contact section
│ ├── Footer.tsx # Footer
│ ├── Header.tsx # Navigation header
│ ├── Hero.tsx # Hero section
│ ├── Projects.tsx # Projects section
│ └── Skills.tsx # Skills section
├── config/ # Configuration files
│ └── portfolio.ts # Main portfolio configuration
├── contexts/ # React contexts
│ ├── LanguageContext.tsx
│ └── ThemeContext.tsx
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── pages/ # Page components
└── assets/ # Static assets
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
This project is open source and available under the MIT License.
If you have any questions or need help, please open an issue on GitHub.
Made with ❤️ using React & TypeScript