Hugging Face's logo

Spaces:
eva1267890
/
CollegeCompassAI
Running

App Files Community
CollegeCompassAI / index.html
eva1267890's picture
eva1267890
Update index.html
aa7b1e0 verified
Raw
History Blame Contribute Delete
53.4 kB
<html lang="en" dir="ltr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Professional Portfolio - Developer CV</title>
<!-- Tailwind CSS (CDN for development only) -->
 <script>
 // Suppress Tailwind CDN warning
 if (typeof console !== 'undefined' && console.warn) {
 const originalWarn = console.warn;
 console.warn = function(...args) {
 if (args[0] && typeof args[0] === 'string' && args[0].includes('tailwindcss.com')) {
 return; // Suppress Tailwind CDN warning
 }
 originalWarn.apply(console, args);
 };
 }
 </script>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="script.js"></script>
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
 <link rel="stylesheet" href="style.css">
</head>
<body class="body-main" data-theme="dark" data-lang="en" data-dir="ltr">
<!-- Loading Screen -->
 <div class="loader-screen" id="loader">
 <div class="loader-content">
 <div class="loader-code-text">
 <div class="code-line" data-line="1">const portfolio = {</div>
 <div class="code-line" data-line="2"> loading: true,</div>
 <div class="code-line" data-line="3"> status: 'initializing...'</div>
 <div class="code-line" data-line="4">};</div>
 </div>
 <div class="loader-spinner-wrapper">
 <div class="loader-spinner"></div>
 </div>
 <div class="loader-progress-wrapper">
 <div class="loader-progress-bar"></div>
 </div>
 <div class="loader-percentage" id="loaderPercent">0%</div>
 </div>
 </div>
<!-- Navigation Header -->
 <header class="main-header" id="header">
 <nav class="nav-container">
 <div class="nav-brand">
 <div class="brand-logo">
 <span class="logo-bracket">&lt;</span>
 <span class="logo-text">Dev</span>
 <span class="logo-bracket">/&gt;</span>
 </div>
 </div>
<div class="nav-menu" id="navMenu">
 <a href="#home" class="nav-link active" data-section="home">
 <i class="fas fa-home"></i>
 <span class="nav-text"></span>Home</span>
 </a>
 <a href="#about" class="nav-link" data-section="about">
 <i class="fas fa-user"></i>
 <span class="nav-text"></span>About</span>
 </a>
 <a href="#skills" class="nav-link" data-section="skills">
 <i class="fas fa-code"></i>
 <span class="nav-text"></span>Skills</span>
 </a>
 <a href="#experience" class="nav-link" data-section="experience">
 <i class="fas fa-briefcase"></i>
 <span class="nav-text"></span>Experience</span>
 </a>
 <a href="#projects" class="nav-link" data-section="projects">
 <i class="fas fa-rocket"></i>
 <span class="nav-text"></span>Projects</span>
 </a>
 <a href="#contact" class="nav-link" data-section="contact">
 <i class="fas fa-envelope"></i>
 <span class="nav-text"></span>Contact</span>
 </a>
 </div>
<div class="nav-controls">
 <button class="theme-toggle" id="themeToggle" title="Toggle Theme">
 <i class="fas fa-moon"></i>
 </button>
 <button class="menu-toggle" id="menuToggle" title="Toggle Menu">
 <span></span>
 <span></span>
 <span></span>
 </button>
 </div>
 </nav>
 </header>
<!-- Main Content -->
 <main class="main-content">
<!-- Hero Section -->
 <section id="home" class="hero-section">
 <div class="hero-background">
 <div class="code-grid-bg"></div>
 <div class="floating-particles" id="particles"></div>
 </div>
<div class="hero-container">
 <div class="hero-content">
 <div class="hero-greeting">
 <span class="greeting-text">Hello, I'm</span>
 <span class="greeting-cursor">|</span>
 </div>
<h1 class="hero-name" id="heroName">
 <span class="name-prefix">const</span>
 <span class="name-operator">=</span>
 <span class="name-value">Eva Patel</span>
 <span class="name-suffix">;</span>
 </h1>
<div class="hero-title">
 <span class="title-prefix">//</span>
 <span class="title-text">Aspiring AI & Full Stack Developer</span>
 </div>
<p class="hero-description">
 High school developer specializing in AI, full-stack web development, and data analysis. Passionate about building impactful software using Python, React, Firebase, and Large Language Models.
 </p>
