/* BASE */ /* BASE */ @import url('./font.css'); @import url('./font-awesome.css'); /* Base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'DM Sans', sans-serif; background: #f4f4f4; overflow: hidden; font-feature-settings: "ss03", "ss04"; -webkit-font-smoothing: antialiased; } .container { display: flex; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; letter-spacing: -0.02em; } p{ text-align: justify; } /* Modern Sidebar styles */ .sidebar { width: 250px; background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%); padding: 30px 20px; position: fixed; height: 100vh; overflow-y: auto; scroll-behavior: smooth; box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1); z-index: 10; /* Lower z-index */ } /* Sidebar scrollbar */ .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-track { background: #243444; } .sidebar::-webkit-scrollbar-thumb { background: #34495e; border-radius: 3px; } .sidebar::-webkit-scrollbar-thumb:hover { background: #3498db; } /* Modern Profile styles */ .profile { text-align: center; padding: 20px 0 35px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .profile-image { width: 130px; height: 130px; border-radius: 50%; /* Changed from 24px to 50% for circular shape */ margin: 0 auto 20px; overflow: hidden; border: 4px solid rgba(52, 152, 219, 0.3); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .profile-image:hover { transform: translateY(-5px); border-color: #3498db; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .profile-image img { width: 100%; height: 100%; object-fit: cover; } .profile-name { color: #fff; font-size: 18px; font-weight: 600; margin: 0; font-family: 'Outfit', sans-serif; } .profile-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Modern Menu buttons */ .menu-btn { display: flex; align-items: center; width: 100%; padding: 14px 18px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.03); border: none; color: #fff; text-align: left; cursor: pointer; border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .menu-btn i { width: 24px; margin-right: 12px; font-size: 18px; transition: transform 0.3s ease; } .menu-btn span { font-size: 15px; font-family: 'DM Sans', sans-serif; font-weight: 500; letter-spacing: 0.01em; } .menu-btn:hover { background: rgba(52, 152, 219, 0.15); transform: translateX(8px); } .menu-btn:hover i { transform: scale(1.1); } .menu-btn.active { background: #3498db; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); } /* Content area */ .content { margin-left: 250px; width: calc(100% - 250px); height: 100vh; overflow-y: auto; position: relative; padding: 0; scroll-behavior: smooth; /* Smooth scrolling */ -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ } /* Hide scrollbar for Chrome, Safari and Opera */ .content::-webkit-scrollbar { width: 8px; } .content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } .content::-webkit-scrollbar-thumb { background: rgba(52, 152, 219, 0.3); border-radius: 4px; transition: all 0.3s ease; } .content::-webkit-scrollbar-thumb:hover { background: rgba(52, 152, 219, 0.5); } .page { display: none; background: #fff; opacity: 0; position: absolute; width: 100%; height: 100vh; overflow-y: auto; transition: all 0.3s ease; } .page.active { display: block; opacity: 1; } /* Page scrollbar */ .page::-webkit-scrollbar { width: 8px; } .page::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .page::-webkit-scrollbar-thumb { background: #3498db; border-radius: 4px; } .page::-webkit-scrollbar-thumb:hover { background: #2980b9; } .page-title { text-align: center; margin-top: 15px; } .page-title h2 { color: #2c3e50; font-size: 2.5em; margin-bottom: 15px; } .title-bar { width: 70px; height: 4px; background: #3498db; margin: 0 auto; } /* Modern Mobile Navigation */ @media screen and (max-width: 768px) { .mobile-nav { background: linear-gradient(to right, #2c3e50, #3498db); padding: 12px 20px; backdrop-filter: blur(10px); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; } .mobile-profile { gap: 15px; } .mobile-profile img { width: 40px; height: 40px; border-radius: 50%; /* Changed from 12px to 50% */ border: 2px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; } .mobile-profile img:hover { border-color: #3498db; transform: scale(1.05); } .mobile-bottom-nav { background: rgba(44, 62, 80, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 8px 15px; height: 70px; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; } .nav-btn { position: relative; background: transparent !important; /* Override any inherited background */ border: none; color: rgba(255, 255, 255, 0.6); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 4px; transition: all 0.3s ease; box-shadow: none !important; /* Remove any inherited shadow */ } .nav-btn i { font-size: 18px; transition: transform 0.3s ease; } .nav-btn span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; display: none; } .nav-btn::after { content: ''; position: absolute; bottom: -2px; width: 0; height: 2px; background: #3498db; border-radius: 2px; transition: width 0.3s ease; } .nav-btn.active { background: transparent !important; /* Ensure no background on active state */ color: #3498db; box-shadow: none !important; } .nav-btn.active i { transform: translateY(-2px); } .nav-btn.active span { display: block; } .nav-btn.active::after { width: 20px; } /* Hide scrollbar but keep functionality */ .mobile-bottom-nav::-webkit-scrollbar { display: none; } .mobile-bottom-nav { -ms-overflow-style: none; scrollbar-width: none; } .content { margin-left: 0; width: 100%; padding-bottom: 70px; /* Space for mobile navigation */ margin-top: 64px; /* Height of mobile top nav */ margin-bottom: 70px; /* Height of bottom nav */ height: calc(100vh - 134px); /* Viewport height minus both navs */ overflow-y: auto; } .page { position: relative; min-height: calc(100vh - 134px); padding-bottom: 80px; /* Ensure content doesn't hide under bottom nav */ } .page-title { margin-top: 15px; /* Slightly more margin on mobile */ padding-top: 15px; } /* Remove extra top margin from these specific pages */ #experience .page-title, #education .page-title, #skills .page-title, #projects .page-title, #contact .page-title { margin-top: 0; } /* Ensure containers don't create extra gaps */ .timeline-container, .education-container, .skills-container { padding-top: 0; margin-top: 0; } /* Specific padding for pages that need bottom spacing */ #experience.page, #education.page, #skills.page { padding-bottom: 80px; } /* Remove padding for home page */ #home.page { padding-bottom: 0; } } .mobile-profile-link { text-decoration: none; color: white; display: flex; align-items: center; gap: 12px; } .mobile-profile-link img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.2); } /* Scale down contact section */ .contact-container { max-width: 1100px; /* Reduced from 1200px */ margin: 0 auto; padding: 20px; /* Reduced padding */ scale: 0.95; /* Slightly scale down */ transform-origin: top center; } .map-section { margin-top: 20px; } .map-section iframe { height: 350px; /* Reduced height */ } @media screen and (max-width: 768px) { .contact-container { scale: 1; /* Reset scale on mobile */ padding: 15px; } .map-section iframe { height: 300px; } } copyright { margin-top: auto; padding: 20px 0; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 0.8em; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* HOME PAGE */ /* HOME PAGE */ /* Home page specific */ .page#home { position: relative; background: url('../images/banner.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .home-content { position: relative; width: 55%; min-height: 100vh; padding: 60px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0) 100% ); display: flex; flex-direction: column; justify-content: center; backdrop-filter: blur(5px); } .intro-text { max-width: 650px; } .intro-text h1 { font-size: 3.2em; margin-bottom: 20px; color: #2c3e50; line-height: 1.2; font-weight: 700; } .highlight { color: #3498db; position: relative; display: inline-block; } .highlight::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px; background: rgba(52, 152, 219, 0.2); z-index: -1; } .typed-text { font-size: 1.4em; color: #34495e; margin-bottom: 30px; font-weight: 500; } .career-objective { line-height: 1.8; color: #444; margin: 30px 0; font-size: 1.1em; position: relative; padding-left: 20px; border-left: 3px solid #3498db; } /* Social links */ .social-links { display: flex; gap: 20px; margin-top: 40px; } .social-btn { width: 45px; height: 45px; border-radius: 12px; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; color: #2c3e50; text-decoration: none; font-size: 1.3em; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .social-btn:hover { background: #3498db; color: white; transform: translateY(-5px) scale(1.05); box-shadow: 0 8px 15px rgba(52, 152, 219, 0.3); } /* Mobile styles */ .mobile-nav, .mobile-bottom-nav { display: none; } @media screen and (max-width: 768px) { .sidebar { display: none; } .mobile-nav { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 60px; padding: 10px 10px; background: #2c3e50; z-index: 1000; align-items: center; justify-content: space-between; } .mobile-profile { display: flex; align-items: center; gap: 12px; } .mobile-profile img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.2); } .mobile-profile span { color: white; font-size: 16px; font-weight: 500; } .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 70px; padding: 10px; background: #2c3e50; z-index: 1000; justify-content: space-around; align-items: center; } .nav-btn { background: none; border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.3s ease; } .nav-btn.active { background: #3498db; transform: translateY(-5px); } .content { margin-left: 0; width: 100%; margin-top: 60px; margin-bottom: 70px; height: calc(100vh - 130px); padding: 0; position: relative; z-index: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .page { position: relative; height: auto; min-height: 100%; opacity: 1; display: none; background: #fff; } .page.active { display: block; } /* Mobile scrollbar */ .content::-webkit-scrollbar { width: 5px; } .content::-webkit-scrollbar-track { background: #f1f1f1; } .content::-webkit-scrollbar-thumb { background: #3498db; border-radius: 3px; } .home-content { width: 100%; padding: 30px 20px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.92) 100% ); text-align: left; align-items: flex-start; } .social-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 15px; margin-top: 35px; padding-bottom: 80px; /* Space above bottom mobile nav */ } .social-btn { width: 40px; height: 40px; border-radius: 10px; font-size: 1em; } /* Update existing mobile styles */ .social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 25px; } .social-btn { width: 35px; height: 35px; font-size: 1em; } .intro-text { max-width: 100%; padding: 0 10px; } .intro-text h1 { font-size: 2.4em; } .typed-text { font-size: 1em; } .career-objective { font-size: 1em; line-height: 1.5; margin: 25px 0; padding-top: 20px; padding-left: 15px; } .home-content { padding: 30px 15px; min-height: calc(100vh - 130px); justify-content: flex-start; padding-top: 40px; } .timeline { margin: 0 15px; } .timeline-container { padding: 20px 0; margin: 0; } .timeline-container::before { left: 30px; } .timeline-item { width: calc(100% - 50px); margin-left: 50px; margin-bottom: 30px; } .timeline-dot { left: -36px; } .timeline-date { position: relative; left: 0; top: 0; margin-bottom: 10px; display: inline-block; } .timeline-content { padding: 15px; } .achievement-list { padding-left: 5px; } .achievement-list li { font-size: 0.9em; } /* Remove double scrollbar */ body { overflow: hidden; } /* Adjust page container */ .page { height: auto; min-height: calc(100vh - 130px); overflow: visible; } } /* Tablet styles */ @media screen and (min-width: 769px) and (max-width: 1200px) { .home-content { width: 100%; background: linear-gradient( to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100% ); text-align: center; align-items: center; padding: 30px; } } /* Copyright styles */ .copyright { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; padding-inline: 15px; color: rgba(255, 255, 255, 0.7); font-size: 13px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .copyright p { margin: 5px 0; } @media screen and (max-width: 768px) { .copyright { display: none; } } /* EXPERIENCE PAGE */ /* EXPERIENCE PAGE */ /* Experience page styles */ .timeline-content h3 { color: #000000 !important; } .timeline-grid { gap: 25px; margin-top: 20px; } .timeline { position: relative; padding: 20px 0; margin: 0 30px; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 2px; background: #3498db; } .timeline-item { position: relative; margin-bottom: 40px; } .timeline-dot { position: absolute; left: -36px; top: 20px; /* Align with date */ width: 12px; height: 12px; border-radius: 50%; background: #3498db; border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3); } .timeline-content { background: #fff; padding: 25px; border-radius: 5px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .timeline-header { margin-bottom: 15px; } .timeline-header h3 { color: #2c3e50; font-size: 1.2em; margin-bottom: 5px; } .company { color: #3498db; font-weight: 500; } .timeline-period { color: #7f8c8d; font-size: 0.9em; margin-bottom: 15px; } .timeline-period i { margin-right: 5px; } .timeline-desc ul { padding-left: 20px; color: #555; line-height: 1.6; } /* Mobile styles */ @media screen and (max-width: 768px) { .timeline { margin: 0 15px; } } .timeline-container { position: relative; max-width: 1000px; margin: 0 auto; padding: 40px 0; } .timeline-container::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: linear-gradient(to bottom, transparent, #3498db, transparent); } .timeline-item { position: relative; margin-bottom: 60px; width: calc(50% - 30px); margin-left: auto; } .timeline-item:nth-child(even) { margin-left: 0; margin-right: auto; } .timeline-dot { position: absolute; left: -36px; top: 15px; /* Adjusted to align with date */ width: 12px; height: 12px; border-radius: 50%; background: #3498db; border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3); } .timeline-item:nth-child(even) .timeline-dot { left: auto; right: -36px; } .timeline-date { position: absolute; padding: 8px 16px; background: #3498db; color: white; border-radius: 20px; font-size: 0.9em; box-shadow: 0 3px 10px rgba(0,0,0,0.1); top: 7px; z-index: 1; white-space: nowrap; /* Prevents date text from wrapping */ } /* For left side items (odd) */ .timeline-item:nth-child(odd) .timeline-date { right: calc(100% + 45px); /* Push date further left */ left: auto; /* Remove left positioning */ } /* For right side items (even) */ .timeline-item:nth-child(even) .timeline-date { left: calc(100% + 45px); /* Push date further right */ right: auto; /* Remove right positioning */ } .timeline-content { padding: 20px; /* Reduced from 25px */ background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .timeline-content:hover { transform: translateY(-5px); } .company-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: #f8f9fa; border-radius: 15px; margin: 10px 0; color: #3498db; font-weight: 500; } .achievement-list { list-style: none; padding: 0; margin-top: 15px; } .achievement-list li { display: flex; gap: 10px; margin-bottom: 10px; color: #555; line-height: 1.6; } .achievement-list i { color: #3498db; margin-top: 5px; } @media (max-width: 768px) { .timeline-container::before { left: 15px; } .timeline-item, .timeline-item:nth-child(even) { width: calc(100% - 30px); margin-left: 30px; margin-bottom: 40px; } .timeline-dot, .timeline-item:nth-child(even) .timeline-dot { left: -21px; top: 15px; } .timeline-date, .timeline-item:nth-child(even) .timeline-date { position: relative; left: 0; top: 0; display: inline-block; margin-bottom: 15px; } } @media screen and (max-width: 768px) { .timeline-date, .timeline-item:nth-child(odd) .timeline-date, .timeline-item:nth-child(even) .timeline-date { right: auto; top: 7px; } } /* EDUCATION PAGE */ /* EDUCATION PAGE */ .education-container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; } .education-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 20px; } .education-card { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .education-card:hover { transform: translateY(-5px); } .education-header { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; } .education-icon { width: 50px; height: 50px; background: rgba(52, 152, 219, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #3498db; font-size: 24px; } .education-title h3 { color: #2c3e50; margin-bottom: 5px; font-size: 1.2em; } .education-title .institute { color: #3498db; font-weight: 500; margin-bottom: 5px; } .education-title .duration { color: #7f8c8d; font-size: 0.9em; } .education-details { padding: 15px; border-top: 1px solid rgba(52, 152, 219, 0.1); margin-top: 15px; } .education-details p { color: #7f8c8d; font-size: 0.95em; margin-bottom: 10px; } .education-details p:first-child { color: #666; font-weight: 500; } .education-details .achievements { list-style: none; padding: 0; margin: 0; } .education-details .achievements li { color: #7f8c8d; font-size: 0.95em; padding: 5px 0; display: flex; align-items: center; gap: 8px; } .education-details .achievements li:before { content: '\2022'; color: #3498db; font-weight: bold; } .achievements { margin-top: 15px; padding-left: 20px; } .achievements li { color: #666; margin-bottom: 8px; position: relative; } .achievements li::before { content: '•'; color: #3498db; position: absolute; left: -15px; } /* Certifications Section */ .certifications { margin-top: 60px; } .cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 35px; } .cert-card { background: linear-gradient(145deg, #ffffff, #f8f9fa); border-radius: 16px; padding: 25px; border: 1px solid rgba(52, 152, 219, 0.1); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .cert-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #3498db; opacity: 0; transition: opacity 0.3s ease; } .cert-card:hover { transform: translateY(-5px); border-color: rgba(52, 152, 219, 0.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .cert-card:hover::before { opacity: 1; } .cert-issuer { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .cert-issuer i { font-size: 22px; color: #3498db; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: rgba(52, 152, 219, 0.08); border-radius: 12px; transition: all 0.3s ease; } .cert-card:hover .cert-issuer i { background: rgba(52, 152, 219, 0.15); transform: scale(1.05); } /* Add this for fallback icon */ .cert-issuer i.fa-certificate { font-size: 20px; /* Slightly smaller for better visual balance */ } .cert-issuer span { font-weight: 600; color: #2c3e50; font-size: 1.1em; } .cert-issuer img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; } .cert-title { color: #2c3e50; font-size: 1.05em; margin-bottom: 12px; line-height: 1.4; } .cert-credentials { display: flex; align-items: center; gap: 8px; color: #7f8c8d; font-size: 0.9em; margin: 8px 0; } .cert-credentials i { color: #3498db; font-size: 0.9em; } .cert-credentials span { font-family: 'Courier New', monospace; letter-spacing: 0.5px; } .cert-link { display: inline-flex; align-items: center; gap: 8px; color: #3498db; text-decoration: none; font-size: 0.9em; font-weight: 500; padding: 8px 0; transition: all 0.3s ease; } .cert-link i { font-size: 14px; transition: transform 0.3s ease; } .cert-link:hover { color: #2980b9; text-decoration: none; } .cert-link:hover i { transform: translateX(4px); } /* Mobile Responsive */ @media screen and (max-width: 768px) { .education-grid { grid-template-columns: 1fr; } .cert-card { padding: 20px; } .cert-grid { gap: 20px; } .cert-issuer { margin-bottom: 15px; padding-bottom: 12px; } } /* SKILLS PAGE */ /* SKILLS PAGE */ .skills-container { max-width: 1200px; /* Increased from 1000px */ margin: 0 auto; padding: 40px 20px; } .skills-grid { display: grid; grid-template-columns: 1fr; /* Changed to single column */ gap: 25px; margin-top: 20px; } .skill-category { background: white; border-radius: 16px; padding: 30px; /* Increased padding */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(52, 152, 219, 0.1); } .skill-category:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .category-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .category-icon { width: 45px; height: 45px; background: rgba(52, 152, 219, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #3498db; font-size: 20px; } .category-title { color: #2c3e50; font-size: 1.2em; font-weight: 600; } /* Update skill list to show items in grid */ .skill-list { display: grid; grid-template-columns: repeat(2, 1fr); /* Two items per row */ gap: 25px; margin-top: 10px; } .skill-item { position: relative; } .skill-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .skill-name { color: #2c3e50; font-weight: 500; } .skill-level { color: #7f8c8d; font-size: 0.9em; } .progress-bar { height: 8px; background: rgba(52, 152, 219, 0.1); border-radius: 4px; overflow: hidden; } .progress { height: 100%; background: linear-gradient(90deg, #3498db, #2980b9); border-radius: 4px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); animation: progressAnimation 1.5s ease-out forwards; } /* Language proficiency styles */ .language-proficiency .language-list { display: flex; flex-direction: column; gap: 15px; } .language-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .language-name { color: #2c3e50; font-weight: 500; } .star-rating { color: #f1c40f; letter-spacing: 3px; } .star-rating i { font-size: 16px; filter: drop-shadow(0 2px 3px rgba(241, 196, 15, 0.2)); } /* Animations */ @keyframes progressAnimation { from { width: 0; opacity: 0; } to { opacity: 1; } } /* Mobile adjustments */ @media screen and (max-width: 768px) { .skills-container { padding: 20px 15px; } .skills-grid { grid-template-columns: 1fr; gap: 20px; } .skill-category { padding: 20px; } .category-icon { width: 40px; height: 40px; font-size: 18px; } .skill-list { grid-template-columns: 1fr; /* Single column on mobile */ gap: 15px; } .progress-bar { height: 6px; } .language-item { flex-direction: column; align-items: flex-start; gap: 8px; } } /* PROJECT PAGE */ /* PROJECT PAGE */ .projects-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } /* Filter Buttons */ .project-filters { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; } .filter-btn { padding: 8px 20px; border: none; background: white; border-radius: 25px; color: #2c3e50; font-weight: 500; cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(52, 152, 219, 0.1); } .filter-btn:hover { background: rgba(52, 152, 219, 0.1); } .filter-btn.active { background: #3498db; color: white; } /* Projects Grid */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; margin-top: 20px; min-height: 200px; /* Prevents grid collapse during filtering */ } /* Project Card */ .project-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: opacity 0.3s ease, transform 0.3s ease; border: 1px solid rgba(52, 152, 219, 0.1); } .project-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .project-image { position: relative; height: 200px; overflow: hidden; } .project-image img { width: 100%; height: 100%; object-fit: cover; } .project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 152, 219, 0.9); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.3s ease; } .project-card:hover .project-overlay { opacity: 1; } .project-links { display: flex; gap: 20px; } .project-links a { color: white; font-size: 20px; transition: all 0.3s ease; } .project-links a:hover { transform: scale(1.1); } .project-info { padding: 20px; } .project-info h3 { color: #2c3e50; margin-bottom: 10px; font-size: 1.2em; } .project-info p { color: #7f8c8d; font-size: 0.9em; margin-bottom: 15px; line-height: 1.5; } .project-tags { display: flex; flex-wrap: wrap; gap: 8px; } .project-tags span { background: rgba(52, 152, 219, 0.1); color: #3498db; padding: 4px 12px; border-radius: 15px; font-size: 0.8em; font-weight: 500; } /* Mobile Responsive */ @media screen and (max-width: 768px) { .projects-container { padding: 20px 15px; } .project-filters { flex-wrap: wrap; gap: 2px; } .filter-btn { padding: 6px 15px; font-size: 0.9em; } .projects-grid { grid-template-columns: 1fr; gap: 20px; } } /* CONTACT PAGE */ /* CONTACT PAGE */ .contact-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .contact-container .social-links { display: flex; justify-content: center; gap: 15px; margin-top: 40px; flex-wrap: wrap; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; align-items: start; /* Ensures both columns start from the top */ } /* Contact Info Cards */ .contact-info { display: flex; flex-direction: column; gap: 5px; /* Changed from 20px */ } .info-card { background: white; padding: 15px; /* Changed from 24px */ border-radius: 16px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; border: 1px solid rgba(52, 152, 219, 0.1); } .info-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .info-icon { width: 50px; height: 50px; background: rgba(52, 152, 219, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #3498db; font-size: 20px; } .info-content h3 { color: #2c3e50; margin-bottom: 5px; font-size: 1.1em; } .info-content p { color: #7f8c8d; font-size: 0.9em; } /* Contact Form */ .contact-form-container { background: white; padding: 30px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid rgba(52, 152, 219, 0.1); height: 100%; /* Makes form container take full height */ display: flex; flex-direction: column; } .contact-form-container h3 { color: #2c3e50; font-size: 1.5em; margin-bottom: 25px; font-weight: 600; position: relative; padding-bottom: 15px; } .contact-form-container h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: #3498db; border-radius: 2px; } .contact-form { flex: 1; /* Makes form take remaining space */ display: flex; flex-direction: column; } .form-group { position: relative; margin-bottom: 25px; } .form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 1em; background: transparent; transition: all 0.3s ease; } /* Adjust textarea height since we removed subject field */ .form-group textarea { height: calc(100% - 50px); /* Subtracting space for other elements */ min-height: 150px; /* Ensuring minimum height */ resize: none; } .form-group label { position: absolute; left: 12px; top: 12px; color: #7f8c8d; transition: all 0.3s ease; pointer-events: none; font-size: 0.9em; } .form-group input:focus, .form-group textarea:focus { border-color: #3498db; outline: none; } .form-group input:focus ~ label, .form-group textarea:focus ~ label, .form-group input:valid ~ label, .form-group textarea:valid ~ label { top: -10px; left: 10px; font-size: 0.8em; background: white; padding: 0 5px; color: #3498db; } .submit-btn { background: #3498db; color: white; border: none; padding: 12px 30px; border-radius: 25px; font-size: 1em; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; } .submit-btn:hover { background: #2980b9; transform: translateY(-2px); } .submit-btn i { transition: transform 0.3s ease; } .submit-btn:hover i { transform: translateX(5px); } /* Mobile Responsive */ @media screen and (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } .contact-container { padding: 20px 15px; } .contact-form-container { padding: 25px; } .info-card { padding: 20px; } .map-section { margin-top: 30px; } .map-section iframe { height: 300px; } } /* Contact Info Styles */ .contact-left { display: flex; flex-direction: column; gap: 15px; /* Changed from 10px */ } /* CV Section Styles */ .cv-section { background: white; padding: 30px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid rgba(52, 152, 219, 0.1); } .cv-section h3 { color: #2c3e50; font-size: 1.5em; margin-bottom: 25px; font-weight: 600; position: relative; padding-bottom: 15px; } .cv-section h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: #3498db; border-radius: 2px; } .cv-btn { background: #3498db; color: white; border: none; padding: 12px 25px; border-radius: 25px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.3s ease; width: 100%; justify-content: center; } .cv-btn:hover { background: #2980b9; transform: translateY(-2px); } /* Map Section Styles */ .map-section { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid rgba(52, 152, 219, 0.1); } #contact .social-links { display: flex; justify-content: center; gap: 15px; margin-top: 20px; margin-bottom: 20px; flex-wrap: wrap; } #show_contact_msg { display: none; text-align: center; margin-bottom: 15px; padding: 10px; border-radius: 8px; font-size: 0.9em; transition: all 0.3s ease; } .submit-btn:disabled { opacity: 0.7; cursor: not-allowed; } #show_cv_msg { display: none; text-align: center; margin-bottom: 15px; padding: 10px; border-radius: 8px; font-size: 0.9em; transition: all 0.3s ease; } .cv-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* MODERN CSS */ /* MODERN CSS */ :root { --glass-bg: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.05); --glass-shadow: rgba(0, 0, 0, 0.1); --neon-blue: #3498db; --neon-purple: #9b59b6; --neon-glow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 30px var(--neon-blue); } /* Modern Background */ body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; } /* Glassmorphism Cards */ .education-card, .cert-card, .skill-category, .project-card, .info-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); box-shadow: 0 8px 32px var(--glass-shadow); } /* Animated Progress Bars */ .progress { background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); box-shadow: var(--neon-glow); animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } } /* Modern Button Styles */ .menu-btn, .filter-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(5px); transition: all 0.3s ease; position: relative; overflow: hidden; } .menu-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.3), transparent ); animation: shine 3s infinite; } @keyframes shine { 100% { left: 200%; } } /* Timeline Animations */ .timeline-dot { animation: glow 2s infinite; } @keyframes glow { 0% { box-shadow: 0 0 5px var(--neon-blue); } 50% { box-shadow: 0 0 20px var(--neon-blue); } 100% { box-shadow: 0 0 5px var(--neon-blue); } } /* Social Links Animation */ .social-btn { position: relative; overflow: hidden; } .social-btn::after { content: ''; position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); transform: scale(0); transition: transform 0.3s ease; } .social-btn:hover::after { transform: scale(2); } /* Page Transitions */ .page { animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* Skill Icons Animation */ .category-icon i { animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }