diff --git a/README.md b/README.md new file mode 100644 index 0000000..9012303 --- /dev/null +++ b/README.md @@ -0,0 +1,355 @@ +# 🎨 Magic Bento UI Portfolio - Tabish Ali + +A stunning single-page portfolio website featuring dark theme aesthetics with purple glow effects, particle animations, spotlight effects, and an interactive bento grid layout. + +![Magic Bento UI](https://img.shields.io/badge/Design-Magic%20Bento%20UI-8400FF?style=for-the-badge) +![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) +![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) +![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) + +## ✨ Features + +### 🎯 Design System +- **Dark Theme**: Deep purple aesthetic (#060010 background) +- **Accent Purple**: Vibrant #8400FF with glowing effects +- **Bento Grid Layout**: Modern card-based design system +- **Responsive**: Fully responsive across all devices +- **Accessible**: WCAG AA compliant + +### 🚀 Interactive Elements +- **Cursor Spotlight**: Dynamic spotlight following cursor +- **Particle Animations**: Floating particles on card hover +- **Smooth Scrolling**: Seamless navigation between sections +- **Card Hover Effects**: Border glow and elevation effects +- **Counter Animations**: Animated statistics +- **Form Validation**: Real-time input validation + +### 📱 Sections +1. **Header** - Fixed navigation with mobile menu +2. **Hero** - Eye-catching introduction with stats +3. **About** - Personal background and highlights +4. **Skills** - Interactive bento grid showcasing expertise +5. **Projects** - Filterable portfolio showcase +6. **Experience** - Timeline of professional journey +7. **Services** - Offered services with detailed cards +8. **Testimonials** - Carousel of client feedback +9. **Contact** - Functional contact form with validation +10. **Footer** - Newsletter signup and social links + +## 🎨 Design Specifications + +### Color Palette +```css +--primary-bg: #060010 (Deep Dark Purple) +--secondary-bg: #0a0018 (Slightly lighter dark) +--accent-purple: #8400FF +--purple-glow: rgba(132, 0, 255, 0.2) +--border-color: #392e4e +--text-primary: #ffffff +--text-secondary: rgba(255, 255, 255, 0.7) +``` + +### Typography +- **Font Family**: Inter, SF Pro Display +- **H1**: 72px (responsive: 48-72px) +- **H2**: 48px (responsive: 32-48px) +- **H3**: 32px (responsive: 24-32px) +- **Body**: 16px with 1.6 line-height + +### Spacing System +- **Base Unit**: 8px +- **Section Padding**: 120px (mobile: 60px) +- **Container Max Width**: 1400px +- **Border Radius**: 20px for cards, 12px for buttons + +## 🛠️ Technologies Used + +- **HTML5**: Semantic markup +- **CSS3**: Modern styling with CSS Grid and Flexbox +- **Vanilla JavaScript**: No frameworks, pure JS +- **CSS Variables**: Customizable design tokens +- **CSS Animations**: Smooth transitions and effects +- **Intersection Observer**: Scroll-triggered animations + +## 📦 File Structure + +``` +portfolio/ +├── index.html # Main HTML structure +├── styles.css # Complete stylesheet +├── script.js # Interactive functionality +└── README.md # Documentation +``` + +## 🚀 Getting Started + +### Installation + +1. **Clone or Download** + ```bash + git clone + cd portfolio + ``` + +2. **Open in Browser** + ```bash + # Simply open index.html in your browser + open index.html + + # Or use a local server (recommended) + python -m http.server 8000 + # Visit http://localhost:8000 + ``` + +### Customization + +#### 1. Personal Information +Edit `index.html` and update: +- Name and title in hero section +- About text and background +- Skills and technologies +- Project details +- Work experience +- Contact information + +#### 2. Color Scheme +Modify CSS variables in `styles.css`: +```css +:root { + --accent-purple: #8400FF; /* Change to your brand color */ + --primary-bg: #060010; /* Adjust background */ +} +``` + +#### 3. Content Sections +Add/remove sections in `index.html`: +- Each section is independently styled +- Bento cards are modular and reusable +- Grid layouts automatically adapt + +## 🎭 Interactive Features + +### Cursor Spotlight +Dynamic gradient spotlight that follows cursor movement, creating an immersive experience across bento cards. + +### Particle System +12 animated particles appear on card hover, floating in random directions with rotation effects. + +### Scroll Animations +Elements fade in and slide up as they enter the viewport using Intersection Observer API. + +### Form Validation +Real-time validation with: +- Required field checking +- Email format validation +- Visual error feedback +- Success states + +### Testimonial Carousel +Auto-playing carousel with: +- Arrow navigation +- Dot indicators +- Touch/swipe support +- Pause on hover + +### Project Filters +Dynamic filtering system: +- Smooth transitions +- Category-based filtering +- Active state indicators + +## 📱 Responsive Breakpoints + +```css +/* Large Desktop */ +@media (min-width: 1400px) { ... } + +/* Desktop */ +@media (min-width: 1025px) { ... } + +/* Tablet */ +@media (max-width: 1024px) { ... } + +/* Mobile */ +@media (max-width: 768px) { ... } + +/* Small Mobile */ +@media (max-width: 480px) { ... } +``` + +## ⚡ Performance + +- **No Dependencies**: Pure HTML, CSS, and JavaScript +- **Optimized Animations**: GPU-accelerated transforms +- **Lazy Loading**: Images load on demand +- **Minimal JS**: ~19KB uncompressed +- **CSS Optimization**: Efficient selectors and rules + +## ♿ Accessibility + +- Semantic HTML5 elements +- ARIA labels on interactive elements +- Keyboard navigation support +- Focus visible states +- Proper heading hierarchy +- Alt text for images +- Color contrast WCAG AA compliant +- Reduced motion support + +## 🌐 Browser Support + +- ✅ Chrome (latest) +- ✅ Firefox (latest) +- ✅ Safari (latest) +- ✅ Edge (latest) +- ✅ Mobile browsers (iOS 12+, Android 8+) + +## 📝 Customization Guide + +### Adding a New Project + +```html +
+
+
+
Category
+ +
+
+

Project Name

+

Description...

+
+ Tech 1 + Tech 2 +
+
+
+``` + +### Adding a New Skill Card + +```html +
+
+
🎨
+

Skill Category

+ +
+``` + +### Adding a Timeline Item + +```html +
+
+
+
+
📅 2021 - Present
+

Position

+

🏢 Company Name

+

Description...

+
+
+``` + +## 🎨 Design Philosophy + +The Magic Bento UI system is built on three core principles: + +1. **Modularity**: Reusable bento card components +2. **Consistency**: Unified design language throughout +3. **Interactivity**: Engaging hover and scroll effects + +## 📊 Analytics Integration + +To add analytics, insert before closing `` tag: + +```html + + + +``` + +## 🔧 Troubleshooting + +### Particles Not Showing +- Check browser console for errors +- Ensure JavaScript is enabled +- Clear browser cache + +### Animations Lagging +- Reduce particle count in `script.js` +- Disable tilt effect +- Check `prefers-reduced-motion` setting + +### Form Not Submitting +- Form is set to demo mode +- Replace `setTimeout` in `initContactForm` with actual API call +- Configure backend endpoint + +## 🤝 Contributing + +Feel free to customize and use this template for your own portfolio! + +## 📄 License + +This project is open source and available for personal and commercial use. + +## 👤 Author + +**Tabish Ali** +- Portfolio: [Your URL] +- LinkedIn: [Your LinkedIn] +- GitHub: [Your GitHub] +- Email: tabish.ali@example.com + +## 🙏 Acknowledgments + +- Design inspiration from modern portfolio trends +- Bento UI concept from Apple's design language +- Purple gradient theme for modern aesthetics + +## 📞 Support + +For questions or support: +- Open an issue on GitHub +- Email: tabish.ali@example.com +- Twitter: @tabishali + +--- + +
+

Made with 💜 and ☕ by Tabish Ali

+

© 2024 All Rights Reserved

+
+``` + +--- + +## 🎯 Quick Checklist + +Before going live: + +- [ ] Update all personal information +- [ ] Replace placeholder images +- [ ] Add real project screenshots +- [ ] Configure form backend +- [ ] Add Google Analytics +- [ ] Test on multiple devices +- [ ] Optimize images (WebP format) +- [ ] Add meta tags for SEO +- [ ] Set up custom domain +- [ ] Test contact form +- [ ] Check all links +- [ ] Run accessibility audit +- [ ] Test loading speed + +Enjoy your beautiful Magic Bento UI portfolio! 🚀✨ diff --git a/index.html b/index.html new file mode 100644 index 0000000..94d1e36 --- /dev/null +++ b/index.html @@ -0,0 +1,940 @@ + + + + + + Tabish Ali - Full-Stack Developer & Designer + + + + + + + + + + + + +
+ + +
+ +
+ + +
+
×
+
+ Home + About + Skills + Projects + Experience + Contact +
+
+ + +
+
+
+
+ 👋 Welcome to my portfolio +
+