<div class="hero-buttons">
 <a href="#contact" class="btn btn-primary">
 <span>Get In Touch</span>
 <i class="fas fa-arrow-right"></i>
 </a>
 <a href="#projects" class="btn btn-secondary">
 <span>View Projects</span>
 <i class="fas fa-code"></i>
 </a>
 </div>
<div class="hero-social">
 <a href="https://github.com/evapatel123" class="footer-social-link" title="GitHub" target="_blank" rel="noopener noreferrer">
 <i class="fab fa-github"></i>
 </a>
 </a>
 </div>
 </div>
<div class="hero-image-wrapper">
 <div class="hero-image-container">
 <div class="profile-image-glow"></div>
 <div class="profile-image-frame">
 <div class="profile-image" id="profileImage">
 <div class="profile-placeholder">
 <i class="fas fa-code"></i>
 </div>
 </div>
 </div>
 <div class="floating-badge badge-1">
 <i class="fab fa-python"></i>
 <div class="badge-content">
 <span class="badge-title">Python</span>
 <span class="badge-libs">AI, LLMs, Automation</span>
 </div>
 </div>
 <div class="floating-badge badge-2">
 <i class="fas fa-laptop-code"></i>
 <div class="badge-content">
 <span class="badge-title">Web Dev</span>
 <span class="badge-libs">HTML5, CSS, Javascript</span>
 </div>
 </div>
 <div class="floating-badge badge-3">
 <i class="fas fa-chart-pie"></i>
 <div class="badge-content">
 <span class="badge-title">Data Analytics</span>
 <span class="badge-libs">SQL, Power BI</span>
 </div>
 </div>
 <div class="floating-badge badge-4">
 <i class="fa-brands fa-git-alt"></i>
 <div class="badge-content">
 <span class="badge-title">Version History</span>
 <span class="badge-libs">Git, Github, GitKraken</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="scroll-indicator">
 <div class="scroll-mouse">
 <div class="scroll-wheel"></div>
 </div>
 <span class="scroll-text">Scroll Down</span>
 </div>
 </section>
<!-- About Section -->
 <section id="about" class="section about-section">
 <div class="section-container">
 <div class="section-header">
 <span class="section-number">01</span>
 <h2 class="section-title">
 <span class="title-bracket">&lt;</span>
 <span class="title-text">About Me</span>
 <span class="title-bracket">/&gt;</span>
 </h2>
 <div class="section-line"></div>
 </div>
<div class="about-content">
 <div class="about-text-wrapper">
 <div class="about-intro">
 <p class="about-text">
 I'm Eva Patel, a motivated high school junior from Jacksonville, Florida with experience in AI, web development, programming, research, and data analysis. I currently work as a Digital Product Developer & Data Analyst Intern at STEM-E where I develop React applications, automate workflows with Python, and build Power BI dashboards. I also mentor students in mathematics, conduct independent AI research, and actively serve in multiple student leadership organizations.
 </p>
 </div>
<div class="about-stats">
 <div class="stat-item">
 <div class="stat-number" data-count="4.5">0</div>
 <div class="stat-label">unweighted GPA</div>
 </div>
 <div class="stat-item">
 <div class="stat-number" data-count="19">0</div>
 <div class="stat-label">Major Projects</div>
 </div>
 <div class="stat-item">
 <div class="stat-number" data-count="45">0</div>
 <div class="stat-label">Page Research Paper</div>
 </div>
 </div>
 </div>
