diff --git a/README.md b/README.md new file mode 100644 index 00000000..1c564f9e --- /dev/null +++ b/README.md @@ -0,0 +1,61 @@ +# Tanjim Kamal - Personal Portfolio Website + +A modern, responsive portfolio website showcasing skills, projects, and achievements. + +## Features + +- **Responsive Design**: Fully responsive layout that works on desktop, tablet, and mobile devices +- **Modern UI**: Clean, professional design with gradient backgrounds and smooth animations +- **Interactive Elements**: Hover effects, smooth scrolling navigation, and animated counters +- **Accessibility**: Uses semantic HTML and proper contrast ratios +- **Performance**: Lightweight with minimal dependencies, uses emoji icons for fast loading + +## Sections + +- **Hero**: Introduction with profile and call-to-action buttons +- **About**: Personal description with achievement statistics +- **Skills**: Technology stack organized by category (Frontend, Backend, Tools) +- **Projects**: Featured project showcases with technology tags +- **Achievements**: Timeline of accomplishments and recognition +- **Contact**: Contact information and contact form + +## Technologies Used + +- HTML5 +- CSS3 (Grid, Flexbox, Animations) +- Vanilla JavaScript +- Google Fonts (Inter) +- Emoji icons (no external icon dependencies) + +## Setup + +1. Clone the repository +2. Open `index.html` in a web browser +3. Or serve with any static file server + +For local development: +```bash +python3 -m http.server 8000 +``` + +## Customization + +To customize the content: + +1. **Personal Information**: Update the name, title, and description in `index.html` +2. **Skills**: Modify the skills sections to reflect your technology stack +3. **Projects**: Replace project cards with your actual projects +4. **Achievements**: Update the achievements section with your accomplishments +5. **Contact**: Update contact information and social links +6. **Styling**: Modify colors and styles in `styles.css` + +## Browser Support + +- Chrome (latest) +- Firefox (latest) +- Safari (latest) +- Edge (latest) + +## License + +MIT License - see LICENSE file for details. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..910af171 --- /dev/null +++ b/index.html @@ -0,0 +1,418 @@ + + + + + + Tanjim Kamal - Portfolio + + + + + + + + +
+
+
+
+

+ Hello, I'm Tanjim Kamal +

+

+ Software Developer & Technology Enthusiast +

+

+ Passionate about creating innovative solutions and building meaningful technology that makes a difference. +

+
+ View My Work + Get In Touch +
+
+
+
+ 👨‍💻 +
+
+
+
+
+ + +
+
+
+

About Me

+

Get to know who I am and what I do

+
+
+
+

+ I'm a dedicated software developer with a passion for creating innovative solutions that solve real-world problems. + My journey in technology has been driven by curiosity and a desire to continuously learn and grow. +

+

+ With experience in various programming languages and frameworks, I enjoy tackling complex challenges + and turning ideas into functional, user-friendly applications. +

+
+
+

5+

+

Years Experience

+
+
+

50+

+

Projects Completed

+
+
+

10+

+

Technologies Mastered

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

Skills & Technologies

+

Technologies I work with

+
+
+
+

Frontend

+
+
+ 🌐 + HTML5 +
+
+ 🎨 + CSS3 +
+
+ ⚡ + JavaScript +
+
+ ⚛️ + React +
+
+
+
+

Backend

+
+
+ 🟢 + Node.js +
+
+ 🐍 + Python +
+
+ 🗄️ + MongoDB +
+
+ 🚀 + Express.js +
+
+
+
+

Tools & Others

+
+
+ 📂 + Git +
+
+ 🐳 + Docker +
+
+ ☁️ + AWS +
+
+ 🐧 + Linux +
+
+
+
+
+
+ + +
+
+
+

Featured Projects

+

Some of my recent work

+
+
+
+
+
+ 💻 +
+
+
+

Web Application

+

A full-stack web application built with modern technologies, featuring user authentication and real-time data processing.

