<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neha Aitharaju | CS Student & Software Engineer</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        /* Header */
        .header {
            text-align: center;
            padding: 4rem 0;
            color: white;
        }

        .header h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            animation: slideInDown 1s ease;
        }

        .header .tagline {
            font-size: 1.3rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            animation: slideInUp 1s ease 0.3s both;
        }

        .contact-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
            animation: fadeIn 1s ease 0.6s both;
        }

        .contact-links a {
            color: white;
            text-decoration: none;
            padding: 0.8rem 1.5rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .contact-links a:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        /* Main Content */
        .main-content {
            background: white;
            border-radius: 20px;
            margin-top: -50px;
            position: relative;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .section {
            padding: 3rem;
            border-bottom: 1px solid #f0f0f0;
        }

        .section:last-child {
            border-bottom: none;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 2rem;
            color: #4c63d2;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 50px;
            height: 3px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 2px;
        }

        /* About Section */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 3rem;
            align-items: center;
        }

        .stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 1.5rem;
            border-radius: 15px;
            text-align: center;
            transform: translateY(0);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            display: block;
        }

        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
            margin-top: 0.5rem;
        }

        .about-text {
            font-size: 1.1rem;
            color: #666;
            line-height: 1.8;
        }

        /* Skills Section */
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .skill-category {
            background: #f8f9ff;
            padding: 2rem;
            border-radius: 15px;
            border-left: 4px solid #667eea;
        }

        .skill-category h3 {
            color: #4c63d2;
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
        }

        .skill-tag {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* Experience Section */
        .experience-item {
            margin-bottom: 2.5rem;
            padding: 2rem;
            background: #f8f9ff;
            border-radius: 15px;
            border-left: 4px solid #667eea;
            position: relative;
        }

        .experience-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .experience-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #333;
        }

        .experience-company {
            color: #667eea;
            font-weight: 500;
        }

        .experience-date {
            background: #667eea;
            color: white;
            padding: 0.3rem 1rem;
            border-radius: 15px;
            font-size: 0.9rem;
            white-space: nowrap;
        }

        .experience-description {
            color: #666;
            line-height: 1.7;
        }

        .experience-description li {
            margin-bottom: 0.5rem;
        }

        /* Projects Section */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
        }

        .project-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .project-header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 1.5rem;
        }

        .project-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .project-subtitle {
            opacity: 0.9;
            font-size: 0.9rem;
        }

        .project-content {
            padding: 1.5rem;
        }

        .project-description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .project-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tech-tag {
            background: #f0f0f0;
            color: #666;
            padding: 0.3rem 0.8rem;
            border-radius: 12px;
            font-size: 0.8rem;
        }

        /* Leadership Section */
        .leadership-card {
            background: linear-gradient(135deg, #ff9a9e, #fecfef);
            color: white;
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
        }

        .leadership-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .leadership-description {
            font-size: 1.1rem;
            line-height: 1.7;
            opacity: 0.95;
        }

        /* Animations */
        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2.5rem;
            }

            .about-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .stats {
                grid-template-columns: 1fr 1fr;
            }

            .experience-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .projects-grid {
                grid-template-columns: 1fr;
            }

            .section {
                padding: 2rem 1.5rem;
            }

            .container {
                padding: 1rem;
            }
        }

        @media (max-width: 480px) {
            .contact-links {
                flex-direction: column;
                align-items: center;
            }

            .stats {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header class="header">
            <h1>Neha Aitharaju</h1>
            <p class="tagline">Computer Science Student & Software Engineer</p>
            <div class="contact-links">
                <a href="mailto:nehaa24@cs.washington.edu">📧 Email</a>
                <a href="tel:4257775427">📱 Phone</a>
                <a href="#">🌐 LinkedIn</a>
                <a href="#">💻 GitHub</a>
                <a href="#">🔗 Website</a>
            </div>
        </header>

        <!-- Main Content -->
        <main class="main-content">
            <!-- About Section -->
            <section class="section">
                <h2 class="section-title">About Me</h2>
                <div class="about-grid">
                    <div class="stats">
                        <div class="stat-card">
                            <span class="stat-number">CSE 123</span>
                            <span class="stat-label">Lead TA</span>
                        </div>
                        <div class="stat-card">
                            <span class="stat-number">Leader</span>                            
                        </div>
                        <div class="stat-card">
                            <span class="stat-number">Engineer</span>
                        </div>
                        <div class="stat-card">
                            <span class="stat-number">2026</span>
                            <span class="stat-label">Graduating</span>
                        </div>
                    </div>
                    <div class="about-text">
                        <p>I’m a junior at the University of Washington studying Computer Science and Math.</p> 
                        <p>I’m passionate about building accessible tools, creating inclusive environments, and developing impactful software that merges technology with real-world needs.</p> 
                    </div>
                </div>
            </section>

            <!-- Skills Section -->
            <section class="section">
                <h2 class="section-title">Technical Skills</h2>
                <div class="skills-grid">
                    <div class="skill-category">
                        <h3>Programming Languages</h3>
                        <div class="skill-tags">
                            <span class="skill-tag">Java</span>
                            <span class="skill-tag">JavaScript</span>
                            <span class="skill-tag">Python</span>
                            <span class="skill-tag">C/C++</span>
                            <span class="skill-tag">C#</span>
                            <span class="skill-tag">R</span>
                            <span class="skill-tag">TypeScript</span>
                            <span class="skill-tag">Dart</span>
                        </div>
                    </div>
                    <div class="skill-category">
                        <h3>Frameworks & Libraries</h3>
                        <div class="skill-tags">
                            <span class="skill-tag">React</span>
                            <span class="skill-tag">Django</span>
                            <span class="skill-tag">Node.js</span>
                            <span class="skill-tag">PyTorch</span>
                            <span class="skill-tag">Backstage</span>
                            <span class="skill-tag">Express.js</span>
                        </div>
                    </div>
                    <div class="skill-category">
                        <h3>Developer Tools</h3>
                        <div class="skill-tags">
                            <span class="skill-tag">Docker</span>
                            <span class="skill-tag">Kubernetes</span>
                            <span class="skill-tag">Git</span>
                            <span class="skill-tag">Azure</span>
                            <span class="skill-tag">Linux</span>
                            <span class="skill-tag">REST APIs</span>
                        </div>
                    </div>
                    <div class="skill-category">
                        <h3>Databases</h3>
                        <div class="skill-tags">
                            <span class="skill-tag">PostgreSQL</span>
                            <span class="skill-tag">MySQL</span>
                            <span class="skill-tag">MongoDB</span>
                            <span class="skill-tag">Firebase</span>
                            <span class="skill-tag">SQL</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Experience Section -->
            <section class="section">
                <h2 class="section-title">Experience</h2>
                
                <div class="experience-item">
                    <div class="experience-header">
                        <div>
                            <div class="experience-title">Software Engineering Intern</div>
                            <div class="experience-company">Boeing</div>
                        </div>
                        <div class="experience-date">06/2024 – Present</div>
                    </div>
                    <div class="experience-description">
                        <p>Developing a web-based catalog using Backstage for the Boeing Software Factory, serving over 1 million users. Deployed using Kubernetes cluster with custom Docker containers and automated CI/CD pipelines.</p>
                    </div>
                </div>

                <div class="experience-item">
                    <div class="experience-header">
                        <div>
                            <div class="experience-title">Research Intern</div>
                            <div class="experience-company">Makeability Labs | Project Sidewalk</div>
                        </div>
                        <div class="experience-date">04/2024 – Present</div>
                    </div>
                    <div class="experience-description">
                        <p>Maintaining and enhancing the Project Sidewalk API and web application to improve tracking of accessibility issues in urban infrastructure. Working with Scala backend and PostgreSQL database under Professor Jon Froelich.</p>
                    </div>
                </div>

                <div class="experience-item">
                    <div class="experience-header">
                        <div>
                            <div class="experience-title">Teaching Assistant</div>
                            <div class="experience-company">Paul G. Allen School of Computer Science</div>
                        </div>
                        <div class="experience-date">04/2024 – Present</div>
                    </div>
                    <div class="experience-description">
                        <p>Facilitating weekly review sessions for 20+ students, covering Object-Oriented Programming, Data Structures, and Java fundamentals. Providing constructive feedback on assignments and projects.</p>
                    </div>
                </div>

                <div class="experience-item">
                    <div class="experience-header">
                        <div>
                            <div class="experience-title">Data Analyst Intern</div>
                            <div class="experience-company">Infinite Sum Modeling</div>
                        </div>
                        <div class="experience-date">06/2023 – 08/2023</div>
                    </div>
                    <div class="experience-description">
                        <p>Researched sustainability of palm oil importation using ARIMA time series models for predictive maintenance, increasing operational efficiency by 43%. Focused on macroeconomic analysis and climate policy.</p>
                    </div>
                </div>
            </section>

            <!-- Projects Section -->
            <section class="section">
                <h2 class="section-title">Featured Projects</h2>
                <div class="projects-grid">
                    <div class="project-card">
                        <div class="project-header">
                            <div class="project-title">Party Paradise</div>
                            <div class="project-subtitle">Music Playing System</div>
                        </div>
                        <div class="project-content">
                            <p class="project-description">Full-stack music website with Spotify Web API integration, featuring authentication, host/guest views, and real-time playback controls. Built with React frontend and Django backend.</p>
                            <div class="project-tech">
                                <span class="tech-tag">React</span>
                                <span class="tech-tag">Django</span>
                                <span class="tech-tag">JavaScript</span>
                                <span class="tech-tag">Spotify API</span>
                                <span class="tech-tag">Python</span>
                            </div>
                        </div>
                    </div>

                    <div class="project-card">
                        <div class="project-header">
                            <div class="project-title">StaffHub</div>
                            <div class="project-subtitle">Organization App</div>
                        </div>
                        <div class="project-content">
                            <p class="project-description">Flutter-based mobile application for tracking employees, calendars, and expenditures. Features Firebase authentication and Firestore database integration.</p>
                            <div class="project-tech">
                                <span class="tech-tag">Flutter</span>
                                <span class="tech-tag">Dart</span>
                                <span class="tech-tag">Firebase</span>
                                <span class="tech-tag">Firestore</span>
                                <span class="tech-tag">JavaScript</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Leadership Section -->
            <section class="section">
                <h2 class="section-title">Leadership</h2>
                <div class="leadership-card">
                    <div class="leadership-title">Team Captain - UW Raas Dance Team</div>
                    <p class="leadership-description">Leading a team of 20 members while managing a $20,000 budget and achieving national competition status. Choreographed routines for Raas All Stars (RAS) competition, handled travel logistics, and built networks with captains nationwide. Balancing creativity, leadership, and business management in the competitive dance world.</p>
                </div>
            </section>
        </main>
    </div>

    <script>
        // Add some interactive elements
        document.addEventListener('DOMContentLoaded', function() {
            // Animate skill tags on scroll
            const skillTags = document.querySelectorAll('.skill-tag');
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animation = 'fadeIn 0.6s ease forwards';
                    }
                });
            }, observerOptions);

            skillTags.forEach(tag => observer.observe(tag));

            // Add click effects to stat cards
            const statCards = document.querySelectorAll('.stat-card');
            statCards.forEach(card => {
                card.addEventListener('click', function() {
                    this.style.transform = 'scale(1.05) translateY(-5px)';
                    setTimeout(() => {
                        this.style.transform = 'translateY(-5px)';
                    }, 200);
                });
            });
        });
    </script>
</body>
</html>