+ Hi, I'm Tabish Ali + I Craft Digital Experiences +

+

+ A passionate Full-Stack Developer & UI/UX Designer specializing in creating beautiful, functional, and user-centered digital experiences. I transform ideas into exceptional products. +

+
+ + +
+
+
+
0
+
Projects Completed
+
+
+
+
0
+
Years Experience
+
+
+
+
0
+
Happy Clients
+
+
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ Scroll to explore +
+
+ + +
+
+ ABOUT ME +

Know Me Better

+

Discover my journey, passion, and what drives me to create exceptional digital experiences.

+
+
+
+
+
+ + + + + + + + + +
+
+
+

Hello! I'm Tabish Ali, a passionate Full-Stack Developer and UI/UX Designer with over 5 years of experience in crafting digital solutions. My journey in tech started with a curiosity about how things work, which evolved into a deep passion for creating meaningful user experiences.

+ +

I specialize in building responsive web applications, mobile apps, and designing intuitive interfaces that users love. My approach combines technical expertise with creative problem-solving, ensuring every project not only looks great but performs exceptionally.

+ +

When I'm not coding or designing, you'll find me exploring new technologies, contributing to open-source projects, or sharing knowledge with the developer community. I believe in continuous learning and staying ahead of industry trends to deliver cutting-edge solutions.

+
+
+
+
+
+
🎯
+

Mission Driven

+

Focused on building products that make a real difference in people's lives and solve genuine problems.

+
+
+
+
💡
+

Always Learning

+

Constantly updating my skills and staying current with the latest technologies and design trends.

+
+
+
+
🤝
+

Team Player

+

Collaborative and communicative, I thrive in team environments and value diverse perspectives.

+
+
+
+ + +
+
+ SKILLS & EXPERTISE +

What I Bring to the Table

+

A comprehensive skill set spanning modern web technologies, design tools, and best practices.

+
+
+ +
+
+

Tech Stack

+
+
+ ⚛️ + React +
+
+ 📗 + Node.js +
+
+ 📘 + TypeScript +
+
+ 🐍 + Python +
+
+ 🎨 + Figma +
+
+ 🗄️ + MongoDB +
+
+
+ + +
+
+
💻
+

Frontend

+
    +
  • React & Next.js
    • +
  • Vue.js
    • +
  • HTML5/CSS3
    • +
  • Tailwind CSS
    • +
+
+ + +
+
+
⚙️
+

Backend

+
    +
  • Node.js/Express
    • +
  • Python/Django
    • +
  • REST APIs
    • +
  • GraphQL
    • +
+
+ + +
+
+

Code Stats

+
+
+ 0 + Lines of Code +
+
+ 0 + GitHub Commits +
+
+ 0 + Coffees ☕ +
+
+
+ + +
+
+
🎨
+

Design

+
    +
  • UI/UX Design
    • +
  • Figma/Sketch
    • +
  • Prototyping
    • +
  • Design Systems
    • +
+
+ + +
+
+
"
+

Code is like humor. When you have to explain it, it's bad.

+

- Cory House

+
+ + +
+
+

Languages

+
+
+
+ JavaScript + 95% +
+
+
+
+
+
+
+ Python + 85% +
+
+
+
+
+
+
+ TypeScript + 90% +
+
+
+
+
+
+
+
+
+ + +
+
+ PORTFOLIO +

Featured Projects

+

A showcase of my recent work and creative solutions.

+
+
+ + + + +
+
+ +
+
+
+
Web Application
+ + + + + + + + + +
+
+

E-Commerce Platform

+

A full-featured online shopping platform with real-time inventory management and secure payment integration.

+
+ React + Node.js + MongoDB + Stripe +
+
+ View Project + Live Demo +
+
+
+ + +
+
+
+
Mobile App
+ + + + + + + + + +
+
+

Fitness Tracker

+

Mobile app for tracking workouts and health metrics.

+
+ React Native + Firebase +
+
+
+ + +
+
+
+
UI/UX Design
+ + + + + + + + + +
+
+

Banking Dashboard

+

Modern dashboard design for financial management.

+
+ Figma + Design System +
+
+
+ + +
+
+
+
Web App
+ + + + + + + + + +
+
+

Task Management System

+

Collaborative project management tool with real-time updates.

+
+ Vue.js + Socket.io + PostgreSQL +
+
+
+ + +
+
+
+
Portfolio
+ + + + + + + + + +
+
+

Portfolio Website

+

Creative portfolio for a photographer.

+
+ Next.js + Tailwind +
+
+
+ + +
+
+
+
Mobile
+ + + + + + + + + +
+
+

Food Delivery App

+

Order food from local restaurants.

+
+ Flutter + Firebase +
+
+
+
+
+ +
+
+ + +
+
+ EXPERIENCE +

My Journey

+

Professional experience and career milestones.

+
+
+
+
+ +
+
+
+
+
📅 2021 - Present
+

Senior Full-Stack Developer

+

🏢 Tech Innovations Inc.

+

Leading development of enterprise web applications and mentoring junior developers. Architecting scalable solutions using modern tech stack.

+
    +
  • ✓ Led development of microservices architecture serving 100K+ users
    • +
  • ✓ Improved application performance by 60% through optimization
    • +
  • ✓ Mentored 5 junior developers and conducted code reviews
    • +
  • ✓ Implemented CI/CD pipelines reducing deployment time by 70%
    • +
+
+ React + Node.js + AWS + Docker +
+
+
+ + +
+
+
+
+
📅 2019 - 2021
+

Full-Stack Developer

+

🏢 Digital Solutions Ltd.

+

Developed and maintained multiple client projects ranging from e-commerce platforms to corporate websites.

+
    +
  • ✓ Built 15+ successful client projects from scratch
    • +
  • ✓ Integrated third-party APIs and payment gateways
    • +
  • ✓ Collaborated with design team for pixel-perfect implementations
    • +
  • ✓ Achieved 95% client satisfaction rate
    • +
+
+ Vue.js + Python + PostgreSQL +
+
+
+ + +
+
+
+
+
📅 2018 - 2019
+

Frontend Developer

+

🏢 StartUp Ventures

+

Focused on creating responsive and interactive user interfaces for web applications.

+
    +
  • ✓ Developed reusable component library
    • +
  • ✓ Implemented responsive designs across all devices
    • +
  • ✓ Optimized web performance and accessibility
    • +
+
+ JavaScript + HTML/CSS + Bootstrap +
+
+
+
+
+
+ + +
+
+ SERVICES +

What I Offer

+

Comprehensive development and design services tailored to your needs.

+
+
+ +
+
+
01
+
💻
+

Web Development

+

Building responsive, performant web applications using modern frameworks and best practices.

+
    +
  • Custom web applications
    • +
  • E-commerce solutions
    • +
  • Progressive Web Apps
    • +
  • API integration
    • +
  • Performance optimization
    • +
+ Learn More → +
+ + +
+
+
02
+
🎨
+

UI/UX Design

+

Creating beautiful, intuitive interfaces that users love.

+
    +
  • User research
    • +
  • Wireframing & prototyping
    • +
  • Visual design
    • +
  • Design systems
    • +
+ Learn More → +
+ + +
+
+
03
+
📱
+

Mobile Development

+

Native and cross-platform mobile apps for iOS and Android.

+
    +
  • React Native apps
    • +
  • Flutter development
    • +
  • App store deployment
    • +
  • Mobile UI design
    • +
+ Learn More → +
+ + +
+
+
04
+
💡
+

Technical Consulting

+

Expert guidance on architecture, tech stack, and best practices.

+
    +
  • Architecture review
    • +
  • Technology selection
    • +
  • Code review
    • +
  • Team mentoring
    • +
+ Learn More → +
+
+
+ + +
+
+ TESTIMONIALS +

What Clients Say

+

Feedback from clients and colleagues I've worked with.

+
+
+ +
+ +
+
+
"
+

Tabish delivered an outstanding e-commerce platform that exceeded our expectations. His attention to detail and technical expertise were evident throughout the project. Highly recommended!

+
+ ★ + ★ + ★ + ★ + ★ +
+
+
JD
+
+
John Doe
+
CEO
+
Tech Startup Inc.
+
+
+
+ + +
+
+
"
+

Working with Tabish was a pleasure. He transformed our outdated website into a modern, responsive platform. His communication and professionalism were top-notch.

+
+ ★ + ★ + ★ + ★ + ★ +
+
+
SM
+
+
Sarah Miller
+
Product Manager
+
Digital Agency
+
+
+
+ + +
+
+
"
+

Exceptional developer! Tabish built our mobile app from concept to launch. His problem-solving skills and dedication to quality made all the difference.

+
+ ★ + ★ + ★ + ★ + ★ +
+
+
MJ
+
+
Michael Johnson
+
Founder
+
HealthTech Solutions
+
+
+
+
+ +
+
+ + + +
+
+ + +
+
+ CONTACT +

