Delete static

static/css/_about.css

@@ -1,190 +0,0 @@
-/* About Section Styles */
-.about {
-    position: relative;
-    overflow: hidden;
-}
-
-.about-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-}
-
-.about-bg-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    opacity: 0.08;
-    transition: all 0.3s ease;
-    animation: slowFloat 20s ease-in-out infinite;
-}
-
-.about:hover .about-bg-image {
-    opacity: 0.12;
-    transform: scale(1.02);
-}
-
-@keyframes slowFloat {
-    0%, 100% {
-        transform: translateY(0px) scale(1);
-    }
-    50% {
-        transform: translateY(-20px) scale(1.01);
-    }
-}
-.about .container {
-    position: relative;
-    z-index: 1;
-}
-
-.about-content {
-    display: grid;
-    grid-template-columns: 300px 1fr;
-    gap: 4rem;
-    align-items: start;
-}
-
-.about-profile {
-    position: relative;
-}
-
-.profile-image {
-    position: relative;
-    width: 250px;
-    height: 300px;
-    margin: 0 auto;
-    border-radius: 20px;
-    overflow: hidden;
-    background: var(--gradient);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
-}
-
-.profile-photo {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    display: block;
-    position: relative;
-    z-index: 1;
-}
-
-.profile-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: rgba(250, 250, 255, 0.1);
-    backdrop-filter: blur(10px);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    z-index: 2;
-}
-
-.profile-image:hover .profile-overlay {
-    opacity: 1;
-}
-
-.profile-overlay i {
-    font-size: 4rem;
-    color: var(--white);
-    opacity: 0.8;
-}
-
-.about-info {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
-
-.about-text {
-    font-size: 1.1rem;
-    line-height: 1.8;
-    color: var(--text-muted);
-}
-
-.about-highlights {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-
-.highlight-item {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
-    background: var(--dark-light);
-    border-radius: 10px;
-    border-left: 4px solid var(--primary);
-}
-
-.highlight-item i {
-    color: var(--primary);
-    font-size: 1.2rem;
-}
-
-.highlight-item span {
-    color: var(--light);
-    font-weight: 500;
-}
-
-.about-stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 2rem;
-}
-
-.stat-card {
-    background: var(--dark-light);
-    padding: 2rem;
-    border-radius: 15px;
-    text-align: center;
-    border: 1px solid var(--border);
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 15px var(--shadow);
-}
-
-.stat-card:hover {
-    transform: translateY(-5px);
-    border-color: var(--primary);
-    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
-}
-
-.stat-card i {
-    font-size: 2rem;
-    color: var(--primary);
-    margin-bottom: 1rem;
-}
-
-.stat-card h3 {
-    font-size: 2rem;
-    margin-bottom: 0.5rem;
-}
-
-/* About Responsive */
-@media (max-width: 768px) {
-    .about-content {
-        grid-template-columns: 1fr;
-        gap: 2rem;
-        text-align: center;
-    }
-
-    .profile-image {
-        width: 200px;
-        height: 240px;
-    }
-}

static/css/_base.css

@@ -1,116 +0,0 @@
-/* Base Styles & CSS Variables */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-:root {
-    --primary: #2563eb;
-    --primary-dark: #1d4ed8;
-    --secondary: #06b6d4;
-    --accent: #0ea5e9;
-    --dark: #ffffff;
-    --dark-light: #f8fafc;
-    --gray: #475569;
-    --light: #1e293b;
-    --white: #0f172a;
-    --text-muted: #64748b;
-    --border: #e2e8f0;
-    --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-    --folder-color: #f59e0b;
-    --github-color: #1f2937;
-    --email-color: #dc2626;
-    --huggingface-color: #f59e0b;
-    --shadow: rgba(15, 23, 42, 0.1);
-}
-
-body {
-    font-family: 'Inter', sans-serif;
-    background: var(--dark);
-    color: var(--light);
-    line-height: 1.6;
-    overflow-x: hidden;
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-/* Common Sections */
-section {
-    padding: 80px 0;
-}
-
-.section-title {
-    font-size: 2.5rem;
-    font-weight: 700;
-    text-align: center;
-    margin-bottom: 3rem;
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-/* Common Animations */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes fadeInLeft {
-    from {
-        opacity: 0;
-        transform: translateX(-30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-@keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-}
-
-@keyframes shimmer {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
-}
-
-@keyframes progressShine {
-    0% { transform: translateX(-100%); }
-    50% { transform: translateX(0%); }
-    100% { transform: translateX(100%); }
-}
-
-@keyframes float {
-    0%, 100% {
-        transform: translate(0, 0) rotate(0deg);
-    }
-    33% {
-        transform: translate(30px, -30px) rotate(120deg);
-    }
-    66% {
-        transform: translate(-20px, 20px) rotate(240deg);
-    }
-}
-
-@keyframes float1 {
-    0%, 100% { transform: translate(0, 0) rotate(0deg); }
-    50% { transform: translate(-30px, -20px) rotate(3deg); }
-}
-
-@keyframes float2 {
-    0%, 100% { transform: translate(0, 0) rotate(0deg); }
-    50% { transform: translate(40px, -30px) rotate(-4deg); }
-}

static/css/_contact-footer.css

@@ -1,156 +0,0 @@
-/* Contact & Footer Section Styles */
-
-/* Contact Section */
-.contact {
-    background: var(--dark-light);
-    position: relative;
-    overflow: hidden;
-}
-
-.contact-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-}
-
-.contact-bg-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    opacity: 0.1;
-    transition: all 0.3s ease;
-    animation: robotMove 25s ease-in-out infinite;
-}
-
-.contact:hover .contact-bg-image {
-    opacity: 0.15;
-    transform: scale(1.02);
-}
-
-@keyframes robotMove {
-    0%, 100% {
-        transform: translateX(0px) scale(1);
-    }
-    25% {
-        transform: translateX(10px) scale(1.005);
-    }
-    50% {
-        transform: translateX(0px) scale(1.01);
-    }
-    75% {
-        transform: translateX(-10px) scale(1.005);
-    }
-}
-
-.contact .container {
-    position: relative;
-    z-index: 1;
-}
-
-.contact-content {
-    text-align: center;
-    max-width: 700px;
-    margin: 0 auto;
-}
-
-.contact-text {
-    margin-bottom: 3rem;
-}
-
-.contact-text p {
-    font-size: 1.2rem;
-    color: var(--gray);
-    margin-bottom: 1rem;
-    line-height: 1.6;
-}
-
-.contact-text p:last-child {
-    color: var(--primary);
-    font-weight: 600;
-}
-
-.contact-info {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1.5rem;
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-.contact-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    color: var(--light);
-    text-decoration: none;
-    transition: all 0.3s ease;
-    padding: 20px;
-    border-radius: 15px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(99, 102, 241, 0.2);
-    min-height: 70px;
-}
-
-.contact-item:hover {
-    color: var(--light);
-    transform: translateY(-5px);
-    background: rgba(255, 255, 255, 0.1);
-    border-color: var(--primary);
-    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
-}
-
-.contact-item i {
-    font-size: 1.2rem;
-    color: var(--primary);
-    width: 25px;
-    text-align: center;
-}
-
-/* Specific colors for contact icons */
-.contact-item .fa-github {
-    color: #24292e;
-}
-
-.contact-item:hover .fa-github {
-    color: #ffffff;
-    background: radial-gradient(circle, #24292e 0%, #333333 100%);
-    border-radius: 50%;
-    padding: 5px;
-}
-
-.contact-item .fa-envelope {
-    color: #ea4335;
-}
-
-.contact-item:hover .fa-envelope {
-    color: #ffffff;
-    background: radial-gradient(circle, #ea4335 0%, #d33b2c 100%);
-    border-radius: 50%;
-    padding: 5px;
-}
-
-.contact-item .fa-map-marker-alt {
-    color: #4285f4;
-}
-
-.contact-item:hover .fa-map-marker-alt {
-    color: #ffffff;
-    background: radial-gradient(circle, #4285f4 0%, #1a73e8 100%);
-    border-radius: 50%;
-    padding: 5px;
-}
-
-/* Footer */
-.footer {
-    text-align: center;
-    padding: 2rem 0;
-    background: var(--dark);
-    color: var(--gray);
-    border-top: 1px solid rgba(99, 102, 241, 0.2);
-}

static/css/_experience-projects.css

@@ -1,290 +0,0 @@
-/* Experience & Projects Section Styles */
-
-/* Experience Section */
-.experience {
-    position: relative;
-    overflow: hidden;
-}
-
-.experience-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-}
-
-.experience-bg-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    opacity: 0.05;
-    transition: all 0.3s ease;
-    animation: brainPulse 15s ease-in-out infinite;
-}
-
-.experience:hover .experience-bg-image {
-    opacity: 0.08;
-    transform: scale(1.02);
-}
-
-@keyframes brainPulse {
-    0%, 100% {
-        transform: scale(1);
-        filter: brightness(1);
-    }
-    50% {
-        transform: scale(1.01);
-        filter: brightness(1.1);
-    }
-}
-
-.experience .container {
-    position: relative;
-    z-index: 1;
-}
-.timeline {
-    position: relative;
-    padding-left: 40px;
-}
-
-.timeline::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 2px;
-    background: var(--primary);
-}
-
-.timeline-item {
-    position: relative;
-    margin-bottom: 3rem;
-    animation: fadeInLeft 1s ease;
-}
-
-.timeline-marker {
-    position: absolute;
-    left: -45px;
-    top: 5px;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: var(--primary);
-    box-shadow: 0 0 0 4px var(--dark), 0 0 0 6px var(--primary);
-}
-
-.timeline-content {
-    background: var(--dark-light);
-    padding: 2rem;
-    border-radius: 15px;
-    border: 1px solid rgba(99, 102, 241, 0.2);
-}
-
-.timeline-content h3 {
-    color: var(--primary);
-    margin-bottom: 0.5rem;
-}
-
-.timeline-content h4 {
-    color: var(--light);
-    margin-bottom: 0.5rem;
-}
-
-.period {
-    color: var(--gray);
-    font-size: 0.9rem;
-    display: inline-block;
-    margin-bottom: 1rem;
-}
-
-.timeline-content ul {
-    list-style: none;
-    padding-left: 0;
-}
-
-.timeline-content li {
-    position: relative;
-    padding-left: 25px;
-    margin-bottom: 0.5rem;
-    color: var(--gray);
-}
-
-.timeline-content li::before {
-    content: '▸';
-    position: absolute;
-    left: 0;
-    color: var(--primary);
-}
-
-/* Projects Section */
-.projects {
-    position: relative;
-    overflow: hidden;
-}
-
-.projects::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('/static/image-3.png');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    opacity: 0.06;
-    z-index: 0;
-}
-
-.projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
-    gap: 2.5rem;
-    position: relative;
-    z-index: 1;
-}
-
-.project-card {
-    background: var(--dark-light);
-    padding: 2.5rem;
-    border-radius: 20px;
-    border: 1px solid var(--border);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 4px 20px var(--shadow);
-}
-
-.project-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    background: var(--gradient);
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.4s ease;
-}
-
-.project-card:hover::before {
-    transform: scaleX(1);
-}
-
-.project-card:hover {
-    transform: translateY(-8px);
-    border-color: var(--primary);
-    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.25);
-}
-
-.project-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-}
-
-.project-header i {
-    font-size: 2rem;
-    color: var(--folder-color);
-    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
-    transition: all 0.3s ease;
-}
-
-.project-card:hover .project-header i {
-    color: #fcd34d;
-    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.7));
-    transform: scale(1.15) rotate(5deg);
-}
-
-.project-role {
-    font-size: 0.85rem;
-    color: var(--white);
-    background: var(--gradient);
-    padding: 6px 14px;
-    border-radius: 25px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.project-card h3 {
-    margin-bottom: 1rem;
-    color: var(--light);
-    font-size: 1.3rem;
-    font-weight: 600;
-}
-
-.project-card p {
-    color: var(--gray);
-    margin-bottom: 2rem;
-    line-height: 1.6;
-}
-
-.project-tech {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    margin-bottom: 2rem;
-}
-
-.tech-tag {
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.05));
-    color: var(--primary);
-    padding: 8px 16px;
-    border-radius: 25px;
-    font-size: 0.85rem;
-    font-weight: 500;
-    border: 1px solid rgba(99, 102, 241, 0.2);
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-}
-
-.tech-tag::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-    transition: left 0.5s ease;
-}
-
-.tech-tag:hover::before {
-    left: 100%;
-}
-
-.tech-tag:hover {
-    transform: translateY(-2px);
-    border-color: var(--primary);
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(99, 102, 241, 0.1));
-    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2);
-}
-
-.project-highlights {
-    list-style: none;
-}
-
-.project-highlights li {
-    position: relative;
-    padding-left: 20px;
-    margin-bottom: 0.5rem;
-    color: var(--gray);
-    font-size: 0.9rem;
-}
-
-.project-highlights li::before {
-    content: '✓';
-    position: absolute;
-    left: 0;
-    color: var(--primary);
-}

