| Here's the complete updated HTML file with all the requested changes implemented: |
|
|
| ```html |
| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Modern Portfolio Hub | Digital Identity</title> |
| <meta name="description" content="Premium digital identity hub with AI automation and prompt gallery"> |
| <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"> |
| <script src="https://js.stripe.com/v3/"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| }, |
| secondary: { |
| 50: '#f5f3ff', |
| 100: '#ede9fe', |
| 200: '#ddd6fe', |
| 300: '#c4b5fd', |
| 400: '#a78bfa', |
| 500: '#8b5cf6', |
| 600: '#7c3aed', |
| 700: '#6d28d9', |
| 800: '#5b21b6', |
| 900: '#4c1d95', |
| }, |
| accent: { |
| 50: '#ecfdf5', |
| 100: '#d1fae5', |
| 200: '#a7f3d0', |
| 300: '#6ee7b7', |
| 400: '#34d399', |
| 500: '#10b981', |
| 600: '#059669', |
| 700: '#047857', |
| 800: '#065f46', |
| 900: '#064e3b', |
| } |
| }, |
| animation: { |
| 'gradient-x': 'gradient-x 15s ease infinite', |
| 'gradient-y': 'gradient-y 15s ease infinite', |
| 'gradient-xy': 'gradient-xy 15s ease infinite', |
| 'float': 'float 6s ease-in-out infinite', |
| 'blob': 'blob 7s infinite', |
| 'pulse-slow': 'pulse 5s infinite', |
| 'wave': 'wave 2s ease-in-out infinite', |
| 'tilt': 'tilt 10s infinite linear', |
| 'bounce-slow': 'bounce 2s infinite', |
| 'pulse-glow': 'pulse-glow 3s infinite', |
| }, |
| keyframes: { |
| 'gradient-x': { |
| '0%, 100%': { |
| 'background-size': '200% 200%', |
| 'background-position': 'left center' |
| }, |
| '50%': { |
| 'background-size': '200% 200%', |
| 'background-position': 'right center' |
| } |
| }, |
| 'gradient-y': { |
| '0%, 100%': { |
| 'background-size': '400% 400%', |
| 'background-position': 'center top' |
| }, |
| '50%': { |
| 'background-size': '200% 200%', |
| 'background-position': 'center bottom' |
| } |
| }, |
| 'gradient-xy': { |
| '0%, 100%': { |
| 'background-size': '400% 400%', |
| 'background-position': 'left center' |
| }, |
| '50%': { |
| 'background-size': '200% 200%', |
| 'background-position': 'right center' |
| } |
| }, |
| 'float': { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' } |
| }, |
| 'blob': { |
| '0%': { transform: 'translate(0px, 0px) scale(1)' }, |
| '33%': { transform: 'translate(30px, -50px) scale(1.1)' }, |
| '66%': { transform: 'translate(-20px, 20px) scale(0.9)' }, |
| '100%': { transform: 'translate(0px, 0px) scale(1)' } |
| }, |
| 'wave': { |
| '0%, 100%': { transform: 'rotate(0deg)' }, |
| '25%': { transform: 'rotate(5deg)' }, |
| '75%': { transform: 'rotate(-5deg)' } |
| }, |
| 'tilt': { |
| '0%, 100%': { transform: 'rotate(-1deg)' }, |
| '50%': { transform: 'rotate(1deg)' } |
| }, |
| 'pulse-glow': { |
| '0%, 100%': { |
| 'box-shadow': '0 0 0 0 rgba(59, 130, 246, 0.7)', |
| 'transform': 'scale(1)' |
| }, |
| '50%': { |
| 'box-shadow': '0 0 20px 10px rgba(59, 130, 246, 0)', |
| 'transform': 'scale(1.05)' |
| } |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| transition: background-color 0.3s ease; |
| background-color: #093852; |
| } |
| |
| .title-font { |
| font-family: 'Space Grotesk', sans-serif; |
| } |
| |
| .profile-pic { |
| width: 160px; |
| height: 160px; |
| background-position: center; |
| background-size: cover; |
| transition: all 0.5s ease; |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| border: 3px solid white; |
| } |
| |
| .profile-pic:hover { |
| transform: rotate(5deg) scale(1.05); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .link-card { |
| transition: all 0.3s ease; |
| transform-origin: center; |
| background-size: 200% 200%; |
| background-image: linear-gradient(135deg, var(--gradient-from), var(--gradient-to)); |
| } |
| |
| .link-card:hover { |
| transform: translateY(-5px) scale(1.02); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .theme-toggle { |
| position: relative; |
| width: 60px; |
| height: 30px; |
| } |
| |
| .theme-toggle input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| |
| .slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #0c4a6e; |
| transition: .4s; |
| border-radius: 34px; |
| } |
| |
| .slider:before { |
| position: absolute; |
| content: ""; |
| height: 22px; |
| width: 22px; |
| left: 4px; |
| bottom: 4px; |
| background-color: white; |
| transition: .4s; |
| border-radius: 50%; |
| } |
| |
| input:checked + .slider { |
| background-color: #38bdf8; |
| } |
| |
| input:checked + .slider:before { |
| transform: translateX(30px); |
| } |
| |
| .dark .slider { |
| background-color: #1e293b; |
| } |
| |
| .dark input:checked + .slider { |
| background-color: #0ea5e9; |
| } |
| |
| .social-icon { |
| transition: all 0.3s ease; |
| } |
| |
| .social-icon:hover { |
| transform: scale(1.2) translateY(-3px); |
| } |
| |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .theme-icon { |
| transition: transform 0.5s ease; |
| } |
| |
| .animate-spin-slow { |
| animation: spin 2s linear infinite; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); |
| background-size: 400% 400%; |
| animation: gradient 15s ease infinite; |
| } |
| |
| @keyframes gradient { |
| 0% { |
| background-position: 0% 50%; |
| } |
| 50% { |
| background-position: 100% 50%; |
| } |
| 100% { |
| background-position: 0% 50%; |
| } |
| } |
| |
| .blob { |
| position: absolute; |
| width: 500px; |
| height: 500px; |
| background: linear-gradient( |
| 180deg, |
| rgba(47, 184, 255, 0.42) 31.77%, |
| #5c9df1 100% |
| ); |
| mix-blend-mode: color-dodge; |
| filter: blur(60px); |
| z-index: -1; |
| animation: blob 7s infinite; |
| } |
| |
| .modal { |
| transition: opacity 0.3s ease, transform 0.3s ease; |
| } |
| |
| .modal-enter { |
| opacity: 0; |
| transform: scale(0.9); |
| } |
| |
| .modal-enter-active { |
| opacity: 1; |
| transform: scale(1); |
| } |
| |
| .modal-exit { |
| opacity: 1; |
| transform: scale(1); |
| } |
| |
| .modal-exit-active { |
| opacity: 0; |
| transform: scale(0.9); |
| } |
| |
| .prompt-card { |
| transition: all 0.3s ease; |
| } |
| |
| .prompt-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| |
| .copy-btn { |
| transition: all 0.3s ease; |
| } |
| |
| .copy-btn:hover { |
| transform: scale(1.05); |
| } |
| |
| .copy-btn:active { |
| transform: scale(0.95); |
| } |
| |
| .tooltip { |
| position: absolute; |
| top: -30px; |
| left: 50%; |
| transform: translateX(-50%); |
| background-color: #333; |
| color: white; |
| padding: 4px 8px; |
| border-radius: 4px; |
| font-size: 12px; |
| opacity: 0; |
| transition: opacity 0.3s; |
| pointer-events: none; |
| } |
| |
| .copy-btn:hover .tooltip { |
| opacity: 1; |
| } |
| |
| .search-bar { |
| transition: all 0.3s ease; |
| } |
| |
| .search-bar:focus { |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); |
| } |
| |
| .chat-bubble { |
| animation: float 4s ease-in-out infinite; |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| |
| .theme-selector { |
| transition: all 0.3s ease; |
| } |
| |
| .theme-selector:hover { |
| transform: scale(1.05); |
| } |
| |
| .theme-selector.active { |
| transform: scale(1.1); |
| box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor; |
| } |
| |
| |
| .chatbot-container { |
| position: fixed; |
| bottom: 100px; |
| right: 30px; |
| width: 350px; |
| max-height: 500px; |
| background-color: white; |
| border-radius: 16px; |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| overflow: hidden; |
| transform: translateY(20px); |
| opacity: 0; |
| transition: all 0.3s ease; |
| z-index: 1000; |
| display: none; |
| } |
| |
| .chatbot-container.open { |
| transform: translateY(0); |
| opacity: 1; |
| display: block; |
| } |
| |
| .chatbot-header { |
| background-color: #0ea5e9; |
| color: white; |
| padding: 14px 16px; |
| font-weight: 600; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .chatbot-messages { |
| height: 350px; |
| padding: 16px; |
| overflow-y: auto; |
| background-color: #f9fafb; |
| } |
| |
| .message { |
| margin-bottom: 12px; |
| max-width: 80%; |
| padding: 10px 14px; |
| border-radius: 18px; |
| font-size: 14px; |
| line-height: 1.4; |
| } |
| |
| .user-message { |
| background-color: #0ea5e9; |
| color: white; |
| margin-left: auto; |
| border-bottom-right-radius: 4px; |
| } |
| |
| .bot-message { |
| background-color: #e5e7eb; |
| color: #111827; |
| margin-right: auto; |
| border-bottom-left-radius: 4px; |
| } |
| |
| .chatbot-input { |
| display: flex; |
| padding: 12px; |
| border-top: 1px solid #e5e7eb; |
| background-color: white; |
| } |
| |
| .chatbot-input input { |
| flex: 1; |
| padding: 10px 14px; |
| border: 1px solid #e5e7eb; |
| border-radius: 20px; |
| outline: none; |
| font-size: 14px; |
| } |
| |
| .chatbot-input button { |
| margin-left: 8px; |
| background-color: #0ea5e9; |
| color: white; |
| border: none; |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| } |
| |
| .dark .chatbot-container { |
| background-color: #1f2937; |
| } |
| |
| .dark .chatbot-header { |
| background-color: #075985; |
| } |
| |
| .dark .chatbot-messages { |
| background-color: #111827; |
| } |
| |
| .dark .bot-message { |
| background-color: #374151; |
| color: #f3f4f6; |
| } |
| |
| .dark .chatbot-input { |
| border-top-color: #374151; |
| background-color: #1f2937; |
| } |
| |
| .dark .chatbot-input input { |
| background-color: #1f2937; |
| border-color: #374151; |
| color: white; |
| } |
| |
| .dark .chatbot-input button { |
| background-color: #075985; |
| } |
| |
| |
| .kynos-gradient { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff758c 100%); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| animation: gradient-x 8s ease infinite; |
| background-size: 200% 200%; |
| } |
| |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| |
| .dark .glass-effect { |
| background: rgba(0, 0, 0, 0.1); |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| } |
| |
| .parallax-layer { |
| transition: transform 0.3s ease-out; |
| } |
| |
| .neon-shadow { |
| box-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3); |
| } |
| |
| .dark .neon-shadow { |
| box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.5); |
| } |
| |
| .hover-3d { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
| |
| .hover-3d:hover { |
| transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translate3d(0, -5px, 0); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .wave-animation { |
| animation: wave 2s ease-in-out infinite; |
| } |
| |
| .particle { |
| position: absolute; |
| border-radius: 50%; |
| pointer-events: none; |
| z-index: -1; |
| } |
| |
| |
| .feature-card { |
| transition: all 0.3s ease; |
| transform-style: preserve-3d; |
| perspective: 1000px; |
| border-radius: 16px; |
| overflow: hidden; |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-5px) scale(1.02); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); |
| } |
| |
| .feature-card-image { |
| height: 160px; |
| background-size: cover; |
| background-position: center; |
| transition: all 0.5s ease; |
| } |
| |
| .feature-card:hover .feature-card-image { |
| transform: scale(1.05); |
| } |
| |
| .feature-card-content { |
| padding: 20px; |
| background: white; |
| } |
| |
| .dark .feature-card-content { |
| background: #1f2937; |
| } |
| |
| .payment-card { |
| border-radius: 16px; |
| overflow: hidden; |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .payment-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); |
| } |
| |
| .footer-card { |
| border-radius: 16px; |
| overflow: hidden; |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255,255,255,0.1); |
| } |
| |
| .dark .footer-card { |
| background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 100%); |
| border: 1px solid rgba(255,255,255,0.05); |
| } |
| |
| .footer-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); |
| } |
| |
| .color-picker { |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border: 2px solid transparent; |
| } |
| |
| .color-picker:hover { |
| transform: scale(1.1); |
| } |
| |
| .color-picker.active { |
| border: 2px solid white; |
| box-shadow: 0 0 0 2px currentColor; |
| transform: scale(1.1); |
| } |
| |
| .visitor-counter { |
| background: rgba(255,255,255,0.1); |
| backdrop-filter: blur(10px); |
| border-radius: 20px; |
| padding: 5px 12px; |
| font-size: 14px; |
| font-weight: 600; |
| display: flex; |
| align-items: center; |
| } |
| |
| .dark .visitor-counter { |
| background: rgba(0,0,0,0.2); |
| } |
| |
| |
| .social-tile { |
| transition: all 0.3s ease; |
| transform-style: preserve-3d; |
| perspective: 1000px; |
| border-radius: 12px; |
| overflow: hidden; |
| box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); |
| animation: pulse-glow 3s infinite; |
| } |
| |
| .social-tile:hover { |
| transform: translateY(-5px) scale(1.03); |
| box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); |
| animation: none; |
| } |
| |
| .social-tile-content { |
| padding: 20px; |
| color: white; |
| text-align: center; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .social-tile-content::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%); |
| z-index: -1; |
| } |
| |
| .social-tile i { |
| font-size: 2rem; |
| margin-bottom: 10px; |
| filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); |
| } |
| |
| .social-tile h3 { |
| font-weight: 600; |
| margin-bottom: 5px; |
| text-shadow: 0 1px 3px rgba(0,0,0,0.3); |
| } |
| |
| .social-tile p { |
| font-size: 0.9rem; |
| opacity: 0.9; |
| text-shadow: 0 1px 2px rgba(0,0,0,0.3); |
| } |
| |
| |
| .github-tile { |
| background: linear-gradient(135deg, #333 0%, #181717 100%); |
| } |
| |
| .tiktok-tile { |
| background: linear-gradient(135deg, #25F4EE 0%, #FE2C55 50%, #000 100%); |
| } |
| |
| .huggingface-tile { |
| background: linear-gradient(135deg, #FFD21D 0%, #FF8B00 100%); |
| } |
| |
| .website-tile { |
| background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); |
| } |
| |
| .linkedin-tile { |
| background: linear-gradient(135deg, #0077B5 0%, #004471 100%); |
| } |
| |
| .youtube-tile { |
| background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%); |
| } |
| |
| .resume-tile { |
| background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%); |
| } |
| |
| .themes-tile { |
| background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%); |
| } |
| |
| .contact-tile { |
| background: linear-gradient(135deg, #10B981 0%, #059669 100%); |
| } |
| </style> |
| </head> |
| <body class="text-gray-100 min-h-screen relative overflow-x-hidden"> |
| |
| <div class="blob absolute top-0 -right-40 w-[500px] h-[500px] rounded-full opacity-20 dark:opacity-30"></div> |
| <div class="blob absolute bottom-0 -left-40 w-[500px] h-[500px] rounded-full opacity-20 dark:opacity-30 animation-delay-3000"></div> |
| |
| |
| <div id="particles-js"></div> |
| |
| |
| <div id="chatbotContainer" class="chatbot-container glass-effect"> |
| <div class="chatbot-header"> |
| <span>Kynos AI Assistant</span> |
| <button id="closeChatbot" class="text-white"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="chatbot-messages" id="chatMessages"> |
| <div class="message bot-message"> |
| Hello! I'm Kynos AI. How can I help you today? |
| </div> |
| </div> |
| <div class="chatbot-input"> |
| <input type="text" id="chatInput" placeholder="Type your message..."> |
| <button id="sendMessage"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="fixed bottom-6 right-6 z-50"> |
| <div id="chatBubble" class="chat-bubble bg-white dark:bg-gray-800 w-16 h-16 rounded-full flex items-center justify-center cursor-pointer shadow-xl neon-shadow hover-3d"> |
| <i class="fas fa-comment-dots text-2xl text-primary-600 dark:text-primary-400"></i> |
| <span class="absolute top-0 right-0 w-5 h-5 bg-accent-500 rounded-full flex items-center justify-center text-white text-xs font-bold">1</span> |
| </div> |
| </div> |
| |
| <div class="container mx-auto px-4 py-8 max-w-6xl relative z-10"> |
| |
| <div class="flex justify-between items-center mb-8"> |
| <div class="flex space-x-2 items-center"> |
| <div class="color-picker bg-primary-500 active" data-color="primary" id="primaryColor"></div> |
| <div class="color-picker bg-secondary-500" data-color="secondary" id="secondaryColor"></div> |
| <div class="color-picker bg-accent-500" data-color="accent" id="accentColor"></div> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <div class="visitor-counter"> |
| <i class="fas fa-users mr-2 text-primary-500"></i> |
| <span id="visitorCount">1,248</span> |
| </div> |
| |
| <label class="theme-toggle flex items-center cursor-pointer"> |
| <input type="checkbox" id="themeToggle"> |
| <span class="slider relative inline-block"></span> |
| <span class="ml-2 theme-icon" id="themeIcon"> |
| <i class="fas fa-sun text-yellow-400 dark:text-yellow-200"></i> |
| </span> |
| </label> |
| </div> |
| </div> |
| |
| |
| <div class="flex flex-col items-center text-center mb-12"> |
| <div class="profile-pic rounded-full mb-6 flex items-center justify-center text-white animate-float hover-3d" style="background-image: url('https://kynosai.io/wp-content/uploads/2025/05/KTMCD.jpg')"></div> |
| <h1 class="text-4xl font-bold mb-2 title-font">Kay</h1> |
| <h2 class="text-3xl font-semibold mb-2 title-font kynos-gradient">Kynos AI</h2> |
| <p class="text-lg text-gray-300 max-w-lg">Building intelligent systems and exploring the frontiers of AI.</p> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <div class="relative"> |
| <input type="text" placeholder="Search links..." class="search-bar w-full px-4 py-3 rounded-xl border border-gray-600 bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 glass-effect"> |
| <i class="fas fa-search absolute right-4 top-3.5 text-gray-400"></i> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> |
| |
| <div class="feature-card bg-white dark:bg-gray-800 hover-3d"> |
| <div class="feature-card-image" style="background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80')"></div> |
| <div class="feature-card-content"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-primary-100 dark:bg-primary-900 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-primary-600 dark:text-primary-400"></i> |
| </div> |
| <h3 class="font-bold text-xl">AI Automation</h3> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Explore my collection of AI automation tools that streamline workflows and boost productivity.</p> |
| <a href="#" id="aiAutomationBtn" class="inline-flex items-center text-primary-600 dark:text-primary-400 font-medium"> |
| Learn More <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="feature-card bg-white dark:bg-gray-800 hover-3d"> |
| <div class="feature-card-image" style="background-image: url('https://images.unsplash.com/photo-1644446812347-8e1c8c9f85a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80')"></div> |
| <div class="feature-card-content"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-secondary-100 dark:bg-secondary-900 flex items-center justify-center mr-3"> |
| <i class="fas fa-magic text-secondary-600 dark:text-secondary-400"></i> |
| </div> |
| <h3 class="font-bold text-xl">Prompt Gallery</h3> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Collection of powerful AI prompts for automation, coding, content creation and more.</p> |
| <a href="#" id="promptGalleryBtn" class="inline-flex items-center text-secondary-600 dark:text-secondary-400 font-medium"> |
| Browse Prompts <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="feature-card bg-white dark:bg-gray-800 hover-3d"> |
| <div class="feature-card-image" style="background-image: url('https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80')"></div> |
| <div class="feature-card-content"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-accent-100 dark:bg-accent-900 flex items-center justify-center mr-3"> |
| <i class="fas fa-globe text-accent-600 dark:text-accent-400"></i> |
| </div> |
| <h3 class="font-bold text-xl">Website</h3> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Visit my personal website to learn more about my projects and services.</p> |
| <a href="https://kynosai.io" target="_blank" class="inline-flex items-center text-accent-600 dark:text-accent-400 font-medium"> |
| Visit Site <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="feature-card bg-white dark:bg-gray-800 hover-3d"> |
| <div class="feature-card-image" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80')"></div> |
| <div class="feature-card-content"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-3"> |
| <i class="fas fa-star text-purple-600 dark:text-purple-400"></i> |
| </div> |
| <h3 class="font-bold text-xl">Featured Projects</h3> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Explore my most notable AI automation projects and tools with real-world applications.</p> |
| <a href="#" id="projectsBtn" class="inline-flex items-center text-purple-600 dark:text-purple-400 font-medium"> |
| View Projects <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"> |
| |
| <div class="social-tile github-tile hover-3d"> |
| <div class="social-tile-content"> |
| <i class="fab fa-github"></i> |
| <h3>GitHub</h3> |
| <p>Check out my open-source projects</p> |
| <a href="https://github.com/Kaytech90" target="_blank" class="absolute inset-0"></a> |
| </div> |
| </div> |
| |
| |
| <div class="social-tile tiktok-tile hover-3d"> |
| <div class="social-tile-content"> |
| <i class="fab fa-tiktok"></i> |
| <h3>TikTok</h3> |
| <p>Short AI tutorials and tech insights</p> |
| <a href="http://www.tiktok.com/@kynos.io" target="_blank" class="absolute inset-0"></a> |
| </div> |
| </div> |
| |
| |
| <div class="social-tile huggingface-tile hover-3d"> |
| <div class="social-tile-content"> |
| <i class="fas fa-brain"></i> |
| <h3>Hugging Face</h3> |
| <p>Explore my AI models and datasets</p> |
| <a href="https://huggingface.co/KynosAi" target="_blank" class="absolute inset-0"></a> |
| </div> |
| </div> |
| |
| |
| <div class="social-tile website-tile hover-3d"> |
| <div class="social-tile-content"> |
| <i class="fas fa-globe"></i> |
| <h3>Website</h3> |
| <p>Visit my personal website</p> |
| <a href="https://kynosai.io" target="_blank" class="absolute inset-0"></a> |
| </div> |
| </div> |
| |
| |
| <div class="social-tile linkedin-tile hover-3d"> |
| <div class="social-tile-content"> |
| <i class="fab fa-linkedin"></i> |
| <h3>LinkedIn</h3> |
| <p>Connect with me professionally</p> |
| <a href="#" target="_blank" class="absolute inset-0"></a> |
| </div> |
| </div> |
| |
| |
| <div class="social-tile youtube-tile hover-3d"> |
| <div class="social-tile-content"> |
| <i class="fab fa-youtube"></i> |
| <h3>YouTube</h3> |
| <p>In-depth AI tutorials</p> |
| <a href="#" target="_blank" class="absolute inset-0"></a> |
| </div> |
| </div> |
| |
| |
| <div class="social-tile resume-tile hover-3d"> |
| <div class="social-tile-content"> |
| <i class="fas fa-file-alt"></i> |
| <h3>Resume</h3> |
| <p>Download my professional resume</p> |
| <a href="#" target="_blank" class="absolute inset-0"></a> |
| </div> |
| </div> |
| |
| |
| <div class="social-tile themes-tile hover-3d"> |
| <div class="social-tile-content"> |
| <i class="fas fa-palette"></i> |
| <h3>Themes</h3> |
| <p>Customize this portfolio</p> |
| <a href="#" id="themesBtn" class="absolute inset-0"></a> |
| </div> |
| </div> |
| |
| |
| <div class="social-tile contact-tile hover-3d"> |
| <div class="social-tile-content"> |
| <i class="fas fa-envelope"></i> |
| <h3>Contact</h3> |
| <p>Get in touch with me</p> |
| <a href="mailto:kynosai.io@gmail.com" class="absolute inset-0"></a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-12"> |
| <h2 class="text-2xl font-bold mb-6 text-center title-font">Support My Work</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="payment-card bg-white dark:bg-gray-800 p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4"> |
| <i class="fab fa-stripe text-blue-600 dark:text-blue-400 text-xl"></i> |
| </div> |
| <h3 class="font-bold text-lg">One-Time Donation</h3> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Support my open-source work with a one-time donation via Stripe.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <button class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-800 transition">$5</button> |
| <button class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-800 transition">$10</button> |
| <button class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-800 transition">$25</button> |
| <input type="number" placeholder="Custom $" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg w-20"> |
| </div> |
| <button id="stripeButton" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-300"> |
| Donate with Stripe |
| </button> |
| </div> |
| |
| <div class="payment-card bg-white dark:bg-gray-800 p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-lg bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-4"> |
| <i class="fab fa-paypal text-yellow-600 dark:text-yellow-400 text-xl"></i> |
| </div> |
| <h3 class="font-bold text-lg">Monthly Support</h3> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Become a monthly supporter via PayPal and get exclusive updates.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <button class="px-4 py-2 bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-800 transition">$3/mo</button> |
| <button class="px-4 py-2 bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-800 transition">$5/mo</button> |
| <button class="px-4 py-2 bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-800 transition">$10/mo</button> |
| </div> |
| <button id="paypalButton" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg transition duration-300"> |
| Subscribe with PayPal |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="footer-card p-6 mb-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold mb-2">Kynos AI</h3> |
| <p class="text-gray-300">Exploring the frontiers of artificial intelligence.</p> |
| </div> |
| |
| <div class="flex space-x-4"> |
| <a href="https://github.com/Kaytech90" target="_blank" class="social-icon w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600 wave-animation"> |
| <i class="fab fa-github text-gray-300"></i> |
| </a> |
| <a href="http://www.tiktok.com/@kynos.io" target="_blank" class="social-icon w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-900 wave-animation"> |
| <i class="fab fa-tiktok text-gray-300"></i> |
| </a> |
| <a href="https://huggingface.co/KynosAi" target="_blank" class="social-icon w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-yellow-900 wave-animation"> |
| <i class="fas fa-brain text-gray-300"></i> |
| </a> |
| <a href="https://kynosai.io" target="_blank" class="social-icon w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-900 wave-animation"> |
| <i class="fas fa-globe text-gray-300"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="mt-6 pt-6 border-t border-gray-700 text-center"> |
| <p class="text-sm text-gray-400">© 2023 Kynos AI. All rights reserved.</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="aiAutomationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto glass-effect hover-3d"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">AI Automation Tools</h2> |
| <button id="closeAiModal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-6"> |
| <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-xl"> |
| <h3 class="font-bold text-lg mb-2 flex items-center"> |
| <i class="fas fa-robot text-accent-600 dark:text-accent-400 mr-2"></i> |
| Notion Automation |
| </h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-3">Automated workflows for Notion including content aggregation, database management, and task automation.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-accent-100 dark:bg-accent-900 text-accent-800 dark:text-accent-200 rounded-full text-sm">Content Aggregation</span> |
| <span class="px-3 py-1 bg-accent-100 dark:bg-accent-900 text-accent-800 dark:text-accent-200 rounded-full text-sm">Database Sync</span> |
| <span class="px-3 py-1 bg-accent-100 dark:bg-accent-900 text-accent-800 dark:text-accent-200 rounded-full text-sm">Task Automation</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-xl"> |
| <h3 class="font-bold text-lg mb-2 flex items-center"> |
| <i class="fas fa-code-branch text-primary-600 dark:text-primary-400 mr-2"></i> |
| GitHub Bots |
| </h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-3">Automated code review, issue management, and CI/CD pipeline enhancements.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-full text-sm">Code Review</span> |
| <span class="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded-full text-sm">Issue Triage</span> |
| |
