Upload 21 files

static/css/_about.css

@@ -0,0 +1,190 @@
+/* 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

@@ -0,0 +1,116 @@
+/* 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

@@ -0,0 +1,156 @@
+/* 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

@@ -0,0 +1,290 @@
+/* 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/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

@@ -0,0 +1,318 @@
+/* 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/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

@@ -0,0 +1,74 @@
+/* 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

@@ -0,0 +1,132 @@
+/* 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

@@ -0,0 +1,340 @@
+/* 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/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

@@ -0,0 +1,200 @@
+// 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

@@ -0,0 +1,29 @@
+/*
+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');