🎸 Balen Shah - Official Portfolio Website

From the Streets to Power. For the People. By the People.

A stunning, modern portfolio website for Balen Shah - Nepal's first independent mayor since 1989, rapper, structural engineer, and 2026 Prime Minister candidate with Rastriya Swatantra Party (RSP).

📋 Table of Contents

Features
File Structure
Installation
Sections
Advanced Animations
Responsive Design
Customization
Browser Support
Technologies Used
Performance
Credits
License

✨ Features

🎨 Design & Aesthetics

Professional Color Scheme: Red (#C41E3A), Gold (#FFD700), Dark theme
Modern Typography: Bebas Neue for headers, Montserrat for body, Playfair Display for accents
Glassmorphism Effects: Frosted glass cards with backdrop blur
Gradient Backgrounds: Dynamic animated gradients
Custom Scrollbar: Themed to match the design

🚀 Advanced Animations

Parallax Scrolling: Multi-layer depth effect on scroll
Staggered Entrance Animations: Elements appear sequentially with delays
3D Card Tilts: Cards tilt based on scroll position
Magnetic Buttons: Buttons follow cursor movement on hover
Ripple Click Effects: Material design ripple on interactions
Cursor Trails: Gold/red particle trails (desktop only)
Animated Counters: Numbers count up when entering viewport
Auto-hide Navbar: Hides on scroll down, shows on scroll up
Interactive Glows: Mouse position creates gradient highlights on cards

📱 Fully Responsive

Mobile-First Design: Optimized for all screen sizes
Hamburger Menu: Touch-friendly mobile navigation
Flexible Grids: Auto-adjusting layouts
Touch Optimized: Smooth touch interactions
Breakpoints:
- Desktop: > 968px
- Tablet: 640px - 968px
- Mobile: < 640px

🎯 SEO Optimized

Semantic HTML5 structure
Meta descriptions and tags
Proper heading hierarchy
Alt text for images
Fast loading times

♿ Accessibility

ARIA labels for screen readers
Keyboard navigation support
Focus indicators
Reduced motion support for accessibility
High contrast ratios

📁 File Structure

balen-shah-portfolio/
│
├── index.html          # Main HTML structure (29KB)
├── style.css           # All CSS styling (27KB)
├── script.js           # JavaScript functionality (14KB)
└── README.md           # Documentation (this file)

File Breakdown

index.html - Structure

Contains 8 main sections:

Navigation with mobile menu
Hero section with image
Stats bar
Timeline (2012-2026)
About section
Social Media section
Vote section
Music discography (9 songs)
Achievements (12 cards)
Contact form
Footer with credits

style.css - Styling

CSS custom properties (variables)
Responsive grid systems
Animation keyframes
Media queries for responsiveness
Card hover effects
Typography styles
Color themes
All visual design elements

script.js - Functionality

Mobile menu toggle
Smooth scroll navigation
Intersection Observer for animations
Parallax scrolling effects
Animated statistics counters
Magnetic button interactions
Ripple click effects
Cursor trail particles
Mouse tracking for glows
Auto-hide navbar
Form validation and handling

🚀 Installation

Quick Start (No Server Required)

Download the files

# Download all three files:
- index.html
- style.css
- script.js

Place in same folder

my-portfolio/
├── index.html
├── style.css
└── script.js

Open index.html
- Double-click index.html
- Or right-click → Open with → Browser

That's it! 🎉 The website will load with all features.

Development Setup (Optional)

For development with live reload:

# Using Python
python -m http.server 8000

# Using Node.js
npx http-server

# Using PHP
php -S localhost:8000

Then open: http://localhost:8000

Production Deployment

Option 1: Traditional Hosting

Upload all 3 files to your web host via FTP
Ensure they're in the same directory
Access via your domain

Option 2: GitHub Pages

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin your-repo-url
git push -u origin main

Enable GitHub Pages in repository settings.

Option 3: Netlify/Vercel

Drag and drop the folder
Or connect your Git repository
Auto-deployment on push

📄 Sections

1. Navigation Bar

Sticky header with auto-hide on scroll
Smooth scroll to sections
Mobile hamburger menu
Responsive design

2. Hero Section

Large heading with gradient text
Real photo of Balen Shah
Call-to-action buttons
Parallax image effect

3. Stats Bar

4 key statistics:
- 2022: First Independent Mayor
- 11M+: Views on "Balidan"
- 61K+: Victory Margin
- 248K+: YouTube Subscribers
Animated counters on scroll

4. Timeline Section

Complete journey from 2012 to 2026:

2012: Debut single "Sadak Balak"
2013: Raw Barz Champion
2016: "Balidan" - 11M+ views
2019: "Hami Yestai Ta Ho Ni Bro"
2022: Historic Mayoral Victory
2025: "Nepal Haseko" OST
2026: Prime Minister Candidate

5. About Section

Three aspect cards:

🎤 The Rapper: Music career and impact
🏗️ The Engineer: Technical background
🚀 The Revolutionary: Political achievements

6. Social Media Section

4 platform cards with real stats:

Facebook: 485K+ Followers
Instagram: 68.5K+ Followers
YouTube: 248K+ Subscribers
Twitter/X: 18.3K+ Followers

Each card has:

Platform-specific colors and icons
Animated hover effects
Clickable links (ready to connect)

7. Vote Section

Large "VOTE FOR CHANGE" heading
Campaign statistics
Call-to-action button
Inspirational quote

8. Music Discography

9 songs with full details:

Sadak Balak (2012) - Debut
Raw Barz (2013) - Championship
Balidan (2016) - 11M+ views
Gorkhali Toph (2017)
Hami Yestai Ta Ho Ni Bro (2019) - Breakthrough
Marpha Ko Madira (2020)
Savage (2021)
Hande (2022)
Nepal Haseko (2025) - Latest, 1M+ first day

Each card includes:

Release year
View counts
Description
Tagged categories

9. Achievements Section

12 major achievements:

First Independent Mayor Since 1989
Raw Barz Season 2 Champion
Revolutionary Waste Management
Tukucha River Conservation
Traffic & Infrastructure Reform
Textbook-free-Friday Program
Kathmandu Skill Fair
248K+ YouTube Subscribers
Master's in Structural Engineering
Business Leader
Prime Minister Candidate 2026
Voice of Gen Z Movement

10. Contact Section

Two-column layout:

Left: Contact information
- Office location
- Political affiliation
- Social media stats
- Music platforms
- Social media icons
Right: Contact form
- Name, Email, Subject, Message fields
- Validation
- Submit button

11. Footer

Copyright notice
Tagline
Birth information
Credits: "Made and Collaborated with Asbin Thapa ✨"

🎬 Advanced Animations

Scroll-Triggered Animations

Music Cards

// Slide up from bottom with scale
transform: translateY(50px) scale(0.9)
→ translateY(0) scale(1)
Stagger: 0.1s delay between cards
Easing: cubic-bezier(0.34, 1.56, 0.64, 1) // Bounce effect

About Cards

// Slide from left with rotation
transform: translateX(-80px) rotate(-3deg) scale(0.95)
→ translateX(0) rotate(0) scale(1)
Stagger: 0.15s delay

Achievement Cards

// Bounce up
transform: translateY(60px) scale(0.8)
→ translateY(0) scale(1)
Stagger: 0.08s delay
Easing: cubic-bezier(0.68, -0.55, 0.265, 1.55) // Bounce

Timeline Items

// Alternate from left/right
Odd items: translateX(-120px)
Even items: translateX(120px)
→ translateX(0)
Stagger: 0.2s delay

Stat Cards

// 3D flip effect
transform: perspective(1000px) rotateY(90deg) scale(0.8)
→ rotateY(0) scale(1)
Stagger: 0.1s delay

Social Media Cards

// Zoom with rotation
transform: scale(0.5) rotate(-10deg)
→ scale(1) rotate(0)
Stagger: 0.15s delay
Easing: cubic-bezier(0.68, -0.55, 0.265, 1.55)

Parallax Effects

// Background - moves at 0.5x scroll speed
transform: translateY(scrolled * 0.5)

// Hero Image - moves at 0.3x with subtle scale
transform: translateY(scrolled * 0.3) scale(1 + scrolled * 0.0001)

// Section Titles - floating sine wave
transform: translateY(sin(distance * π) * 15px)

// Music Cards - 3D tilt based on viewport position
transform: perspective(1000px) rotateX(distance * 3deg)

Interactive Effects

Magnetic Buttons

// Buttons follow cursor
const x = (mouseX - centerX) * 0.3
const y = (mouseY - centerY) * 0.3
transform: translate(x, y) scale(1.05)

Ripple Effect

// Material design ripple on click
Creates expanding circle from click point
Animation: scale(0) → scale(4)
Opacity: 1 → 0
Duration: 600ms

Cursor Trail (Desktop only)

// Gold/red gradient particles
Follows mouse movement
Throttled to every 80ms
Fades and scales up after creation

Card Glow

// Mouse position creates gradient highlight
--mouse-x: cursorX% 
--mouse-y: cursorY%
Radial gradient follows cursor

Animated Counters

// Numbers count up from 0
Triggers when element enters viewport
Counts to target in 50 increments
Duration: ~1.5 seconds
Maintains formatting (K+, M+, commas)

Navbar Behavior

// Auto-hide on scroll
Scrolling down: translateY(-100%) // Hide
Scrolling up: translateY(0) // Show
Threshold: 80px
Transition: 0.3s ease

📱 Responsive Design

Breakpoints

/* Desktop - Full Layout */
@media (min-width: 969px) {
  - Side-by-side grids
  - Larger fonts
  - Hover effects
  - Cursor trails
  - Full animations
}

/* Tablet - Adapted Layout */
@media (max-width: 968px) {
  - Mobile menu (hamburger)
  - Stacked timeline
  - Adjusted padding
  - Modified hover states
}

/* Mobile - Single Column */
@media (max-width: 640px) {
  - Single column grids
  - Larger touch targets
  - Simplified animations
  - Optimized fonts
  - Stacked contact form
}

Mobile Optimizations

Touch-Friendly
- Minimum 44x44px tap targets
- Hover states adapted for touch
- Swipe-friendly cards
Performance
- Disabled cursor trails on mobile
- Reduced animation complexity
- Optimized image loading
- Fewer particles
Navigation
- Full-screen mobile menu
- Large, easy-to-tap links
- Smooth transitions
Typography
- Fluid font sizes with clamp()
- Scales from mobile to desktop
- Maintains readability

🎨 Customization

Changing Colors

Edit CSS variables in style.css:

:root {
    --primary: #C41E3A;      /* Main red - buttons, accents */
    --secondary: #1a1a1a;    /* Dark background */
    --accent: #FFD700;       /* Gold - highlights, hover */
    --text-light: #f5f5f5;   /* Light text color */
    --text-dark: #1a1a1a;    /* Dark text for light backgrounds */
    --gradient-1: linear-gradient(135deg, #C41E3A 0%, #8B0000 100%);
    --gradient-2: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
}

Modifying Content

All content is in index.html:

<!-- Change hero text -->
<h1>YOUR NAME</h1>
<h2>Your Tagline</h2>
<p>Your description...</p>

<!-- Update social media links -->
<a href="https://facebook.com/yourprofile">

<!-- Modify statistics -->
<h3>YOUR STAT</h3>
<p>Your Label</p>

Adjusting Animations

In script.js, modify timing:

// Change stagger delays
el.style.transition = `... ${index * 0.2}s`; // Increase/decrease

// Adjust parallax speeds
bgAnimated.style.transform = `translateY(${scrolled * 0.7}px)`; // Faster/slower

// Modify entrance effects
el.style.transform = 'translateY(100px)'; // More/less movement

Adding New Sections

Add HTML structure in index.html
Style in style.css
Add animations in script.js if needed
Update navigation menu

🌐 Browser Support

Browser	Version	Support
Chrome	Latest	✅ Full
Firefox	Latest	✅ Full
Safari	Latest	✅ Full
Edge	Latest	✅ Full
Opera	Latest	✅ Full
Chrome Mobile	Latest	✅ Full
Safari iOS	Latest	✅ Full
Samsung Internet	Latest	✅ Full

Features Requiring Modern Browsers

CSS Grid
CSS Custom Properties
Intersection Observer API
Backdrop Filter
CSS Transforms 3D

Note: IE11 is not supported (deprecated by Microsoft)

🛠️ Technologies Used

Core Technologies

HTML5: Semantic markup
CSS3: Modern styling, animations
Vanilla JavaScript: No frameworks/libraries

CSS Features

CSS Grid & Flexbox
CSS Custom Properties (Variables)
CSS Animations & Transitions
Backdrop Filter (Glassmorphism)
CSS Transforms 3D
Media Queries

JavaScript APIs

Intersection Observer API
Request Animation Frame
DOM Manipulation
Event Listeners
Local Storage (optional)

External Resources

Google Fonts:
- Bebas Neue
- Montserrat
- Playfair Display
SVG Icons: Inline for social media

Performance Features

GPU Acceleration: Transform-based animations
Throttled Events: Scroll and mouse events
Lazy Loading: Images load on demand
RequestAnimationFrame: Smooth 60fps animations

⚡ Performance

Optimization Techniques

CSS Animations
- Use transform and opacity (GPU accelerated)
- Avoid layout-triggering properties
- Hardware acceleration enabled
JavaScript
- Event throttling (scroll, mousemove)
- RequestAnimationFrame for smooth animations
- Intersection Observer instead of scroll listeners
Images
- Optimized image sizes
- Lazy loading
- Fallback SVG for failed loads
Code Splitting
- Separate HTML, CSS, JS files
- Browser caching enabled
- Minification ready

Performance Metrics

Lighthouse Scores (Target):
- Performance: 95+
- Accessibility: 100
- Best Practices: 100
- SEO: 95+

Load Times:
- First Contentful Paint: <1.5s
- Time to Interactive: <3s
- Total Blocking Time: <200ms

Optimization Tips

# Minify CSS
npx csso style.css -o style.min.css

# Minify JavaScript
npx terser script.js -o script.min.js -c -m

# Optimize images
# Use tools like TinyPNG, ImageOptim, or Squoosh

👥 Credits

Project Information

Subject: Balen Shah (Balendra Shah)
Role: Rapper, Engineer, Politician
Position: Former Mayor of Kathmandu, PM Candidate 2026
Party: Rastriya Swatantra Party (RSP)

Development

Developer: Asbin Thapa
Website: asbinthapa.info.np
Design: Custom modern portfolio design
Development Time: January 2026

Resources

Fonts: Google Fonts
Icons: Custom SVG
Images: Official sources
Information: Public domain, official sources

Special Thanks

Balen Shah for the inspiration
Nepal's Gen Z movement
All supporters of the RSP movement

📜 License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

📞 Contact & Support

For Technical Issues

Open an issue on GitHub
Contact developer: asbinthapa.info.np

For Content Updates

Submit pull requests
Contact via the website form

For Balen Shah Information

Official Facebook: @balenshah
Official YouTube: @BalenShah
Instagram: @balen
Twitter/X: @balen

🚀 Future Enhancements

Planned Features

Technical Improvements

📊 Project Statistics

Total Lines of Code: ~1,800
HTML: 556 lines
CSS: 1,000+ lines
JavaScript: 250+ lines

File Sizes:
- index.html: 29KB
- style.css: 27KB
- script.js: 14KB
Total: ~70KB (uncompressed)

Sections: 11
Interactive Elements: 100+
Animations: 50+
Responsive Breakpoints: 2

🎯 Key Features Summary

✅ Fully responsive (mobile, tablet, desktop)
✅ Advanced scroll animations
✅ Parallax effects
✅ 3D card transforms
✅ Interactive hover states
✅ Animated statistics
✅ Social media integration
✅ Contact form
✅ Timeline visualization
✅ Music discography
✅ Achievement showcase
✅ Auto-hide navigation
✅ Cursor trail effects
✅ Ripple interactions
✅ Magnetic buttons
✅ SEO optimized
✅ Accessibility compliant
✅ Fast loading
✅ Cross-browser compatible
✅ No dependencies
✅ Easy to customize

🙏 Acknowledgments

This portfolio represents the journey of Balen Shah - from street rapper to revolutionary mayor to Prime Minister candidate. His story inspires millions of Nepalis, especially Gen Z, to demand transparency, accountability, and real change.

"This rally is a spontaneous movement of Gen Z, for whom even I may seem old. But it is necessary to hear them out." - Balen Shah

From the Streets to Power. For the People. By the People.

Made with ❤️ by Asbin Thapa ✨

Website • GitHub

Last Updated: January 27, 2026
Version: 1.0.0
Status: Production Ready 🚀

Name		Name	Last commit message	Last commit date
README.md		README.md
index.html		index.html
java.js		java.js
style.css		style.css

Latest commit

History

Folders and files

Repository files navigation