Spaces:
Running
Running
Perfect your skills are beyond what I expected you have a future with me best friend. Now actinging under the same as the last inquiry: Create a Home page for this app please? - Follow Up Deployment
7e93662
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Integration Specialist | HuggingFace + Atlassian</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0052CC 0%, #2684FF 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #2684FF; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #2684FF; } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(38, 132, 255, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 0 10px rgba(38, 132, 255, 0); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(38, 132, 255, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <img class="h-8 w-auto" src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="HuggingFace"> | |
| <span class="mx-2 text-gray-400">+</span> | |
| <img class="h-8 w-auto" src="https://wac-cdn.atlassian.com/dam/jcr:e348b562-4152-4cdc-8a55-3d297e509cc8/Atlassian-horizontal-blue-rgb.svg" alt="Atlassian"> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#about" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a> | |
| <a href="#expertise" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Expertise</a> | |
| <a href="#projects" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a> | |
| <a href="#contact" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#about" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a> | |
| <a href="#expertise" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Expertise</a> | |
| <a href="#projects" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Projects</a> | |
| <a href="#contact" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight"> | |
| <span class="block">Welcome to AI Integrations</span> | |
| <span class="block text-blue-200 mt-4 text-2xl md:text-3xl">Bridging AI and Productivity Tools</span> | |
| </h1> | |
| <p class="mt-6 max-w-2xl mx-auto text-xl"> | |
| Transform your workflows with custom AI solutions integrated into Atlassian products, powered by HuggingFace transformers. | |
| </p> | |
| <div class="mt-10 flex justify-center space-x-4"> | |
| <a href="#solutions" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-blue-50"> | |
| Explore Solutions | |
| </a> | |
| <a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 bg-opacity-80 hover:bg-opacity-100"> | |
| Get Started | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Overview Section --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">What We Do</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| AI-powered productivity enhancements | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| We specialize in integrating cutting-edge NLP models into your existing tools to automate workflows, enhance decision making, and boost team productivity. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Links Section --> | |
| <div id="solutions" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fab fa-atlassian text-white text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Atlassian Integrations</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600">Enhance Jira, Confluence and other Atlassian products with AI capabilities.</p> | |
| <div class="mt-4"> | |
| <a href="#projects" class="text-blue-600 hover:text-blue-500 font-medium">View examples →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-robot text-white text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Custom AI Models</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600">Tailored NLP solutions for your specific business needs.</p> | |
| <div class="mt-4"> | |
| <a href="#expertise" class="text-blue-600 hover:text-blue-500 font-medium">Learn more →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-cogs text-white text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Workflow Automation</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600">Streamline processes with intelligent automation.</p> | |
| <div class="mt-4"> | |
| <a href="#contact" class="text-blue-600 hover:text-blue-500 font-medium">Get started →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- About Section --> | |
| <div id="about" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">About</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Specialized in AI-powered Atlassian integrations | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| I combine HuggingFace transformers with Atlassian's ecosystem to create intelligent workflows and automation. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">NLP Pipelines</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Expertise in implementing HuggingFace transformers for text classification, summarization, and question answering within Jira and Confluence. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fab fa-atlassian text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Atlassian Ecosystem</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Deep knowledge of Atlassian's REST APIs, webhooks, and Forge platform for building custom apps and integrations. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fab fa-github text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">GitHub Integrations</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Building CI/CD pipelines that connect GitHub actions with Atlassian products, enabling automated testing and deployment of AI models. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-project-diagram text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">End-to-End Solutions</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| From model training to deployment, creating complete solutions that bring AI capabilities directly into your workflow tools. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expertise Section --> | |
| <div id="expertise" class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Technical Expertise</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| My specialized skill set | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Combining cutting-edge NLP with enterprise integration patterns | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- HuggingFace Card --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-brain text-white text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">HuggingFace Transformers</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-600"> | |
| <li>Custom model training and fine-tuning</li> | |
| <li>Pipeline creation for text processing</li> | |
| <li>Model optimization for production</li> | |
| <li>Integration with FastAPI/Flask</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Atlassian Card --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fab fa-atlassian text-white text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Atlassian Integrations</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-600"> | |
| <li>Jira/Confluence app development</li> | |
| <li>Forge and Connect platforms</li> | |
| <li>Webhook implementations</li> | |
| <li>OAuth 2.0 authentication flows</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- GitHub Card --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fab fa-github text-white text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">GitHub Automation</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-600"> | |
| <li>Actions for CI/CD pipelines</li> | |
| <li>Automated testing workflows</li> | |
| <li>Model deployment automation</li> | |
| <li>Issue tracking integration</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Section --> | |
| <div id="projects" class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Projects</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Recent implementations | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Examples of HuggingFace + Atlassian integrations | |
| </p> | |
| </div> | |
| <div class="mt-10 space-y-12"> | |
| <!-- Project 1 --> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-50 p-6 rounded-lg h-full"> | |
| <h3 class="text-xl font-bold text-gray-900">Jira Issue Classifier</h3> | |
| <p class="mt-2 text-gray-600"> | |
| A Forge app that automatically categorizes incoming Jira issues using a fine-tuned HuggingFace transformer model. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">HuggingFace</span> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 ml-2">Forge</span> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800 ml-2">BERT</span> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="project-details-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700" data-project="project1"> | |
| View details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 hidden md:block"> | |
| <div class="bg-gray-100 rounded-lg h-full flex items-center justify-center p-6"> | |
| <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="HuggingFace Logo" class="h-16 opacity-30"> | |
| <span class="mx-4 text-gray-400">+</span> | |
| <img src="https://wac-cdn.atlassian.com/dam/jcr:e348b562-4152-4cdc-8a55-3d297e509cc8/Atlassian-horizontal-blue-rgb.svg" alt="Atlassian Logo" class="h-8 opacity-30"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="flex flex-col md:flex-row-reverse gap-8"> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-50 p-6 rounded-lg h-full"> | |
| <h3 class="text-xl font-bold text-gray-900">Confluence Knowledge Assistant</h3> | |
| <p class="mt-2 text-gray-600"> | |
| A question-answering bot integrated into Confluence that uses a fine-tuned T5 model to answer questions based on company documentation. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">HuggingFace</span> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 ml-2">Connect</span> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800 ml-2">T5</span> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="project-details-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700" data-project="project2"> | |
| View details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 hidden md:block"> | |
| <div class="bg-gray-100 rounded-lg h-full flex items-center justify-center p-6"> | |
| <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="HuggingFace Logo" class="h-16 opacity-30"> | |
| <span class="mx-4 text-gray-400">+</span> | |
| <img src="https://wac-cdn.atlassian.com/dam/jcr:e348b562-4152-4cdc-8a55-3d297e509cc8/Atlassian-horizontal-blue-rgb.svg" alt="Atlassian Logo" class="h-8 opacity-30"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-50 p-6 rounded-lg h-full"> | |
| <h3 class="text-xl font-bold text-gray-900">GitHub-Jira Sync with NLP</h3> | |
| <p class="mt-2 text-gray-600"> | |
| A GitHub Action that analyzes PR descriptions using sentiment analysis and automatically updates linked Jira tickets. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">HuggingFace</span> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 ml-2">GitHub Actions</span> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800 ml-2">DistilBERT</span> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="project-details-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700" data-project="project3"> | |
| View details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 hidden md:block"> | |
| <div class="bg-gray-100 rounded-lg h-full flex items-center justify-center p-6"> | |
| <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="HuggingFace Logo" class="h-16 opacity-30"> | |
| <span class="mx-4 text-gray-400">+</span> | |
| <img src="https://wac-cdn.atlassian.com/dam/jcr:e348b562-4152-4cdc-8a55-3d297e509cc8/Atlassian-horizontal-blue-rgb.svg" alt="Atlassian Logo" class="h-8 opacity-30"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Modals --> | |
| <div id="project-modal" class="fixed z-10 inset-0 overflow-y-auto hidden"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full sm:p-6"> | |
| <div> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100"> | |
| <i class="fas fa-project-diagram text-blue-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-5"> | |
| <h3 id="modal-title" class="text-lg leading-6 font-medium text-gray-900"></h3> | |
| <div class="mt-2"> | |
| <p id="modal-description" class="text-sm text-gray-500"></p> | |
| <div id="modal-technologies" class="mt-4"></div> | |
| <div id="modal-features" class="mt-4 text-left"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 sm:mt-6"> | |
| <button type="button" id="modal-close" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Section --> | |
| <div id="contact" class="gradient-bg text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-200 font-semibold tracking-wide uppercase">Contact</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl"> | |
| Let's build something amazing | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-blue-100 lg:mx-auto"> | |
| Interested in integrating AI with your Atlassian products? Get in touch! | |
| </p> | |
| </div> | |
| <div class="mt-10 flex flex-col md:flex-row justify-center gap-8"> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 md:w-1/2 max-w-md"> | |
| <h3 class="text-lg font-medium mb-4">Send me a message</h3> | |
| <form id="contact-form" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-blue-100">Name</label> | |
| <input type="text" id="name" name="name" class="mt-1 block w-full border border-blue-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white bg-opacity-10 text-white placeholder-blue-200"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-blue-100">Email</label> | |
| <input type="email" id="email" name="email" class="mt-1 block w-full border border-blue-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white bg-opacity-10 text-white placeholder-blue-200"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-blue-100">Message</label> | |
| <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-blue-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white bg-opacity-10 text-white placeholder-blue-200"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-700 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Send message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 md:w-1/2 max-w-md"> | |
| <h3 class="text-lg font-medium mb-4">Connect with me</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-2"> | |
| <i class="fab fa-github text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-blue-100">GitHub</p> | |
| <a href="#" class="text-sm text-blue-200 hover:text-white">github.com/hf-atlassian-dev</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-2"> | |
| <i class="fab fa-linkedin text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-blue-100">LinkedIn</p> | |
| <a href="#" class="text-sm text-blue-200 hover:text-white">linkedin.com/in/hf-atlassian-dev</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-2"> | |
| <i class="fab fa-twitter text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-blue-100">Twitter</p> | |
| <a href="#" class="text-sm text-blue-200 hover:text-white">@hf_atlassian_dev</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-2"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-blue-100">Email</p> | |
| <a href="#" class="text-sm text-blue-200 hover:text-white">contact@hf-atlassian.dev</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="xl:grid xl:grid-cols-3 xl:gap-8"> | |
| <div class="space-y-8 xl:col-span-1"> | |
| <div class="flex items-center"> | |
| <img class="h-8" src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="HuggingFace"> | |
| <span class="mx-2 text-gray-400">+</span> | |
| <img class="h-8" src="https://wac-cdn.atlassian.com/dam/jcr:e348b562-4152-4cdc-8a55-3d297e509cc8/Atlassian-horizontal-blue-rgb.svg" alt="Atlassian"> | |
| </div> | |
| <p class="text-gray-300 text-base"> | |
| Specializing in AI-powered integrations between HuggingFace transformers and Atlassian products. | |
| </p> | |
| </div> | |
| <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> | |
| <div class="md:grid md:grid-cols-2 md:gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Expertise</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">HuggingFace</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Atlassian</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">GitHub</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">NLP</a></li> | |
| </ul> | |
| </div> | |
| <div class="mt-12 md:mt-0"> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Tutorials</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Case Studies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="md:grid md:grid-cols-2 md:gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| <div class="mt-12 md:mt-0"> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">GitHub</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">LinkedIn</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Twitter</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8"> | |
| <p class="text-base text-gray-400 text-center"> | |
| © 2023 AI Integration Specialist. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Success Toast --> | |
| <div id="success-toast" class="fixed bottom-4 right-4 hidden"> | |
| <div class="bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Message sent successfully!</span> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Project modal functionality | |
| const projects = { | |
| project1: { | |
| title: "Jira Issue Classifier", | |
| description: "A Forge app that automatically categorizes incoming Jira issues using a fine-tuned HuggingFace transformer model, reducing manual triage time by 60%.", | |
| technologies: [ | |
| { name: "HuggingFace Transformers", color: "blue" }, | |
| { name: "Atlassian Forge", color: "green" }, | |
| { name: "BERT Model", color: "purple" }, | |
| { name: "Python", color: "yellow" } | |
| ], | |
| features: [ | |
| "Automatically classifies issues into predefined categories", | |
| "Integrates seamlessly with Jira's UI", | |
| "Self-learning system that improves over time", | |
| "Deployed as a Forge app for easy installation" | |
| ] | |
| }, | |
| project2: { | |
| title: "Confluence Knowledge Assistant", | |
| description: "A question-answering bot integrated into Confluence that uses a fine-tuned T5 model to answer questions based on company documentation, reducing support queries by 45%.", | |
| technologies: [ | |
| { name: "HuggingFace Pipelines", color: "blue" }, | |
| { name: "Atlassian Connect", color: "green" }, | |
| { name: "T5 Model", color: "purple" }, | |
| { name: "FastAPI", color: "red" } | |
| ], | |
| features: [ | |
| "Natural language understanding of company docs", | |
| "Context-aware responses", | |
| "Feedback mechanism to improve accuracy", | |
| "Secure authentication via OAuth 2.0" | |
| ] | |
| }, | |
| project3: { | |
| title: "GitHub-Jira Sync with NLP", | |
| description: "A GitHub Action that analyzes PR descriptions using sentiment analysis and automatically updates linked Jira tickets, improving cross-team visibility by 75%.", | |
| technologies: [ | |
| { name: "HuggingFace Pipelines", color: "blue" }, | |
| { name: "GitHub Actions", color: "green" }, | |
| { name: "DistilBERT", color: "purple" }, | |
| { name: "Node.js", color: "orange" } | |
| ], | |
| features: [ | |
| "Real-time sentiment analysis of PRs", | |
| "Automatic Jira ticket updates", | |
| "Customizable rules engine", | |
| "Detailed analytics dashboard" | |
| ] | |
| } | |
| }; | |
| document.querySelectorAll('.project-details-btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const projectId = this.getAttribute('data-project'); | |
| const project = projects[projectId]; | |
| document.getElementById('modal-title').textContent = project.title; | |
| document.getElementById('modal-description').textContent = project.description; | |
| const technologiesContainer = document.getElementById('modal-technologies'); | |
| technologiesContainer.innerHTML = ''; | |
| project.technologies.forEach(tech => { | |
| const span = document.createElement('span'); | |
| span.className = `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-${tech.color}-100 text-${tech.color}-800 mr-2 mb-2`; | |
| span.textContent = tech.name; | |
| technologiesContainer.appendChild(span); | |
| }); | |
| const featuresContainer = document.getElementById('modal-features'); | |
| featuresContainer.innerHTML = '<h4 class="font-medium text-gray-900 mb-2">Key Features:</h4><ul class="list-disc pl-5 space-y-1"></ul>'; | |
| const featuresList = featuresContainer.querySelector('ul'); | |
| project.features.forEach(feature => { | |
| const li = document.createElement('li'); | |
| li.className = 'text-sm text-gray-600'; | |
| li.textContent = feature; | |
| featuresList.appendChild(li); | |
| }); | |
| document.getElementById('project-modal').classList.remove('hidden'); | |
| }); | |
| }); | |
| document.getElementById('modal-close').addEventListener('click', function() { | |
| document.getElementById('project-modal').classList.add('hidden'); | |
| }); | |
| // Contact form submission | |
| document.getElementById('contact-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // In a real app, you would send the form data to a server here | |
| // For this demo, we'll just show a success message | |
| // Reset form | |
| this.reset(); | |
| // Show success toast | |
| const toast = document.getElementById('success-toast'); | |
| toast.classList.remove('hidden'); | |
| // Hide toast after 3 seconds | |
| setTimeout(() => { | |
| toast.classList.add('hidden'); | |
| }, 3000); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=developerwoodstudios/ai-app-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |