|
|
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:[email protected]" 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> |
|
|
|