static/css/_hero.css

@@ -1,318 +0,0 @@
-/* Hero Section Styles */
-.hero {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    background: linear-gradient(180deg, var(--dark) 0%, var(--dark-light) 100%);
-    overflow: hidden;
-}
-
-.hero::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('/static/image-2.png');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    opacity: 0.15;
-    z-index: 0;
-}
-
-.hero-content {
-    text-align: center;
-    z-index: 2;
-    animation: fadeInUp 1s ease;
-}
-
-/* Glitch Effect */
-.glitch {
-    font-size: 4rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    position: relative;
-    color: var(--white);
-    letter-spacing: 5px;
-    animation: glitch 2s infinite;
-}
-
-.glitch::before,
-.glitch::after {
-    content: attr(data-text);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.glitch::before {
-    animation: glitch-1 0.5s infinite;
-    color: var(--primary);
-    z-index: -1;
-}
-
-.glitch::after {
-    animation: glitch-2 0.5s infinite;
-    color: var(--secondary);
-    z-index: -2;
-}
-
-@keyframes glitch {
-    0%, 100% {
-        text-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
-    }
-    50% {
-        text-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
-    }
-}
-
-@keyframes glitch-1 {
-    0%, 100% {
-        clip: rect(0, 900px, 0, 0);
-    }
-    25% {
-        clip: rect(20px, 900px, 40px, 0);
-        transform: translate(-2px, 2px);
-    }
-    50% {
-        clip: rect(60px, 900px, 80px, 0);
-        transform: translate(2px, -2px);
-    }
-    75% {
-        clip: rect(100px, 900px, 120px, 0);
-        transform: translate(-2px, 2px);
-    }
-}
-
-/* Hero Text Elements */
-.hero-title {
-    font-size: 1.8rem;
-    margin: 1.5rem 0;
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-/* Fade-in Animation */
-.fade-in-element {
-    opacity: 0;
-    transform: translateY(20px);
-    animation: fadeInUp 1s ease forwards;
-}
-
-.fade-in-element:nth-child(2) {
-    animation-delay: 0.5s;
-}
-
-.fade-in-element:nth-child(3) {
-    animation-delay: 1s;
-}
-
-.fade-in-element:nth-child(4) {
-    animation-delay: 1.5s;
-}
-
-/* Typing Effect */
-.typing-container {
-    font-size: 2.8rem;
-    margin: 2rem 0 3rem 0;
-    min-height: 5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 900px;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-}
-
-.streaming-text {
-    color: var(--white);
-    font-weight: 700;
-    text-align: center;
-    line-height: 1.4;
-    min-height: 1.8em;
-    text-shadow: 0 0 30px rgba(99, 102, 241, 0.8), 0 0 60px rgba(139, 92, 246, 0.4);
-    letter-spacing: 0.5px;
-    filter: brightness(1.1);
-}
-
-.streaming-text .highlight {
-    color: var(--secondary);
-    font-weight: 600;
-}
-
-.streaming-text .python-icon {
-    color: #3776ab;
-    margin: 0 0.3rem;
-    font-size: 1.2em;
-    filter: drop-shadow(0 0 10px rgba(55, 118, 171, 0.5));
-}
-
-.cursor {
-    color: var(--primary);
-    font-weight: 300;
-    margin-left: 2px;
-    animation: typewriterCursor 1s infinite;
-}
-
-@keyframes typewriterCursor {
-    0%, 50% {
-        opacity: 1;
-        border-right: 2px solid var(--primary);
-    }
-    51%, 100% {
-        opacity: 0.3;
-        border-right: 2px solid transparent;
-    }
-}
-
-.hero-tagline {
-    font-size: 1.2rem;
-    color: var(--gray);
-    margin-bottom: 2rem;
-}
-
-/* Hero Buttons */
-.hero-buttons {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    margin-bottom: 2rem;
-}
-
-.btn {
-    padding: 12px 30px;
-    border-radius: 50px;
-    text-decoration: none;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    display: inline-block;
-}
-
-.btn-primary {
-    background: var(--gradient);
-    color: var(--white);
-    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
-}
-
-.btn-primary:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
-}
-
-.btn-outline {
-    border: 2px solid var(--primary);
-    color: var(--primary);
-}
-
-.btn-outline:hover {
-    background: var(--primary);
-    color: var(--white);
-}
-
-/* Social Links */
-.social-links {
-    display: flex;
-    gap: 1.5rem;
-    justify-content: center;
-}
-
-.social-links a {
-    color: var(--gray);
-    font-size: 1.5rem;
-    transition: all 0.3s ease;
-    padding: 10px;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.1);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 50px;
-    height: 50px;
-}
-
-.social-links a:hover {
-    transform: translateY(-3px);
-    background: rgba(255, 255, 255, 0.2);
-}
-
-/* Specific colors for social icons */
-.social-links a[href*="github.com"] {
-    color: #ffffff;
-}
-
-.social-links a[href*="github.com"]:hover {
-    color: #ffffff;
-    background: #333333;
-}
-
-.social-links a[href*="huggingface.co"] {
-    color: #ff9500;
-}
-
-.social-links a[href*="huggingface.co"]:hover {
-    color: #ffffff;
-    background: #ff9500;
-}
-
-.social-links a[href*="mailto:"] {
-    color: #ea4335;
-}
-
-.social-links a[href*="mailto:"]:hover {
-    color: #ffffff;
-    background: #ea4335;
-}
-
-/* Floating Shapes Animation */
-.hero-animation {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 1;
-}
-
-.floating-shapes {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.shape {
-    position: absolute;
-    border-radius: 50%;
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
-    animation: float 20s infinite ease-in-out;
-}
-
-.shape:nth-child(1) {
-    width: 300px;
-    height: 300px;
-    top: 20%;
-    left: 10%;
-    animation-delay: 0s;
-}
-
-.shape:nth-child(2) {
-    width: 200px;
-    height: 200px;
-    top: 60%;
-    right: 10%;
-    animation-delay: 5s;
-}
-
-.shape:nth-child(3) {
-    width: 150px;
-    height: 150px;
-    bottom: 10%;
-    left: 50%;
-    animation-delay: 10s;
-}

static/css/_navigation.css

@@ -1,74 +0,0 @@
-/* Navigation Styles */
-.navbar {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    z-index: 1000;
-    padding: 1rem 0;
-    transition: all 0.3s ease;
-}
-
-.nav-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.nav-brand {
-    font-size: 1.5rem;
-    font-weight: 700;
-    background-clip: text;
-    -webkit-background-clip: text; 
-    -webkit-text-fill-color: transparent;
-}
-
-.nav-menu {
-    display: flex;
-    list-style: none;
-    gap: 2rem;
-}
-
-.nav-link {
-    color: var(--light);
-    text-decoration: none;
-    transition: color 0.3s ease;
-    position: relative;
-}
-
-.nav-link:hover {
-    color: var(--primary);
-}
-
-.nav-link::after {
-    content: '';
-    position: absolute;
-    bottom: -5px;
-    left: 0;
-    width: 0;
-    height: 2px;
-    background: var(--primary);
-    transition: width 0.3s ease;
-}
-
-.nav-link:hover::after {
-    width: 100%;
-}
-
-.hamburger {
-    display: none;
-    flex-direction: column;
-    cursor: pointer;
-}
-
-.hamburger span {
-    width: 25px;
-    height: 3px;
-    background: var(--light);
-    margin: 3px 0;
-    transition: 0.3s;
-}

static/css/_responsive.css

@@ -1,132 +0,0 @@
-/* Responsive Design Styles */
-
-@media (max-width: 1024px) {
-    /* Typing text adjustments for tablets */
-    .typing-container {
-        font-size: 1.8rem;
-        min-height: 3.5rem;
-    }
-}
-
-@media (max-width: 768px) {
-    /* Navigation */
-    .nav-menu {
-        display: none;
-    }
-
-    .hamburger {
-        display: flex;
-    }
-
-    /* Hero Section */
-    .hero-title {
-        font-size: 1.5rem;
-    }
-
-    .hero-buttons {
-        flex-direction: column;
-        align-items: center;
-    }
-
-    /* Typing text for mobile */
-    .typing-container {
-        font-size: 1.6rem;
-        min-height: 3rem;
-    }
-
-    /* Skills Section */
-    .skills-grid {
-        grid-template-columns: 1fr;
-    }
-
-    /* Projects Section */
-    .projects-grid {
-        grid-template-columns: 1fr;
-    }
-
-    /* Contact Section */
-    .contact-info {
-        flex-direction: column;
-    }
-}
-
-@media (max-width: 480px) {
-    /* Base adjustments */
-    .container {
-        padding: 0 15px;
-    }
-
-    /* Typography */
-    .section-title {
-        font-size: 2rem;
-    }
-
-    /* Hero Section */
-    .glitch {
-        font-size: 2rem;
-        letter-spacing: 2px;
-    }
-
-    .hero-intro {
-        font-size: 1.2rem;
-    }
-
-    .hero-title {
-        font-size: 1.3rem;
-    }
-
-    .typing-container {
-        font-size: 1.4rem;
-        min-height: 3rem;
-        margin: 1.5rem 0 2rem 0;
-    }
-
-    /* Buttons */
-    .btn {
-        padding: 10px 20px;
-        font-size: 0.9rem;
-    }
-
-    /* About Section */
-    .about-content {
-        gap: 1.5rem;
-    }
-
-    .profile-image {
-        width: 180px;
-        height: 220px;
-    }
-
-    /* Skills Section */
-    .skill-category {
-        padding: 1.5rem;
-    }
-
-    .skills-grid {
-        grid-template-columns: 1fr;
-        gap: 2rem;
-    }
-
-    /* Projects Section */
-    .project-card {
-        padding: 1.5rem;
-    }
-
-    .projects-grid {
-        grid-template-columns: 1fr;
-        gap: 1.5rem;
-    }
-
-    /* Timeline */
-    .timeline {
-        padding-left: 30px;
-    }
-
-    .timeline-marker {
-        left: -35px;
-    }
-
-    .timeline-content {
-        padding: 1.5rem;
-    }
-}

static/css/_skills.css

@@ -1,340 +0,0 @@
-/* Skills Section Styles - Interactive Circular Progress */
-.skills {
-    position: relative;
-    overflow: hidden;
-    padding: 6rem 0;
-}
-
-.skills::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('/static/image.png');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    opacity: 0.08;
-    z-index: 0;
-}
-
-.tech-stack-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-    gap: 4rem;
-    position: relative;
-    z-index: 1;
-}
-
-.tech-category {
-    background: var(--dark-light);
-    padding: 3rem 2rem;
-    border-radius: 20px;
-    border: 1px solid var(--border);
-    transition: all 0.3s ease;
-    box-shadow: 0 10px 30px var(--shadow);
-}
-
-.tech-category:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.2);
-}
-
-.tech-category h3 {
-    margin-bottom: 3rem;
-    color: var(--white);
-    font-size: 1.5rem;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    text-align: center;
-    justify-content: center;
-}
-
-.tech-category h3 i {
-    color: var(--primary);
-    font-size: 1.8rem;
-}
-
-.tech-icons {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: 2.5rem;
-    justify-items: center;
-    padding: 1rem 0;
-}
-
-.tech-icon {
-    position: relative;
-    cursor: pointer;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 1.5rem;
-    border-radius: 20px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(99, 102, 241, 0.1);
-    min-height: 120px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.tech-icon:hover {
-    transform: translateY(-10px) scale(1.05);
-    background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(99, 102, 241, 0.3);
-    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
-}
-
-.icon-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 1rem;
-    transition: all 0.3s ease;
-}
-
-.icon-container i,
-.icon-container [class*="devicon-"],
-.icon-container .custom-tech-icon {
-    font-size: 3.5rem !important;
-    margin-bottom: 0.8rem;
-    transition: all 0.3s ease;
-    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.2));
-    display: inline-block;
-    line-height: 1;
-}
-
-/* Custom icon styling */
-.icon-container .custom-tech-icon {
-    width: 3.5rem;
-    height: 3.5rem;
-    object-fit: contain;
-    border-radius: 8px;
-}
-
-.tech-icon:hover .icon-container i {
-    filter: brightness(1.2) drop-shadow(0 0 20px currentColor);
-    transform: scale(1.1);
-}
-
-.tech-icon:hover .icon-container [class*="devicon-"] {
-    filter: brightness(1.1) drop-shadow(0 0 15px rgba(0,0,0,0.3));
-    transform: scale(1.1);
-}
-
-.tech-icon:hover .icon-container .custom-tech-icon {
-    filter: brightness(1.1) drop-shadow(0 0 15px rgba(0,0,0,0.4));
-    transform: scale(1.1);
-}
-
-.tech-name {
-    color: var(--light);
-    font-size: 0.95rem;
-    font-weight: 600;
-    text-align: center;
-    margin-top: 0.5rem;
-    transition: all 0.3s ease;
-}
-
-.tech-icon:hover .tech-name {
-    color: var(--white);
-    transform: translateY(-2px);
-}
-
-.skill-circle {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100px;
-    height: 100px;
-    opacity: 0;
-    transition: opacity 0.4s ease;
-}
-
-.tech-icon:hover .skill-circle {
-    opacity: 1;
-}
-
-.progress-ring {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: rotate(-90deg);
-    width: 100px;
-    height: 100px;
-}
-
-.progress-ring-circle {
-    stroke: rgba(99, 102, 241, 0.2);
-    stroke-width: 6;
-    fill: transparent;
-    stroke-dasharray: 188.5;
-    stroke-dashoffset: 188.5;
-    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
-    stroke-linecap: round;
-}
-
-.tech-icon:hover .progress-ring-circle {
-    stroke: var(--primary);
-    stroke-width: 8;
-    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.6));
-}
-
-.percentage {
-    position: absolute;
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--white);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.tech-icon:hover .percentage {
-    opacity: 1;
-}
-
-/* Animation keyframes */
-@keyframes fillCircle {
-    from {
-        stroke-dashoffset: 188.5;
-    }
-    to {
-        stroke-dashoffset: var(--target-offset);
-    }
-}
-
-/* Tech Stack Icons - Clean approach */
-
-/* Reset any inherited colors and let icons use their natural colors */
-.tech-icon .icon-container i,
-.tech-icon .icon-container [class*="devicon-"] {
-    color: initial !important;
-}
-
-/* Brand colors for specific technologies */
-.tech-icon .icon-container .devicon-python-plain.colored {
-    background: linear-gradient(45deg, #306998, #FFD43B);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.tech-icon .icon-container .devicon-javascript-plain.colored {
-    color: #f7df1e !important;
-    text-shadow: 0 0 10px rgba(247, 223, 30, 0.5);
-}
-
-.tech-icon .icon-container .devicon-html5-plain.colored {
-    color: #e34c26 !important;
-    text-shadow: 0 0 10px rgba(227, 76, 38, 0.5);
-}
-
-.tech-icon .icon-container .devicon-postgresql-plain.colored {
-    color: #336791 !important;
-    text-shadow: 0 0 10px rgba(51, 103, 145, 0.5);
-}
-
-.tech-icon .icon-container .devicon-redis-plain.colored {
-    color: #dc382d !important;
-    text-shadow: 0 0 10px rgba(220, 56, 45, 0.5);
-}
-
-.tech-icon .icon-container .devicon-mongodb-plain.colored {
-    color: #47a248 !important;
-    text-shadow: 0 0 10px rgba(71, 162, 72, 0.5);
-}
-
-.tech-icon .icon-container .devicon-docker-plain.colored {
-    color: #0db7ed !important;
-    text-shadow: 0 0 10px rgba(13, 183, 237, 0.5);
-}
-
-.tech-icon .icon-container .devicon-tensorflow-original.colored {
-    color: #ff6f00 !important;
-    text-shadow: 0 0 10px rgba(255, 111, 0, 0.5);
-}
-
-.tech-icon .icon-container .devicon-pytorch-original.colored {
-    color: #ee4c2c !important;
-    text-shadow: 0 0 10px rgba(238, 76, 44, 0.5);
-}
-
-.tech-icon .icon-container .devicon-kubernetes-plain.colored {
-    color: #326ce5 !important;
-    text-shadow: 0 0 10px rgba(50, 108, 229, 0.5);
-}
-
-.tech-icon .icon-container .devicon-fastapi-plain.colored {
-    color: #009688 !important;
-    text-shadow: 0 0 10px rgba(0, 150, 136, 0.5);
-}
-
-.tech-icon .icon-container .devicon-django-plain.colored {
-    color: #092e20 !important;
-    text-shadow: 0 0 10px rgba(9, 46, 32, 0.5);
-}
-
-.tech-icon .icon-container .devicon-flask-original.colored {
-    color: #ffffff !important;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
-}
-
-.tech-icon .icon-container .devicon-grafana-plain.colored {
-    color: #ff6600 !important;
-    text-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
-}
-
-.tech-icon .icon-container .devicon-sqldeveloper-plain.colored {
-    color: #f29111 !important;
-    text-shadow: 0 0 10px rgba(242, 145, 17, 0.5);
-}
-
-/* FontAwesome fallback icons - custom colors */
-.tech-icon .icon-container i.fas.fa-robot {
-    color: #ff9500; /* Hugging Face orange */
-}
-
-.tech-icon .icon-container i.fas.fa-brain {
-    color: #00d4aa; /* OpenAI teal */
-}
-
-.tech-icon .icon-container i.fas.fa-link {
-    color: #1c1c1c; /* Langchain dark */
-}
-
-.tech-icon .icon-container i.fas.fa-table {
-    color: #f29111; /* SQL orange */
-}
-
-.tech-icon .icon-container i.fas.fa-database {
-    color: #c72e2e; /* MinIO red */
-}
-
-.tech-icon .icon-container i.fas.fa-fire {
-    color: #e6522c; /* Prometheus orange */
-}
-
-.tech-icon .icon-container i.fas.fa-search {
-    color: #f4b942; /* Loki yellow */
-}
-
-/* Hover effects to maintain visibility */
-.tech-icon:hover .icon-container i {
-    filter: brightness(1.2) drop-shadow(0 0 20px currentColor);
-}
-
-.tech-icon:hover .icon-container [class*="devicon-"] {
-    filter: brightness(1.1) drop-shadow(0 0 15px rgba(0,0,0,0.3));
-}
-
-.tech-icon:hover .icon-container .custom-tech-icon {
-    filter: brightness(1.1) drop-shadow(0 0 15px rgba(0,0,0,0.4));
-}

static/script.js

@@ -1,200 +0,0 @@
-// Smooth scrolling for navigation links
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function (e) {
-        e.preventDefault();
-        const target = document.querySelector(this.getAttribute('href'));
-        if (target) {
-            target.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start'
-            });
-        }
-    });
-});
-
-// Navbar scroll effect
-window.addEventListener('scroll', function() {
-    const navbar = document.querySelector('.navbar');
-    if (window.scrollY > 50) {
-        navbar.style.background = 'rgba(255, 255, 255, 0.98)';
-        navbar.style.boxShadow = '0 5px 20px rgba(15, 23, 42, 0.1)';
-    } else {
-        navbar.style.background = 'rgba(255, 255, 255, 0.95)';
-        navbar.style.boxShadow = 'none';
-    }
-});
-
-// Mobile menu toggle
-const hamburger = document.querySelector('.hamburger');
-const navMenu = document.querySelector('.nav-menu');
-
-hamburger?.addEventListener('click', function() {
-    navMenu.classList.toggle('active');
-    this.classList.toggle('active');
-});
-
-// Animate circular progress rings on scroll
-const observerOptions = {
-    threshold: 0.3,
-    rootMargin: '0px'
-};
-
-const observer = new IntersectionObserver(function(entries) {
-    entries.forEach(entry => {
-        if (entry.isIntersecting) {
-            const techIcons = entry.target.querySelectorAll('.tech-icon');
-            techIcons.forEach((icon, index) => {
-                const skill = icon.getAttribute('data-skill');
-                const circle = icon.querySelector('.progress-ring-circle');
-                const circumference = 2 * Math.PI * 40; // radius = 40
-                const offset = circumference - (skill / 100) * circumference;
-
-                setTimeout(() => {
-                    circle.style.strokeDashoffset = offset;
-                }, index * 100);
-            });
-        }
-    });
-}, observerOptions);
-
-const skillsSection = document.querySelector('.skills');
-if (skillsSection) {
-    observer.observe(skillsSection);
-}
-
-// Interactive hover effects for tech icons
-document.addEventListener('DOMContentLoaded', function() {
-    const techIcons = document.querySelectorAll('.tech-icon');
-
-    techIcons.forEach(icon => {
-        const skill = icon.getAttribute('data-skill');
-        const circle = icon.querySelector('.progress-ring-circle');
-        const percentage = icon.querySelector('.percentage');
-        const circumference = 2 * Math.PI * 40; // radius = 40
-
-        // Set initial state
-        circle.style.strokeDasharray = circumference;
-        circle.style.strokeDashoffset = circumference;
-
-        icon.addEventListener('mouseenter', function() {
-            const offset = circumference - (skill / 100) * circumference;
-            circle.style.strokeDashoffset = offset;
-            percentage.textContent = skill + '%';
-        });
-
-        icon.addEventListener('mouseleave', function() {
-            circle.style.strokeDashoffset = circumference;
-        });
-    });
-});
-
-// Animate elements on scroll
-const animateOnScroll = () => {
-    const elements = document.querySelectorAll('.timeline-item, .project-card, .stat-card');
-    
-    elements.forEach(element => {
-        const elementTop = element.getBoundingClientRect().top;
-        const elementBottom = element.getBoundingClientRect().bottom;
-        
-        if (elementTop < window.innerHeight && elementBottom > 0) {
-            element.style.opacity = '1';
-            element.style.transform = 'translateY(0)';
-        }
-    });
-};
-
-window.addEventListener('scroll', animateOnScroll);
-window.addEventListener('load', animateOnScroll);
-
-// Character-by-character streaming effect for specific lines
-const streamingElement = document.getElementById('streaming-text');
-if (streamingElement) {
-    const textLines = [
-        'Hi, nice to meet you!',
-        "I'm Tran Bao Ngoc",
-        'A passionate AI developer',
-        'I love Python 🐍',
-        'I love researching AI 🤖',
-        'I love playing games 🎮'
-    ];
-
-    let currentLineIndex = 0;
-    let currentCharIndex = 0;
-    let isDeleting = false;
-    let typingSpeed = 45;
-    let deleteSpeed = 25;
-
-    function typewriterEffect() {
-        const currentLine = textLines[currentLineIndex];
-
-        if (!isDeleting) {
-            // Typing characters
-            if (currentCharIndex <= currentLine.length) {
-                streamingElement.innerHTML = currentLine.substring(0, currentCharIndex);
-                currentCharIndex++;
-
-                if (currentCharIndex > currentLine.length) {
-                    // Finished typing line, pause then start deleting
-                    setTimeout(() => {
-                        isDeleting = true;
-                        typewriterEffect();
-                    }, 1800); // Pause for 1.8 seconds
-                } else {
-                    setTimeout(typewriterEffect, typingSpeed + Math.random() * 20);
-                }
-            }
-        } else {
-            // Deleting characters
-            if (currentCharIndex > 0) {
-                currentCharIndex--;
-                streamingElement.innerHTML = currentLine.substring(0, currentCharIndex);
-                setTimeout(typewriterEffect, deleteSpeed);
-            } else {
-                // Finished deleting, move to next line
-                isDeleting = false;
-                currentLineIndex = (currentLineIndex + 1) % textLines.length;
-
-                // Pause before starting next line
-                setTimeout(typewriterEffect, 500);
-            }
-        }
-    }
-
-    // Start the typewriter effect after a delay
-    setTimeout(typewriterEffect, 2000);
-}
-
-// Parallax effect for shapes
-window.addEventListener('scroll', () => {
-    const shapes = document.querySelectorAll('.shape');
-    const scrollY = window.pageYOffset;
-    
-    shapes.forEach((shape, index) => {
-        const speed = 0.5 + (index * 0.1);
-        shape.style.transform = `translateY(${scrollY * speed}px)`;
-    });
-});
-
-// Add active class to current navigation item
-window.addEventListener('scroll', () => {
-    const sections = document.querySelectorAll('section');
-    const navLinks = document.querySelectorAll('.nav-link');
-    
-    let current = '';
-    
-    sections.forEach(section => {
-        const sectionTop = section.offsetTop - 100;
-        if (window.pageYOffset >= sectionTop) {
-            current = section.getAttribute('id');
-        }
-    });
-    
-    navLinks.forEach(link => {
-        link.classList.remove('active');
-        if (link.getAttribute('href').substring(1) === current) {
-            link.classList.add('active');
-        }
-    });
-});
-
-console.log('Portfolio loaded successfully! 🚀');

static/style.css

@@ -1,29 +0,0 @@
-/*
-Portfolio CSS - Modular Structure
-================================
-Main CSS file that imports all component modules
-
-File Structure:
-- _base.css: CSS variables, reset styles, common animations
-- _navigation.css: Navigation bar and menu styles
-- _hero.css: Hero section with glitch effect and typing animation
-- _about.css: About section with profile image and stats
-- _skills.css: Skills section with progress bars
-- _experience-projects.css: Timeline and project cards
-- _contact-footer.css: Contact section and footer
-- _responsive.css: Mobile and tablet responsive styles
-*/
-
-/* Import Base Styles & Variables */
-@import url('./css/_base.css');
-
-/* Import Component Modules */
-@import url('./css/_navigation.css');
-@import url('./css/_hero.css');
-@import url('./css/_about.css');
-@import url('./css/_skills.css');
-@import url('./css/_experience-projects.css');
-@import url('./css/_contact-footer.css');
-
-/* Import Responsive Styles */
-@import url('./css/_responsive.css');