html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Root variables for consistent theming */
:root {
/* Light Mode Colors (Default) */
--bg-primary: #F8F9FA;
--bg-secondary: #ffffff;
--bg-card: #f7f7f7;
--text-primary: #1D1D1F;
--text-secondary: #6E6E73;
--text-tertiary: #86868B;
--accent-primary: #4169E1;
--accent-secondary: #5a7ef7;
--accent-bright: #4169E1;
--border-color: rgba(65, 105, 225, 0.15);
--shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.15);
/* Legacy variables for compatibility */
--primary-color: #040b14;
--secondary-color: #7b4990;
--text-color: var(--text-primary);
--text-light: var(--text-secondary);
--text-white: #ffffff;
--background-color: var(--bg-primary);
--btn-bg: var(--accent-primary);
--btn-bg-hover: var(--accent-secondary);
--btn-color: #fff;
--link-color: var(--accent-primary);
--link-hover: var(--accent-secondary);
--social-link-background: rgb(218, 225, 247);
--border-gradient: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
--transition-speed: 0.3s;
--font-primary: "Ubuntu Sans", sans-serif;
--font-secondary: "Kode Mono", monospace;
/* Consistent Breakpoints */
--breakpoint-xs: 480px;
--breakpoint-sm: 768px;
--breakpoint-md: 1024px;
--breakpoint-lg: 1200px;
--breakpoint-xl: 1400px;
/* Container Sizes */
--container-xs: 100%;
--container-sm: 95%;
--container-md: 90%;
--container-lg: 85%;
--container-xl: 1200px;
}
/* Dark Mode Theme */
[data-theme="dark"] {
--bg-primary: #000000;
--bg-secondary: #111111;
--bg-card: #1e1e1e;
--text-primary: #FFFFFF;
--text-secondary: #CCCCCC;
--text-tertiary: #999999;
--accent-primary: #4169E1;
--accent-secondary: #5a7ef7;
--accent-bright: #009B77;
--border-color: rgba(65, 105, 225, 0.4);
--shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
--shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.7);
/* Update legacy variables for dark mode */
--background-color: var(--bg-primary);
--text-color: var(--text-primary);
--text-light: var(--text-secondary);
--btn-bg: var(--accent-primary);
--btn-bg-hover: var(--accent-secondary);
--link-color: var(--accent-primary);
--link-hover: var(--accent-secondary);
}
/* ===== FLOATING THEME TOGGLE BUTTON ===== */
.floating-theme-toggle {
position: fixed;
top: 30px;
right: 30px;
z-index: 9999;
transition: all var(--transition-speed) ease;
}
.floating-theme-btn {
position: relative;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* Light Mode Glassy Style */
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.floating-theme-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.floating-theme-btn svg {
width: 22px;
height: 22px;
stroke-width: 2;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
color: #374151;
}
.sun-icon, .moon-icon {
position: absolute;
}
/* Dark Mode Floating Button */
[data-theme="dark"] .floating-theme-btn {
background: rgba(18, 18, 18, 0.8);
border: 1px solid rgba(65, 105, 225, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(65, 105, 225, 0.2),
0 0 20px rgba(65, 105, 225, 0.1);
}
[data-theme="dark"] .floating-theme-btn:hover {
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(65, 105, 225, 0.3),
0 0 30px rgba(65, 105, 225, 0.2);
}
[data-theme="dark"] .floating-theme-btn svg {
color: #4169E1;
}
/* Icon transitions */
[data-theme="light"] .moon-icon,
[data-theme="dark"] .sun-icon {
opacity: 1;
transform: rotate(0deg) scale(1);
}
[data-theme="light"] .sun-icon,
[data-theme="dark"] .moon-icon {
opacity: 0;
transform: rotate(180deg) scale(0.5);
}
/* Responsive positioning */
@media (max-width: 768px) {
.floating-theme-toggle {
top: 20px;
right: 20px;
}
.floating-theme-btn {
width: 48px;
height: 48px;
}
.floating-theme-btn svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.floating-theme-toggle {
top: 15px;
right: 15px;
}
.floating-theme-btn {
width: 44px;
height: 44px;
}
}
/* For example, updating the projects section: */
.projects {
width: 100%;
padding: 40px;
background-color: var(--background-color);
}
/* Card background updated */
.card {
background-color: var(--bg-card);
border-radius: 8px;
overflow: hidden;
width: 300px;
position: relative;
box-shadow: var(--shadow);
transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
/* Font definitions */
.font-Ubuntu-sans {
font-family: "Ubuntu Sans", sans-serif;
font-weight: 430;
font-style: normal;
font-variation-settings: "wdth" 100;
line-height: 21px;
}
.font-Raleway-Dots {
font-family: "Raleway Dots", sans-serif;
font-weight: 600;
font-style: normal;
}
.font-Kode-Mono {
font-family: "Kode Mono", sans-serif;
font-weight: 400;
}
/* General styles */
* {
box-sizing: border-box;
transition: background-color var(--transition-speed) ease,
color var(--transition-speed) ease,
border-color var(--transition-speed) ease,
box-shadow var(--transition-speed) ease;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-primary);
background-color: #898f93;
color: var(--text-color);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ===== DARK MODE BODY & UNIVERSAL BACKGROUND ===== */
[data-theme="dark"] body {
background: linear-gradient(135deg, #0a0a0a 0%, #121212 25%, #1a1a1a 50%, #121212 75%, #0a0a0a 100%);
background-attachment: fixed;
color: var(--text-primary);
position: relative;
}
[data-theme="dark"] body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 20% 10%, rgba(65, 105, 225, 0.03) 0%, transparent 50%),
radial-gradient(ellipse at 80% 30%, rgba(65, 105, 225, 0.02) 0%, transparent 50%),
radial-gradient(ellipse at 40% 70%, rgba(65, 105, 225, 0.025) 0%, transparent 50%),
radial-gradient(ellipse at 90% 90%, rgba(65, 105, 225, 0.02) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
/* Dark Mode Section Base Styles */
[data-theme="dark"] section:not(#hero):not(#top-nav) {
background: rgba(30, 30, 30, 1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 2px solid rgba(65, 105, 225, 0.3);
border-radius: 16px;
margin: 2rem;
position: relative;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] section:not(#hero):not(#top-nav)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(65, 105, 225, 0.03) 0%, transparent 30%),
radial-gradient(circle at 20% 20%, rgba(65, 105, 225, 0.05) 0%, transparent 40%);
pointer-events: none;
z-index: 0;
}
[data-theme="dark"] section:not(#hero):not(#top-nav) > * {
position: relative;
z-index: 1;
}
/* ===== DARK MODE SECTION-SPECIFIC STYLES ===== */
/* Projects Section */
[data-theme="dark"] .projects {
color: var(--text-primary);
}
[data-theme="dark"] .projects h1,
[data-theme="dark"] .projects h2,
[data-theme="dark"] .projects h3,
[data-theme="dark"] .project-title {
color: var(--text-primary);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .projects p,
[data-theme="dark"] .project-description {
color: var(--text-secondary);
line-height: 1.6;
}
[data-theme="dark"] .project-tech,
[data-theme="dark"] .project-link {
color: var(--accent-primary);
}
[data-theme="dark"] .project-link:hover {
color: var(--accent-secondary);
text-shadow: 0 0 8px rgba(65, 105, 225, 0.4);
}
[data-theme="dark"] .project-card {
background: #2a2a2a;
border: 2px solid rgba(65, 105, 225, 0.4);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .project-card:hover {
background: #333333;
border-color: rgba(65, 105, 225, 0.6);
box-shadow: 0 15px 50px rgba(65, 105, 225, 0.2);
transform: translateY(-3px);
}
/* Skills Section */
[data-theme="dark"] .skills {
color: var(--text-primary);
}
[data-theme="dark"] .skills h2,
[data-theme="dark"] .skills h3 {
color: var(--text-primary);
}
[data-theme="dark"] .skill-item {
background: #2a2a2a;
border: 2px solid rgba(65, 105, 225, 0.4);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .skill-item:hover {
background: #333333;
border-color: rgba(65, 105, 225, 0.6);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(65, 105, 225, 0.15);
}
/* Contact Section */
[data-theme="dark"] .contact-page {
color: var(--text-primary);
}
[data-theme="dark"] .contact-page h2 {
color: var(--text-primary);
}
[data-theme="dark"] .contact-page p {
color: var(--text-secondary);
}
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
background: #2a2a2a;
border: 2px solid rgba(65, 105, 225, 0.4);
color: var(--text-primary);
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus {
background: #333333;
border-color: rgba(65, 105, 225, 0.7);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.3),
0 0 0 3px rgba(65, 105, 225, 0.3);
}
/* Light mode placeholder fixes */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #666666 !important;
opacity: 1;
font-weight: 500;
}
.contact-form input,
.contact-form textarea {
color: #1a1a1a !important;
background: #ffffff;
border: 2px solid #e0e0e0;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #4169E1;
outline: none;
box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}
[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
color: #999999 !important;
opacity: 1;
}
/* Resume Section */
[data-theme="dark"] .resume {
color: var(--text-primary);
}
[data-theme="dark"] .resume h1,
[data-theme="dark"] .resume h2,
[data-theme="dark"] .resume h3 {
color: var(--text-primary);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .resume p,
[data-theme="dark"] .resume li {
color: var(--text-secondary);
line-height: 1.6;
}
[data-theme="dark"] .resume .date,
[data-theme="dark"] .resume .company {
color: var(--accent-primary);
}
/* GitHub Activity Section */
[data-theme="dark"] .github-activity {
color: var(--text-primary);
}
[data-theme="dark"] .github-activity h1,
[data-theme="dark"] .github-activity h2,
[data-theme="dark"] .github-activity h3 {
color: var(--text-primary);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .github-activity p {
color: var(--text-secondary);
}
/* Universal Text Improvements */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
color: var(--text-primary) !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
font-weight: 600;
}
[data-theme="dark"] p {
color: var(--text-secondary) !important;
line-height: 1.7;
}
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li {
color: var(--text-secondary);
}
[data-theme="dark"] strong,
[data-theme="dark"] b {
color: var(--text-primary);
font-weight: 700;
}
[data-theme="dark"] a {
color: var(--accent-primary) !important;
transition: all 0.3s ease;
}
[data-theme="dark"] a:hover {
color: var(--accent-secondary) !important;
text-shadow: 0 0 10px rgba(65, 105, 225, 0.5);
}
/* Labels and form elements */
[data-theme="dark"] label {
color: var(--text-primary);
font-weight: 500;
}
[data-theme="dark"] .form-label,
[data-theme="dark"] .input-label {
color: var(--text-primary);
}
[data-theme="dark"] .section-heading {
color: var(--text-primary);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .section-subtitle {
color: var(--text-secondary);
}
/* ===== SPECIFIC SECTION DARK MODE STYLING ===== */
/* About Me Section */
[data-theme="dark"] .about-container {
background: #2a2a2a;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* Contact Page Section */
[data-theme="dark"] .contact-container {
background: #2a2a2a;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* Skills Section */
[data-theme="dark"] .skills-container {
background: #2a2a2a;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* Projects Section */
[data-theme="dark"] .projects-container {
background: #2a2a2a;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* Resume Section */
[data-theme="dark"] .resume-container {
background: #2a2a2a;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* GitHub Activity Container */
[data-theme="dark"] .github-container {
background: #2a2a2a;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* Generic content containers */
[data-theme="dark"] .content-container,
[data-theme="dark"] .main-container {
background: #2a2a2a;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* Card Components */
[data-theme="dark"] .card {
background: #2a2a2a;
border: 2px solid rgba(65, 105, 225, 0.4);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .card:hover {
background: #333333;
border-color: rgba(65, 105, 225, 0.6);
box-shadow: 0 15px 50px rgba(65, 105, 225, 0.2);
transform: translateY(-3px);
}
/* GitHub Feed Items */
[data-theme="dark"] .github-feed-item {
background: #2a2a2a;
border: 2px solid rgba(65, 105, 225, 0.4);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .github-feed-item:hover {
background: #333333;
border-color: rgba(65, 105, 225, 0.6);
transform: translateY(-1px);
box-shadow: 0 10px 30px rgba(65, 105, 225, 0.15);
}
/* Header and Sidebar */
#header {
padding: 0 15px;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
width: 300px;
transition: all ease-in-out 0.5s;
height: 100%;
background-color: var(--primary-color);
z-index: 1100;
}
/* Dark Mode Sidebar */
[data-theme="dark"] #header {
background: linear-gradient(180deg,
rgba(10, 10, 10, 0.98) 0%,
rgba(26, 26, 26, 0.99) 50%,
rgba(10, 10, 10, 0.98) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-right: 1px solid rgba(65, 105, 225, 0.3);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] #header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 50% 20%, rgba(65, 105, 225, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 50% 80%, rgba(65, 105, 225, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
.sidebar {
margin-top: 0;
display: flex;
flex-direction: column;
}
.profile h1 {
font-size: 24px;
margin: 15px;
padding: 0;
font-weight: 600;
text-align: center;
font-family: "Poppins", sans-serif;
}
.profile h1 a {
color: #fff;
text-decoration: none;
}
.profile h1 a:hover {
color: #fc0000;
}
/* Dark Mode Profile */
[data-theme="dark"] .profile h1 a {
color: var(--text-primary);
text-shadow: 0 0 10px rgba(65, 105, 225, 0.3);
}
[data-theme="dark"] .profile h1 a:hover {
color: var(--accent-primary);
text-shadow: 0 0 15px rgba(65, 105, 225, 0.5);
}
@keyframes flowAnimation {
0% { border-color: #9b59b6; }
50% { border-color: #ffb6c1; }
100% { border-color: #a2cffe; }
}
#image-container {
display: inline-block;
padding: 8px;
border: 8px solid #834c4c;
border-radius: 50%;
overflow: hidden;
height: 100px;
width: 100px;
margin-top: 25px;
margin-left: 80px;
animation: flowAnimation 5s infinite alternate;
}
.logo-image {
display: block;
max-width: 100%;
height: auto;
}
.nav-menu {
padding: 10px 0;
}
.nav-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu > ul > li {
position: relative;
white-space: nowrap;
}
.nav-menu a,
.nav-menu a:focus {
display: flex;
align-items: center;
color: #eeeff3;
padding: 12px 15px;
margin-bottom: 8px;
transition: color 0.3s;
font-size: 15px;
}
.nav-menu a i,
.nav-menu a:focus i {
font-size: 24px;
padding-right: 8px;
color: #cccdd5;
}
.nav-menu a:hover,
.nav-menu .active,
.nav-menu li:hover > a {
color: #ff4949;
}
.nav-menu a:hover i,
.nav-menu .active i,
.nav-menu li:hover > a i {
color: #dced19;
}
.navbar {
display: flex;
overflow-x: hidden;
box-sizing: border-box;
}
.social-links {
display: flex;
align-items: center;
justify-content: center;
}
.profile .social-links a i {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--social-link-background);
margin: 0 8px;
height: 42px;
width: 42px;
transition: all var(--transition-speed) ease;
box-shadow: var(--shadow);
}
.profile .social-links a i:hover {
transform: translateY(-3px) scale(1.1);
background-color: var(--secondary-color);
box-shadow: var(--shadow-hover);
}
.profile .social-links a i:hover img {
filter: brightness(0) invert(1);
}
.profile .social-links a i img {
height: 20px;
width: 20px;
max-width: 100%;
transition: filter var(--transition-speed) ease;
}
.nav-link {
text-decoration: none;
color: #fff;
}
/* Dark Mode Navigation */
[data-theme="dark"] .nav-link {
color: var(--text-primary);
transition: all 0.3s ease;
}
[data-theme="dark"] .nav-link:hover {
color: var(--accent-primary);
text-shadow: 0 0 10px rgba(65, 105, 225, 0.5);
}
[data-theme="dark"] .nav-link.active {
color: var(--accent-primary);
text-shadow: 0 0 15px rgba(65, 105, 225, 0.6);
}
/* Hero Section */
/* ===== LIGHT MODE HERO SECTION ===== */
#hero {
width: calc(100% - 300px);
margin-left: 300px;
height: 100vh;
background-color: #F8F9FA;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
position: relative;
overflow: hidden;
}
/* ===== DARK MODE HERO SECTION ===== */
[data-theme="dark"] #hero {
background: linear-gradient(135deg,
#121212 0%,
#1e1e1e 50%,
#121212 100%);
position: relative;
}
[data-theme="dark"] #hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(65, 105, 225, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at 80% 70%, rgba(65, 105, 225, 0.1) 0%, transparent 60%),
radial-gradient(ellipse at 50% 50%, rgba(65, 105, 225, 0.05) 0%, transparent 80%);
pointer-events: none;
z-index: 1;
}
[data-theme="dark"] #hero > * {
position: relative;
z-index: 2;
}
/* Hero Monogram - Elegant Serif Typography */
.hero-monogram {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding-right: 2rem;
z-index: 10;
pointer-events: none;
}
.monogram-letters {
display: flex;
align-items: center;
gap: -8px; /* Tight letter spacing for elegance */
font-family: 'Times New Roman', 'Georgia', serif;
font-size: 120px;
font-weight: 400;
color: #2E294E;
text-shadow:
2px 2px 4px rgba(0, 0, 0, 0.1),
0 0 8px rgba(94, 87, 138, 0.2);
letter-spacing: -0.1em;
opacity: 0;
animation: monogramFadeIn 0.8s ease-out 0.3s forwards;
}
.letter-a,
.letter-v {
display: inline-block;
line-height: 1;
transition: all 0.3s ease;
}
.letter-a {
margin-right: -12px; /* Overlap for elegant connection */
}
.letter-v {
margin-left: -8px;
}
/* Hover effect for interactivity */
.monogram-letters:hover .letter-a,
.monogram-letters:hover .letter-v {
color: #5D578A;
text-shadow:
3px 3px 6px rgba(0, 0, 0, 0.15),
0 0 12px rgba(94, 87, 138, 0.3);
transform: scale(1.05);
}
/* Animation System */
@keyframes monogramFadeIn {
to {
opacity: 1;
}
}
/* Hero Content */
.hero-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 2rem;
padding-right: 2rem;
opacity: 0;
animation: slideInRight 1s ease-out 0.5s both;
}
.hero-text {
margin-bottom: 3rem;
}
.hero-name {
font-family: 'Inter', 'Poppins', sans-serif;
font-weight: 700;
font-size: clamp(2.5rem, 6vw, 4rem);
color: #1D1D1F;
margin: 0 0 0.5rem 0;
line-height: 1.1;
}
/* Name Rotator Styles */
.name-rotator {
position: relative;
display: inline-block;
overflow: hidden;
}
.name-item {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.name-item.active {
position: relative;
opacity: 1;
transform: translateY(0);
}
.name-item.fade-out {
opacity: 0;
transform: translateY(-20px);
}
.name-item.fade-in {
opacity: 1;
transform: translateY(0);
}
.hero-tagline {
font-family: 'Inter', 'Poppins', sans-serif;
font-weight: 400;
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
color: #6E6E73;
margin: 0 0 1rem 0;
line-height: 1.3;
}
.hero-expertise {
font-family: 'Inter', 'Poppins', sans-serif;
font-weight: 300;
font-size: clamp(0.9rem, 2vw, 1.1rem);
color: #003366;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.4;
}
/* ===== DARK MODE HERO TEXT ===== */
[data-theme="dark"] .hero-name {
color: #F5F5F7;
text-shadow: 0 0 20px rgba(65, 105, 225, 0.3);
}
[data-theme="dark"] .hero-tagline {
color: #86868B;
}
[data-theme="dark"] .hero-expertise {
color: #4169E1;
text-shadow: 0 0 10px rgba(65, 105, 225, 0.5);
}
/* Hero Buttons */
.hero-buttons {
display: flex;
gap: 1.5rem;
align-items: center;
}
.btn-primary, .btn-secondary {
padding: 14px 28px;
border-radius: 8px;
font-family: 'Inter', 'Poppins', sans-serif;
font-weight: 500;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.btn-primary {
background-color: #003366;
color: white;
box-shadow: 0 4px 12px rgba(0, 51, 102, 0.15);
}
.btn-primary:hover {
background-color: #002244;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 51, 102, 0.25);
}
.btn-secondary {
background-color: transparent;
color: #003366;
border: 1px solid #003366;
}
.btn-secondary:hover {
background-color: #003366;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 51, 102, 0.15);
}
/* ===== DARK MODE BUTTONS ===== */
[data-theme="dark"] .btn-primary {
background-color: #4169E1;
color: white;
box-shadow: 0 4px 12px rgba(65, 105, 225, 0.3);
}
[data-theme="dark"] .btn-primary:hover {
background-color: #5a7ef7;
box-shadow: 0 8px 24px rgba(65, 105, 225, 0.4);
}
[data-theme="dark"] .btn-secondary {
background-color: transparent;
color: #4169E1;
border: 1px solid #4169E1;
box-shadow: 0 0 10px rgba(65, 105, 225, 0.2);
}
[data-theme="dark"] .btn-secondary:hover {
background-color: #4169E1;
color: white !important;
box-shadow: 0 8px 24px rgba(65, 105, 225, 0.3);
}
/* Ensure button text is visible */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-secondary {
color: white !important;
font-weight: 500;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-secondary:hover {
color: white !important;
}
/* Ensure all clickable elements have proper text */
[data-theme="dark"] button {
color: var(--text-primary) !important;
}
[data-theme="dark"] .nav-link span {
color: var(--text-primary) !important;
}
/* ===== LIGHT MODE TEXT CONTRAST FIXES ===== */
/* Ensure dark text on light backgrounds for accessibility */
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.project-card h1,
.project-card h2,
.project-card h3,
.project-card h4,
.project-card h5,
.project-card h6 {
color: #1a1a1a !important;
font-weight: 600;
}
.card p,
.project-card p,
.card span,
.project-card span,
.card div,
.project-card div {
color: #333333 !important;
line-height: 1.6;
}
/* GitHub Activity specific fixes */
.github-activity .card h2,
.github-activity .card h3 {
color: #1a1a1a !important;
font-weight: 700;
}
.github-activity .card p,
.github-activity .card span {
color: #444444 !important;
}
/* Resume section fixes */
.resume .card h2,
.resume .card h3,
.resume .card h4 {
color: #1a1a1a !important;
font-weight: 600;
}
.resume .card p,
.resume .card li,
.resume .card span {
color: #333333 !important;
}
/* Contact section fixes */
.contact-page .card h2,
.contact-page .card h3 {
color: #1a1a1a !important;
font-weight: 600;
}
.contact-page .card p {
color: #333333 !important;
}
/* ===== DARK MODE TEXT VISIBILITY OVERRIDES ===== */
[data-theme="dark"] * {
border-color: rgba(65, 105, 225, 0.3);
}
[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6,
[data-theme="dark"] .project-card h1,
[data-theme="dark"] .project-card h2,
[data-theme="dark"] .project-card h3,
[data-theme="dark"] .project-card h4,
[data-theme="dark"] .project-card h5,
[data-theme="dark"] .project-card h6 {
color: var(--text-primary) !important;
}
[data-theme="dark"] .card p,
[data-theme="dark"] .project-card p,
[data-theme="dark"] .card span,
[data-theme="dark"] .project-card span,
[data-theme="dark"] .card div,
[data-theme="dark"] .project-card div {
color: var(--text-secondary) !important;
}
/* ===== CONSISTENT ACCENT COLOR USAGE ===== */
/* Buttons */
.btn-primary,
button.primary,
.primary-button {
background-color: var(--accent-primary) !important;
color: white !important;
border: none;
}
.btn-primary:hover,
button.primary:hover,
.primary-button:hover {
background-color: var(--accent-secondary) !important;
}
.btn-secondary {
background-color: transparent !important;
color: var(--accent-primary) !important;
border: 2px solid var(--accent-primary) !important;
}
.btn-secondary:hover {
background-color: var(--accent-primary) !important;
color: white !important;
}
/* Links */
a:not(.nav-link) {
color: var(--accent-primary) !important;
}
a:not(.nav-link):hover {
color: var(--accent-secondary) !important;
}
/* Timeline elements */
.timeline::before,
.timeline-dot,
.timeline-line {
background-color: var(--accent-primary) !important;
}
/* Progress bars, highlights, and accents */
.progress-bar,
.highlight,
.accent-color,
.primary-color {
color: var(--accent-primary) !important;
}
.progress-bar-fill,
.accent-bg,
.primary-bg {
background-color: var(--accent-primary) !important;
}
/* ===== STANDARDIZED CARD BACKGROUNDS ===== */
/* Light mode unified card styling */
.card,
.project-card,
.skill-item,
.github-feed-item,
.resume-item,
.contact-card {
background: #ffffff !important;
border: 1px solid rgba(65, 105, 225, 0.15) !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
padding: 1.5rem !important;
transition: all 0.3s ease !important;
}
.card:hover,
.project-card:hover,
.skill-item:hover,
.github-feed-item:hover,
.resume-item:hover,
.contact-card:hover {
box-shadow: 0 8px 24px rgba(65, 105, 225, 0.15) !important;
transform: translateY(-2px) !important;
border-color: rgba(65, 105, 225, 0.25) !important;
}
/* Remove any gradient backgrounds that reduce readability */
.project-card::before,
.card::before {
display: none !important;
}
/* Ensure consistent spacing */
.card > *:first-child,
.project-card > *:first-child {
margin-top: 0 !important;
}
.card > *:last-child,
.project-card > *:last-child {
margin-bottom: 0 !important;
}
/* ===== GITHUB ACTIVITY SECTION FIXES ===== */
.github-activity h2,
.github-activity h3,
.github-activity .section-title {
color: #1a1a1a !important;
font-weight: 700 !important;
font-size: 1.5rem !important;
}
.github-activity .card h2 {
color: #1a1a1a !important;
font-weight: 700 !important;
margin-bottom: 1rem !important;
}
.github-activity .contribution-graph h3,
.github-activity .contribution-title {
color: #1a1a1a !important;
font-weight: 600 !important;
font-size: 1.2rem !important;
}
.github-activity p,
.github-activity .description {
color: #444444 !important;
font-weight: 500 !important;
line-height: 1.6 !important;
}
/* Dark mode GitHub activity */
[data-theme="dark"] .github-activity h2,
[data-theme="dark"] .github-activity h3,
[data-theme="dark"] .github-activity .section-title {
color: var(--text-primary) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .github-activity .card h2 {
color: var(--text-primary) !important;
}
[data-theme="dark"] .github-activity p,
[data-theme="dark"] .github-activity .description {
color: var(--text-secondary) !important;
}
/* ===== TIMELINE CONTRAST FIXES ===== */
/* Light mode timeline */
.timeline,
.project-timeline {
position: relative;
}
.timeline::before,
.project-timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent-primary) !important;
opacity: 1 !important;
}
.timeline-item,
.project-timeline-item {
position: relative;
padding-left: 60px;
margin-bottom: 2rem;
}
.timeline-dot,
.project-timeline-dot,
.timeline-marker {
position: absolute;
left: 8px;
top: 8px;
width: 20px;
height: 20px;
background: var(--accent-primary) !important;
border: 4px solid #ffffff !important;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(65, 105, 225, 0.3) !important;
}
.timeline-content h3,
.project-timeline-content h3 {
color: #1a1a1a !important;
font-weight: 600 !important;
margin-bottom: 0.5rem !important;
}
.timeline-content p,
.project-timeline-content p {
color: #444444 !important;
line-height: 1.6 !important;
}
/* Dark mode timeline improvements */
[data-theme="dark"] .timeline-dot,
[data-theme="dark"] .project-timeline-dot,
[data-theme="dark"] .timeline-marker {
background: var(--accent-primary) !important;
border: 4px solid var(--bg-primary) !important;
box-shadow: 0 2px 8px rgba(65, 105, 225, 0.5) !important;
}
[data-theme="dark"] .timeline-content h3,
[data-theme="dark"] .project-timeline-content h3 {
color: var(--text-primary) !important;
}
[data-theme="dark"] .timeline-content p,
[data-theme="dark"] .project-timeline-content p {
color: var(--text-secondary) !important;
}
/* ===== ABOUT SECTION CONSISTENCY FIXES ===== */
/* Remove decorative elements that are inconsistent with other sections */
.image-frame::before,
.image-frame::after,
.about-intro-card::before,
.detail-card::before {
display: none !important;
}
/* Standardize about section styling */
.about-me .image-frame,
.about-me .photo-container {
background: #ffffff !important;
border: 2px solid rgba(65, 105, 225, 0.15) !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
padding: 1rem !important;
}
.about-me h2,
.about-me h3 {
color: #1a1a1a !important;
font-weight: 600 !important;
}
.about-me p {
color: #444444 !important;
line-height: 1.6 !important;
}
/* Dark mode about section */
[data-theme="dark"] .about-me .image-frame,
[data-theme="dark"] .about-me .photo-container {
background: var(--bg-card) !important;
border: 2px solid rgba(65, 105, 225, 0.3) !important;
}
/* Remove any rotating animations or complex decorative effects */
@keyframes rotate {
/* Remove rotation animation */
}
.image-frame,
.about-photo,
.profile-photo {
animation: none !important;
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
opacity: 0.7;
animation: fadeIn 1s ease-out 2s both;
}
.scroll-chevron {
width: 24px;
height: 24px;
color: #6E6E73;
animation: bounce 2s infinite;
}
.scroll-chevron svg {
width: 100%;
height: 100%;
stroke-width: 2;
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translateY(0);
}
40%, 43% {
transform: translateY(-8px);
}
70% {
transform: translateY(-4px);
}
90% {
transform: translateY(-2px);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Main Content */
#main-content {
width: calc(100% - 300px);
margin-left: 300px;
overflow-y: auto;
position: relative;
display: flex;
flex-direction: column;
background: url(../assets/bg.png) fixed;
scroll-behavior: smooth;
flex: 1;
}
/* Dark Mode Main Content */
[data-theme="dark"] #main-content {
background: none;
}
/* ===== CONSISTENT SECTION SPACING ===== */
.content-section {
margin: 0 0 4rem 0; /* Consistent 4rem bottom margin for all sections */
padding: 2rem; /* Consistent 2rem padding */
}
.content-section:first-child {
margin-top: 0; /* Remove top margin from first section */
}
.content-section:last-child {
margin-bottom: 2rem; /* Smaller bottom margin for last section */
}
/* Section Container - New wrapper for consistency */
.section-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Section Titles */
#section-title {
margin: 0 0 2rem 0; /* Consistent spacing below section headers */
background-color: #fff;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 10px 10px 10px var(--box-shadow);
padding: 1.5rem;
padding-top: 0;
border-radius: 12px;
}
.section-heading {
font-size: 2.5rem;
font-family: var(--font-primary);
font-weight: 700;
margin: 0 0 2rem 0; /* Consistent margin below headings */
color: var(--primary-color);
position: relative;
padding-bottom: 1rem;
}
.section-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
border-radius: 2px;
}
/* ===== REFINED PROJECTS SECTION ===== */
.projects {
background: var(--background-color);
padding: 4rem 0 5rem;
position: relative;
}
.projects::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
opacity: 0.3;
}
.projects-container {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 2rem;
position: relative;
}
.projects-header {
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.section-heading {
font-size: 2rem;
font-family: var(--font-primary);
font-weight: 700;
margin: 0 0 0.5rem 0;
color: var(--primary-color);
position: relative;
}
.section-heading::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--border-gradient);
border-radius: 2px;
}
.projects-subtitle {
color: var(--text-light);
font-size: 1rem;
margin: 1rem 0 0 0;
font-family: var(--font-primary);
}
.projects-timeline {
position: relative;
padding: 1rem 0;
max-width: 800px;
margin: 0 auto;
}
.timeline-track {
position: absolute;
left: 50%;
top: 20px;
bottom: 20px;
width: 2px;
background: linear-gradient(to bottom, var(--secondary-color), rgba(123, 73, 144, 0.3), var(--secondary-color));
transform: translateX(-50%);
border-radius: 1px;
}
.timeline-track::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: var(--secondary-color);
border-radius: 50%;
box-shadow: 0 0 10px rgba(123, 73, 144, 0.5);
}
.timeline-track::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: var(--secondary-color);
border-radius: 50%;
box-shadow: 0 0 10px rgba(123, 73, 144, 0.5);
}
.project-node {
position: relative;
margin: 2rem 0;
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.project-node::before {
content: attr(data-year);
position: absolute;
left: 50%;
top: -20px;
transform: translateX(-50%);
background: var(--secondary-color);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 500;
font-family: var(--font-secondary);
z-index: 2;
box-shadow: var(--shadow);
}
.node-connector {
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
background: var(--secondary-color);
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 3;
border: 2px solid var(--background-color);
transition: all 0.3s ease;
}
.project-node:hover .node-connector {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 0 0 15px rgba(123, 73, 144, 0.4);
}
.project-morph-card {
width: 360px;
background: white;
border-radius: 12px;
border: 1px solid rgba(123, 73, 144, 0.1);
position: relative;
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
box-shadow: var(--shadow);
}
.project-node:nth-child(even) .project-morph-card {
margin-left: calc(50% + 30px);
}
.project-node:nth-child(odd) .project-morph-card {
margin-right: calc(50% + 30px);
}
.project-morph-card:hover {
transform: translateY(-2px);
border-color: var(--secondary-color);
box-shadow: var(--shadow-hover);
}
.project-node.featured .project-morph-card {
border: 2px solid var(--secondary-color);
background: linear-gradient(135deg, rgba(123, 73, 144, 0.02) 0%, white 100%);
}
.project-node.featured .project-morph-card::before {
content: '★';
position: absolute;
top: -8px;
right: 15px;
background: var(--secondary-color);
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
z-index: 2;
}
.project-avatar {
position: relative;
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
margin: 1rem auto 0.8rem;
border: 2px solid rgba(123, 73, 144, 0.1);
flex-shrink: 0;
}
.project-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-speed) ease;
}
.project-morph-card:hover .project-avatar img {
transform: scale(1.05);
}
.project-core {
padding: 1rem 1.2rem 1.2rem;
text-align: center;
}
.project-title-section {
margin-bottom: 0.8rem;
}
.project-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
margin: 0 0 0.5rem 0;
font-family: var(--font-primary);
}
.project-tech-orbs {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.tech-orb {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
cursor: pointer;
transition: all var(--transition-speed) ease;
}
.tech-orb::before {
content: attr(data-tech);
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
background: var(--primary-color);
color: white;
padding: 3px 6px;
border-radius: 4px;
font-size: 0.6rem;
white-space: nowrap;
opacity: 0;
transition: opacity var(--transition-speed) ease;
pointer-events: none;
z-index: 10;
font-family: var(--font-secondary);
}
.tech-orb:hover::before {
opacity: 1;
}
.tech-orb:hover {
transform: scale(1.1);
}
.tech-orb.ai { background: var(--secondary-color); }
.tech-orb.web { background: #4ecdc4; }
.tech-orb.lang { background: #20c997; }
.tech-orb.api { background: #ffd93d; }
.tech-orb.nlp { background: #74b9ff; }
.tech-orb.data { background: #fd79a8; }
.project-essence {
margin: 0.8rem 0;
}
.essence-text {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.4;
font-family: var(--font-primary);
}
.project-portal {
margin-top: 1rem;
}
.portal-link {
color: var(--secondary-color);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
font-family: var(--font-primary);
transition: all var(--transition-speed) ease;
}
.portal-link:hover {
color: var(--primary-color);
text-decoration: underline;
}
.project-node.micro .project-morph-card {
width: 300px;
}
.project-node.micro .project-title {
font-size: 1.1rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.projects {
padding: 3rem 0 4rem;
}
.projects-container {
padding: 0 1rem;
}
.projects-timeline {
padding: 0.5rem 0;
max-width: 100%;
}
.timeline-track {
left: 30px;
transform: none;
top: 15px;
bottom: 15px;
}
.timeline-track::before,
.timeline-track::after {
left: 50%;
}
.project-node {
margin: 1.5rem 0;
}
.project-node::before {
left: 30px;
transform: translateX(-50%);
font-size: 0.65rem;
padding: 1px 6px;
}
.node-connector {
left: 30px;
width: 10px;
height: 10px;
}
.project-morph-card {
width: calc(100% - 60px);
margin-left: 60px !important;
margin-right: 0 !important;
}
.project-node.micro .project-morph-card {
width: calc(100% - 60px);
}
.project-avatar {
width: 50px;
height: 50px;
margin: 0.8rem auto 0.6rem;
}
.project-title {
font-size: 1.1rem;
}
.tech-orb {
width: 16px;
height: 16px;
}
.essence-text {
font-size: 0.85rem;
}
.project-core {
padding: 0.8rem 1rem 1rem;
}
}
/* ===== RESPONSIVE COMPACT PROJECTS ===== */
@media (max-width: 768px) {
.projects {
padding: 30px 0;
}
.projects-container {
padding: 0 15px;
}
.projects-header {
margin-bottom: 20px;
}
.projects-header .section-heading {
font-size: 1.8rem;
}
.projects-subtitle {
font-size: 0.9rem;
}
.projects-list {
gap: 12px;
margin-top: 20px;
}
.project-item {
padding: 12px;
}
.project-visual {
width: 70px;
height: 50px;
margin-right: 12px;
}
.project-header h3 {
font-size: 1rem;
}
.project-summary {
font-size: 0.8rem;
-webkit-line-clamp: 1;
line-clamp: 1;
}
.project-link {
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.projects {
padding: 25px 0;
}
.projects-container {
padding: 0 12px;
}
.projects-header .section-heading {
font-size: 1.6rem;
}
.projects-list {
gap: 10px;
}
.project-item {
padding: 10px;
flex-direction: column;
align-items: stretch;
text-align: center;
}
.project-visual {
width: 60px;
height: 40px;
margin: 0 auto 8px auto;
}
.project-header {
flex-direction: column;
gap: 4px;
margin-bottom: 4px;
}
.project-tech-inline {
justify-content: center;
}
.project-summary {
font-size: 0.75rem;
text-align: center;
margin-bottom: 6px;
}
.project-link {
align-self: center;
font-size: 0.7rem;
}
.project-item.mini {
padding: 8px;
}
}
/* ===== REDESIGNED ABOUT SECTION ===== */
.about-me {
padding: 60px 0;
}
/* Dark Mode About Section */
[data-theme="dark"] .about-me {
color: var(--text-primary);
}
[data-theme="dark"] .about-me h1,
[data-theme="dark"] .about-me h2,
[data-theme="dark"] .about-me h3 {
color: var(--text-primary);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .about-me p {
color: var(--text-secondary);
line-height: 1.6;
}
[data-theme="dark"] .about-me strong,
[data-theme="dark"] .about-me .highlight {
color: var(--text-primary);
font-weight: 600;
}
.about-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.about-header {
text-align: center;
margin-bottom: 60px;
}
.about-subtitle {
font-size: 1.2rem;
color: var(--secondary-color);
font-weight: 500;
margin-top: 10px;
font-family: var(--font-primary);
}
.about-content {
display: grid;
grid-template-columns: 350px 1fr;
gap: 60px;
align-items: start;
margin-bottom: 60px;
}
/* ===== STYLISH IMAGE FRAME ===== */
.about-image-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.image-frame {
position: relative;
width: 300px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.image-frame::before {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: linear-gradient(135deg,
var(--secondary-color) 0%,
#4a90e2 30%,
#7b4990 60%,
var(--accent-primary) 100%);
border-radius: 50px;
z-index: 1;
animation: rotate 20s linear infinite;
box-shadow: 0 0 40px rgba(123, 73, 144, 0.3);
}
.image-frame::after {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
background: linear-gradient(45deg,
rgba(123, 73, 144, 0.2),
rgba(74, 144, 226, 0.2),
rgba(255, 255, 255, 0.1));
border-radius: 45px;
z-index: 2;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.frame-decoration {
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
border: 2px solid rgba(123, 73, 144, 0.3);
border-radius: 55px;
z-index: 0;
box-shadow:
0 0 30px rgba(123, 73, 144, 0.1),
inset 0 0 20px rgba(255, 255, 255, 0.05);
}
.profile-image {
width: 280px;
height: 380px;
object-fit: cover;
border-radius: 40px;
z-index: 3;
position: relative;
transition: transform 0.5s ease, box-shadow 0.5s ease, filter 0.3s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
/* Create PNG-like background removal effect */
filter: contrast(1.1) brightness(1.05) saturate(1.1);
background:
radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%),
linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
/* Subtle border to enhance the cutout effect */
border: 1px solid rgba(255, 255, 255, 0.1);
}
.frame-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(123, 73, 144, 0.15),
rgba(74, 144, 226, 0.1),
rgba(255, 255, 255, 0.05));
border-radius: 40px;
z-index: 4;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
/* Add a subtle shadow mask to enhance PNG-like appearance */
.profile-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at 50% 30%,
transparent 40%,
rgba(0, 0, 0, 0.1) 70%,
rgba(0, 0, 0, 0.2) 90%);
border-radius: 40px;
z-index: 1;
opacity: 0.3;
pointer-events: none;
}
.image-frame:hover .profile-image {
transform: scale(1.05) translateY(-5px);
box-shadow:
0 25px 80px rgba(123, 73, 144, 0.4),
0 10px 30px rgba(0, 0, 0, 0.2);
filter: contrast(1.15) brightness(1.1) saturate(1.15);
}
.image-frame:hover .frame-overlay {
opacity: 1;
}
.image-frame:hover::before {
animation-duration: 10s; /* Speed up rotation on hover */
box-shadow: 0 0 60px rgba(123, 73, 144, 0.5);
}
.image-frame:hover::after {
backdrop-filter: blur(20px);
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ===== ABOUT INFO CARDS ===== */
.about-info {
display: flex;
flex-direction: column;
gap: 30px;
}
.about-intro-card {
background: linear-gradient(135deg, #ffffff, #f8f9ff);
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(123, 73, 144, 0.1);
position: relative;
overflow: hidden;
}
.about-intro-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--secondary-color), #4a90e2);
}
.intro-text {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-color);
text-align: justify;
font-family: var(--font-primary);
}
.about-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.detail-card {
background: #ffffff;
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(123, 73, 144, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.detail-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--secondary-color), #4a90e2);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.detail-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(123, 73, 144, 0.15);
}
.detail-card:hover::before {
transform: translateX(0);
}
.detail-card.full-width {
grid-column: 1 / -1;
}
.card-header h3 {
margin: 0 0 20px 0;
color: var(--secondary-color);
font-size: 1.3rem;
font-weight: 600;
font-family: var(--font-primary);
}
.card-content {
display: flex;
flex-direction: column;
gap: 15px;
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(123, 73, 144, 0.1);
}
.detail-item:last-child {
border-bottom: none;
}
.detail-label {
font-weight: 500;
color: var(--text-light);
font-size: 0.95rem;
}
.detail-value {
font-weight: 600;
color: var(--text-color);
text-align: right;
}
.status-available {
color: #10b981;
background: rgba(16, 185, 129, 0.1);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.9rem;
}
.interests-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.interests-group,
.languages-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.interest-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.interest-tag {
background: linear-gradient(135deg, #ff6b6b, #feca57);
color: white;
padding: 5px 14px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 500;
transition: transform 0.2s ease;
}
.interest-tag:hover {
transform: scale(1.05);
}
.languages-group {
color: var(--text-color);
font-size: 1rem;
}
.about-quote-card {
background: linear-gradient(135deg, var(--secondary-color), #4a90e2);
padding: 25px;
border-radius: 15px;
position: relative;
overflow: hidden;
}
.about-quote-card::before {
content: '"';
position: absolute;
top: -10px;
left: 20px;
font-size: 4rem;
color: rgba(255, 255, 255, 0.2);
font-family: serif;
}
.quote-text {
color: white;
font-size: 1.1rem;
line-height: 1.6;
font-style: italic;
text-align: center;
position: relative;
z-index: 2;
}
/* ===== GITHUB SECTION ===== */
.github-section {
margin-top: 40px;
}
.github-card {
background: #ffffff;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
border: 1px solid rgba(123, 73, 144, 0.1);
}
.github-card h4 {
margin: 0 0 20px 0;
color: var(--secondary-color);
font-size: 1.4rem;
font-weight: 600;
}
.github-card img {
max-width: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* ===== RESPONSIVE DESIGN FOR ABOUT SECTION ===== */
@media (max-width: 1024px) {
.about-content {
grid-template-columns: 1fr;
gap: 50px;
}
.about-image-container {
text-align: center;
}
.about-details-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.about-container {
padding: 0 15px;
}
.about-content {
gap: 40px;
}
.image-frame {
width: 220px;
height: 280px;
}
.profile-image {
width: 200px;
height: 260px;
}
.about-details-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.about-intro-card,
.detail-card,
.about-quote-card,
.github-card {
padding: 20px;
}
.card-header h3 {
font-size: 1.2rem;
}
.intro-text {
font-size: 1rem;
line-height: 1.6;
}
.interest-tags {
justify-content: center;
}
}
@media (max-width: 480px) {
.about-me {
padding: 40px 0;
}
.about-header {
margin-bottom: 40px;
}
.section-heading {
font-size: 2rem;
}
.about-subtitle {
font-size: 1rem;
}
.image-frame {
width: 180px;
height: 240px;
}
.profile-image {
width: 160px;
height: 220px;
}
.about-intro-card,
.detail-card,
.about-quote-card,
.github-card {
padding: 15px;
}
.detail-item {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.detail-value {
text-align: left;
}
.skills-tags {
gap: 8px;
}
.interest-tag {
font-size: 0.8rem;
padding: 4px 12px;
}
}
/* Resume */
.resume-options {
text-align: center;
margin-top: 10px;
}
.resume-options button {
padding: 7px 20px;
margin: 0 20px;
font-size: 18px;
border: none;
border-radius: 30px;
background: #333;
color: #fff;
cursor: pointer;
transition: background-color 0.5s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
font-family: cursive;
}
.resume-options button:hover {
background-color: #d19595;
}
#resume-descreption {
text-align: justify;
}
.timeline {
display: flex;
flex-direction: row;
position: relative;
max-width: 100%;
margin: 40px auto;
padding: 20px;
background-color: #fff;
box-shadow: 10px 10px 10px var(--box-shadow);
justify-content: flex-start;
flex-wrap: wrap;
border-radius: 8px;
}
.timeline-box {
flex: 1;
}
.timeline-box::before {
content: ' ';
position: absolute;
top: 0;
width: 2px;
height: 100%;
background-color: #340a0a;
transform: translateX(-50%);
}
.timeline-item {
padding: 20px;
margin-bottom: 10px;
position: relative;
}
.timeline-item::after {
content: '';
position: absolute;
top: 0;
left: -8px;
width: 16px;
height: 16px;
background-color: #333;
border-radius: 50%;
}
.timeline-item-header {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.timeline-item-description {
font-size: 16px;
color: #666;
text-align: justify;
}
.timeline-box p {
margin-left: 20px;
font-family: "Ubuntu Sans", sans-serif;
font-size: 15px;
margin-bottom: 0;
}
/* ===== INNOVATIVE SKILLS CLOUD SECTION ===== */
.skills {
padding: 60px 0;
background: linear-gradient(135deg, #f8f9ff, #ffffff);
}
.skills-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
.skills-header {
text-align: center;
margin-bottom: 50px;
}
.skills-subtitle {
font-size: 1.1rem;
color: var(--secondary-color);
font-weight: 500;
margin-top: 10px;
font-family: var(--font-primary);
}
.skills-cloud {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
margin-bottom: 40px;
padding: 20px;
}
/* ===== SKILL BUBBLES ===== */
.skill-bubble {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
color: white;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 2px solid transparent;
font-family: var(--font-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.skill-bubble::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 50px;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.skill-bubble:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.skill-bubble:hover::before {
opacity: 1;
}
/* Category Colors */
.skill-bubble[data-category="ai"] {
background: linear-gradient(135deg, var(--secondary-color), #764ba2);
}
.skill-bubble[data-category="web"] {
background: linear-gradient(135deg, #4a90e2, #6b73ff);
}
.skill-bubble[data-category="mobile"] {
background: linear-gradient(135deg, #20c997, #38f9d7);
}
.skill-bubble[data-category="tools"] {
background: linear-gradient(135deg, #fd7e14, #ffc107);
}
/* ===== SKILLS LEGEND ===== */
.skills-legend {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
padding: 20px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 12px;
border-radius: 20px;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(123, 73, 144, 0.1);
}
.legend-item:hover {
background: rgba(255, 255, 255, 0.8);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.legend-item.active {
background: var(--secondary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(123, 73, 144, 0.3);
}
.legend-item.active .legend-text {
color: white;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.legend-color.ai {
background: linear-gradient(135deg, var(--secondary-color), #764ba2);
}
.legend-color.web {
background: linear-gradient(135deg, #4a90e2, #6b73ff);
}
.legend-color.mobile {
background: linear-gradient(135deg, #20c997, #38f9d7);
}
.legend-color.tools {
background: linear-gradient(135deg, #fd7e14, #ffc107);
}
.legend-text {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-color);
font-family: var(--font-primary);
}
/* ===== RESPONSIVE SKILLS SECTION ===== */
@media (max-width: 768px) {
.skills {
padding: 40px 0;
}
.skills-container {
padding: 0 15px;
}
.skills-header {
margin-bottom: 30px;
}
.skills-cloud {
gap: 8px;
padding: 15px;
}
.skill-bubble {
font-size: 0.8rem;
padding: 6px 12px;
}
.skills-legend {
gap: 12px;
margin-top: 20px;
}
.legend-item {
padding: 6px 10px;
}
.legend-text {
font-size: 0.8rem;
}
}
/* ===== FUTURISTIC CONTACT SECTION ===== */
.contact-page {
position: relative;
overflow: hidden;
}
.contact-page::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(123, 73, 144, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(4, 11, 20, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 3rem;
margin-top: 2rem;
position: relative;
z-index: 1;
}
/* Contact Info Panel */
.contact-info-panel {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 247, 247, 0.9));
border-radius: 20px;
padding: 2.5rem;
position: relative;
overflow: hidden;
border: 1px solid rgba(123, 73, 144, 0.1);
backdrop-filter: blur(10px);
}
.contact-info-panel::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, var(--secondary-color), var(--primary-color), var(--secondary-color));
border-radius: 20px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.contact-info-panel:hover::before {
opacity: 0.3;
}
.panel-header {
margin-bottom: 2rem;
text-align: center;
}
.panel-title {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
font-family: var(--font-primary);
}
.panel-subtitle {
color: var(--text-light);
font-size: 0.95rem;
font-style: italic;
opacity: 0.8;
}
.contact-methods {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.6);
border-radius: 16px;
border: 1px solid rgba(123, 73, 144, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.contact-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(123, 73, 144, 0.1), transparent);
transition: left 0.5s ease;
}
.contact-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(123, 73, 144, 0.15);
border-color: var(--secondary-color);
}
.contact-item:hover::before {
left: 100%;
}
.contact-icon-wrapper {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.contact-icon {
width: 24px;
height: 24px;
color: white;
stroke-width: 2;
}
.contact-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.contact-label {
font-weight: 600;
color: var(--text-color);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
}
.contact-link, .contact-text {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.contact-link:hover {
color: var(--secondary-color);
transform: translateX(3px);
}
/* Availability Status */
.availability-status {
padding: 1.5rem;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.1));
border-radius: 16px;
border: 1px solid rgba(34, 197, 94, 0.2);
text-align: center;
}
.status-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
}
.status-dot {
width: 12px;
height: 12px;
background: #22c55e;
border-radius: 50%;
position: relative;
}
.status-dot::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #22c55e;
border-radius: 50%;
opacity: 0.3;
animation: pulse 2s infinite;
}
.status-text {
color: #059669;
font-weight: 600;
font-size: 0.95rem;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.5); opacity: 0.1; }
100% { transform: scale(2); opacity: 0; }
}
/* Section Spacing & Contact Section Responsive Design */
@media (max-width: 1024px) {
.content-section {
padding: 1.5rem;
margin-bottom: 3rem;
}
.section-heading {
font-size: 2.2rem;
margin-bottom: 1.5rem;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-info-panel,
.contact-form-panel {
padding: 2rem;
}
}
@media (max-width: 768px) {
.content-section {
padding: 1.2rem;
margin-bottom: 2.5rem;
}
.section-heading {
font-size: 1.8rem;
margin-bottom: 1.2rem;
}
.contact-grid {
gap: 1.5rem;
margin-top: 1.5rem;
}
.contact-info-panel,
.contact-form-panel {
padding: 1.5rem;
border-radius: 16px;
}
.panel-title,
.form-title {
font-size: 1.5rem;
}
.contact-item {
padding: 1.2rem;
gap: 1rem;
}
.contact-icon-wrapper {
width: 45px;
height: 45px;
}
.contact-icon {
width: 22px;
height: 22px;
}
.form-input {
padding: 0.9rem 1rem;
font-size: 16px; /* Prevents zoom on iOS */
}
.submit-btn {
padding: 1rem 1.5rem;
font-size: 1rem;
}
.modal-container {
padding: 1.5rem;
}
.modal-content {
padding: 2.5rem 2rem;
border-radius: 20px;
}
.success-icon {
width: 70px;
height: 70px;
}
.success-icon svg {
width: 35px;
height: 35px;
}
}
@media (max-width: 480px) {
.content-section {
padding: 1rem;
margin-bottom: 2rem;
}
.section-heading {
font-size: 1.6rem;
margin-bottom: 1rem;
}
.contact-info-panel,
.contact-form-panel {
padding: 1.2rem;
border-radius: 12px;
}
.panel-title,
.form-title {
font-size: 1.3rem;
}
.contact-methods {
gap: 1.2rem;
}
.contact-item {
padding: 1rem;
gap: 0.8rem;
border-radius: 12px;
}
.contact-icon-wrapper {
width: 40px;
height: 40px;
border-radius: 10px;
}
.contact-icon {
width: 20px;
height: 20px;
}
.form-row {
margin-bottom: 1.5rem;
}
.form-input {
padding: 0.8rem;
border-radius: 10px;
}
.submit-btn {
padding: 0.9rem 1.2rem;
border-radius: 12px;
font-size: 0.95rem;
}
.btn-icon {
width: 18px;
height: 18px;
}
.section-heading {
font-size: 1.6em;
}
/* Better spacing for very small screens */
.card-container {
gap: 20px;
}
.modal-content {
padding: 2rem 1.5rem;
border-radius: 16px;
}
.modal-title {
font-size: 1.5rem;
}
.success-icon {
width: 60px;
height: 60px;
}
.success-icon svg {
width: 30px;
height: 30px;
}
}
/* Extra small screens (320px and below) */
@media (max-width: 320px) {
.contact-info-panel,
.contact-form-panel {
padding: 1rem;
border-radius: 10px;
}
.panel-title,
.form-title {
font-size: 1.2rem;
}
.contact-item {
padding: 0.8rem;
gap: 0.6rem;
}
.contact-icon-wrapper {
width: 35px;
height: 35px;
}
.contact-icon {
width: 18px;
height: 18px;
}
.form-input {
padding: 0.7rem;
}
.submit-btn {
padding: 0.8rem 1rem;
font-size: 0.9rem;
}
.projects {
padding: 15px 10px;
}
.section-heading {
font-size: 1.4em;
}
.card {
max-width: 280px;
}
.modal-content {
padding: 1.5rem 1rem;
}
.modal-title {
font-size: 1.3rem;
}
}
/* Contact Form Panel */
.contact-form-panel {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 247, 247, 0.9));
border-radius: 20px;
padding: 2.5rem;
position: relative;
overflow: hidden;
border: 1px solid rgba(123, 73, 144, 0.1);
backdrop-filter: blur(10px);
}
.contact-form-panel::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent 30%,
rgba(123, 73, 144, 0.05) 50%,
transparent 70%);
animation: shimmer 3s infinite;
pointer-events: none;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.form-header {
margin-bottom: 2rem;
text-align: center;
}
.form-title {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
font-family: var(--font-primary);
}
.form-subtitle {
color: var(--text-light);
font-size: 0.95rem;
font-style: italic;
opacity: 0.8;
}
/* Form Styling */
#contact-form {
width: 100%;
}
.form-row {
margin-bottom: 2rem;
}
.input-group {
position: relative;
}
.input-label {
display: block;
margin-bottom: 0.8rem;
font-weight: 600;
color: var(--primary-color);
font-family: var(--font-primary);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.form-input {
width: 100%;
padding: 1rem 1.2rem;
border: 2px solid rgba(123, 73, 144, 0.1);
border-radius: 12px;
font-size: 16px;
font-family: var(--font-primary);
background: rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
}
.form-input::placeholder {
color: var(--text-light);
opacity: 0.6;
}
.form-input:focus {
border-color: var(--secondary-color);
outline: none;
background: rgba(255, 255, 255, 1);
box-shadow:
0 0 0 4px rgba(123, 73, 144, 0.1),
0 8px 25px rgba(123, 73, 144, 0.15);
transform: translateY(-2px);
}
.form-input:focus + .input-border {
opacity: 1;
transform: scaleX(1);
}
.form-input:focus ~ .input-label {
color: var(--secondary-color);
}
/* Form Validation States */
.form-input.valid {
border-color: #22c55e;
background: rgba(34, 197, 94, 0.05);
}
.form-input.valid:focus {
box-shadow:
0 0 0 4px rgba(34, 197, 94, 0.1),
0 8px 25px rgba(34, 197, 94, 0.15);
}
.form-input.error {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.05);
}
.form-input.error:focus {
box-shadow:
0 0 0 4px rgba(239, 68, 68, 0.1),
0 8px 25px rgba(239, 68, 68, 0.15);
}
.input-border {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
opacity: 0;
border-radius: 1px;
}
.form-textarea {
min-height: 120px;
resize: vertical;
font-family: var(--font-primary);
}
/* Submit Button */
.form-actions {
margin-top: 2.5rem;
}
.submit-btn {
width: 100%;
padding: 1.2rem 2rem;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: white;
border: none;
border-radius: 16px;
font-size: 1.1rem;
font-weight: 600;
font-family: var(--font-primary);
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow:
0 15px 35px rgba(123, 73, 144, 0.4),
0 5px 15px rgba(123, 73, 144, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.submit-btn:hover::before {
left: 100%;
}
.submit-btn:active {
transform: translateY(-1px);
}
.btn-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
border-radius: 16px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
filter: blur(8px);
}
.submit-btn:hover .btn-glow {
opacity: 0.7;
}
.btn-text {
position: relative;
z-index: 1;
}
.btn-icon {
width: 20px;
height: 20px;
stroke-width: 2;
transition: transform 0.3s ease;
}
.submit-btn:hover .btn-icon {
transform: translateX(3px);
}
/* Success Modal */
.success-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.success-modal.show {
display: flex;
opacity: 1;
}
.modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
}
.modal-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 2rem;
}
.modal-content {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 247, 247, 0.9));
border-radius: 24px;
padding: 3rem 2.5rem;
text-align: center;
position: relative;
max-width: 400px;
width: 100%;
border: 1px solid rgba(123, 73, 144, 0.2);
backdrop-filter: blur(20px);
box-shadow:
0 25px 50px rgba(123, 73, 144, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
transform: scale(0.9) translateY(20px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.success-modal.show .modal-content {
transform: scale(1) translateY(0);
}
.success-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, #22c55e, #16a34a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.success-icon::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
background: linear-gradient(135deg, #22c55e, #16a34a);
border-radius: 50%;
opacity: 0.3;
animation: successPulse 2s infinite;
}
.success-icon svg {
width: 40px;
height: 40px;
color: white;
stroke-width: 3;
z-index: 1;
position: relative;
}
@keyframes successPulse {
0% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.1); opacity: 0.1; }
100% { transform: scale(1.2); opacity: 0; }
}
.modal-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 1rem;
font-family: var(--font-primary);
}
.modal-text {
color: var(--text-light);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.modal-close-btn {
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: white;
border: none;
border-radius: 12px;
padding: 0.8rem 2rem;
font-size: 1rem;
font-weight: 600;
font-family: var(--font-primary);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.modal-close-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.modal-close-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(123, 73, 144, 0.3);
}
.modal-close-btn:hover::before {
left: 100%;
}
/* Error Styling */
.error {
color: #ef4444;
font-size: 0.8rem;
margin-top: 0.5rem;
font-weight: 500;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.error.show {
opacity: 1;
transform: translateY(0);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Footer */
/* ===== SIDEBAR STRUCTURE ===== */
.sidebar {
margin-top: 0;
display: flex;
flex-direction: column;
height: 100vh; /* Full height */
justify-content: space-between; /* Space between content and footer */
}
/* Navigation takes available space */
.nav-menu {
flex-grow: 1;
padding: 10px 0;
}
/* ===== SIDEBAR FOOTER ===== */
.sidebar-footer {
background: linear-gradient(135deg, #040b14, #0a0f1a);
color: #ccc;
padding: 15px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: auto; /* Push to bottom */
flex-shrink: 0; /* Prevent shrinking */
position: relative;
bottom: 0;
}
.sidebar-footer .footer-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px;
}
.sidebar-footer .credits {
display: flex;
align-items: center;
margin: 2px;
}
.sidebar-footer .credits > a {
text-decoration: none;
color: #fff;
font-weight: 600;
font-family: "Ubuntu Sans", sans-serif;
font-size: 10px;
position: relative;
transition: color 0.3s ease;
}
.sidebar-footer .credits > a:hover {
color: #dced19;
}
/* ===== PROGRESSIVE DISCLOSURE FOOTER ===== */
.footer-section {
position: relative;
width: calc(100% - 300px); /* Respect sidebar width */
margin-left: 300px; /* Align with main content */
min-height: 120px; /* Set based on revealed content to prevent layout shift */
background: #1A1A1A;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3); /* Teal glow */
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
margin-top: 0; /* Remove extra top margin */
}
/* Footer Content Container */
.footer-content {
position: relative;
width: 100%;
max-width: 800px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Vedic Container - holds both states */
.footer-vedic {
position: relative;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Default Text (Sanskrit verse) - Quiescent State */
.vedic-verse {
font-size: 1rem;
color: rgba(255, 255, 255, 0.35); /* Dim, semi-transparent */
line-height: 1.6;
margin: 0;
font-family: var(--font-primary);
font-weight: 400;
word-wrap: break-word;
text-align: center;
transition: opacity 0.35s ease-in-out;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/* Revealed Text (Hindi translation) - Active State */
.revealed-text {
font-size: 1rem;
color: rgba(255, 255, 255, 1); /* Bright, solid white */
line-height: 1.6;
margin: 0;
font-family: var(--font-primary);
font-weight: 400;
text-align: center;
transition: opacity 0.35s ease-in-out;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/* Trigger Line - Primary Interactive Element */
.shloka-underline {
height: 2px;
background: rgba(255, 255, 255, 1); /* Fully opaque white */
width: 60px;
margin: 25px auto 0;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
z-index: 10;
}
/* Active states for cross-fade animation */
.footer-vedic.active .vedic-verse {
opacity: 0;
}
.footer-vedic.active .revealed-text {
opacity: 1;
}
/* Hover effects for trigger line */
.shloka-underline:hover {
background: rgba(0, 255, 255, 0.8); /* Subtle teal hint */
width: 80px;
}
/* Content container to ensure proper height calculation */
.footer-text-container {
position: relative;
min-height: 60px; /* Based on multi-line revealed content */
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ===== RESPONSIVE FOOTER ===== */
@media (max-width: 768px) {
.footer-section {
width: 100vw; /* Full width on mobile */
margin-left: 0; /* No left margin on mobile */
min-height: 140px; /* Increase for mobile wrapping */
padding: 15px;
}
.vedic-verse,
.revealed-text {
font-size: 0.9rem;
line-height: 1.5;
}
.footer-text-container {
min-height: 80px; /* Adjust for mobile text wrapping */
}
.shloka-underline {
width: 50px;
margin: 20px auto 0;
}
.shloka-underline:hover {
width: 70px;
}
/* Sidebar footer adjustments for mobile */
.sidebar-footer {
padding: 10px;
font-size: 10px;
}
.sidebar-footer .footer-container {
gap: 5px;
}
}
@media (max-width: 480px) {
.footer-section {
width: 100vw; /* Full width on small screens */
margin-left: 0; /* No left margin on small screens */
min-height: 160px; /* Further increase for small screens */
padding: 12px;
}
.vedic-verse,
.revealed-text {
font-size: 0.85rem;
line-height: 1.4;
}
.footer-text-container {
min-height: 100px;
}
}
/* Add minimal spacing before footer */
#main-content {
padding-bottom: 40px;
}
/* Remove old footer styles */
#footer,
.main-footer,
#sidebar-footer {
display: none !important;
}
/* Resume Modal */
.view-resume {
display: none;
z-index: 1000;
position: fixed;
inset: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
animation: fadeInModal 0.5s ease forwards;
overflow: hidden;
}
@keyframes fadeInModal {
from { opacity: 0; }
to { opacity: 1; }
}
.view-resume-content {
background-color: var(--background-color, #f5f5f5);
margin: 2% auto;
padding: 0;
border: 1px solid #ddd;
width: 90%;
max-width: 1200px;
height: 95vh;
border-radius: 8px;
box-shadow: var(--shadow-hover, 0 10px 20px rgba(0, 0, 0, 0.15));
animation: modalEnter 0.5s ease-out;
position: relative;
overflow-y: auto;
}
@media (max-width: 768px) {
.view-resume-content {
width: 95%;
height: 90vh;
margin: 5% auto;
}
}
@media (max-width: 480px) {
.view-resume-content {
width: 98%;
height: 85vh;
margin: 7.5% auto;
border-radius: 4px;
}
}
@keyframes modalEnter {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* Close button for resume modal */
.view-resume-content .close-btn {
position: absolute;
top: 15px;
right: 20px;
background: var(--btn-bg, #333);
border: none;
font-size: 1.5rem;
color: var(--btn-color, #fff);
cursor: pointer;
z-index: 1001;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: var(--transition-speed, 0.3s) ease;
box-shadow: var(--shadow, 0 4px 8px rgba(0, 0, 0, 0.08));
}
.view-resume-content .close-btn:hover {
background-color: var(--btn-bg-hover, #8a2e2e);
transform: translateY(-1px);
box-shadow: var(--shadow-hover, 0 10px 20px rgba(0, 0, 0, 0.15));
}
@media (max-width: 768px) {
.view-resume-content .close-btn {
top: 10px;
right: 10px;
width: 32px;
height: 32px;
font-size: 1.3rem;
}
}
@media (max-width: 480px) {
.view-resume-content .close-btn {
top: 8px;
right: 8px;
width: 30px;
height: 30px;
font-size: 1.2rem;
}
}
#resume-iframe {
width: 100%;
height: 100%;
border: 4px solid #091423;
border-radius: 25px;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
font-weight: 700;
color: #333;
cursor: pointer;
background-color: #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: color 0.3s;
}
.close-btn:hover {
color: #000;
}
/* Media Queries */
@media screen and (min-height: 768px) {
#hero {
width: calc(100% - 300px);
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
}
/* Hide sidebar scrollbar for low height screens while maintaining scroll functionality */
@media screen and (max-height: 768px) {
.sidebar {
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.sidebar::-webkit-scrollbar {
display: none; /* WebKit browsers (Chrome, Safari, Edge) */
}
.nav-menu {
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.nav-menu::-webkit-scrollbar {
display: none; /* WebKit browsers */
}
}
@media screen and (max-width: 1200px) {
#grouping-li {
flex-direction: column;
}
/* Responsive About Section */
.about-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.about-image-container {
order: -1;
}
.image-frame {
width: 250px;
height: 320px;
}
.profile-image {
width: 230px;
height: 300px;
}
.about-details-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.card-container {
flex-direction: column;
}
.card {
margin-left: auto;
margin-right: auto;
}
}
/* Hero Section Responsive Design */
@media (max-width: 1024px) {
#hero {
width: 100%;
margin-left: 0;
flex-direction: column;
text-align: center;
padding: 2rem;
gap: 3rem;
justify-content: center;
}
.hero-monogram {
order: 1;
padding-right: 0;
margin-bottom: 2rem;
}
.hero-content {
order: 2;
padding-left: 0;
padding-right: 0;
align-items: center;
}
.monogram-letters {
font-size: 90px;
gap: -6px;
}
.letter-a {
margin-right: -9px;
}
.letter-v {
margin-left: -6px;
}
.hero-buttons {
justify-content: center;
}
/* Projects section adjustments */
.projects {
padding: 40px 20px;
}
/* Skills section adjustments */
.skills-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
/* Contact section adjustments */
.contact-section {
padding: 40px 20px;
}
}
@media (max-width: 768px) {
#header {
display: none;
transition: left 1s ease;
}
#hero {
width: 100vw;
margin-left: 0;
margin-right: 0;
padding: 10px;
padding-top: 70px; /* Account for fixed nav */
height: auto;
min-height: 100vh;
flex-direction: column;
justify-content: center;
gap: 1rem; /* Reduced from 2rem to 1rem */
}
.hero-monogram {
order: 1;
padding-right: 0;
margin-bottom: 0.5rem; /* Small margin below monogram */
}
.hero-content {
order: 2;
padding: 0 1rem;
text-align: center;
}
.hero-text {
margin-bottom: 2rem;
}
.hero-name {
font-size: clamp(2rem, 6vw, 3rem);
}
.hero-tagline {
font-size: clamp(1rem, 3vw, 1.3rem);
}
.hero-expertise {
font-size: clamp(0.8rem, 2vw, 1rem);
}
.hero-buttons {
flex-direction: column;
gap: 1rem;
width: 100%;
justify-content: center;
}
.btn-primary, .btn-secondary {
width: 100%;
max-width: 300px;
padding: 16px 32px;
}
.monogram-letters {
font-size: 72px;
gap: -4px;
}
.letter-a {
margin-right: -7px;
}
.letter-v {
margin-left: -4px;
}
.container {
height: auto;
min-height: 80vh;
justify-content: center;
text-align: center;
margin-bottom: 20px;
}
}
/* Extra small mobile devices - consolidate all 480px rules */
@media (max-width: 480px) {
#hero {
gap: 0.5rem; /* Even smaller gap for very small screens */
padding: 5px;
padding-top: 100px;
}
.hero-monogram {
padding-top: 100px;
margin-bottom: 0.25rem; /* Minimal margin */
order: 1;
padding-right: 0;
}
.hero-content {
order: 2;
padding: 0 1rem;
text-align: center;
}
.hero-name {
font-size: clamp(1.8rem, 8vw, 2.5rem);
}
.hero-text {
margin-bottom: 2rem; /* Reduced text margin */
}
.monogram-letters {
font-size: 56px;
gap: -3px;
}
.letter-a {
margin-right: -5px;
}
.letter-v {
margin-left: -3px;
}
.btn-primary, .btn-secondary {
padding: 14px 24px;
font-size: 0.9rem;
}
.content {
flex-direction: column;
align-items: center;
max-width: 100%;
}
#main-content {
width: 100vw;
margin-left: 0;
padding-top: 60px; /* Account for fixed nav */
flex: 1;
}
#footer {
position: relative;
width: 100%;
background-color: #72706e;
height: 10vh;
}
#top-nav {
background-color: var(--primary-color);
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
/* Style when sidebar is open - minimal background, hamburger still visible */
#top-nav.sidebar-open {
background-color: transparent;
box-shadow: none;
justify-content: flex-start;
z-index: 1200; /* Higher than sidebar to keep hamburger accessible */
}
.hamburger-menu {
width: 50px;
height: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
transition: transform 0.3s ease-in-out;
background: none;
border: none;
padding: 12px;
border-radius: 8px;
}
.bar {
position: absolute;
left: 50%;
width: 70%;
height: 5px;
background-color: var(--text-white);
border-radius: 6px;
transform: translate(-50%,-50%) rotate(0deg);
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.bar:nth-child(1) { margin-top: 0; }
.bar:nth-child(2) { margin-top: 10px; }
.bar:nth-child(3) { margin-top: 20px; }
/* Active state - transforms to N shape when sidebar is open */
.hamburger-menu.active {
transform: scale(0.7);
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.hamburger-menu.active .bar:nth-child(1) {
background-color: #007bff;
transform: translate(50%,-50%) rotate(-60deg);
}
.hamburger-menu.active .bar:nth-child(2) {
background-color: #cb0000;
opacity: 0.5;
transform: translate(0%,-50%) rotate(60deg);
}
.hamburger-menu.active .bar:nth-child(3) {
background-color: #f0ad4e;
transform: translate(-50%,-50%) rotate(-60deg);
}
/* Enhanced visibility when sidebar is open */
#top-nav.sidebar-open .hamburger-menu.active {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.top-nav-content {
display: flex;
align-items: center;
gap: 12px;
}
#image-container1 {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
height: 40px;
width: 40px;
border: 2px solid var(--secondary-color);
}
#image-container1 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.top-nav-content h1 {
font-size: 18px;
margin: 0;
font-family: var(--font-primary);
font-weight: 600;
}
.top-nav-content h1 a {
color: var(--text-white);
text-decoration: none;
transition: color var(--transition-speed) ease;
}
.top-nav-content h1 a:hover {
color: var(--secondary-color);
}
.card-container {
flex-direction: column;
align-items: center;
}
.timeline {
flex-direction: column;
}
/* General mobile improvements */
body {
font-size: 16px; /* Base font size for mobile */
}
/* Ensure all sections have proper mobile padding */
section {
padding: 20px 10px;
}
/* Make images responsive */
img {
max-width: 100%;
height: auto;
}
}
.top-nav-content {
height: 0;
}
.close-icon {
position: absolute;
top: 10px;
right: 20px;
font-size: 24px;
color: #fff;
cursor: pointer;
}
.btn, .button {
background-color: var(--secondary-color);
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
}
.btn:hover, .button:hover {
background-color: var(--accent-color);
}
/* Enhanced GitHub Heatmap Container */
.github-heatmap {
margin-top: 2.5rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.04);
border-radius: 1rem;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 90vw;
max-width: 100%;
box-sizing: border-box;
position: relative;
backdrop-filter: blur(14px) saturate(120%);
box-shadow: 0 0 36px rgba(0, 255, 255, 0.15),
inset 0 0 12px rgba(0, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
transition: all 0.4s ease;
transform-style: preserve-3d;
}
.github-heatmap::before {
content: "";
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
background: repeating-linear-gradient(
45deg,
rgba(0,255,255,0.04),
rgba(0,255,255,0.04) 1px,
transparent 2px,
transparent 6px
);
z-index: 1;
animation: gridShift 15s linear infinite;
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.8;
}
.github-heatmap::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle at center,
rgba(0, 255, 255, 0.05) 0%,
transparent 70%
);
animation: pulseGlow 10s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
@keyframes gridShift {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@keyframes pulseGlow {
0%, 100% {
transform: scale(1);
opacity: 0.15;
}
50% {
transform: scale(1.05);
opacity: 0.25;
}
}
.github-heatmap:hover {
transform: scale(1.025) rotateX(1.5deg);
box-shadow: 0 0 48px rgba(0, 255, 255, 0.25);
}
/* Heatmap Image */
.github-heatmap img {
width: 90vw;
max-width: 70vw;
height: auto;
display: block;
z-index: 2;
border-radius: 0.6rem;
filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.1));
user-select: none;
pointer-events: none;
transition: transform 0.3s ease;
}
.github-heatmap:hover img {
transform: scale(1.01);
}
/* contact-form.css */
/* 1. Error messages */
#error-name,
#error-email,
#error-contact,
#error-message {
color: #e74c3c;
font-size: 0.85rem;
visibility: hidden;
margin-top: 0.25rem;
}
/* 2. Honeypot - hide completely */
input[name="website"] {
display: none;
}
/* 3. Success Modal Overlay */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: none; /* hidden by default */
align-items: center;
justify-content: center;
z-index: 2000;
}
.modal-overlay.active {
display: flex;
}
.modal-content {
background: var(--bg-card);
color: var(--text-color);
padding: 2rem;
border-radius: 0.75rem;
text-align: center;
box-shadow: var(--shadow);
}
.modal-content p {
margin-bottom: 1.25rem;
}
.modal-content button {
padding: 0.5rem 1rem;
background: var(--secondary-color);
color: #fff;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background var(--transition-speed);
}
.modal-content button:hover {
background: var(--accent-color);
}
/* Modal responsive styles */
@media (max-width: 768px) {
.modal-content {
margin: 20px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
}
}
@media (max-width: 480px) {
/* Navigation improvements for small screens */
#top-nav {
height: 50px;
padding: 0 10px;
}
.top-nav-content h1 {
font-size: 16px;
}
#image-container1 {
height: 35px;
width: 35px;
}
.hamburger-menu {
width: 40px;
height: 40px;
padding: 8px;
}
#hero {
padding-top: 60px !important;
}
#main-content {
padding-top: 50px !important;
}
.modal-content {
margin: 10px;
max-width: calc(100vw - 20px);
padding: 1.5rem;
}
}
/* ===== GITHUB ACTIVITY SECTION ===== */
.github-activity {
background: var(--background-color);
padding: 4rem 0;
position: relative;
}
.github-activity::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
opacity: 0.3;
}
.github-container {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 2rem;
}
.github-header {
text-align: center;
margin-bottom: 3rem;
}
.github-subtitle {
color: var(--text-light);
font-size: 1rem;
margin: 1rem 0 0 0;
font-family: var(--font-primary);
}
.github-stats-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.github-contributions-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: var(--shadow);
border: 1px solid rgba(123, 73, 144, 0.1);
transition: all var(--transition-speed) ease;
}
.github-contributions-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.github-contributions-card h3 {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
margin: 0 0 1rem 0;
font-family: var(--font-primary);
}
.contributions-wrapper {
border-radius: 8px;
overflow: hidden;
background: #f6f8fa;
padding: 1rem;
}
.contributions-wrapper img {
width: 100%;
height: auto;
border-radius: 4px;
}
.github-stats-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.stat-card {
background: white;
border-radius: 12px;
padding: 1rem;
box-shadow: var(--shadow);
border: 1px solid rgba(123, 73, 144, 0.1);
display: flex;
align-items: center;
gap: 0.8rem;
transition: all var(--transition-speed) ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
border-color: var(--secondary-color);
}
.stat-icon {
font-size: 1.5rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(123, 73, 144, 0.1);
border-radius: 8px;
}
.stat-content h4 {
font-size: 0.9rem;
font-weight: 600;
color: var(--primary-color);
margin: 0 0 0.2rem 0;
font-family: var(--font-primary);
}
.stat-content p {
font-size: 0.8rem;
color: var(--text-light);
margin: 0;
font-family: var(--font-primary);
}
.github-cta {
text-align: center;
margin-top: 2rem;
}
.github-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--secondary-color);
color: white;
text-decoration: none;
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-family: var(--font-primary);
font-weight: 500;
transition: all var(--transition-speed) ease;
border: none;
cursor: pointer;
}
.github-btn:hover {
background: var(--btn-bg-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* ===== REDESIGNED RESUME SECTION ===== */
.resume {
background: var(--background-color);
padding: 4rem 0;
position: relative;
}
.resume::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
opacity: 0.3;
}
.resume-container {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 2rem;
}
.resume-header {
text-align: center;
margin-bottom: 3rem;
}
.resume-subtitle {
color: var(--text-light);
font-size: 1rem;
margin: 1rem 0 0 0;
font-family: var(--font-primary);
}
.resume-content {
max-width: 800px;
margin: 0 auto;
}
.resume-card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: var(--shadow);
border: 1px solid rgba(123, 73, 144, 0.1);
transition: all var(--transition-speed) ease;
}
.resume-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.resume-card-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid rgba(123, 73, 144, 0.1);
}
.resume-card-header h3 {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-color);
margin: 0 0 0.5rem 0;
font-family: var(--font-primary);
}
.resume-card-header p {
font-size: 1rem;
color: var(--secondary-color);
margin: 0;
font-family: var(--font-primary);
font-weight: 500;
}
.resume-highlights {
margin-bottom: 2rem;
}
.highlight-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(123, 73, 144, 0.05);
}
.highlight-item:last-child {
border-bottom: none;
}
.highlight-icon {
font-size: 1.5rem;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(123, 73, 144, 0.1);
border-radius: 10px;
flex-shrink: 0;
}
.highlight-text strong {
display: block;
font-size: 1rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0.2rem;
font-family: var(--font-primary);
}
.highlight-text span {
font-size: 0.9rem;
color: var(--text-light);
font-family: var(--font-primary);
}
.resume-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
.resume-btn {
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-family: var(--font-primary);
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all var(--transition-speed) ease;
border: none;
cursor: pointer;
font-size: 0.9rem;
}
.resume-btn.primary {
background: var(--secondary-color);
color: white;
}
.resume-btn.primary:hover {
background: var(--btn-bg-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.resume-btn.secondary {
background: transparent;
color: var(--secondary-color);
border: 2px solid var(--secondary-color);
}
.resume-btn.secondary:hover {
background: var(--secondary-color);
color: white;
transform: translateY(-2px);
}
.resume-modal {
display: none !important; /* Force hidden by default */
position: fixed;
top: 0;
left: 300px; /* Account for sidebar */
width: calc(100% - 300px); /* Subtract sidebar width */
height: 100vh;
background: rgba(0, 0, 0, 0.85);
z-index: 1001; /* Above other modals */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); /* Safari support */
}
.resume-modal.active {
display: flex !important; /* Override the hidden state */
align-items: center;
justify-content: center;
padding: 2rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.resume-modal-content {
background: white;
border-radius: 12px;
width: 90%;
max-width: 1000px; /* Increased for better use of available space */
height: 85vh; /* Slightly increased height */
display: flex;
flex-direction: column;
box-shadow: var(--shadow-hover);
margin: 0 auto;
}
.resume-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
border-bottom: 1px solid rgba(123, 73, 144, 0.1);
}
.resume-modal-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
margin: 0;
font-family: var(--font-primary);
}
.resume-close-btn {
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(123, 73, 144, 0.2);
font-size: 1.8rem;
color: var(--primary-color);
cursor: pointer;
padding: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all var(--transition-speed) ease;
font-weight: bold;
line-height: 1;
min-width: 44px; /* Minimum touch target */
min-height: 44px;
}
.resume-close-btn:hover,
.resume-close-btn:focus {
background: var(--secondary-color);
color: white;
border-color: var(--secondary-color);
transform: scale(1.1);
outline: none;
}
.resume-modal-body {
flex: 1;
padding: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
.resume-modal-body iframe {
border: none;
border-radius: 8px;
width: 100%;
height: 100%;
flex: 1;
background: #f8f9fa;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Responsive Design */
@media (max-width: 768px) {
.github-stats-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.github-container,
.resume-container {
padding: 0 1rem;
}
.github-activity,
.resume {
padding: 3rem 0;
}
.stat-card {
padding: 0.8rem;
}
.resume-card {
padding: 1.5rem;
}
.resume-card-header h3 {
font-size: 1.5rem;
}
.resume-actions {
flex-direction: column;
align-items: stretch;
}
/* Mobile modal adjustments - full viewport on mobile */
.resume-modal {
left: 0 !important;
width: 100% !important;
padding: 1rem 0.5rem;
}
.resume-modal.active {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.resume-modal-content {
width: 96%;
height: 88vh;
max-width: none;
margin: 0;
max-height: calc(100vh - 2rem);
min-height: 500px;
}
.resume-modal-header {
padding: 1rem 1.2rem;
flex-direction: row;
gap: 1rem;
border-bottom: 2px solid rgba(123, 73, 144, 0.1);
}
.resume-modal-header h2 {
font-size: 1.3rem;
font-weight: 600;
}
.resume-close-btn {
width: 44px;
height: 44px;
font-size: 1.6rem;
min-width: 44px;
min-height: 44px;
}
.resume-modal-body {
padding: 0.8rem;
flex: 1;
overflow: hidden;
}
.resume-modal-body iframe {
width: 100%;
height: 100%;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
}
/* Tablet responsive adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
.resume-modal {
left: 0;
width: 100%;
}
.resume-modal-content {
width: 85%;
max-width: 800px;
}
}
/* Very small screens */
@media (max-width: 480px) {
.resume-modal {
padding: 0.5rem 0.3rem !important;
}
.resume-modal-content {
width: 98%;
height: 92vh;
border-radius: 8px;
max-height: calc(100vh - 1rem);
min-height: 450px;
}
.resume-modal-header {
padding: 0.8rem 1rem;
min-height: 60px;
}
.resume-modal-header h2 {
font-size: 1.1rem;
line-height: 1.2;
}
.resume-close-btn {
width: 42px;
height: 42px;
font-size: 1.4rem;
flex-shrink: 0;
min-width: 42px;
min-height: 42px;
}
.resume-modal-body {
padding: 0.6rem;
flex: 1;
}
.resume-modal-body iframe {
border-radius: 4px;
}
}
/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
.resume-modal-content {
width: 99%;
height: 90vh;
min-height: 400px;
}
.resume-modal-header {
padding: 0.7rem 0.8rem;
min-height: 55px;
}
.resume-modal-header h2 {
font-size: 1rem;
}
.resume-close-btn {
width: 40px;
height: 40px;
font-size: 1.3rem;
min-width: 40px;
min-height: 40px;
}
.resume-modal-body {
padding: 0.4rem;
}
}
/* Mobile landscape optimization */
@media (max-width: 768px) and (orientation: landscape) {
.resume-modal-content {
height: 95vh;
width: 98%;
}
.resume-modal-header {
padding: 0.6rem 1rem;
min-height: 50px;
}
.resume-modal-header h2 {
font-size: 1.1rem;
}
.resume-close-btn {
width: 35px;
height: 35px;
}
.resume-modal-body {
padding: 0.5rem;
}
}
/* Large screen optimizations */
@media (min-width: 1400px) {
.resume-modal-content {
max-width: 1200px;
width: 85%;
}
.resume-modal-body {
padding: 1.5rem;
}
}