A stunning, modern, and highly interactive portfolio website showcasing DevOps expertise, cloud infrastructure, and security pipeline automation with cutting-edge 3D animations and visual effects.
- Features
- Tech Stack
- Getting Started
- Project Structure
- Customization
- Deployment
- Browser Support
- Performance
- Contact
- Modern Glass Morphism Design - Contemporary UI using frosted glass effects
- 3D Rotating Cube Animation - Interactive DevOps tools visualization
- Smooth Animations - Fade-in, slide, float, and parallax effects
- Gradient Backgrounds - Beautiful color transitions and dynamic orbs
- Responsive Design - Mobile-first approach with fluid layouts
- Dark Theme - Easy on the eyes with professional appearance
- Navigation Highlighting - Active section tracking with smooth transitions
- Scroll Animations - Elements animate as they come into view
- Particle Effects - Mouse-tracking particles on hover
- Button Ripple Effects - Material Design inspired interactions
- Hover Effects - Smooth state transitions on all elements
- Contact Form - Email integration with success notifications
- Hero Section - Eye-catching introduction with floating cards
- About Me - Education and specialization details
- Skills - Comprehensive technical skills with progress bars
- DevOps Pipeline - 8-stage pipeline visualization
- 3D Tools Showcase - Rotating cube with 6 faces showing tools
- Contact Info - Multiple contact methods and social links
- Containerization: Docker, Container Registry, Helm
- Orchestration: Kubernetes, Service Mesh
- Infrastructure as Code: Terraform, Ansible
- CI/CD: GitHub Actions, GitLab CI, Jenkins
- Security: HashiCorp Vault, Falco
- Monitoring: Prometheus, Grafana, ELK Stack
- Version Control: Git, GitHub
- HTML5 - Semantic markup
- CSS3 - Advanced animations, gradients, 3D transforms
- Vanilla JavaScript - No dependencies, pure JS interactions
- Docker - Container support
- Nginx - Web server
- Docker Compose - Multi-container orchestration
- Node.js (optional, for development server)
- Docker & Docker Compose (for containerization)
- Modern web browser
-
Clone or download the repository
git clone https://github.com/yourusername/portfolio.git cd portfolio -
Open
src/index.htmlin your browser# Windows start src/index.html # macOS open src/index.html # Linux xdg-open src/index.html
-
Build and run with Docker Compose
docker-compose up --build
-
Access the portfolio at
http://localhost
-
Install and run Python HTTP server
# Python 3 python -m http.server 8000 --directory src # Python 2 python -m SimpleHTTPServer 8000
-
Visit
http://localhost:8000
portfolio/
├── src/
│ ├── index.html # Main HTML file with all content
│ ├── style.css # Comprehensive styling and animations
│ └── app.js # JavaScript for interactivity
├── Dockerfile # Docker container configuration
├── docker-compose.yml # Docker Compose setup
├── README.md # This file
└── .gitignore # Git ignore rules
- Semantic HTML5 structure
- 6 main sections (Hero, About, Skills, Pipeline, Contact, Footer)
- Font Awesome icons integration
- Form with email integration
- 600+ lines of advanced CSS
- CSS custom properties (variables) for theming
- Keyframe animations (15+ unique animations)
- CSS Grid and Flexbox layouts
- Media queries for responsive design
- Glass morphism effects
- 3D transforms for cube animation
- Navigation section highlighting
- Intersection Observer for scroll animations
- Contact form handling with email support
- Particle effect system
- Interactive element behaviors
- Dynamic shadow effects
- Parallax scrolling
- Smooth scroll behavior
Edit the CSS custom properties in style.css:
:root {
--primary: #00d9ff; /* Cyan */
--secondary: #8b5cf6; /* Purple */
--accent: #ec4899; /* Pink */
--dark: #0a0e27; /* Dark background */
--text-primary: #ffffff; /* White text */
}Edit these in index.html:
- Name: "Yashvant Solanki"
- Email: [email protected]
- Phone: +91 9870097938
- LinkedIn: ytohiwipieown31
- Instagram: @ytohiwipieown31
Add new keyframes in style.css:
@keyframes customAnimation {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}Update the skills section in index.html by modifying skill categories and progress percentages.
- Push to a GitHub repository
- Go to repository Settings → Pages
- Select
mainbranch as source - Access at
https://yourusername.github.io/portfolio
- Connect GitHub repository
- Set build command: (Leave empty for static sites)
- Set publish directory:
src - Deploy
# Build image
docker build -t yourusername/portfolio:latest .
# Push to Docker Hub
docker push yourusername/portfolio:latest
# Run from Docker Hub
docker run -p 80:80 yourusername/portfolio:latestDeploy the Docker container to:
- AWS ECS / Elastic Beanstalk
- Azure Container Instances / App Service
- Google Cloud Run / Cloud Hosting
- Pure CSS/JS: No external dependencies for animations
- Minimal Requests: All assets inline or bundled
- CSS Grid/Flexbox: Efficient layout rendering
- Hardware Acceleration: 3D transforms use GPU
- Lazy Loading: Images load on intersection
- Responsive Images: Mobile-optimized sizes
- Time to First Paint: ~500ms
- Largest Contentful Paint: ~1.2s
- Cumulative Layout Shift: <0.1
- First Input Delay: <100ms
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✅ Full | All modern features |
| Firefox | ✅ Full | All modern features |
| Safari | ✅ Full | All modern features |
| Edge | ✅ Full | All modern features |
| Opera | ✅ Full | All modern features |
| IE 11 | ❌ No | No ES6+ support |
- Google Material Design - Clean, modern UI patterns
- Apple Design - Minimalist, elegant approach
- Microsoft Fluent 2 - Depth and hierarchy
- Dribbble & Behance - Contemporary web design
- CSS Custom Properties (Variables)
- CSS Grid
- CSS Flexbox
- CSS Transforms & 3D
- CSS Animations & Transitions
- CSS Backdrop Filters
- CSS Gradients
- Intersection Observer API
- DOM Manipulation
- Event Listeners
- Animation Frames
- LocalStorage (if implemented)
- Full animation suite
- Particle effects
- 3D cube rotation
- Hover effects
- Optimized touch interactions
- Simplified animations
- Touch-friendly buttons
- Responsive layouts
- Touch-optimized elements
- Reduced animations for performance
- Mobile-first navigation
Elements fade in and slide up as you scroll to them using Intersection Observer API.
Mouse movement triggers particle generation with randomized physics.
Six-faced cube rotates continuously, showing different DevOps tools on each face.
Eight-stage DevOps pipeline with animated arrows between stages.
Contact form opens default email client with pre-filled information.
- Semantic HTML5 structure
- Meta tags and descriptions
- Proper heading hierarchy
- Alt text on images
- Mobile-friendly design
- Fast loading times
- Semantic HTML
- Proper contrast ratios
- Keyboard navigation support
- ARIA labels (where applicable)
- Focus states on interactive elements
- Backend contact form submission
- Blog or case studies section
- Project portfolio showcase
- Certification badges
- Testimonials section
- Dark/Light mode toggle
- Multi-language support
- Analytics integration
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
This portfolio is open source and available under the MIT License.
- Email: [email protected]
- Phone: +91 9870097938
- LinkedIn: ytohiwipieown31
- Instagram: @ytohiwipieown31
- GitHub: [Your GitHub Profile]
Thanks to the open-source community and web design community for inspiration and best practices.
Made with ❤️ by Yashvant Solanki DevOps Engineer | Cloud Architect | Security Enthusiast
Last Updated: November 2025