Breaking Bad - Fan Tribute Website

🌐 Live Demo: https://saketh562.github.io/breaking-bad-tribute/

A fully responsive, chemistry-themed tribute website for the iconic TV series Breaking Bad. Features modern web design with periodic table elements, glowing effects, and an immersive user experience across all devices.

🌟 Features

Design & UI/UX

• Chemistry-Themed Aesthetic: Periodic table elements (Br, Ba, He, Ce, Au, Fe, Hg) integrated throughout
• Animated Elements: Pulsing glow effects, bouncing scroll indicators, smooth transitions
• Interactive Character Cards: Hover effects with image zoom and profile overlays
• Responsive Navigation: Chemistry-inspired nav bar with beaker icons and Br/Ba elements
• Dynamic Backgrounds: Character-specific background images on individual pages
• Green Glow Effects: Authentic Breaking Bad color scheme (#47A025, #00ff41)

Technical Features

• Fully Responsive Design: Optimized for all devices from 320px to 2560px+
• Mobile-First Approach: Progressive enhancement from mobile to desktop
• CSS Grid & Flexbox: Modern layout techniques for flexible, responsive designs
• CSS Animations: Keyframe animations for enhanced user interaction
• Semantic HTML5: Proper structure with sections, nav, footer elements
• Cross-Browser Compatible: Works on Chrome, Firefox, Safari, Edge
• Print Styles: Optimized for printing with dedicated print media queries
• Landscape Orientation Support: Special styles for landscape mobile/tablet views

📱 Device Compatibility

Tested and Optimized For:

• Mobile Phones: 320px - 480px (iPhone SE, Samsung Galaxy, etc.)
• Small Tablets: 481px - 768px (iPad Mini, Android tablets)
• Tablets: 769px - 1024px (iPad, iPad Pro)
• Laptops: 1025px - 1440px (MacBook, Windows laptops)
• Desktops: 1441px+ (Large monitors, 4K displays)

Responsive Breakpoints:

@media (max-width: 480px)        /* Extra Small Devices */
@media (min-width: 481px) and (max-width: 768px)  /* Small Tablets */
@media (min-width: 769px) and (max-width: 1024px) /* Tablets */
@media (min-width: 1025px) and (max-width: 1440px) /* Laptops */
@media (min-width: 1441px)       /* Extra Large Desktops */
@media (max-width: 768px) and (orientation: landscape) /* Landscape Mobile */
@media print                      /* Print Styles */

🎨 Pages & Sections

Homepage (index.html)

1. Hero Section: Animated Breaking Bad title with Br/Ba periodic elements
2. About Section: Series information with highlighted text and character links
3. Statistics Cards: Periodic table styled cards showing seasons, episodes, awards
4. Character Grid: 5 interactive character cards with hover effects

Character Pages

• Walter White (walter.html) - "Heisenberg"
• Jesse Pinkman (jesse.html) - "Captain Cook"
• Saul Goodman (saul.html) - "Better Call Saul"
• Hank Schrader (hank.html) - "ASAC Schrader"
• Gus Fring (gus.html) - "The Chicken Man"

Each character page includes:

• Character-specific background image
• Satirical biographical content
• Life lessons section with numbered badges
• Legal disclaimer with caution styling

🛠️ Technologies Used

Frontend

• HTML5: Semantic markup, viewport meta tags
• CSS3: Advanced styling with modern features
  • CSS Grid Layout
  • Flexbox
  • CSS Custom Properties (Variables)
  • CSS Animations & Transitions
  • Media Queries
  • Pseudo-elements (::before, ::after)
  • Backdrop Filters
  • Linear Gradients
  • Box Shadows & Text Shadows

Design Patterns

• Mobile-First Design: Base styles for mobile, enhanced for larger screens
• Progressive Enhancement: Core functionality works everywhere, enhanced features on capable devices
• Component-Based Styling: Reusable CSS classes (.periodic-element, .character-card, .stat-card)
• BEM-like Naming: Clear, descriptive class names

📂 Project Structure

BreakingBad/
├── index.html              # Homepage
├── walter.html             # Walter White character page
├── jesse.html              # Jesse Pinkman character page
├── saul.html               # Saul Goodman character page
├── hank.html               # Hank Schrader character page
├── gus.html                # Gus Fring character page
├── style.css               # Main stylesheet with responsive design
├── Character-page.css      # Character pages stylesheet with responsive design
├── images/                 # Image assets directory
│   ├── breaking-bad-title.gif
│   ├── walter-white-1.jpg
│   ├── walter-white-2.jpg
│   ├── jesse-pinkman-1.jpg
│   ├── jesse-pinkman-2.jpg
│   ├── saul-goodman-1.jpg
│   ├── saul-goodman-2.jpg
│   ├── hank-1.jpg
│   ├── hank-2.jpg
│   ├── gus-fring-1.jpg
│   └── gus-fring-2.jpg
└── README.md               # Project documentation

🚀 Key Features for Recruiters

Professional Development Practices

✅ Clean Code: Well-organized, commented CSS with clear section separators ✅ Responsive Design: 7+ media queries covering all device sizes ✅ Performance: Optimized images, efficient CSS, smooth animations ✅ Accessibility: Semantic HTML, proper heading hierarchy, alt text for images ✅ Cross-Browser: Works on all modern browsers ✅ Version Control Ready: Organized file structure suitable for Git ✅ Documentation: Comprehensive README with setup instructions

Advanced CSS Techniques

• Keyframe animations (@keyframes pulse-glow, bounce-arrow, fade-in-up)
• Complex selectors and pseudo-elements
• CSS Grid with responsive auto-fit columns
• Flexbox for flexible layouts
• Custom hover effects with transform and scale
• Gradient backgrounds with rgba transparency
• Box-shadow layering for depth effects
• Backdrop filters for glassmorphism
• Print-specific styling

Design Skills

• Color theory and consistent theming
• Visual hierarchy and typography
• Spacing and layout rhythm
• Interactive hover states
• Animation timing and easing
• Responsive image handling
• Mobile-first approach

💻 Local Setup

1. Clone or Download the project files
2. Open index.html in a web browser
3. Test Responsiveness:
   • Use browser DevTools (F12)
   • Toggle device toolbar (Ctrl+Shift+M)
   • Test different device sizes

📱 Testing on Different Devices

Desktop Browser

1. Right-click → Inspect (or F12)
2. Click device toggle icon (Ctrl+Shift+M)
3. Select different devices from dropdown
4. Test portrait and landscape orientations

Real Devices

• Upload to web hosting or GitHub Pages
• Access URL from mobile devices
• Test on iOS and Android

🎯 Highlights for Resume

Key Achievements:

• Built fully responsive website supporting 5+ device categories
• Implemented 450+ lines of CSS media queries for optimal responsiveness
• Created interactive UI with 6+ CSS animations and hover effects
• Designed chemistry-themed interface with periodic table elements
• Achieved cross-device compatibility (mobile, tablet, laptop, desktop)

Technical Skills Demonstrated:

• HTML5, CSS3, Responsive Web Design
• CSS Grid, Flexbox, Animations
• Mobile-First Development
• Cross-Browser Compatibility
• UI/UX Design Principles
• Performance Optimization

📝 Browser Support

Browser	Version	Status
Chrome	Latest	✅ Fully Supported
Firefox	Latest	✅ Fully Supported
Safari	Latest	✅ Fully Supported
Edge	Latest	✅ Fully Supported

🔮 Future Enhancements

• JavaScript interactivity (character filter, search)
• Dark/Light mode toggle
• Episode guide section
• Quote carousel
• Video integration
• Accessibility improvements (ARIA labels, keyboard navigation)
• Performance optimization (lazy loading images)
• PWA features (offline support, installable)

📄 License

This is a fan tribute website created for educational purposes. Breaking Bad and all related characters are property of AMC and Sony Pictures Television.

👤 Author

Saket Portfolio Project - Fully Responsive Breaking Bad Tribute Website

---

Technologies: HTML5 | CSS3 | Responsive Design | Mobile-First Development Status: Production Ready ✅ Responsive: Yes ✅ (320px - 2560px+) Last Updated: 2025