<div class="about-image-wrapper">
 <div class="about-image-container">
 <div class="code-block">
 <div class="code-line">
 <span class="code-keyword">const</span>
 <span class="code-variable">developer</span>
 <span class="code-operator"> = </span>
 <span class="code-brace">{</span>
 </div>
<div class="code-line indent">
 <span class="code-property">name</span>
 <span class="code-operator">:</span>
 <span class="code-string">'Eva Patel'</span>
 <span class="code-comma">,</span>
 </div>
<div class="code-line indent">
 <span class="code-property">role</span>
 <span class="code-operator">:</span>
 <span class="code-string">'AI & Full Stack Developer'</span>
 <span class="code-comma">,</span>
 </div>
<div class="code-line indent">
 <span class="code-property">education</span>
 <span class="code-operator">:</span>
 <span class="code-string">'High School'</span>
 <span class="code-comma">,</span>
 </div>
<div class="code-line indent">
 <span class="code-property">skills</span>
 <span class="code-operator">:</span>
 <span class="code-bracket">[</span>
 <span class="code-string">'Python'</span>
 <span class="code-comma">,</span>
 <span class="code-string">'React'</span>
 <span class="code-comma">,</span>
 <span class="code-string">'JavaScript'</span>
 <span class="code-comma">,</span>
 <span class="code-string">'Firebase'</span>
 <span class="code-comma">,</span>
 <span class="code-string">'LLMs'</span>
 <span class="code-comma">,</span>
 <span class="code-string">'Power BI'</span>
 <span class="code-bracket">]</span>
 <span class="code-comma">,</span>
 </div>
<div class="code-line indent">
 <span class="code-property">currently</span>
 <span class="code-operator">:</span>
 <span class="code-string">'Digital Product Developer Intern'</span>
 <span class="code-comma">,</span>
 </div>
<div class="code-line indent">
 <span class="code-property">passion</span>
 <span class="code-operator">:</span>
 <span class="code-string">'Building AI that solves real-world problems, frontend designing and graphic designing'</span>
 </div>
<div class="code-line">
 <span class="code-brace">}</span>
 <span class="code-semicolon">;</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Skills Section -->
 <section id="skills" class="section skills-section">
 <div class="section-container">
 <div class="section-header">
 <span class="section-number">02</span>
 <h2 class="section-title">
 <span class="title-bracket">&lt;</span>
 <span class="title-text">Skills</span>
 <span class="title-bracket">/&gt;</span>
 </h2>
 <div class="section-line"></div>
 </div>
<div class="skills-grid">
<!-- Frontend Development -->
 <div class="skill-category">
 <h3 class="category-title">Frontend Development</h3>
<div class="skill-items">
<div class="skill-item" data-skill="React" data-percent="90">
 <div class="skill-header">
 <span class="skill-name">React</span>
 <span class="skill-percent">90%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="TypeScript" data-percent="85">
 <div class="skill-header">
 <span class="skill-name">TypeScript</span>
 <span class="skill-percent">85%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="JavaScript" data-percent="95">
 <div class="skill-header">
 <span class="skill-name">JavaScript</span>
 <span class="skill-percent">95%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="HTML/CSS" data-percent="95">
 <div class="skill-header">
 <span class="skill-name">HTML / CSS</span>
 <span class="skill-percent">95%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
</div>
 </div>
<!-- AI & Programming -->
 <div class="skill-category">
 <h3 class="category-title">AI & Programming</h3>
<div class="skill-items">
<div class="skill-item" data-skill="Python" data-percent="95">
 <div class="skill-header">
 <span class="skill-name">Python</span>
 <span class="skill-percent">95%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="LLMs" data-percent="90">
 <div class="skill-header">
 <span class="skill-name">Large Language Models</span>
 <span class="skill-percent">90%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="Prompt Engineering" data-percent="72">
 <div class="skill-header">
 <span class="skill-name">Prompt Engineering</span>
 <span class="skill-percent">72%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="Hugging Face" data-percent="90">
 <div class="skill-header">
 <span class="skill-name">Hugging Face</span>
 <span class="skill-percent">90%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
</div>
 </div>
<!-- Backend & Tools -->
 <div class="skill-category">
 <h3 class="category-title">Backend & Tools</h3>
<div class="skill-items">
<div class="skill-item" data-skill="Firebase" data-percent="90">
 <div class="skill-header">
 <span class="skill-name">Firebase</span>
 <span class="skill-percent">90%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="Supabase" data-percent="80">
 <div class="skill-header">
 <span class="skill-name">Supabase</span>
 <span class="skill-percent">80%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="Git & GitHub" data-percent="90">
 <div class="skill-header">
 <span class="skill-name">Git & GitHub</span>
 <span class="skill-percent">90%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="Power BI" data-percent="85">
 <div class="skill-header">
 <span class="skill-name">Power BI</span>
 <span class="skill-percent">85%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="SQL" data-percent="72">
 <div class="skill-header">
 <span class="skill-name">SQL</span>
 <span class="skill-percent">72%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
</div>
 </div>
<!-- Design -->
 <div class="skill-category">
 <h3 class="category-title">Design & Creative</h3>
<div class="skill-items">
<div class="skill-item" data-skill="Figma" data-percent="90">
 <div class="skill-header">
 <span class="skill-name">Figma</span>
 <span class="skill-percent">90%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="Canva" data-percent="95">
 <div class="skill-header">
 <span class="skill-name">Canva</span>
 <span class="skill-percent">95%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
<div class="skill-item" data-skill="Adobe Photoshop" data-percent="85">
 <div class="skill-header">
 <span class="skill-name">Adobe Photoshop</span>
 <span class="skill-percent">85%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
</div>
 </div>
</div>
</div>
<!-- Other Tools -- Needs work on bcuz it shows up as a long rectangle on the screen
<div class="skill-category">
 <h3 class="category-title">Other Tools</h3>
 <div class="skill-items">
 <div class="skill-item" data-skill="Microsoft Office" data-percent="90">
 <div class="skill-header">
 <span class="skill-name">Microsoft Office</span>
 <span class="skill-percent">90%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
 <div class="skill-item" data-skill="VS Code" data-percent="98">
 <div class="skill-header">
 <span class="skill-name">VS Code</span>
 <span class="skill-percent">98%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
 <div class="skill-item" data-skill="Vercel" data-percent="65">
 <div class="skill-header">
 <span class="skill-name">Vercel</span>
 <span class="skill-percent">65%</span>
 </div>
 <div class="skill-bar">
 <div class="skill-progress"></div>
 </div>
 </div>
</div>
 </div>
 -->
</section>
<!-- Experience Section -->
 <section id="experience" class="section experience-section">
 <div class="section-container">
 <div class="section-header">
 <span class="section-number">03</span>
 <h2 class="section-title">
 <span class="title-bracket">&lt;</span>
 <span class="title-text">Experience</span>
 <span class="title-bracket">/&gt;</span>
 </h2>
 <div class="section-line"></div>
 </div>
<div class="timeline">
 <div class="timeline-item">
 <div class="timeline-marker"></div>
 <div class="timeline-content">
 <div class="timeline-header">
 <div class="timeline-year">2026 - Present</div>
 <div class="timeline-badge">Current</div>
 </div>
 <h3 class="timeline-title">Digital Product Developer & Data Analyst Intern</h3>
 <div class="timeline-company">
 <i class="fas fa-building"></i>
 STEM-E Youth and Career Development Program | Houston TX
 </div>
 <p class="timeline-description">
 Developing modern educational technology solutions while contributing to frontend, backend and Firebase development. Also contributed in data analytics by making data dashboards using Power BI.
 </p>
 <div class="timeline-achievements">
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Worked on a responsive React + Firebase web application</span>
 </div>
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Automated data processing using Python</span>
 </div>
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Built Power BI dashboards</span>
 </div>
 </div>
 <div class="timeline-tags">
 <span class="tag">React</span>
 <span class="tag">Node.js</span>
 <span class="tag">TypeScript</span>
 <span class="tag">MongoDB</span>
 <span class="tag">Docker</span>
 <span class="tag">AWS</span>
 </div>
 </div>
 </div>
<div class="timeline-item">
 <div class="timeline-marker"></div>
 <div class="timeline-content">
 <div class="timeline-header">
 <div class="timeline-year">June 2025 - August 2025 & June 2026 - July 2026</div>
 </div>
 <h3 class="timeline-title">Front Office Summer Intern</h3>
 <div class="timeline-company">
 <i class="fas fa-building"></i>
 Beachside High School | Saint Johns County
 </div>
 <p class="timeline-description">
 Supported daily front office operations by assisting students, staff, and visitors while managing administrative tasks and confidential records. Strengthened organizational, communication, and customer service skills in a fast-paced school environment.
 </p>
 <div class="timeline-achievements">
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Managed administrative operations</span>
 </div>
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Coordinated schedules</span>
 </div>
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Maintained student records and maintained customer service</span>
 </div>
 </div>
 <div class="timeline-tags">
 <span class="tag">Customer Service</span>
 <span class="tag">Microsoft Office</span>
 <span class="tag">Administrative Support</span>
 <span class="tag">Organization</span>
 <span class="tag">Time Management</span>
 </div>
 </div>
 </div>