Let's Work Together

+

Have a project in mind? Let's discuss how I can help bring your ideas to life.

+
+
+
+

Get In Touch

+

Feel free to reach out through any of these channels. I'm always open to discussing new projects and opportunities.

+ + +
+
+
📧
+
+
Email
+ tabish.ali@example.com +
+
+ + +
+
+
📞
+
+
Phone
+ +1 (555) 123-4567 +
+
+ + +
+
+
📍
+
+
Location
+
San Francisco, CA
+
+
+ + +
+
+
⏰
+
+
Availability
+
+ + Available for freelance +
+
+
+
+ +
+
+
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + +
+
+
+ + +
+ + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..1ac5880 --- /dev/null +++ b/script.js @@ -0,0 +1,711 @@ +// =================================== +// MAGIC BENTO UI - JAVASCRIPT +// Portfolio Website for Tabish Ali +// =================================== + +// ===== GLOBAL VARIABLES ===== +let currentTestimonial = 0; +const particles = []; +let cursorX = 0; +let cursorY = 0; + +// ===== INITIALIZATION ===== +document.addEventListener('DOMContentLoaded', () => { + initMobileMenu(); + initSmoothScroll(); + initCursorSpotlight(); + initScrollAnimations(); + initCardHoverEffects(); + initCounterAnimations(); + initTestimonialCarousel(); + initContactForm(); + initProjectFilters(); + initParticleSystem(); + initNavHighlight(); +}); + +// ===== MOBILE MENU ===== +function initMobileMenu() { + const menuToggle = document.querySelector('.mobile-menu-toggle'); + const menuOverlay = document.querySelector('.mobile-menu-overlay'); + const menuClose = document.querySelector('.mobile-menu-close'); + const mobileNavItems = document.querySelectorAll('.mobile-nav-item'); + + if (menuToggle && menuOverlay) { + menuToggle.addEventListener('click', () => { + menuOverlay.classList.add('active'); + document.body.style.overflow = 'hidden'; + }); + + menuClose?.addEventListener('click', closeMenu); + + mobileNavItems.forEach(item => { + item.addEventListener('click', closeMenu); + }); + + function closeMenu() { + menuOverlay.classList.remove('active'); + document.body.style.overflow = ''; + } + } +} + +// ===== SMOOTH SCROLL ===== +function initSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + + if (target) { + const headerOffset = 80; + const elementPosition = target.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - headerOffset; + + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } + }); + }); +} + +// ===== CURSOR SPOTLIGHT ===== +function initCursorSpotlight() { + const spotlight = document.querySelector('.cursor-spotlight'); + + if (!spotlight) return; + + document.addEventListener('mousemove', (e) => { + cursorX = e.clientX; + cursorY = e.clientY; + + spotlight.style.left = `${cursorX}px`; + spotlight.style.top = `${cursorY}px`; + }); + + // Update glow position on bento cards + const bentoCards = document.querySelectorAll('.bento-card'); + + bentoCards.forEach(card => { + card.addEventListener('mousemove', (e) => { + const rect = card.getBoundingClientRect(); + const x = ((e.clientX - rect.left) / rect.width) * 100; + const y = ((e.clientY - rect.top) / rect.height) * 100; + + card.style.setProperty('--glow-x', `${x}%`); + card.style.setProperty('--glow-y', `${y}%`); + }); + }); +} + +// ===== SCROLL ANIMATIONS ===== +function initScrollAnimations() { + const observerOptions = { + threshold: 0.2, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry, index) => { + if (entry.isIntersecting) { + setTimeout(() => { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + }, index * 100); + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + // Observe elements with animation + const animatedElements = document.querySelectorAll(` + .bento-card, + .timeline-card, + .section-header, + .about-text, + .project-card, + .service-card + `); + + animatedElements.forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(40px)'; + el.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; + observer.observe(el); + }); +} + +// ===== CARD HOVER EFFECTS ===== +function initCardHoverEffects() { + const cards = document.querySelectorAll('.bento-card'); + + cards.forEach(card => { + card.addEventListener('mouseenter', (e) => { + createParticles(card); + }); + + card.addEventListener('mouseleave', () => { + removeParticles(card); + }); + + // Tilt effect (optional) + card.addEventListener('mousemove', (e) => { + const rect = card.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const centerX = rect.width / 2; + const centerY = rect.height / 2; + + const rotateX = (y - centerY) / 20; + const rotateY = (centerX - x) / 20; + + // Subtle tilt - can be disabled + // card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-4px)`; + }); + + card.addEventListener('mouseleave', () => { + card.style.transform = ''; + }); + }); +} + +// ===== PARTICLE SYSTEM ===== +function initParticleSystem() { + // Particles are created dynamically on hover +} + +function createParticles(card) { + const particleCount = 12; + const rect = card.getBoundingClientRect(); + + for (let i = 0; i < particleCount; i++) { + const particle = document.createElement('div'); + particle.className = 'hover-particle'; + particle.style.cssText = ` + position: absolute; + width: 4px; + height: 4px; + background: rgba(132, 0, 255, 1); + border-radius: 50%; + box-shadow: 0 0 6px rgba(132, 0, 255, 0.6); + pointer-events: none; + z-index: 10; + `; + + const x = Math.random() * rect.width; + const y = Math.random() * rect.height; + + particle.style.left = `${x}px`; + particle.style.top = `${y}px`; + + card.appendChild(particle); + + animateParticle(particle); + } +} + +function animateParticle(particle) { + const duration = 2000 + Math.random() * 2000; + const moveX = (Math.random() - 0.5) * 100; + const moveY = (Math.random() - 0.5) * 100; + + particle.animate([ + { + transform: 'translate(0, 0) rotate(0deg)', + opacity: 0.3 + }, + { + transform: `translate(${moveX}px, ${moveY}px) rotate(360deg)`, + opacity: 1 + }, + { + transform: `translate(${moveX * 2}px, ${moveY * 2}px) rotate(720deg)`, + opacity: 0 + } + ], { + duration: duration, + iterations: Infinity, + easing: 'linear' + }); +} + +function removeParticles(card) { + const particles = card.querySelectorAll('.hover-particle'); + particles.forEach(particle => { + particle.style.transition = 'opacity 0.3s ease'; + particle.style.opacity = '0'; + setTimeout(() => particle.remove(), 300); + }); +} + +// ===== COUNTER ANIMATIONS ===== +function initCounterAnimations() { + const counters = document.querySelectorAll('.stat-number[data-count]'); + + const observerOptions = { + threshold: 0.5 + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateCounter(entry.target); + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + counters.forEach(counter => observer.observe(counter)); +} + +function animateCounter(element) { + const target = parseInt(element.getAttribute('data-count')); + const duration = 2000; + const steps = 60; + const increment = target / steps; + let current = 0; + + const timer = setInterval(() => { + current += increment; + if (current >= target) { + element.textContent = Math.floor(target); + clearInterval(timer); + } else { + element.textContent = Math.floor(current); + } + }, duration / steps); +} + +// ===== TESTIMONIAL CAROUSEL ===== +function initTestimonialCarousel() { + const track = document.querySelector('.testimonial-track'); + const cards = document.querySelectorAll('.testimonial-card'); + const dots = document.querySelectorAll('.carousel-dots .dot'); + const leftArrow = document.querySelector('.arrow-left'); + const rightArrow = document.querySelector('.arrow-right'); + + if (!track || cards.length === 0) return; + + let currentIndex = 0; + const cardWidth = cards[0].offsetWidth + 24; // Include gap + let autoplayInterval; + + function updateCarousel() { + track.style.transform = `translateX(-${currentIndex * cardWidth}px)`; + + dots.forEach((dot, index) => { + dot.classList.toggle('active', index === currentIndex); + }); + } + + function nextSlide() { + currentIndex = (currentIndex + 1) % cards.length; + updateCarousel(); + } + + function prevSlide() { + currentIndex = (currentIndex - 1 + cards.length) % cards.length; + updateCarousel(); + } + + function startAutoplay() { + autoplayInterval = setInterval(nextSlide, 5000); + } + + function stopAutoplay() { + clearInterval(autoplayInterval); + } + + // Arrow navigation + leftArrow?.addEventListener('click', () => { + prevSlide(); + stopAutoplay(); + startAutoplay(); + }); + + rightArrow?.addEventListener('click', () => { + nextSlide(); + stopAutoplay(); + startAutoplay(); + }); + + // Dot navigation + dots.forEach((dot, index) => { + dot.addEventListener('click', () => { + currentIndex = index; + updateCarousel(); + stopAutoplay(); + startAutoplay(); + }); + }); + + // Touch/swipe support + let startX = 0; + let isDragging = false; + + track.addEventListener('touchstart', (e) => { + startX = e.touches[0].clientX; + isDragging = true; + stopAutoplay(); + }); + + track.addEventListener('touchmove', (e) => { + if (!isDragging) return; + const currentX = e.touches[0].clientX; + const diff = startX - currentX; + + if (Math.abs(diff) > 50) { + if (diff > 0) { + nextSlide(); + } else { + prevSlide(); + } + isDragging = false; + } + }); + + track.addEventListener('touchend', () => { + isDragging = false; + startAutoplay(); + }); + + // Pause on hover + track.addEventListener('mouseenter', stopAutoplay); + track.addEventListener('mouseleave', startAutoplay); + + // Start autoplay + startAutoplay(); +} + +// ===== CONTACT FORM ===== +function initContactForm() { + const form = document.getElementById('contactForm'); + + if (!form) return; + + form.addEventListener('submit', async (e) => { + e.preventDefault(); + + // Validate form + if (!validateForm(form)) { + return; + } + + // Get form data + const formData = { + name: form.name.value, + email: form.email.value, + subject: form.subject.value, + message: form.message.value + }; + + // Submit button + const submitBtn = form.querySelector('.submit-btn'); + submitBtn.classList.add('loading'); + submitBtn.disabled = true; + + // Simulate form submission (replace with actual API call) + setTimeout(() => { + submitBtn.classList.remove('loading'); + submitBtn.classList.add('success'); + submitBtn.querySelector('.btn-text').textContent = 'Message Sent! ✓'; + submitBtn.style.background = 'linear-gradient(135deg, #00c853, #64dd17)'; + + // Reset form + form.reset(); + + // Reset button after 3 seconds + setTimeout(() => { + submitBtn.classList.remove('success'); + submitBtn.querySelector('.btn-text').textContent = 'Send Message'; + submitBtn.style.background = ''; + submitBtn.disabled = false; + }, 3000); + + console.log('Form submitted:', formData); + }, 2000); + }); + + // Real-time validation + const inputs = form.querySelectorAll('input, textarea'); + inputs.forEach(input => { + input.addEventListener('blur', () => { + validateField(input); + }); + + input.addEventListener('input', () => { + if (input.parentElement.classList.contains('error')) { + validateField(input); + } + }); + }); +} + +function validateForm(form) { + let isValid = true; + + const inputs = form.querySelectorAll('input[required], textarea[required]'); + inputs.forEach(input => { + if (!validateField(input)) { + isValid = false; + } + }); + + return isValid; +} + +function validateField(field) { + const formGroup = field.parentElement; + const errorMessage = formGroup.querySelector('.error-message'); + + // Clear previous error + formGroup.classList.remove('error'); + + // Check if empty + if (!field.value.trim()) { + showError(formGroup, errorMessage, 'This field is required'); + return false; + } + + // Email validation + if (field.type === 'email') { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(field.value)) { + showError(formGroup, errorMessage, 'Please enter a valid email'); + return false; + } + } + + return true; +} + +function showError(formGroup, errorElement, message) { + formGroup.classList.add('error'); + if (errorElement) { + errorElement.textContent = message; + } + + // Shake animation + formGroup.animate([ + { transform: 'translateX(0)' }, + { transform: 'translateX(-10px)' }, + { transform: 'translateX(10px)' }, + { transform: 'translateX(-10px)' }, + { transform: 'translateX(0)' } + ], { + duration: 400, + easing: 'ease-in-out' + }); +} + +// ===== PROJECT FILTERS ===== +function initProjectFilters() { + const filterBtns = document.querySelectorAll('.filter-btn'); + const projectCards = document.querySelectorAll('.project-card'); + + if (filterBtns.length === 0) return; + + filterBtns.forEach(btn => { + btn.addEventListener('click', () => { + // Update active button + filterBtns.forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + + const filter = btn.getAttribute('data-filter'); + + // Filter projects + projectCards.forEach(card => { + const category = card.getAttribute('data-category'); + + if (filter === 'all' || category === filter) { + card.style.display = 'flex'; + setTimeout(() => { + card.style.opacity = '1'; + card.style.transform = 'translateY(0)'; + }, 10); + } else { + card.style.opacity = '0'; + card.style.transform = 'translateY(20px)'; + setTimeout(() => { + card.style.display = 'none'; + }, 300); + } + }); + }); + }); +} + +// ===== NAVIGATION HIGHLIGHT ===== +function initNavHighlight() { + const sections = document.querySelectorAll('section[id]'); + const navItems = document.querySelectorAll('.nav-item'); + + if (sections.length === 0 || navItems.length === 0) return; + + const observerOptions = { + threshold: 0.3, + rootMargin: '-80px 0px -50% 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const id = entry.target.getAttribute('id'); + + navItems.forEach(item => { + item.classList.remove('active'); + if (item.getAttribute('href') === `#${id}`) { + item.classList.add('active'); + } + }); + } + }); + }, observerOptions); + + sections.forEach(section => observer.observe(section)); +} + +// ===== CLICK RIPPLE EFFECT ===== +function createRipple(e, element) { + const ripple = document.createElement('div'); + const rect = element.getBoundingClientRect(); + + const size = Math.max(rect.width, rect.height); + const x = e.clientX - rect.left - size / 2; + const y = e.clientY - rect.top - size / 2; + + ripple.style.cssText = ` + position: absolute; + width: ${size}px; + height: ${size}px; + border-radius: 50%; + background: rgba(132, 0, 255, 0.3); + left: ${x}px; + top: ${y}px; + pointer-events: none; + z-index: 1; + `; + + element.style.position = 'relative'; + element.style.overflow = 'hidden'; + element.appendChild(ripple); + + ripple.animate([ + { transform: 'scale(0)', opacity: 1 }, + { transform: 'scale(1)', opacity: 0 } + ], { + duration: 800, + easing: 'ease-out' + }).onfinish = () => ripple.remove(); +} + +// Add ripple to buttons +document.querySelectorAll('.btn, .cta-button').forEach(btn => { + btn.addEventListener('click', (e) => { + createRipple(e, btn); + }); +}); + +// ===== HEADER SCROLL EFFECT ===== +let lastScroll = 0; +const header = document.querySelector('.main-header'); + +window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.style.background = 'rgba(6, 0, 16, 0.95)'; + header.style.boxShadow = '0 4px 30px rgba(132, 0, 255, 0.1)'; + } else { + header.style.background = 'rgba(6, 0, 16, 0.85)'; + header.style.boxShadow = 'none'; + } + + lastScroll = currentScroll; +}); + +// ===== LAZY LOADING IMAGES ===== +function initLazyLoading() { + const images = document.querySelectorAll('img[data-src]'); + + const imageObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.getAttribute('data-src'); + img.removeAttribute('data-src'); + imageObserver.unobserve(img); + } + }); + }); + + images.forEach(img => imageObserver.observe(img)); +} + +// Initialize lazy loading +initLazyLoading(); + +// ===== PROGRESS BAR ANIMATION ===== +function initProgressBars() { + const progressBars = document.querySelectorAll('.progress-fill'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const bar = entry.target; + const width = bar.style.width; + bar.style.width = '0'; + setTimeout(() => { + bar.style.width = width; + }, 100); + observer.unobserve(bar); + } + }); + }, { threshold: 0.5 }); + + progressBars.forEach(bar => observer.observe(bar)); +} + +initProgressBars(); + +// ===== NEWSLETTER FORM ===== +const newsletterForm = document.querySelector('.newsletter-form'); +if (newsletterForm) { + newsletterForm.addEventListener('submit', (e) => { + e.preventDefault(); + const email = newsletterForm.querySelector('input').value; + + // Simulate subscription + alert(`Thank you for subscribing with: ${email}`); + newsletterForm.reset(); + }); +} + +// ===== CTA BUTTON ACTIONS ===== +const ctaButtons = document.querySelectorAll('.cta-button, .btn-primary'); +ctaButtons.forEach(btn => { + if (btn.textContent.includes('View') || btn.textContent.includes('Work')) { + btn.addEventListener('click', () => { + document.querySelector('#projects')?.scrollIntoView({ behavior: 'smooth' }); + }); + } + if (btn.textContent.includes('Talk') || btn.textContent.includes('Hire')) { + btn.addEventListener('click', () => { + document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' }); + }); + } +}); + +// ===== CONSOLE SIGNATURE ===== +console.log('%c🚀 Magic Bento UI Portfolio', 'color: #8400FF; font-size: 20px; font-weight: bold;'); +console.log('%cDesigned & Developed by Tabish Ali', 'color: #a855f7; font-size: 14px;'); +console.log('%cInterested in working together? Let\'s talk!', 'color: #ffffff; font-size: 12px;'); + +// ===== PERFORMANCE MONITORING ===== +window.addEventListener('load', () => { + const loadTime = performance.now(); + console.log(`⚡ Page loaded in ${(loadTime / 1000).toFixed(2)}s`); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c509e60 --- /dev/null +++ b/styles.css @@ -0,0 +1,2097 @@ +/* =================================== + MAGIC BENTO UI - DESIGN SYSTEM + Portfolio Website for Tabish Ali + =================================== */ + +/* ===== CSS VARIABLES ===== */ +:root { + /* Colors */ + --primary-bg: #060010; + --secondary-bg: #0a0018; + --accent-purple: #8400FF; + --purple-glow: rgba(132, 0, 255, 0.2); + --border-color: #392e4e; + --text-primary: #ffffff; + --text-secondary: rgba(255, 255, 255, 0.7); + --text-faded: rgba(255, 255, 255, 0.5); + + /* Typography */ + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --h1-size: clamp(48px, 6vw, 72px); + --h2-size: clamp(32px, 4vw, 48px); + --h3-size: clamp(24px, 3vw, 32px); + --body-large: clamp(16px, 2vw, 20px); + --body-regular: 16px; + --body-small: 14px; + --caption: 12px; + + /* Spacing */ + --base-unit: 8px; + --section-padding: 120px; + --section-padding-mobile: 60px; + --container-max-width: 1400px; + --grid-gap: 16px; + --card-padding: 24px; + --border-radius: 20px; + --border-radius-small: 12px; + + /* Effects */ + --transition: 0.3s ease; + --glow-x: 50%; + --glow-y: 50%; +} + +/* ===== RESET & BASE STYLES ===== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + overflow-x: hidden; +} + +body { + font-family: var(--font-family); + background-color: var(--primary-bg); + color: var(--text-primary); + line-height: 1.6; + overflow-x: hidden; + position: relative; +} + +/* ===== CURSOR SPOTLIGHT ===== */ +.cursor-spotlight { + position: fixed; + width: 800px; + height: 800px; + background: radial-gradient(circle, rgba(132, 0, 255, 0.15), transparent 70%); + border-radius: 50%; + pointer-events: none; + transform: translate(-50%, -50%); + z-index: 1; + mix-blend-mode: screen; + transition: opacity 0.2s ease; + opacity: 0; +} + +body:hover .cursor-spotlight { + opacity: 1; +} + +/* ===== HEADER ===== */ +.main-header { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 80px; + background: rgba(6, 0, 16, 0.85); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(132, 0, 255, 0.1); + z-index: 1000; + transition: var(--transition); +} + +.navigation-container { + max-width: var(--container-max-width); + margin: 0 auto; + padding: 0 80px; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.logo-text { + font-size: 24px; + font-weight: 600; + color: var(--text-primary); + letter-spacing: 1px; + transition: var(--transition); + cursor: pointer; +} + +.logo-text:hover { + transform: scale(1.05); + text-shadow: 0 0 20px rgba(132, 0, 255, 0.6); +} + +.logo-particles { + position: absolute; + right: -30px; + top: 50%; + transform: translateY(-50%); +} + +.logo-particles .particle { + position: absolute; + width: 4px; + height: 4px; + background: var(--accent-purple); + border-radius: 50%; + box-shadow: 0 0 6px rgba(132, 0, 255, 0.8); + animation: orbit 3s linear infinite; +} + +.logo-particles .particle:nth-child(1) { + animation-delay: 0s; +} + +.logo-particles .particle:nth-child(2) { + animation-delay: 1s; +} + +.logo-particles .particle:nth-child(3) { + animation-delay: 2s; +} + +@keyframes orbit { + 0% { + transform: rotate(0deg) translateX(20px); + } + 100% { + transform: rotate(360deg) translateX(20px); + } +} + +.nav-menu { + display: flex; + gap: 32px; +} + +.nav-item { + font-size: 14px; + font-weight: 400; + letter-spacing: 0.5px; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.6); + text-decoration: none; + padding-bottom: 4px; + border-bottom: 2px solid transparent; + transition: var(--transition); + position: relative; +} + +.nav-item:hover, +.nav-item.active { + color: var(--text-primary); + border-bottom-color: var(--accent-purple); +} + +.cta-button { + width: 140px; + height: 44px; + background: linear-gradient(135deg, #8400FF, #a855f7); + border: none; + border-radius: var(--border-radius-small); + color: var(--text-primary); + font-size: 14px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + cursor: pointer; + transition: var(--transition); +} + +.cta-button:hover { + transform: scale(1.05); + box-shadow: 0 0 30px rgba(132, 0, 255, 0.5); + filter: brightness(1.1); +} + +.mobile-menu-toggle { + display: none; + flex-direction: column; + gap: 6px; + cursor: pointer; + z-index: 1001; +} + +.mobile-menu-toggle span { + width: 25px; + height: 2px; + background: var(--text-primary); + transition: var(--transition); +} + +.mobile-menu-overlay { + position: fixed; + top: 0; + right: -100%; + width: 100%; + height: 100vh; + background: rgba(6, 0, 16, 0.98); + backdrop-filter: blur(20px); + z-index: 999; + display: flex; + align-items: center; + justify-content: center; + transition: right 0.4s ease; +} + +.mobile-menu-overlay.active { + right: 0; +} + +.mobile-menu-close { + position: absolute; + top: 30px; + right: 30px; + font-size: 40px; + color: var(--text-primary); + cursor: pointer; + transition: var(--transition); +} + +.mobile-menu-close:hover { + color: var(--accent-purple); + transform: rotate(90deg); +} + +.mobile-menu-items { + display: flex; + flex-direction: column; + gap: 32px; + text-align: center; +} + +.mobile-nav-item { + font-size: 24px; + font-weight: 500; + color: var(--text-secondary); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 1px; + transition: var(--transition); +} + +.mobile-nav-item:hover { + color: var(--accent-purple); + transform: translateX(10px); +} + +/* ===== BUTTONS ===== */ +.btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 16px 32px; + border-radius: var(--border-radius-small); + font-size: 16px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + cursor: pointer; + transition: var(--transition); + border: none; + text-decoration: none; +} + +.btn-primary { + background: linear-gradient(135deg, #8400FF, #a855f7); + color: var(--text-primary); +} + +.btn-primary:hover { + transform: scale(1.05); + box-shadow: 0 0 30px rgba(132, 0, 255, 0.5); + filter: brightness(1.1); +} + +.btn-secondary { + background: transparent; + border: 2px solid var(--accent-purple); + color: var(--text-primary); +} + +.btn-secondary:hover { + background: var(--accent-purple); + box-shadow: 0 0 20px rgba(132, 0, 255, 0.4); +} + +.btn-icon { + transition: transform 0.3s ease; +} + +.btn:hover .btn-icon { + transform: translateX(4px); +} + +/* ===== HERO SECTION ===== */ +.hero-section { + min-height: 100vh; + padding: 0 80px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + background: var(--primary-bg); + padding-top: 80px; +} + +.hero-container { + max-width: var(--container-max-width); + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: center; + position: relative; + z-index: 2; +} + +.hero-content { + animation: fadeInUp 0.8s ease forwards; +} + +.hero-label { + display: inline-block; + background: rgba(132, 0, 255, 0.1); + border: 1px solid rgba(132, 0, 255, 0.3); + padding: 8px 16px; + border-radius: 20px; + font-size: 14px; + color: var(--text-secondary); + margin-bottom: 24px; + animation: slideUp 0.6s ease 0.2s backwards; +} + +.hero-title { + font-size: var(--h1-size); + font-weight: 600; + line-height: 1.1; + margin-bottom: 24px; +} + +.title-line { + display: block; + animation: slideUp 0.8s ease 0.4s backwards; +} + +.title-line:nth-child(2) { + animation-delay: 0.6s; +} + +.gradient-text { + background: linear-gradient(135deg, #8400FF, #e879f9); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-description { + font-size: var(--body-large); + color: var(--text-secondary); + line-height: 1.8; + max-width: 600px; + margin-bottom: 32px; + animation: slideUp 0.8s ease 0.8s backwards; +} + +.hero-cta-group { + display: flex; + gap: 16px; + margin-bottom: 48px; + animation: slideUp 0.8s ease 1.2s backwards; +} + +.hero-stats { + display: flex; + gap: 32px; + align-items: center; + animation: slideUp 0.8s ease 1.5s backwards; +} + +.stat-box { + display: flex; + flex-direction: column; +} + +.stat-number { + font-size: 48px; + font-weight: 600; + color: var(--accent-purple); + line-height: 1; + margin-bottom: 8px; +} + +.stat-number::after { + content: '+'; +} + +.stat-label { + font-size: 14px; + color: var(--text-secondary); +} + +.stat-divider { + width: 1px; + height: 40px; + background: rgba(132, 0, 255, 0.2); +} + +.hero-visual { + display: flex; + justify-content: center; + align-items: center; + animation: fadeIn 1s ease 0.8s backwards; +} + +.hero-card { + width: 400px; + height: 500px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + animation: float 6s ease-in-out infinite; +} + +.hero-image-placeholder { + display: flex; + align-items: center; + justify-content: center; +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-20px); + } +} + +.hero-background-effects { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + overflow: hidden; +} + +.gradient-orb { + position: absolute; + width: 800px; + height: 800px; + border-radius: 50%; + background: radial-gradient(circle, rgba(132, 0, 255, 0.15), transparent 70%); + filter: blur(120px); + animation: orbFloat 20s ease-in-out infinite; +} + +.orb-1 { + top: -200px; + right: -200px; +} + +.orb-2 { + bottom: -200px; + left: -200px; + animation-delay: 10s; +} + +@keyframes orbFloat { + 0%, 100% { + transform: translate(0, 0); + } + 50% { + transform: translate(100px, 100px); + } +} + +.grid-pattern { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + linear-gradient(rgba(132, 0, 255, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(132, 0, 255, 0.05) 1px, transparent 1px); + background-size: 40px 40px; + opacity: 0.3; +} + +.scroll-indicator { + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + animation: bounce 2s infinite; + z-index: 2; +} + +.scroll-indicator span { + font-size: 12px; + color: var(--text-faded); +} + +.mouse-icon { + width: 24px; + height: 36px; + border: 2px solid rgba(132, 0, 255, 0.4); + border-radius: 12px; + position: relative; +} + +.mouse-icon::before { + content: ''; + position: absolute; + top: 6px; + left: 50%; + transform: translateX(-50%); + width: 4px; + height: 8px; + background: var(--accent-purple); + border-radius: 2px; + animation: mouseScroll 2s infinite; +} + +@keyframes mouseScroll { + 0% { + opacity: 1; + transform: translateX(-50%) translateY(0); + } + 100% { + opacity: 0; + transform: translateX(-50%) translateY(12px); + } +} + +@keyframes bounce { + 0%, 100% { + transform: translateX(-50%) translateY(0); + } + 50% { + transform: translateX(-50%) translateY(10px); + } +} + +/* ===== BENTO CARDS ===== */ +.bento-card { + background: var(--primary-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: var(--card-padding); + position: relative; + overflow: hidden; + transition: all 0.3s ease; +} + +.bento-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 30px rgba(132, 0, 255, 0.2); + border-color: rgba(132, 0, 255, 0.5); +} + +.card-glow { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient( + circle at var(--glow-x) var(--glow-y), + rgba(132, 0, 255, 0.15), + transparent 50% + ); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +.bento-card:hover .card-glow { + opacity: 1; +} + +/* ===== SECTIONS ===== */ +section { + padding: var(--section-padding) 80px; + position: relative; + max-width: var(--container-max-width); + margin: 0 auto; +} + +.section-header { + text-align: center; + margin-bottom: 80px; +} + +.section-label { + font-size: 12px; + font-weight: 500; + letter-spacing: 2px; + text-transform: uppercase; + color: var(--accent-purple); + display: block; + margin-bottom: 16px; +} + +.section-title { + font-size: var(--h2-size); + font-weight: 600; + margin-bottom: 16px; +} + +.section-description { + font-size: 18px; + color: var(--text-secondary); + max-width: 700px; + margin: 0 auto; + line-height: 1.8; +} + +/* ===== ABOUT SECTION ===== */ +.about-section { + background: var(--secondary-bg); +} + +.about-content { + display: grid; + grid-template-columns: 400px 1fr; + gap: 60px; + margin-bottom: 60px; + align-items: start; +} + +.about-image-card { + height: 500px; + display: flex; + align-items: center; + justify-content: center; +} + +.about-text p { + font-size: 16px; + color: rgba(255, 255, 255, 0.8); + line-height: 1.8; + margin-bottom: 24px; +} + +.about-highlights { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.highlight-card { + padding: 32px; +} + +.highlight-icon { + font-size: 48px; + margin-bottom: 16px; +} + +.highlight-title { + font-size: 20px; + font-weight: 500; + margin-bottom: 8px; +} + +.highlight-description { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.6; +} + +/* ===== SKILLS SECTION ===== */ +.bento-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--grid-gap); +} + +.skill-card { + min-height: 200px; +} + +.card-title { + font-size: 24px; + font-weight: 600; + margin-bottom: 20px; +} + +.tech-stack-card { + padding: 32px; +} + +.tech-icons { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + margin-top: 24px; +} + +.tech-icon { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + padding: 16px; + background: rgba(132, 0, 255, 0.05); + border-radius: 12px; + transition: var(--transition); +} + +.tech-icon:hover { + transform: translateY(-4px) rotate(5deg); + background: rgba(132, 0, 255, 0.1); +} + +.icon-emoji { + font-size: 48px; + filter: drop-shadow(0 0 10px rgba(132, 0, 255, 0.3)); +} + +.tech-name { + font-size: 12px; + color: var(--text-secondary); + text-align: center; +} + +.category-card .category-icon { + font-size: 40px; + margin-bottom: 16px; +} + +.skill-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 12px; +} + +.skill-list li { + font-size: 14px; + color: var(--text-secondary); + padding-left: 20px; + position: relative; +} + +.skill-list li::before { + content: '→'; + position: absolute; + left: 0; + color: var(--accent-purple); +} + +.stats-card { + padding: 32px; +} + +.code-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + margin-top: 24px; +} + +.stat-item { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.stat-value { + font-size: 36px; + font-weight: 600; + color: var(--accent-purple); + line-height: 1; + margin-bottom: 8px; +} + +.stat-text { + font-size: 12px; + color: var(--text-secondary); +} + +.quote-card { + padding: 40px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + background: rgba(10, 0, 24, 0.5); + border-left: 4px solid var(--accent-purple); +} + +.quote-mark { + font-size: 72px; + color: rgba(132, 0, 255, 0.2); + line-height: 1; + margin-bottom: 16px; + font-family: Georgia, serif; +} + +.quote-text { + font-size: 18px; + font-style: italic; + color: var(--text-secondary); + margin-bottom: 16px; + line-height: 1.6; +} + +.quote-author { + font-size: 14px; + color: var(--accent-purple); +} + +.language-card { + padding: 28px; +} + +.language-bars { + display: flex; + flex-direction: column; + gap: 20px; + margin-top: 24px; +} + +.language-item { + display: flex; + flex-direction: column; + gap: 8px; +} + +.language-header { + display: flex; + justify-content: space-between; + font-size: 14px; + color: var(--text-secondary); +} + +.progress-bar { + height: 6px; + background: rgba(132, 0, 255, 0.1); + border-radius: 3px; + overflow: hidden; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, #8400FF, #a855f7); + border-radius: 3px; + transition: width 1s ease; +} + +/* ===== PROJECTS SECTION ===== */ +.projects-section { + background: var(--secondary-bg); +} + +.project-filters { + display: flex; + gap: 12px; + justify-content: center; + margin-bottom: 40px; + flex-wrap: wrap; +} + +.filter-btn { + padding: 12px 24px; + background: transparent; + border: 1px solid var(--border-color); + border-radius: 20px; + color: var(--text-secondary); + font-size: 14px; + cursor: pointer; + transition: var(--transition); +} + +.filter-btn:hover, +.filter-btn.active { + background: var(--accent-purple); + border-color: var(--accent-purple); + color: var(--text-primary); + box-shadow: 0 0 20px rgba(132, 0, 255, 0.3); +} + +.projects-grid { + margin-bottom: 60px; +} + +.project-card { + display: flex; + flex-direction: column; + overflow: hidden; + min-height: 300px; +} + +.featured-project { + min-height: 500px; +} + +.project-image { + position: relative; + flex: 1; + overflow: hidden; + border-radius: 12px; + margin-bottom: 20px; +} + +.project-image svg { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.project-card:hover .project-image svg { + transform: scale(1.1); +} + +.project-category-badge { + position: absolute; + top: 16px; + right: 16px; + background: rgba(132, 0, 255, 0.9); + backdrop-filter: blur(10px); + padding: 6px 14px; + border-radius: 20px; + font-size: 11px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + z-index: 2; +} + +.featured-project .project-content { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 32px; + background: linear-gradient(to top, rgba(6, 0, 16, 0.95), transparent); +} + +.project-title { + font-size: 20px; + font-weight: 600; + margin-bottom: 12px; +} + +.featured-project .project-title { + font-size: 32px; +} + +.project-description { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 16px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.tech-pills { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 16px; +} + +.tech-pill { + background: rgba(132, 0, 255, 0.1); + border: 1px solid rgba(132, 0, 255, 0.3); + padding: 4px 12px; + border-radius: 12px; + font-size: 11px; + color: var(--text-secondary); + transition: var(--transition); +} + +.tech-pill:hover { + background: rgba(132, 0, 255, 0.2); + border-color: var(--accent-purple); +} + +.project-links { + display: flex; + gap: 16px; +} + +.project-link { + color: var(--accent-purple); + font-size: 14px; + font-weight: 500; + text-decoration: none; + transition: var(--transition); +} + +.project-link:hover { + text-decoration: underline; + color: #a855f7; +} + +.view-more-section { + text-align: center; +} + +/* ===== EXPERIENCE/TIMELINE SECTION ===== */ +.timeline-container { + position: relative; + max-width: 1000px; + margin: 0 auto; +} + +.timeline-line { + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 2px; + background: var(--border-color); + transform: translateX(-50%); +} + +.timeline-line::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 50%; + background: linear-gradient(to bottom, var(--accent-purple), transparent); +} + +.timeline-items { + display: flex; + flex-direction: column; + gap: 60px; +} + +.timeline-item { + position: relative; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; +} + +.timeline-item:nth-child(odd) .timeline-card { + grid-column: 1; +} + +.timeline-item:nth-child(even) .timeline-card { + grid-column: 2; +} + +.timeline-dot { + position: absolute; + left: 50%; + top: 30px; + transform: translateX(-50%); + width: 16px; + height: 16px; + background: linear-gradient(135deg, #8400FF, #a855f7); + border: 4px solid var(--primary-bg); + border-radius: 50%; + box-shadow: 0 0 20px rgba(132, 0, 255, 0.6); + z-index: 2; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { + box-shadow: 0 0 20px rgba(132, 0, 255, 0.6); + } + 50% { + box-shadow: 0 0 40px rgba(132, 0, 255, 0.8); + } +} + +.timeline-card { + background: var(--secondary-bg); +} + +.timeline-date { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(132, 0, 255, 0.1); + border: 1px solid rgba(132, 0, 255, 0.3); + padding: 6px 14px; + border-radius: 12px; + font-size: 13px; + color: var(--text-secondary); + margin-bottom: 16px; +} + +.timeline-title { + font-size: 24px; + font-weight: 600; + margin-bottom: 8px; +} + +.timeline-company { + font-size: 18px; + color: var(--accent-purple); + margin-bottom: 16px; + display: flex; + align-items: center; + gap: 8px; +} + +.timeline-description { + font-size: 15px; + color: rgba(255, 255, 255, 0.75); + line-height: 1.7; + margin-bottom: 20px; +} + +.timeline-achievements { + list-style: none; + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 20px; +} + +.timeline-achievements li { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.6; +} + +.timeline-skills { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +/* ===== SERVICES SECTION ===== */ +.services-section { + background: var(--secondary-bg); +} + +.services-grid { + grid-template-columns: repeat(2, 1fr); +} + +.service-card { + padding: 40px; + position: relative; + min-height: 320px; + display: flex; + flex-direction: column; +} + +.service-number { + position: absolute; + top: 20px; + right: 20px; + font-size: 72px; + font-weight: 700; + color: rgba(132, 0, 255, 0.1); + line-height: 1; +} + +.service-icon { + font-size: 64px; + margin-bottom: 20px; + filter: drop-shadow(0 0 20px rgba(132, 0, 255, 0.3)); +} + +.service-title { + font-size: 28px; + font-weight: 600; + margin-bottom: 16px; +} + +.service-description { + font-size: 15px; + color: rgba(255, 255, 255, 0.75); + line-height: 1.7; + margin-bottom: 20px; +} + +.service-features { + list-style: none; + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 24px; + flex: 1; +} + +.service-features li { + font-size: 14px; + color: var(--text-secondary); + padding-left: 20px; + position: relative; +} + +.service-features li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--accent-purple); + font-weight: bold; +} + +.service-link { + color: var(--accent-purple); + font-size: 14px; + font-weight: 500; + text-decoration: none; + transition: var(--transition); + align-self: flex-start; +} + +.service-link:hover { + color: #a855f7; + transform: translateX(4px); +} + +/* ===== TESTIMONIALS SECTION ===== */ +.testimonials-carousel { + position: relative; + max-width: 1200px; + margin: 0 auto 40px; + overflow: hidden; +} + +.testimonial-track { + display: flex; + gap: 24px; + transition: transform 0.6s ease; +} + +.testimonial-card { + min-width: 450px; + background: var(--secondary-bg); + padding: 40px; + flex-shrink: 0; +} + +.quote-icon { + font-size: 48px; + color: rgba(132, 0, 255, 0.2); + line-height: 1; + margin-bottom: 20px; + font-family: Georgia, serif; +} + +.testimonial-text { + font-size: 16px; + line-height: 1.8; + color: rgba(255, 255, 255, 0.85); + font-style: italic; + margin-bottom: 24px; +} + +.rating-stars { + display: flex; + gap: 4px; + margin-bottom: 24px; +} + +.star { + color: var(--accent-purple); + font-size: 20px; +} + +.client-info { + display: flex; + gap: 16px; + align-items: center; +} + +.client-avatar { + width: 56px; + height: 56px; + border-radius: 50%; + background: linear-gradient(135deg, #8400FF, #a855f7); + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 18px; + border: 2px solid rgba(132, 0, 255, 0.3); + box-shadow: 0 0 20px rgba(132, 0, 255, 0.3); +} + +.client-name { + font-size: 18px; + font-weight: 600; + margin-bottom: 4px; +} + +.client-position { + font-size: 14px; + color: var(--accent-purple); + margin-bottom: 2px; +} + +.client-company { + font-size: 13px; + color: rgba(255, 255, 255, 0.6); +} + +.carousel-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 48px; + height: 48px; + border-radius: 50%; + background: rgba(132, 0, 255, 0.1); + border: 1px solid var(--border-color); + color: var(--text-primary); + font-size: 24px; + cursor: pointer; + transition: var(--transition); + z-index: 10; +} + +.carousel-arrow:hover { + background: var(--accent-purple); + border-color: var(--accent-purple); + box-shadow: 0 0 20px rgba(132, 0, 255, 0.4); +} + +.arrow-left { + left: -24px; +} + +.arrow-right { + right: -24px; +} + +.carousel-dots { + display: flex; + justify-content: center; + gap: 12px; +} + +.dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--border-color); + cursor: pointer; + transition: var(--transition); +} + +.dot.active { + width: 14px; + height: 14px; + background: var(--accent-purple); + box-shadow: 0 0 10px rgba(132, 0, 255, 0.5); +} + +/* ===== CONTACT SECTION ===== */ +.contact-section { + background: var(--secondary-bg); +} + +.contact-container { + display: grid; + grid-template-columns: 2fr 3fr; + gap: 60px; + margin-top: 60px; +} + +.contact-info-title { + font-size: 48px; + font-weight: 600; + margin-bottom: 16px; +} + +.contact-info-description { + font-size: 18px; + color: var(--text-secondary); + line-height: 1.8; + margin-bottom: 40px; +} + +.info-card { + background: var(--primary-bg); + padding: 24px; + margin-bottom: 16px; + display: flex; + gap: 20px; + align-items: center; +} + +.info-icon { + font-size: 32px; +} + +.info-content { + flex: 1; +} + +.info-label { + font-size: 12px; + color: rgba(255, 255, 255, 0.6); + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 4px; +} + +.info-value { + font-size: 16px; + color: var(--text-primary); + text-decoration: none; + transition: var(--transition); +} + +.info-value:hover { + color: var(--accent-purple); +} + +.status-dot { + display: inline-block; + width: 8px; + height: 8px; + background: #00ff00; + border-radius: 50%; + margin-right: 8px; + animation: blink 2s infinite; +} + +@keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} + +.contact-form-card { + background: var(--primary-bg); + padding: 48px; +} + +.contact-form { + display: flex; + flex-direction: column; + gap: 24px; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 8px; +} + +.form-group label { + font-size: 14px; + color: var(--text-secondary); + font-weight: 500; +} + +.form-group input, +.form-group textarea { + background: rgba(132, 0, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: var(--border-radius-small); + padding: 16px 20px; + font-size: 16px; + color: var(--text-primary); + font-family: var(--font-family); + transition: var(--transition); +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: rgba(255, 255, 255, 0.4); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border: 2px solid var(--accent-purple); + box-shadow: 0 0 0 3px rgba(132, 0, 255, 0.1); +} + +.form-group textarea { + resize: vertical; + min-height: 150px; +} + +.error-message { + font-size: 12px; + color: #ff4444; + display: none; +} + +.form-group.error .error-message { + display: block; +} + +.form-group.error input, +.form-group.error textarea { + border-color: #ff4444; +} + +.submit-btn { + width: 100%; + height: 54px; + margin-top: 8px; + position: relative; +} + +.submit-btn.loading .btn-text { + display: none; +} + +.submit-btn.loading .btn-loading { + display: block !important; +} + +.social-links-section { + text-align: center; + margin-top: 60px; +} + +.social-title { + font-size: 14px; + color: rgba(255, 255, 255, 0.6); + margin-bottom: 24px; +} + +.social-links { + display: flex; + justify-content: center; + gap: 20px; +} + +.social-link { + width: 48px; + height: 48px; + background: rgba(132, 0, 255, 0.1); + border: 1px solid var(--border-color); + border-radius: var(--border-radius-small); + display: flex; + align-items: center; + justify-content: center; + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + transition: var(--transition); + position: relative; +} + +.social-link:hover { + background: linear-gradient(135deg, #8400FF, #a855f7); + border-color: var(--accent-purple); + transform: translateY(-4px) rotate(5deg); + box-shadow: 0 8px 20px rgba(132, 0, 255, 0.3); + color: var(--text-primary); +} + +/* ===== FOOTER ===== */ +.main-footer { + background: var(--primary-bg); + border-top: 1px solid var(--border-color); + padding: 80px 80px 32px; + position: relative; + overflow: hidden; +} + +.footer-content { + max-width: var(--container-max-width); + margin: 0 auto; + display: grid; + grid-template-columns: 2fr 1fr 1fr 2fr; + gap: 60px; + margin-bottom: 60px; +} + +.footer-logo { + font-size: 28px; + font-weight: 700; + margin-bottom: 20px; + text-shadow: 0 0 20px rgba(132, 0, 255, 0.3); +} + +.footer-tagline { + font-size: 15px; + color: rgba(255, 255, 255, 0.65); + line-height: 1.6; + max-width: 280px; + margin-bottom: 24px; +} + +.footer-social { + display: flex; + gap: 12px; +} + +.footer-social-icon { + width: 36px; + height: 36px; + border-radius: 8px; + background: rgba(132, 0, 255, 0.1); + border: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-secondary); + text-decoration: none; + font-size: 12px; + font-weight: 600; + transition: var(--transition); +} + +.footer-social-icon:hover { + background: var(--accent-purple); + color: var(--text-primary); + transform: translateY(-2px); +} + +.footer-links-title { + font-size: 14px; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 20px; + color: var(--text-primary); +} + +.footer-links-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 12px; +} + +.footer-links-list a { + font-size: 15px; + color: var(--text-secondary); + text-decoration: none; + transition: var(--transition); + display: inline-block; +} + +.footer-links-list a:hover { + color: var(--accent-purple); + transform: translateX(4px); +} + +.footer-newsletter-title { + font-size: 18px; + font-weight: 600; + margin-bottom: 12px; +} + +.footer-newsletter-description { + font-size: 14px; + color: rgba(255, 255, 255, 0.65); + margin-bottom: 20px; + line-height: 1.6; +} + +.newsletter-form { + position: relative; + display: flex; +} + +.newsletter-form input { + width: 100%; + height: 48px; + background: rgba(132, 0, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: var(--border-radius-small); + padding: 0 60px 0 16px; + color: var(--text-primary); + font-size: 14px; + font-family: var(--font-family); + transition: var(--transition); +} + +.newsletter-form input:focus { + outline: none; + border-color: var(--accent-purple); +} + +.newsletter-form button { + position: absolute; + right: 4px; + top: 4px; + width: 40px; + height: 40px; + background: linear-gradient(135deg, #8400FF, #a855f7); + border: none; + border-radius: 8px; + color: var(--text-primary); + font-size: 18px; + cursor: pointer; + transition: var(--transition); +} + +.newsletter-form button:hover { + transform: scale(1.1); + box-shadow: 0 0 20px rgba(132, 0, 255, 0.5); +} + +.footer-bottom { + max-width: var(--container-max-width); + margin: 0 auto; + padding-top: 32px; + border-top: 1px solid rgba(132, 0, 255, 0.1); + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-copyright { + font-size: 14px; + color: rgba(255, 255, 255, 0.5); +} + +.footer-meta-links { + display: flex; + gap: 24px; + align-items: center; +} + +.footer-meta-links a { + font-size: 13px; + color: rgba(255, 255, 255, 0.5); + text-decoration: none; + transition: var(--transition); +} + +.footer-meta-links a:hover { + color: var(--accent-purple); +} + +.separator { + color: rgba(255, 255, 255, 0.3); +} + +.footer-background-effects { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + overflow: hidden; +} + +.footer-gradient-orb { + position: absolute; + top: -200px; + right: -200px; + width: 600px; + height: 600px; + border-radius: 50%; + background: radial-gradient(circle, rgba(132, 0, 255, 0.1), transparent 70%); + filter: blur(100px); +} + +/* ===== ANIMATIONS ===== */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(40px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(40px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== RESPONSIVE DESIGN ===== */ + +/* Tablet */ +@media (max-width: 1024px) { + :root { + --section-padding: 80px; + } + + .navigation-container, + section, + .hero-section, + .main-footer { + padding-left: 40px; + padding-right: 40px; + } + + .bento-grid { + grid-template-columns: repeat(2, 1fr); + } + + .hero-container { + grid-template-columns: 1fr; + gap: 40px; + } + + .hero-visual { + order: -1; + } + + .hero-card { + width: 100%; + max-width: 400px; + } + + .about-content { + grid-template-columns: 1fr; + } + + .about-highlights { + grid-template-columns: repeat(2, 1fr); + } + + .timeline-item { + grid-template-columns: 1fr; + } + + .timeline-line { + left: 20px; + } + + .timeline-dot { + left: 20px; + } + + .timeline-item:nth-child(odd) .timeline-card, + .timeline-item:nth-child(even) .timeline-card { + grid-column: 1; + margin-left: 60px; + } + + .contact-container { + grid-template-columns: 1fr; + gap: 40px; + } + + .footer-content { + grid-template-columns: repeat(2, 1fr); + gap: 40px; + } + + .testimonial-card { + min-width: 380px; + } +} + +/* Mobile */ +@media (max-width: 768px) { + :root { + --section-padding: 60px; + } + + .navigation-container { + padding: 0 24px; + } + + section, + .hero-section, + .main-footer { + padding: var(--section-padding-mobile) 24px; + } + + .main-header { + height: 64px; + } + + .nav-menu, + .cta-section { + display: none; + } + + .mobile-menu-toggle { + display: flex; + } + + .logo-text { + font-size: 20px; + } + + .bento-grid { + grid-template-columns: 1fr; + } + + .bento-card { + grid-column: span 1 !important; + grid-row: span 1 !important; + } + + .hero-section { + min-height: auto; + padding-top: 100px; + padding-bottom: 60px; + } + + .hero-stats { + flex-wrap: wrap; + gap: 20px; + } + + .stat-divider { + display: none; + } + + .hero-cta-group { + flex-direction: column; + } + + .btn { + width: 100%; + justify-content: center; + } + + .section-header { + margin-bottom: 40px; + } + + .about-highlights { + grid-template-columns: 1fr; + } + + .about-image-card { + height: 400px; + } + + .project-filters { + overflow-x: auto; + justify-content: flex-start; + padding-bottom: 8px; + } + + .filter-btn { + white-space: nowrap; + } + + .services-grid { + grid-template-columns: 1fr; + } + + .testimonial-track { + padding: 0 20px; + } + + .testimonial-card { + min-width: 320px; + } + + .carousel-arrow { + display: none; + } + + .timeline-item:nth-child(odd) .timeline-card, + .timeline-item:nth-child(even) .timeline-card { + margin-left: 40px; + } + + .contact-info-title { + font-size: 32px; + } + + .contact-form-card { + padding: 32px 24px; + } + + .footer-content { + grid-template-columns: 1fr; + gap: 40px; + } + + .footer-bottom { + flex-direction: column; + gap: 20px; + text-align: center; + } + + .footer-meta-links { + flex-wrap: wrap; + justify-content: center; + } +} + +/* Small Mobile */ +@media (max-width: 480px) { + .hero-title { + font-size: 32px; + } + + .stat-number { + font-size: 36px; + } + + .hero-card { + height: 400px; + } + + .section-title { + font-size: 28px; + } + + .tech-icons { + grid-template-columns: repeat(2, 1fr); + } + + .testimonial-card { + min-width: 280px; + padding: 24px; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* Print Styles */ +@media print { + .main-header, + .mobile-menu-overlay, + .scroll-indicator, + .cursor-spotlight, + .main-footer { + display: none; + } + + body { + background: white; + color: black; + } +} diff --git a/verify.sh b/verify.sh new file mode 100755 index 0000000..f37bc80 --- /dev/null +++ b/verify.sh @@ -0,0 +1,35 @@ +#!/bin/bash +echo "===================================" +echo "Magic Bento UI Portfolio - Verification" +echo "===================================" +echo "" +echo "📁 File Structure:" +ls -lh index.html styles.css script.js README.md 2>/dev/null | awk '{print " " $9 " - " $5}' +echo "" +echo "📊 Code Statistics:" +echo " HTML Lines: $(wc -l < index.html)" +echo " CSS Lines: $(wc -l < styles.css)" +echo " JavaScript Lines: $(wc -l < script.js)" +echo " Total: $(cat index.html styles.css script.js | wc -l) lines" +echo "" +echo "🎨 Component Count:" +echo " Sections: $(grep -c '