- React 19 with TypeScript
- Vite for fast development and building
- Tailwind CSS v4 for styling
- Framer Motion for animations
- Swiper for carousel components
- Vitest for testing
- Node.js (version 18 or higher)
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd Portfolio- Install dependencies:
npm installRuns the app in development mode using Vite.
Open http://localhost:3000 to view it in the browser.
The page will reload automatically when you make changes.
You'll see any lint errors in the console and browser.
Builds the app for production to the dist folder.
The build is optimized and minified for the best performance.
Serves the production build locally for preview.
Useful for testing the production build before deployment.
Launches the test runner (Vitest) in watch mode.
Tests will re-run automatically when files change.
Deploys the app to GitHub Pages.
This runs the build process and deploys to the gh-pages branch.
This project uses:
- Vite for fast hot module replacement and optimized builds
- Tailwind CSS v4 with custom glassmorphic components
- TypeScript for type safety
- ESLint for code quality
src/
├── components/ # React components
│ ├── Glass/ # Glassmorphic UI components
│ └── icons/ # SVG icons
├── contexts/ # React contexts
├── data/ # JSON data files
├── hooks/ # Custom React hooks
├── images/ # Static images
└── constants/ # Animation and other constants
- Responsive Design: Works perfectly on all device sizes
- Dark/Light Mode: Toggle between themes
- Glassmorphic UI: Modern glass-like components with blur effects
- Smooth Animations: Powered by Framer Motion
- Interactive Carousel: Built with Swiper
- TypeScript: Full type safety throughout the application
The app is configured for deployment to GitHub Pages. Simply run:
npm run deployThis will build the project and deploy it to the gh-pages branch.