<div class="timeline-item">
 <div class="timeline-marker"></div>
 <div class="timeline-content">
 <div class="timeline-header">
 <div class="timeline-year">June 2024 - August 2024</div>
 </div>
 <h3 class="timeline-title">Facilities Office Intern</h3>
 <div class="timeline-company">
 <i class="fas fa-building"></i>
 Beachside High School
 </div>
 <p class="timeline-description">
 Assisted with campus operations by coordinating event setups, managing inventory, and supporting maintenance activities. Helped ensure a safe, organized, and efficient learning environment for students and staff.
 </p>
 <div class="timeline-achievements">
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Managed inventory</span>
 </div>
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Coordinated events</span>
 </div>
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Supported campus maintenance</span>
 </div>
 </div>
 <div class="timeline-tags">
 <span class="tag">Inventory Management</span>
 <span class="tag">Administrative Support</span>
 <span class="tag">Event Coordination</span>
 <span class="tag">Organization</span>
 <span class="tag">Record Management</span>
 </div>
 </div>
 </div>
<div class="timeline-item">
 <div class="timeline-marker"></div>
 <div class="timeline-content">
 <div class="timeline-header">
 <div class="timeline-year">June 2026- Current</div>
 </div>
 <h3 class="timeline-title">Technical Blog Writer</h3>
 <div class="timeline-company">
 <i class="fas fa-building"></i>
 Freelance
 </div>
 <p class="timeline-description">
 Writes blogs about AI/ML engineering, building LLM's, trendy techincal topics, technical news and hot takes etc.
 </p>
 <div class="timeline-achievements">
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Make blogs on Hashnode</span>
 </div>
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Written step-by-step easy to understand tutorials</span>
 </div>
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Posts about trending techincal news and emerging technology</span>
 </div>
 </div>
 <div class="timeline-tags">
 <span class="tag">Tutorials</span>
 <span class="tag">AI/ML</span>
 <span class="tag">Software Engineering</span>
 <span class="tag">Blogs</span>
 <span class="tag">News</span>
 </div>
 </div>
 </div>
<div class="timeline-item">
 <div class="timeline-marker"></div>
 <div class="timeline-content">
 <div class="timeline-header">
 <div class="timeline-year">June 2024 - Present</div>
 </div>
 <h3 class="timeline-title">Math Tutor</h3>
 <div class="timeline-company">
 <i class="fas fa-building"></i>
 Beachside High School | Saint Johns County
 </div>
 <p class="timeline-description">
 Tutored students in Algebra, Geometry, and other mathematics courses through personalized instruction and problem-solving strategies. Helped students build confidence and improve academic performance in mathematics.
 </p>
 <div class="timeline-achievements">
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Tutored Algebra, Geometry and Algebra 2</span>
 </div>
 <div class="achievement-item">
 <i class="fas fa-check-circle"></i>
 <span>Mentored students individually and in groups</span>
 </div>
 <div class="timeline-tags">
 <span class="tag">Maths</span>
 <span class="tag">Communication</span>
 <span class="tag">Teaching</span>
 <span class="tag">Problem Solving</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Projects Section -->
 <section id="projects" class="section projects-section">
 <div class="section-container">
 <div class="section-header">
 <span class="section-number">04</span>
 <h2 class="section-title">
 <span class="title-bracket">&lt;</span>
 <span class="title-text">Projects</span>
 <span class="title-bracket">/&gt;</span>
 </h2>
 <div class="section-line"></div>
 </div>
<div class="projects-grid">
 <div class="project-card">
 <div class="project-image">
 <div class="project-overlay">
 <div class="project-links">
 <a href="https://github.com/evapatel123/CIVICPULSE" class="project-link" title="View Project" target="_blank" rel="noopener noreferrer">
 <i class="fas fa-external-link-alt"></i>
 </a>
 <a href="https://github.com/evapatel123/CIVICPULSE" class="project-link" title="View Code" target="_blank" rel="noopener noreferrer">
 <i class="fab fa-github"></i>
 </a>
 </div>
 </div>
 <div class="project-placeholder">
 <i class=<i class="fas fa-landmark"></i>></i>
 </div>
 </div>
 <div class="project-content">
 <h3 class="project-title">CivicPulse | Multi-Agent AI Civic Analysis Platform</h3>
 <p class="project-description">
 Built a multi-agent AI platform using Python and Hugging Face to parse and analyze complex municipal legislation and public budget documents.
 </p>
 <div class="project-tags">
 <span class="tag">LLMs</span>
 <span class="tag">API Integration</span>
 <span class="tag">Meta Llama 3</span>
 <span class="tag">Python</span>
 <span class="tag">Gradio</span>
 </div>
 </div>
 </div>
