A modern, animated and interactive 3D portfolio with Japanese localization, featuring smooth GSAP animations, custom cursor effects, and responsive design.
- 🌟 Hero Section with 3D Spline animations
- 🎯 Custom Animated Cursor (desktop only) with GSAP
- 📱 Responsive Design with mobile-friendly navigation
- 🎨 Smooth Animations using Framer Motion and GSAP ScrollTrigger
- 🌐 Japanese Localization (日本語対応)
- 📧 Contact Form Modal with animated interactions
- 🖼️ Projects Section with horizontal scrolling gallery
- ⭐ About Section with parallax star animations
- 🎪 Contact Section with circular zoom animation effect
- 📱 Mobile Menu with slide-in animation
- React - UI library
- Vite - Build tool and dev server
- Framer Motion - Animation library
- GSAP - Professional animation library with ScrollTrigger
- Tailwind CSS - Utility-first CSS framework
- Spline - 3D design and animation
- React Icons - Icon library
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser: Visit http://localhost:5173 to view the app.
src/
├── components/
│ ├── Header.jsx # Navigation header with contact form
│ ├── HeroSection.jsx # Landing section with 3D Spline animation
│ ├── AboutSection.jsx # About section with parallax stars
│ ├── ProjectsSection.jsx # Horizontal scrolling project gallery
│ ├── ContactSection.jsx # Circular zoom contact animation
│ └── CustomCursor.jsx # Custom animated cursor component
├── assets/ # Static assets (images, icons)
├── index.css # Tailwind and global styles
└── main.jsx # App entry point
- Animated navigation with Japanese text
- Social media links (LinkedIn, GitHub, CV)
- Contact form modal with form validation
- Mobile hamburger menu
- 3D Spline animation integration
- Animated typography with spring animations
- Responsive layout for all devices
- Parallax scrolling star animations
- Animated title and description
- Profile image with blend modes
- Horizontal scrolling gallery
- Project image animations on scroll
- Responsive grid layout
- Circular zoom animation effect
- ScrollTrigger-based interactions
- Smooth transitions between states
- GSAP-powered cursor animation
- Mobile detection and hiding
- Mouse interaction effects
- Framer Motion: Component animations, page transitions, modal animations
- GSAP: Custom cursor, scroll-triggered animations, timeline animations
- ScrollTrigger: Scroll-based animations, parallax effects, pinning
Created by Yukikaze-coder
This project is open source and available under the MIT License.