A modern, responsive portfolio website built with Vite, React, TypeScript, and Tailwind CSS, featuring a beautiful Aurora background animation and smooth user interactions.
- Aurora Background Animation: Eye-catching animated gradient background
- Responsive Design: Optimized for mobile, tablet, and desktop
- Dark Mode Ready: Built-in dark mode support
- Smooth Animations: Framer Motion powered animations and transitions
- Modern UI Components: Built with Radix UI and custom components
- Hero Section: Dynamic introduction with Aurora background
- About: Education details and technical skills showcase
- Experience: Timeline-based work experience display
- Projects: Featured projects with detailed information and links
- Contact: Professional contact information and social links
- TypeScript: Fully typed for better development experience
- Component Architecture: Modular and reusable components
- SEO Optimized: Semantic HTML and meta tags
- Performance Optimized: Lazy loading and optimized animations
- Deployment Ready: Configured for Vercel deployment
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/krishsanghvi/krish-portfolio.git cd krish-portfolio -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser Navigate to
http://localhost:5173
npm run buildThe built files will be in the dist directory.
- React 18 - UI library
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- Radix UI - Headless UI components
- Lucide React - Icon library
- class-variance-authority - Component variants
- ESLint - Code linting
- PostCSS - CSS processing
- Autoprefixer - CSS vendor prefixes
src/
├── components/
│ ├── ui/ # Reusable UI components
│ │ ├── aurora-background.tsx
│ │ └── button.tsx
│ ├── sections/ # Page sections
│ │ ├── Hero.tsx
│ │ ├── About.tsx
│ │ ├── Experience.tsx
│ │ ├── Projects.tsx
│ │ └── Contact.tsx
│ └── layout/ # Layout components
│ ├── Navbar.tsx
│ └── Footer.tsx
├── data/
│ └── portfolio.ts # Portfolio data
├── lib/
│ └── utils.ts # Utility functions
├── types/
│ └── index.ts # TypeScript type definitions
└── App.tsx # Main app component
Update your personal details in src/data/portfolio.ts:
export const personalInfo: PersonalInfo = {
name: "Your Name",
email: "your.email@example.com",
// ... other details
};Add new projects to the projects array:
export const projects: Project[] = [
{
id: "your-project-id",
title: "Your Project Title",
description: "Project description...",
// ... other project details
},
// ... existing projects
];- Modify colors in
tailwind.config.js - Update CSS variables in
src/index.css - Customize component styles using Tailwind classes
- Connect GitHub repository to Vercel
- Configure build settings (auto-detected)
- Framework: Vite
- Build Command:
npm run build - Output Directory:
dist
- Deploy
The project includes a vercel.json configuration file for optimal deployment.
The build output in dist/ can be deployed to any static hosting service:
- Netlify
- GitHub Pages
- AWS S3
- Google Cloud Storage
This portfolio is designed with modern web design principles:
- Minimalist aesthetic with focus on content
- Professional color scheme using blues and grays
- Consistent spacing and typography for readability
- Subtle animations that enhance user experience
- Mobile-first responsive design
This project is open source and available under the MIT License.
Krish Sanghvi - Computer Science & Engineering Student at The Ohio State University
- 🎓 Graduating May 2025
- 💼 Seeking full-time software engineering opportunities
- 🌐 Portfolio: krish-portfolio.vercel.app
- 💼 LinkedIn: krishsanghvi
- 🐙 GitHub: krishsanghvi
⭐ Star this repo if you found it helpful!