<div class="project-card">
 <div class="project-image">
 <div class="project-overlay">
 <div class="project-links">
 <a href="https://github.com/evapatel123/Sherlock-Of-Bugs" class="project-link" title="View Project" target="_blank" rel="noopener noreferrer">
 <i class="fas fa-external-link-alt"></i>
 </a>
<a href="https://github.com/evapatel123/Sherlock-Of-Bugs" class="project-link" title="View Code" target="_blank" rel="noopener noreferrer">
 <i class="fab fa-github"></i>
 </a>
 </div>
 </div>
 <div class="project-placeholder">
 <i class="fas fa-bug"></i>
 </div>
 </div>
<div class="project-content">
 <h3 class="project-title">The Sherlock of Bugs</h3>
 <p class="project-description">
 Sherlock-OB is an AI-powered web application that helps users search, analyze, and summarize public records or bugs in code through an intuitive interface.
 </p>
 <div class="project-tags">
 <span class="tag">Python</span>
 <span class="tag">UI/UX</span>
 <span class="tag">Canva</span>
 <span class="tag">Gradio</span>
 </div>
 </div>
 </div>
<div class="project-card">
 <div class="project-image">
 <div class="project-overlay">
 <div class="project-links">
 <a href="https://github.com/STEM-E-Youth-Career-Development-Program/tutor-app" class="project-link" title="View Project" target="_blank" rel="noopener noreferrer">
 <i class="fas fa-external-link-alt"></i>
 </a>
 <a href="https://github.com/STEM-E-Youth-Career-Development-Program/tutor-app" class="project-link" title="View Code" target="_blank" rel="noopener noreferrer">
 <i class="fab fa-github"></i>
 </a>
 </div>
 </div>
 <div class="project-placeholder">
 <<i class="fas fa-graduation-cap"></i>>
 </div>
 </div>
 <div class="project-content">
 <h3 class="project-title">STEM-E Youth Career and Development Program- Tutor App</h3>
 <p class="project-description">
 Contribute to a website to improve STEM-E's Mentor & Tutor program. This website is designed to match Tutors & Students, and Mentors & Mentees.
 </p>
 <div class="project-tags">
 <span class="tag">React</span>
 <span class="tag">Javascript</span>
 <span class="tag">Git/Github</span>
 <span class="tag">Figma</span>
 <span class="tag">Firestore</span>
 </div>
 </div>
 </div>
 <div class="project-card">
 <div class="project-image">
 <div class="project-overlay">
 <div class="project-links">
 <a href="https://github.com/evapatel123/Storytelling" class="project-link" title="View Project" target="_blank" rel="noopener noreferrer">
 <i class="fas fa-external-link-alt"></i>
 </a>
 <a href="https://github.com/evapatel123/Storytelling" class="project-link" title="View Code" target="_blank" rel="noopener noreferrer">
 <i class="fab fa-github"></i>
 </a>
 </div>
 </div>
 <div class="project-placeholder">
 <i class="fas fa-book-open"></i>
 </div>
 </div>
 <div class="project-content">
 <h3 class="project-title">WellVerse</h3>
 <p class="project-description">
 WellVerse is an AI-powered interactive storytelling application built with Python, Gradio and Google Teachable Model.
 </p>
 <div class="project-tags">
 <span class="tag">Python</span>
 <span class="tag">Machine Learning</span>
 <span class="tag">Adobe Photoshop Logo Designing</span>
 <span class="tag">Gradio</span>
 </div>
 </div>
 </div>
<div class="project-card">
 <div class="project-image">
 <div class="project-overlay">
 <div class="project-links">
 <a href="#" class="project-link" title="View Project" target="_blank" rel="noopener noreferrer">
 <i class="fas fa-external-link-alt"></i>
 </a>
 <a href="#" class="project-link" title="View Code" target="_blank" rel="noopener noreferrer">
 <i class="fab fa-github"></i>
 </a>
 </div>
 </div>
 <div class="project-placeholder">
 <i class="fas fa-users"></i>
 </div>
 </div>
 <div class="project-content">
 <h3 class="project-title">FreshStart Connect</h3>
 <p class="project-description">
 FreshStart Connect is a currently in-progress production app that intelligently matches incoming freshmen with experienced Link Crew leaders based on shared interests, academic goals, and extracurricular passions. Designed to strengthen school communities, it streamlines mentorship, communication, and personalized guidance to help students transition confidently into high school. Not available as a link since it's still in-production.
 </p>
 <div class="project-tags">
 <span class="tag">TypeScript</span>
 <span class="tag">React</span>
 <span class="tag">HTML/CSS</span>
 <span class="tag">Javascript</span>
 <span class="tag">Supabase</span>
 <span class="tag">UI/UX Designing</span>
 </div>
 </div>
 </div>
<div class="project-card">
 <div class="project-image">
 <div class="project-overlay">
 <div class="project-links">
 <a href="#" class="project-link" title="View Project" target="_blank" rel="noopener noreferrer">
 <i class="fas fa-external-link-alt"></i>
 </a>
 <a href="#" class="project-link" title="View Code" target="_blank" rel="noopener noreferrer">
 <i class="fab fa-github"></i>
 </a>
 </div>
 </div>
 <div class="project-placeholder">
 <i class="fas fa-chart-line"></i>
 </div>
 </div>
 <div class="project-content">
 <h3 class="project-title">Independent AI Research</h3>
 <p class="project-description">
 A currently in-progress 45 page research paper on Quantifying the Epistemic Trust Gap: A Sentiment-Driven Framework for Calibrating Human Expectations of Artificial Intelligence | May 2026
 </p>
 <div class="project-tags">
 <span class="tag">Statistics</span>
 <span class="tag">Data Analysis</span>
 <span class="tag">Data Collection</span>
 <span class="tag">Data Visualization</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="section contact-section">
 <div class="section-container">
<div class="contact-hero">
<p class="contact-subtitle">
 // open to internships, research, and collaboration
 </p>
<h2 class="contact-heading">
 Let's build something <span>together.</span>
 </h2>
<p class="contact-description">
 Open to any intership, research project, fancy portfolio website making, tutoring and AI/ML/Full Stack web development project opportunities!
Looking for a few collaborators proficient in TypeScript and React to work with me to make FreshStart Connect a fully working app.
Send me a DM/email for any inquiries or opportunities! Note that some of my projects are not on this portfolio, so if you want to see more...
 check out my GitHub!
 </p>
</div>
<div class="contact-cards">
<!-- Email -->
 <a href="mailto:evapatel1411@gmail.com" class="contact-card featured">
<i class="fas fa-envelope"></i>
<span>evapatel1411@gmail.com</span>
</a>
<!-- Instagram -->
 <a href="https://www.instagram.com/eva_j_patel" class="contact-card" target="_blank" rel="noopener noreferrer">
<i class="fab fa-instagram"></i>
<span>eva-j-patel</span>
</a>
<!-- GitHub -->
 <a href="https://github.com/evapatel123"
 target="_blank"
 class="contact-card">
<i class="fab fa-github"></i>
<span>github.com/evapatel123</span>
</a>
</div>
</div>
</section>
<!-- Footer -->
 <footer class="main-footer">
 <div class="footer-container">
 <div class="footer-content">
 <div class="footer-text-wrapper">
 <p class="footer-text">
 <span class="footer-copyright">© 2026 Developer Portfolio</span>
 <span class="footer-divider">•</span>
 <span class="footer-built">Built with passion and code</span>
 </p>
 <p class="footer-author">
 <span class="footer-by-text">by</span>
 <a href="https://github.com/evapatel123" target="_blank" rel="noopener noreferrer" class="footer-author-link">
 <i class="fas fa-code"></i>
 <span>Eva</span>
 </a>
 </p>
 </div>
 <div class="footer-social">
 <a href="https://github.com/evapatel123" class="footer-social-link" title="GitHub">
 <i class="fab fa-github"></i>
 </a>
 <a href="https://www.instagram.com/eva_j_patel" class="footer-social-link" title="Instagram" target="_blank" rel="noopener noreferrer">
 <i class="fab fa-instagram"></i>
 </a>
 </div>
 </div>
 </div>
 </footer>
<!-- Scripts -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
 <!-- Motion One loaded dynamically -->
 <script src="js/animations.js"></script>
 <script src="js/main.js"></script>
</body>
</html>