DevOps Portfolio Website

🛠️ Tech Stack

• HTML5: Semantic structure with 5 main pages
• CSS3: Custom animations, gradients, 3D transforms, grid layouts
• JavaScript: Interactive animations, scroll effects, typing effects
• jQuery 1.10.2: DOM manipulation and event handling
• fullPage.js 2.6.2: Smooth scrolling navigation for main page
• WOW.js: Scroll-triggered animations
• Bootstrap 3.3.4: Responsive grid system
• Font Awesome: Icons throughout the site
• Google Fonts: Raleway typography

📁 Project Structure

.
├── CNAME               # Custom domain configuration
├── README.md           # Project documentation
├── index.html          # Main landing page with fullPage.js
├── portfolio-1.html    # DevOps projects showcase
├── portfolio-2.html    # Professional work experience
├── portfolio-3.html    # Technical blog (coming soon)
├── portfolio-4.html    # Calisthenics fitness journey
├── portfolio-5.html    # Future projects roadmap
├── css/
│   ├── animate.min.css         # Animation library styles
│   ├── bootstrap.min.css       # Bootstrap framework
│   ├── font-awesome.min.css    # Font Awesome icons
│   ├── index.css               # Main page specific styles
│   ├── jquery.fullPage.css     # fullPage plugin styles
│   ├── portfolio-[1-5].css     # Individual page styles
│   └── templatemo-style.css    # Base template styles
├── fonts/
│   ├── FontAwesome.*     # Font Awesome font files
│   └── glyphicons-*.*    # Bootstrap Glyphicons
├── images/
│   ├── LOGO.png                  # Site favicon and logo
│   ├── home-bg.jpg               # Homepage background image
│   └── portfolio-img[1-5].jpg    # Portfolio section images
└── js/
    ├── bootstrap.min.js                 # Bootstrap JavaScript
    ├── custom.js                        # Global configurations
    ├── index.js                         # Main page interactions
    ├── jquery.js                        # jQuery library
    ├── jquery.fullPage.js               # Smooth scrolling plugin
    ├── jquery.simple-text-rotator.js    # Text rotation effects
    ├── portfolio-[1-5].js               # Page-specific animations
    ├── smoothscroll.js                  # Enhanced scrolling
    └── wow.min.js                       # Scroll-triggered animations

✨ Key Features

Animation System

• Intersection Observer API: Scroll-triggered animations
• CSS3 Transforms: 3D hover effects with perspective
• Staggered Animations: Sequential element reveals
• Typing Effect: Custom typewriter animation for role titles
• Progress Bars: Animated skill level indicators

Interactive Elements

• 3D Card Effects: Mouse-following tilt animations
• Ripple Effects: Click feedback on buttons/tags
• Parallax Scrolling: Header movement on scroll
• Magnetic Icons: Cursor-following icon movements
• Hover Transforms: Scale, rotate, and translate effects

Navigation

• fullPage.js: Smooth section scrolling on main page
• Fixed Navigation: Persistent top nav across all pages
• Visual Indicators: Animated navigation dots with tooltips
• Smooth Scrolling: Custom scroll behavior for anchor links

🎨 Design Philosophy

• Dark Theme: #2f2f2f background with #ffffff text
• Accent Color: #ff6b6b (coral red) for highlights and CTAs
• Typography: Raleway font family for modern, clean look
• Responsive: Mobile-first approach with Bootstrap grid
• Performance: CSS animations over JavaScript for smooth 60fps

📱 Responsive Design

• Breakpoints: 768px, 480px for mobile optimization
• Flexible Layouts: CSS Grid and Flexbox for complex layouts
• Touch Interactions: Optimized hover states for mobile
• Performance: Reduced animation complexity on smaller screens

🚀 Deployment

• GitHub Pages: Static hosting with automatic deployment
• GitHub Actions: CI/CD pipeline for automated builds
• Custom Domain: Professional URL setup
• Performance: Optimized assets and lazy loading

💡 Notable Implementations

1. Custom Typing Effect: Multi-text rotation without external libraries
2. 3D Hover System: Perspective-based mouse tracking
3. Staggered Animations: IntersectionObserver with delay calculations
4. Particle System: CSS-only floating particles background
5. Progressive Enhancement: Graceful degradation for older browsers

🔧 Setup & Installation

1. Clone the repository
2. Open index.html in a web browser
3. No build process required - pure static files
4. For development, use a local server for best results

📄 License

This project is open source and available under the MIT License.

Built with modern web standards and optimized for performance across all devices.