A stunning, responsive portfolio website featuring a 3D particle wave background, modern design, and smooth animations. Built with HTML5, CSS3, and JavaScript.
- Clean and professional layout
- Responsive design for all devices
- Glass morphism effects
- Dark/Light mode toggle
- Dynamic particle wave animation
- Responsive to window resizing
- Customizable particles (size, color, movement)
- Smooth motion effects
- Hero section with animated text
- About section with statistics
- Projects showcase
- Skills visualization
- Contact form
- Social media links
- Smooth page transitions
- Scroll reveal effects
- Hover animations
- Text glitch effects
demo-portfolio/
├── index.html # Main HTML file
├── css/
│ ├── style.css # Main styles
│ └── animations.css # Animation styles
├── js/
│ ├── main.js # Core functionality
│ ├── animations.js # Animation scripts
│ └── background.js # 3D background
└── README.md # Literally this file
In js/background.js
, you can adjust:
const waveSpeed = 0.001; // Wave movement speed
const rotationSpeed = 0.0002; // Rotation speed
const waveHeight = 0.2; // Wave height
In css/style.css
, modify the root variables:
:root {
--primary-color: #2563eb;
--secondary-color: #3b82f6;
--background-color: rgba(255, 255, 255, 0.9);
--text-color: #1f2937;
/* ... other color variables */
}
- Personal Information: Update text in
index.html
- Projects: Modify the projects array in
js/main.js
- Skills: Adjust skill levels in
js/main.js
- Contact: Update contact information in
index.html
- Three.js (v128) - 3D graphics
- Font Awesome (v6.4.0) - Icons
- Google Fonts (Poppins) - Typography
- Chrome (recommended)
- Firefox
- Safari
- Edge
- Lazy loading for images
- Optimized 3D rendering
- Smooth animations with requestAnimationFrame
- CSS transitions for better performance
-
Particle Count: Modify the number in the loop
for (let i = 0; i < 5000; i++) // Change 5000 to desired amount
-
Particle Size: Adjust the size parameter
size: 6, // Change for larger/smaller particles
-
Motion Speed: Modify animation parameters
const waveSpeed = 0.001; // Lower = smoother, Higher = faster
- Create HTML structure
- Add corresponding CSS styles
- Include any necessary JavaScript functionality
- Update navigation links
- Clone the repository
- Make desired changes
- Test responsiveness across devices
- Optimize images and assets
- Deploy to your hosting service
- Three.js for 3D graphics
- Font Awesome for icons
- Google Fonts for typography
MIT License - feel free to use for your own portfolio!
Made with ❤️ by iakzs