A stunning personal portfolio website for a Food Technologist & Visual Designer, featuring a beautiful pastel-on-dark theme with interactive Three.js animations, GSAP transitions, and modern web technologies.
- Pastel-on-Dark Theme: Beautiful color palette with muted lavender, mint green, powder pink, baby blue, and soft peach
- Glassmorphism UI: Subtle glass effects with backdrop blur and transparency
- Responsive Design: Fully responsive across all devices
- Custom Cursor: Interactive cursor with trailing particles
- Smooth Animations: GSAP-powered scroll animations and transitions
- Three.js Background: Animated blob with morphing capabilities (pizza, ramen, cupcake shapes)
- Particle Systems: Interactive particle backgrounds throughout the site
- Floating 3D Objects: Rotating utensils and food-related items
- Scroll-Triggered Animations: Elements animate as they come into view
- Hover Effects: Beautiful hover states with color transitions
- Landing Page: Hero section with profile image, animated blob, and particle system
- About Me: Personal story with molecular food particles animation
- Projects: Horizontal scrolling project cards split into Food Tech and Design categories
- Skills: Grid of floating pastel icons with 3D objects
- Contact: Floating contact form with social media links
- Theme Toggle: Switch between dark and deep midnight blue themes
- Music Toggle: Background music control (placeholder)
- Easter Egg: Click the blob to see it morph into food shapes
- Custom Scrollbar: Styled scrollbar with pastel colors
- React 18 - Modern React with hooks
- Vite - Fast build tool and dev server
- Three.js - 3D graphics and animations
- React Three Fiber - React renderer for Three.js
- GSAP - Professional animation library
- Locomotive Scroll - Smooth scrolling
- TailwindCSS - Utility-first CSS framework
- Lucide React - Beautiful icons
- Framer Motion - Animation library
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/yakshita-portfolio.git cd yakshita-portfolio -
Install dependencies
npm install # or yarn install -
Start the development server
npm run dev # or yarn dev -
Open your browser Navigate to
http://localhost:3000
npm run build
# or
yarn buildnpm run preview
# or
yarn previewyakshita-portfolio/
├── public/ # Static assets
├── src/
│ ├── components/ # React components
│ │ ├── ThreeComponents/ # Three.js components
│ │ │ ├── AnimatedBlob.jsx
│ │ │ ├── ParticleSystem.jsx
│ │ │ └── FloatingObjects.jsx
│ │ ├── Landing.jsx
│ │ ├── About.jsx
│ │ ├── Projects.jsx
│ │ ├── Skills.jsx
│ │ ├── Contact.jsx
│ │ ├── CustomCursor.jsx
│ │ ├── ThemeToggle.jsx
│ │ ├── MusicToggle.jsx
│ │ └── LoadingScreen.jsx
│ ├── App.jsx # Main app component
│ ├── main.jsx # React entry point
│ └── index.css # Global styles
├── package.json
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
└── README.md
The color palette is defined in tailwind.config.js:
pastel-lavender: #E6E6FApastel-mint: #F0FFF0pastel-pink: #FFE4E1pastel-blue: #E0F6FFpastel-peach: #FFE5D9
- Update personal information in each component
- Replace placeholder images with your own
- Modify project data in
Projects.jsx - Update skills list in
Skills.jsx - Change contact information in
Contact.jsx
- GSAP animations are configured in each component
- Three.js animations can be modified in the ThreeComponents folder
- Custom CSS animations are in
index.css
- Build the project:
npm run build - Push to GitHub
- Enable GitHub Pages in repository settings
- Set source to
/docsor GitHub Actions
- Connect your GitHub repository to Vercel
- Vercel will automatically detect the Vite configuration
- Deploy with one click
- Build the project:
npm run build - Drag the
distfolder to Netlify - Or connect your GitHub repository for automatic deployments
- Lazy Loading: Components load as needed
- Optimized Images: WebP format with proper sizing
- Code Splitting: Automatic code splitting with Vite
- Tree Shaking: Unused code is automatically removed
- Minification: Production builds are minified
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This project is licensed under the MIT License - see the LICENSE file for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
If you have any questions or need help, feel free to:
- Open an issue on GitHub
- Contact me through the portfolio contact form
- Reach out on social media
Made with ❤️ by Yakshita - Food Technologist & Visual Designer