Spaces:
Running
Running
| /* General Styling */ | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Montserrat:wght@400;700&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: "Poppins", sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(120deg, #0f172a 60%, #1e293b 100%); | |
| color: #fff; | |
| line-height: 1.6; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Orbitron', 'Montserrat', 'Google Sans', 'Poppins', Arial, sans-serif; | |
| letter-spacing: 2px; | |
| } | |
| h2 { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| font-size: 2.2rem; | |
| color: #38bdf8; | |
| letter-spacing: 1px; | |
| } | |
| /* Navbar */ | |
| header { | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| background: rgba(30, 41, 59, 0.95); | |
| padding: 15px 30px; | |
| z-index: 1000; | |
| box-shadow: 0 2px 8px rgba(30,41,59,0.15); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| nav .logo { | |
| font-size: 1.7rem; | |
| color: #38bdf8; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| } | |
| nav .nav-links { | |
| display: flex; | |
| list-style: none; | |
| } | |
| nav .nav-links li { | |
| margin-left: 24px; | |
| } | |
| nav .nav-links a { | |
| color: #fff; | |
| text-decoration: none; | |
| font-size: 1rem; | |
| transition: color 0.3s; | |
| padding: 6px 10px; | |
| border-radius: 4px; | |
| } | |
| nav .nav-links a:hover { | |
| color: #38bdf8; | |
| background: #0f172a; | |
| } | |
| /* Home */ | |
| .home { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: left; | |
| padding: 60px 10px 20px 10px; /* reduced bottom space */ | |
| } | |
| .home-content { | |
| max-width: 500px; | |
| margin-right: 40px; | |
| } | |
| .home h1 { | |
| font-size: 3.2rem; | |
| font-weight: 700; | |
| } | |
| .home h1 span { | |
| color: #38bdf8; | |
| font-family: 'Orbitron', 'Montserrat', sans-serif; | |
| text-shadow: 0 2px 12px #38bdf8aa; | |
| animation: neon-glow 1.5s infinite alternate; | |
| } | |
| .home p { | |
| font-size: 1.2rem; | |
| margin-top: 10px; | |
| } | |
| .btn { | |
| display: inline-block; | |
| margin-top: 24px; | |
| padding: 12px 32px; | |
| background: linear-gradient(90deg, #38bdf8 60%, #0ea5e9 100%); | |
| color: #0f172a; | |
| border-radius: 10px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| box-shadow: 0 2px 8px rgba(30,41,59,0.10); | |
| transition: background 0.3s, color 0.3s; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn:hover { | |
| background: #0ea5e9; | |
| color: #fff; | |
| } | |
| /* 3D Card Animation */ | |
| .card-3d { | |
| perspective: 1200px; | |
| width: 260px; | |
| height: 340px; | |
| margin: 0 auto; | |
| } | |
| .card-inner { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: transform 0.8s cubic-bezier(.25,.8,.25,1); | |
| transform-style: preserve-3d; | |
| animation: card-rotate 8s infinite linear; | |
| } | |
| .card-3d:hover .card-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .card-front, .card-back { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| backface-visibility: hidden; | |
| background: #1e293b; | |
| border-radius: 18px; | |
| box-shadow: 0 8px 32px rgba(30,41,59,0.18); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 32px 18px; | |
| } | |
| .card-front { | |
| z-index: 2; | |
| } | |
| .card-back { | |
| transform: rotateY(180deg); | |
| color: #38bdf8; | |
| } | |
| .profile-img { | |
| width: 90px; | |
| height: 90px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| margin-bottom: 18px; | |
| border: 3px solid #38bdf8; | |
| } | |
| @keyframes card-rotate { | |
| from { transform: rotateY(0deg); } | |
| to { transform: rotateY(360deg); } | |
| } | |
| /* 3D Tilt Card */ | |
| .tilt-3d-card { | |
| width: 380px; | |
| height: 440px; | |
| margin: 0 30px; | |
| background: rgba(255,255,255,0.16); | |
| border-radius: 32px; | |
| box-shadow: 0 12px 48px #38bdf8cc, 0 8px 32px rgba(30,41,59,0.22); | |
| backdrop-filter: blur(12px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: box-shadow 0.3s; | |
| perspective: 1400px; | |
| } | |
| .tilt-card-inner { | |
| width: 92%; | |
| height: 92%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(120deg, #38bdf8 60%, #0ea5e9 100%); | |
| border-radius: 24px; | |
| box-shadow: 0 4px 24px #38bdf8cc, 0 2px 12px rgba(30,41,59,0.10); | |
| padding: 32px 10px; | |
| transition: transform 0.2s; | |
| } | |
| .profile-img-3d { | |
| width: 160px; | |
| height: 160px; | |
| border-radius: 18px; | |
| object-fit: cover; | |
| margin-bottom: 18px; | |
| border: 4px solid #fff; | |
| box-shadow: 0 4px 24px #38bdf8cc, 0 2px 8px rgba(30,41,59,0.10); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| background: linear-gradient(120deg, #38bdf8 60%, #0ea5e9 100%); | |
| } | |
| .card-socials { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 10px; | |
| } | |
| .card-socials a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background: #fff; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 8px rgba(30,41,59,0.10); | |
| transition: transform 0.2s; | |
| } | |
| .card-socials a:hover { | |
| transform: scale(1.15); | |
| } | |
| .card-socials .icon-social { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 0; | |
| object-fit: contain; | |
| box-shadow: none; | |
| } | |
| /* About, Resume, Skills, Projects, Contact */ | |
| .about, .resume, .skills, .projects, .contact { | |
| padding: 24px 10px 10px 10px; /* reduced top and bottom space for all sections */ | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| /* About 3D Glass Box */ | |
| .about-3d-box { | |
| background: rgba(255,255,255,0.13); | |
| border-radius: 20px; | |
| box-shadow: 0 8px 32px rgba(30,41,59,0.22); | |
| backdrop-filter: blur(8px); | |
| padding: 32px 24px; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| text-align: center; | |
| transition: box-shadow 0.3s, transform 0.3s; | |
| perspective: 800px; | |
| } | |
| .about-3d-box:hover { | |
| box-shadow: 0 16px 48px rgba(30,41,59,0.32); | |
| transform: scale(1.03) rotateY(4deg); | |
| } | |
| .about-3d-box h2 { | |
| color: #38bdf8; | |
| margin-bottom: 12px; | |
| } | |
| .about-3d-box p { | |
| font-size: 1.08rem; | |
| color: #fff; | |
| } | |
| /* Skills */ | |
| .skill-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 12px; | |
| } | |
| .skill-list span { | |
| background: linear-gradient(90deg, #1e293b 60%, #38bdf8 100%); | |
| margin: 5px; | |
| padding: 12px 22px; | |
| border-radius: 8px; | |
| font-size: 1.05rem; | |
| color: #fff; | |
| font-weight: 500; | |
| box-shadow: 0 2px 8px rgba(30,41,59,0.10); | |
| } | |
| /* Projects */ | |
| .project-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 28px; | |
| } | |
| .project-card { | |
| background: #1e293b; | |
| padding: 24px 18px 18px 18px; | |
| border-radius: 14px; | |
| box-shadow: 0 4px 16px rgba(30,41,59,0.12); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .project-card img { | |
| width: 100%; | |
| max-width: 220px; | |
| height: 120px; | |
| object-fit: cover; | |
| border-radius: 8px; | |
| margin-bottom: 12px; | |
| box-shadow: 0 2px 8px rgba(30,41,59,0.10); | |
| } | |
| .project-card h3 { | |
| color: #38bdf8; | |
| margin-bottom: 8px; | |
| } | |
| .project-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 8px 32px rgba(30,41,59,0.18); | |
| } | |
| /* 3D Project Cards */ | |
| .project-3d { | |
| perspective: 900px; | |
| } | |
| .project-3d-inner { | |
| background: rgba(255,255,255,0.08); | |
| border-radius: 12px; | |
| box-shadow: 0 4px 24px rgba(30,41,59,0.18); | |
| padding: 14px 8px; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .project-3d-inner:hover { | |
| transform: rotateY(8deg) scale(1.04); | |
| box-shadow: 0 8px 32px rgba(30,41,59,0.28); | |
| } | |
| /* Contact */ | |
| .contact-form { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 14px; | |
| max-width: 400px; | |
| margin: 0 auto 24px auto; | |
| } | |
| .contact-form input, | |
| .contact-form textarea { | |
| width: 100%; | |
| padding: 12px; | |
| border-radius: 8px; | |
| border: none; | |
| background: #1e293b; | |
| color: #fff; | |
| font-size: 1rem; | |
| box-shadow: 0 2px 8px rgba(30,41,59,0.10); | |
| } | |
| .contact-form textarea { | |
| resize: vertical; | |
| } | |
| .contact-form button { | |
| margin-top: 8px; | |
| } | |
| .contact p { | |
| text-align: center; | |
| margin: 10px 0; | |
| } | |
| .contact a { | |
| color: #38bdf8; | |
| text-decoration: none; | |
| } | |
| /* Resume Section */ | |
| .resume-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 24px; | |
| justify-content: center; | |
| margin-bottom: 24px; | |
| } | |
| .resume-card { | |
| background: #1e293b; | |
| color: #fff; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 8px rgba(30,41,59,0.10); | |
| padding: 24px 18px; | |
| min-width: 220px; | |
| max-width: 320px; | |
| flex: 1 1 220px; | |
| } | |
| .resume-card h3 { | |
| color: #38bdf8; | |
| margin-bottom: 10px; | |
| } | |
| .resume .btn { | |
| margin-top: 10px; | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| padding: 20px; | |
| background: #1e293b; | |
| color: #38bdf8; | |
| font-size: 1rem; | |
| letter-spacing: 1px; | |
| } | |
| /* Google-style badge */ | |
| .google-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| background: #fff; | |
| color: #0f172a; | |
| border-radius: 16px; | |
| box-shadow: 0 2px 12px rgba(30,41,59,0.10); | |
| padding: 12px 22px; | |
| margin-top: 18px; | |
| min-width: 220px; | |
| max-width: 320px; | |
| animation: pop 0.7s; | |
| } | |
| .google-badge .profile-img { | |
| width: 54px; | |
| height: 54px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 2px solid #38bdf8; | |
| } | |
| .badge-role { | |
| background: #38bdf8; | |
| color: #0f172a; | |
| font-size: 0.95rem; | |
| padding: 2px 10px; | |
| border-radius: 6px; | |
| font-weight: 500; | |
| margin-top: 2px; | |
| display: inline-block; | |
| } | |
| /* Animations */ | |
| .animate-fadein { | |
| animation: fadein 1s; | |
| } | |
| .animate-slideup { | |
| animation: slideup 0.7s cubic-bezier(.25,.8,.25,1); | |
| } | |
| .animate-pop { | |
| animation: pop 0.7s cubic-bezier(.25,.8,.25,1); | |
| } | |
| @keyframes fadein { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideup { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pop { | |
| 0% { opacity: 0; transform: scale(0.7); } | |
| 80% { opacity: 1; transform: scale(1.05); } | |
| 100% { opacity: 1; transform: scale(1); } | |
| } | |
| @keyframes neon-glow { | |
| from { text-shadow: 0 2px 12px #38bdf8aa, 0 0 0 #fff; } | |
| to { text-shadow: 0 4px 24px #38bdf8, 0 0 8px #fff; } | |
| } | |