+
+ React + Node.js + MongoDB +
+
+ + 📁 Code + + + 🔗 Demo + +
+
+
+ +
+
+
+ 📱 +
+
+
+

Mobile App

+

A cross-platform mobile application designed to enhance user productivity with intuitive design and seamless performance.

+
+ React Native + Firebase + Redux +
+
+ + 📁 Code + + + 🔗 Demo + +
+
+
+ +
+
+
+ 📊 +
+
+
+

Data Analytics Tool

+

A comprehensive analytics dashboard for visualizing complex data sets with interactive charts and real-time updates.

+
+ Python + Django + D3.js +
+
+ + 📁 Code + + + 🔗 Demo + +
+
+
+
+
+
+ + +
+
+
+

Achievements & Recognition

+

Milestones and accomplishments in my journey

+
+
+
+
+ 🏆 +
+

Technical Excellence Award

+

Recognized for outstanding technical contributions and innovative problem-solving approaches in software development.

+ 2024 +
+ +
+
+ 🎓 +
+

Certified Developer

+

Successfully completed advanced certifications in cloud computing and full-stack development technologies.

+ 2023 +
+ +
+
+ 👥 +
+

Team Leadership

+

Led cross-functional teams to deliver high-impact projects, fostering collaboration and driving results.

+ 2023 +
+ +
+
+ 💡 +
+

Innovation Award

+

Developed innovative solutions that improved system efficiency by 40% and enhanced user experience.

+ 2022 +
+ +
+
+ 🌟 +
+

Open Source Contributor

+

Active contributor to several open-source projects with over 1000+ commits and meaningful contributions.

+ 2022 +
+ +
+
+ 🥇 +
+

Hackathon Winner

+

First place winner in multiple hackathons, demonstrating rapid prototyping and creative problem-solving skills.

+ 2021 +
+
+
+
+ + +
+
+
+

Get In Touch

+

Let's work together on your next project

+
+
+
+
+
+ 📧 +
+
+

Email

+

tanjim@example.com

+
+
+
+
+ 💼 +
+
+

LinkedIn

+

linkedin.com/in/tanjimkamal

+
+
+
+
+ 📂 +
+
+

GitHub

+

github.com/itzmetanjim

+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..d5c54443 --- /dev/null +++ b/script.js @@ -0,0 +1,245 @@ +// Mobile Navigation Toggle +const mobileMenu = document.getElementById('mobile-menu'); +const navMenu = document.querySelector('.nav-menu'); + +mobileMenu.addEventListener('click', () => { + mobileMenu.classList.toggle('active'); + navMenu.classList.toggle('active'); +}); + +// Close mobile menu when clicking on a link +document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', () => { + mobileMenu.classList.remove('active'); + navMenu.classList.remove('active'); + }); +}); + +// Smooth scrolling for navigation links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +// Navbar background on scroll +window.addEventListener('scroll', () => { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 50) { + navbar.style.background = 'rgba(255, 255, 255, 0.98)'; + navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)'; + } else { + navbar.style.background = 'rgba(255, 255, 255, 0.95)'; + navbar.style.boxShadow = 'none'; + } +}); + +// Active navigation highlighting +window.addEventListener('scroll', () => { + const sections = document.querySelectorAll('section[id]'); + const navLinks = document.querySelectorAll('.nav-link'); + + let current = ''; + sections.forEach(section => { + const sectionTop = section.offsetTop; + const sectionHeight = section.clientHeight; + if (window.scrollY >= (sectionTop - 200)) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${current}`) { + link.classList.add('active'); + } + }); +}); + +// Form submission +const contactForm = document.querySelector('.contact-form form'); +if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Get form data + const formData = new FormData(this); + const name = formData.get('name'); + const email = formData.get('email'); + const subject = formData.get('subject'); + const message = formData.get('message'); + + // Simple validation + if (!name || !email || !subject || !message) { + alert('Please fill in all fields.'); + return; + } + + // Simulate form submission + alert('Thank you for your message! I will get back to you soon.'); + this.reset(); + }); +} + +// Intersection Observer for animations +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); + +// Observe elements for animation +document.addEventListener('DOMContentLoaded', () => { + const animatedElements = document.querySelectorAll('.skill-category, .project-card, .achievement-card, .about-stats .stat'); + + animatedElements.forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(30px)'; + el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(el); + }); +}); + +// Typing effect for hero title +function typeWriter(element, text, speed = 100) { + let i = 0; + element.innerHTML = ''; + + function type() { + if (i < text.length) { + element.innerHTML += text.charAt(i); + i++; + setTimeout(type, speed); + } + } + + type(); +} + +// Initialize typing effect when page loads +document.addEventListener('DOMContentLoaded', () => { + const heroTitle = document.querySelector('.hero-title'); + if (heroTitle) { + const originalText = heroTitle.innerHTML; + setTimeout(() => { + typeWriter(heroTitle, originalText, 50); + }, 500); + } +}); + +// Parallax effect for hero section +window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + const hero = document.querySelector('.hero'); + const rate = scrolled * -0.5; + + if (hero) { + hero.style.transform = `translateY(${rate}px)`; + } +}); + +// Skills progress animation +function animateSkills() { + const skillItems = document.querySelectorAll('.skill-item'); + + skillItems.forEach((item, index) => { + setTimeout(() => { + item.style.opacity = '1'; + item.style.transform = 'translateY(0) scale(1)'; + }, index * 100); + }); +} + +// Counter animation for stats +function animateCounters() { + const counters = document.querySelectorAll('.stat h3'); + + counters.forEach(counter => { + const target = parseInt(counter.textContent.replace('+', '')); + let current = 0; + const increment = target / 100; + + const updateCounter = () => { + if (current < target) { + current += increment; + counter.textContent = Math.ceil(current) + '+'; + setTimeout(updateCounter, 20); + } else { + counter.textContent = target + '+'; + } + }; + + updateCounter(); + }); +} + +// Initialize animations when sections come into view +const sectionObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + if (entry.target.id === 'skills') { + animateSkills(); + } else if (entry.target.id === 'about') { + animateCounters(); + } + } + }); +}, { threshold: 0.5 }); + +document.addEventListener('DOMContentLoaded', () => { + const sections = document.querySelectorAll('#skills, #about'); + sections.forEach(section => { + sectionObserver.observe(section); + }); +}); + +// Add hover effects to project cards +document.querySelectorAll('.project-card').forEach(card => { + card.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-10px) scale(1.02)'; + }); + + card.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0) scale(1)'; + }); +}); + +// Dark mode toggle (optional enhancement) +function toggleDarkMode() { + document.body.classList.toggle('dark-mode'); + localStorage.setItem('darkMode', document.body.classList.contains('dark-mode')); +} + +// Load dark mode preference +document.addEventListener('DOMContentLoaded', () => { + if (localStorage.getItem('darkMode') === 'true') { + document.body.classList.add('dark-mode'); + } +}); + +// Add CSS for active nav link +const style = document.createElement('style'); +style.textContent = ` + .nav-link.active { + color: #2563eb !important; + } + .nav-link.active:before { + width: 100% !important; + } +`; +document.head.appendChild(style); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..4944df74 --- /dev/null +++ b/styles.css @@ -0,0 +1,772 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + line-height: 1.6; + color: #333; + background-color: #ffffff; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + z-index: 1000; + transition: all 0.3s ease; +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; +} + +.nav-logo h2 { + color: #2563eb; + font-weight: 600; + font-size: 1.5rem; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-link { + text-decoration: none; + color: #4b5563; + font-weight: 500; + transition: color 0.3s ease; + position: relative; +} + +.nav-link:hover { + color: #2563eb; +} + +.nav-link:before { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -5px; + left: 0; + background-color: #2563eb; + transition: width 0.3s ease; +} + +.nav-link:hover:before { + width: 100%; +} + +.nav-toggle { + display: none; + flex-direction: column; + cursor: pointer; +} + +.bar { + width: 25px; + height: 3px; + background-color: #333; + margin: 3px 0; + transition: 0.3s; +} + +/* Hero Section */ +.hero { + padding: 120px 0 80px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + min-height: 100vh; + display: flex; + align-items: center; +} + +.hero-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.hero-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.hero-title { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.2; +} + +.highlight { + color: #fbbf24; +} + +.hero-subtitle { + font-size: 1.5rem; + font-weight: 500; + margin-bottom: 1rem; + color: #e5e7eb; +} + +.hero-description { + font-size: 1.1rem; + margin-bottom: 2rem; + color: #d1d5db; + line-height: 1.7; +} + +.hero-buttons { + display: flex; + gap: 1rem; +} + +.btn { + padding: 12px 24px; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + transition: all 0.3s ease; + display: inline-block; + border: none; + cursor: pointer; + font-size: 1rem; +} + +.btn-primary { + background-color: #2563eb; + color: white; +} + +.btn-primary:hover { + background-color: #1d4ed8; + transform: translateY(-2px); +} + +.btn-secondary { + background-color: transparent; + color: white; + border: 2px solid white; +} + +.btn-secondary:hover { + background-color: white; + color: #2563eb; +} + +.hero-image { + display: flex; + justify-content: center; +} + +.profile-img { + width: 350px; + height: 350px; + border-radius: 50%; + object-fit: cover; + border: 8px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); +} + +.profile-placeholder { + width: 350px; + height: 350px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + border: 8px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + display: flex; + align-items: center; + justify-content: center; + backdrop-filter: blur(10px); +} + +.profile-icon { + font-size: 8rem; + opacity: 0.8; +} + +/* Section Styles */ +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + color: #1f2937; +} + +.section-subtitle { + font-size: 1.1rem; + color: #6b7280; + max-width: 600px; + margin: 0 auto; +} + +/* About Section */ +.about { + padding: 100px 0; + background-color: #f9fafb; +} + +.about-content { + max-width: 800px; + margin: 0 auto; +} + +.about-text p { + font-size: 1.1rem; + color: #4b5563; + margin-bottom: 1.5rem; + line-height: 1.8; +} + +.about-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin-top: 3rem; +} + +.stat { + text-align: center; + padding: 2rem; + background: white; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.stat h3 { + font-size: 2.5rem; + font-weight: 700; + color: #2563eb; + margin-bottom: 0.5rem; +} + +.stat p { + color: #6b7280; + font-weight: 500; +} + +/* Skills Section */ +.skills { + padding: 100px 0; +} + +.skills-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; +} + +.skill-category { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + border: 1px solid #e5e7eb; +} + +.skill-category h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1.5rem; + color: #1f2937; + text-align: center; +} + +.skill-items { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; +} + +.skill-item { + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; + background: #f9fafb; + border-radius: 8px; + transition: all 0.3s ease; +} + +.skill-item:hover { + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); +} + +.skill-item i { + font-size: 2rem; + color: #2563eb; + margin-bottom: 0.5rem; +} + +.skill-icon { + font-size: 2rem; + margin-bottom: 0.5rem; + display: block; +} + +.skill-item span { + font-weight: 500; + color: #4b5563; +} + +/* Projects Section */ +.projects { + padding: 100px 0; + background-color: #f9fafb; +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; +} + +.project-card { + background: white; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); +} + +.project-image { + height: 200px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + display: flex; + align-items: center; + justify-content: center; +} + +.project-placeholder { + color: white; + font-size: 3rem; +} + +.project-icon { + font-size: 4rem; +} + +.project-content { + padding: 1.5rem; +} + +.project-content h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: #1f2937; +} + +.project-content p { + color: #6b7280; + margin-bottom: 1rem; + line-height: 1.6; +} + +.project-tech { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.tech-tag { + background: #e0e7ff; + color: #3730a3; + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.875rem; + font-weight: 500; +} + +.project-links { + display: flex; + gap: 1rem; +} + +.project-link { + color: #2563eb; + text-decoration: none; + font-weight: 500; + display: flex; + align-items: center; + gap: 0.5rem; + transition: color 0.3s ease; +} + +.project-link:hover { + color: #1d4ed8; +} + +/* Achievements Section */ +.achievements { + padding: 100px 0; +} + +.achievements-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; +} + +.achievement-card { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + border: 1px solid #e5e7eb; + text-align: center; + transition: all 0.3s ease; + position: relative; +} + +.achievement-card:hover { + transform: translateY(-5px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); +} + +.achievement-icon { + width: 80px; + height: 80px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; +} + +.achievement-icon i { + font-size: 2rem; + color: white; +} + +.achievement-emoji { + font-size: 2rem; +} + +.achievement-card h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 1rem; + color: #1f2937; +} + +.achievement-card p { + color: #6b7280; + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.achievement-year { + position: absolute; + top: 1rem; + right: 1rem; + background: #fbbf24; + color: #92400e; + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.875rem; + font-weight: 600; +} + +/* Contact Section */ +.contact { + padding: 100px 0; + background-color: #f9fafb; +} + +.contact-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: start; +} + +.contact-info { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.contact-item { + display: flex; + align-items: center; + gap: 1rem; +} + +.contact-icon { + width: 60px; + height: 60px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.contact-icon i { + font-size: 1.5rem; + color: white; +} + +.contact-emoji { + font-size: 1.5rem; +} + +.contact-details h3 { + font-weight: 600; + color: #1f2937; + margin-bottom: 0.25rem; +} + +.contact-details p { + color: #6b7280; +} + +.contact-form { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.75rem; + border: 1px solid #d1d5db; + border-radius: 8px; + font-size: 1rem; + transition: border-color 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: #2563eb; +} + +.form-group textarea { + resize: vertical; +} + +/* Footer */ +.footer { + background-color: #1f2937; + color: white; + padding: 2rem 0; +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.social-links { + display: flex; + gap: 1rem; +} + +.social-link { + width: 40px; + height: 40px; + background: #374151; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: white; + text-decoration: none; + transition: all 0.3s ease; +} + +.social-link:hover { + background: #2563eb; + transform: translateY(-2px); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-menu { + position: fixed; + left: -100%; + top: 70px; + flex-direction: column; + background-color: white; + width: 100%; + text-align: center; + transition: 0.3s; + box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); + padding: 2rem 0; + } + + .nav-menu.active { + left: 0; + } + + .nav-toggle { + display: flex; + } + + .hero-content { + grid-template-columns: 1fr; + text-align: center; + gap: 2rem; + } + + .hero-title { + font-size: 2.5rem; + } + + .profile-img { + width: 250px; + height: 250px; + } + + .profile-placeholder { + width: 250px; + height: 250px; + } + + .profile-icon { + font-size: 6rem; + } + + .about-stats { + grid-template-columns: 1fr; + gap: 1rem; + } + + .skills-grid { + grid-template-columns: 1fr; + } + + .skill-items { + grid-template-columns: 1fr; + } + + .projects-grid { + grid-template-columns: 1fr; + } + + .achievements-grid { + grid-template-columns: 1fr; + } + + .contact-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-content { + flex-direction: column; + gap: 1rem; + text-align: center; + } + + .hero-buttons { + flex-direction: column; + align-items: center; + } + + .btn { + width: 200px; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 15px; + } + + .hero-title { + font-size: 2rem; + } + + .section-title { + font-size: 2rem; + } + + .profile-img { + width: 200px; + height: 200px; + } + + .profile-placeholder { + width: 200px; + height: 200px; + } + + .profile-icon { + font-size: 4rem; + } +} + +/* Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero-content, +.section-header { + animation: fadeInUp 0.8s ease-out; +} + +/* Smooth transitions for all interactive elements */ +a, button, .skill-item, .project-card, .achievement-card { + transition: all 0.3s ease; +} \ No newline at end of file