Hugging Face's logo

Spaces:
Abdalkaderdev
/
ORA
Sleeping

App Files Community
ORA / frontend /inspo /generated-page.html
Abdalkaderdev's picture
Abdalkaderdev
Initial ORA deployment
5e0532d
raw
history blame contribute delete
52.8 kB
 <html lang="en" class="scroll-smooth dark"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hemanth Kumar | Finance &amp; AI Strategist</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&amp;family=Inter:wght@200;300;400;500;600&amp;family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&amp;display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Playfair Display', 'serif'],
cinzel: ['Cinzel', 'serif'],
},
letterSpacing: {
'cinematic': '0.3em',
'editorial': '0.15em',
},
colors: {
accent: {
50: '#F0F9FF',
100: '#E0F2FE',
200: '#BAE6FD',
300: '#7DD3FC',
400: '#38BDF8',
500: '#0EA5E9',
800: '#075985',
900: '#0C4A6E',
},
obsidian: '#020204',
charcoal: '#0A0A0A',
},
backgroundImage: {
'noise': "url('data:image/svg+xml,%3Csvg viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cfilter id=\"noiseFilter\"%3E%3CfeTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"3\" stitchTiles=\"stitch\"/%3E%3C/filter%3E%3Crect width=\"100%25\" height=\"100%25\" filter=\"url(%23noiseFilter)\"/%3E%3C/svg%3E')",
},
animation: {
'slow-pan': 'pan 60s linear infinite alternate',
'float': 'float 10s ease-in-out infinite',
'reveal-up': 'revealUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards',
'hero-enter': 'heroEnter 2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
'pulse-slow': 'pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'fade-in': 'fadeIn 0.5s ease-out forwards',
'typing': 'typing 1.4s infinite ease-in-out both',
'spin-slow': 'spin 60s linear infinite',
'aurora': 'aurora 20s ease-in-out infinite alternate',
'marquee': 'marquee 25s linear infinite',
},
keyframes: {
pan: { '0%': { transform: 'scale(1.1) translate(0%, 0%)' }, '100%': { transform: 'scale(1.25) translate(-2%, -2%)' } },
float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-15px)' } },
revealUp: { '0%': { opacity: '0', transform: 'translateY(60px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
heroEnter: { '0%': { opacity: '0', transform: 'translateY(40px) scale(0.98)' }, '100%': { opacity: '1', transform: 'translateY(0) scale(1.02)' } },
fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
typing: { '0%, 80%, 100%': { transform: 'scale(0)' }, '40%': { transform: 'scale(1)' } },
aurora: { '0%': { opacity: '0.3', transform: 'scale(1) translate(0,0)' }, '100%': { opacity: '0.6', transform: 'scale(1.2) translate(10%, -10%)' } },
marquee: { '0%': { transform: 'translateX(0%)' }, '100%': { transform: 'translateX(-100%)' } }
}
}
}
}
</script>
<style>
body {
font-family: "Inter", sans-serif;
background-color: #020204;
color: #e5e5e5;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Cinematic Atmosphere */
.cinema-grain {
position: fixed; inset: 0; pointer-events: none; z-index: 9999;
opacity: 0.04; background-image: var(--tw-bg-noise); mix-blend-mode: overlay;
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #7DD3FC; }
/* Navigation Hover */
.nav-link { position: relative; }
.nav-link::after {
content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px;
background: #7DD3FC; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }
/* Floating Animation */
.floating-card { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.floating-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); }
/* Beam Button Keyframes */
@keyframes beam-spin { to { transform: rotate(360deg); } }
@keyframes dots-move {
0% { background-position: 0 0; }
100% { background-position: 24px 24px; }
}
/* Marquee Mask */
.marquee-mask {
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Navigation Logic
const navWrapper = document.getElementById('nav-wrapper');
const navContainer = document.getElementById('nav-container');
const navLogo = document.getElementById('nav-logo');
window.addEventListener('scroll', () => {
if(window.scrollY > 50) {
navWrapper.classList.remove('pt-6', 'mix-blend-difference');
navWrapper.classList.add('pt-4', 'mix-blend-normal');
navContainer.classList.add('bg-black/80', 'backdrop-blur-xl', 'rounded-full', 'py-2', 'px-8', 'border-white/10');
navContainer.classList.remove('w-full', 'py-6', 'px-12', 'border-transparent');
navLogo.classList.add('scale-90');
} else {
navWrapper.classList.add('pt-6', 'mix-blend-difference');
navWrapper.classList.remove('pt-4', 'mix-blend-normal');
navContainer.classList.remove('bg-black/80', 'backdrop-blur-xl', 'rounded-full', 'py-2', 'px-8', 'border-white/10');
navContainer.classList.add('w-full', 'py-6', 'px-12', 'border-transparent');
navLogo.classList.remove('scale-90');
}
});
// Intersection Observer
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("animate-reveal-up");
entry.target.classList.remove("opacity-0", "translate-y-12");
observer.unobserve(entry.target);
}
});
}, { threshold: 0.05, rootMargin: "0px 0px -10% 0px" });
document.querySelectorAll(".reveal-on-scroll").forEach((el) => {
el.classList.add("opacity-0", "translate-y-12", "will-change-transform");
observer.observe(el);
});
window.setServiceImage = (id) => {
document.querySelectorAll('.service-bg-img').forEach(img => {
img.classList.remove('opacity-100', 'scale-105');
img.classList.add('opacity-0', 'scale-100');
});
const active = document.getElementById(`service-img-${id}`);
if(active) {
active.classList.remove('opacity-0', 'scale-100');
active.classList.add('opacity-100', 'scale-105');
}
};
// Chatbot (AI Assistant)
window.toggleChat = () => {
const box = document.getElementById('chat-box');
const indicator = document.getElementById('chat-indicator');
if(box.classList.contains('invisible')) {
box.classList.remove('invisible', 'opacity-0', 'translate-y-4', 'scale-95');
box.classList.add('visible', 'opacity-100', 'translate-y-0', 'scale-100');
if(indicator) indicator.classList.add('hidden');
} else {
box.classList.add('invisible', 'opacity-0', 'translate-y-4', 'scale-95');
box.classList.remove('visible', 'opacity-100', 'translate-y-0', 'scale-100');
}
}
if (window.lucide) lucide.createIcons();
});
</script></head>
<body class="min-h-screen selection:bg-accent-300/20 selection:text-accent-100 relative pb-24 md:pb-0 cursor-default bg-[#020204]">
<!-- Overlays -->
<div class="cinema-grain"></div>
<!-- PREMIUM CINEMATIC NAVIGATION -->
<nav id="nav-wrapper" class="fixed top-0 left-0 right-0 z-50 flex justify-center pt-6 pointer-events-none transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] mix-blend-difference">
<div id="nav-container" class="pointer-events-auto transition-all duration-500 flex items-center gap-12 border border-transparent bg-transparent w-full max-w-[1920px] px-12 py-6 backdrop-blur-none justify-between md:justify-center">
<div class="hidden md:flex items-center gap-8">
<a href="#skills" class="nav-link text-[11px] font-medium text-neutral-300 hover:text-white transition-all uppercase tracking-editorial">Expertise</a>
<a href="#projects" class="nav-link text-[11px] font-medium text-neutral-300 hover:text-white transition-all uppercase tracking-editorial">Work</a>
</div>
<div class="flex items-center gap-3 group cursor-pointer relative z-10 px-4">
<span id="nav-logo" class="font-cinzel font-semibold text-2xl text-white tracking-widest transition-all duration-500 drop-shadow-[0_0_15px_rgba(125,211,252,0.5)]">HEMANTH</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#experience" class="nav-link text-[11px] font-medium text-neutral-300 hover:text-white transition-all uppercase tracking-editorial">Experience</a>
<a href="#certifications" class="nav-link text-[11px] font-medium text-neutral-300 hover:text-white transition-all uppercase tracking-editorial">Certs</a>
<a href="mailto:hemanthkumar.connect.now@gmail.com" class="bg-white/10 hover:bg-accent-300/10 border border-white/20 hover:border-accent-300/30 text-white hover:text-accent-300 rounded-full px-5 py-2 transition-all duration-500 group backdrop-blur-md">
<span class="text-[10px] font-semibold tracking-editorial uppercase">Contact</span>
</a>
</div>
<button class="md:hidden text-white"><span class="iconify" data-icon="lucide:menu" width="24"></span></button>
</div>
</nav>
<!-- CINEMATIC HERO -->
<main class="relative flex flex-col h-screen w-full items-center justify-center overflow-hidden z-10">
<!-- Living Background Layers -->
<div class="absolute inset-0 w-full h-full bg-[#020204]">
<div class="absolute inset-0 animate-slow-pan transform-gpu">
<img src="https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&amp;w=2600&amp;auto=format&amp;fit=crop" class="w-full h-full object-cover filter brightness-[0.4] contrast-125 grayscale-[80%] blur-[2px]">
</div>
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute -top-[30%] -left-[10%] w-[80vw] h-[80vw] bg-accent-500/10 rounded-full blur-[120px] animate-aurora mix-blend-screen opacity-40"></div>
<div class="absolute -bottom-[30%] -right-[10%] w-[70vw] h-[70vw] bg-neutral-700/20 rounded-full blur-[100px] animate-float opacity-30" style="animation-delay: -5s"></div>
</div>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,#020204_85%)] opacity-90"></div>
<div class="absolute inset-0 bg-noise opacity-[0.05] animate-pulse-slow mix-blend-overlay"></div>
</div>
<!-- Content -->
<div class="relative z-30 flex flex-col items-center px-6 text-center w-full max-w-[1920px]">
<div class="mb-6 md:mb-12 animate-hero-enter opacity-0" style="animation-delay: 0.2s">
<div class="flex items-center gap-4">
<span class="h-px w-8 bg-accent-300/60"></span>
<span class="text-[10px] font-semibold text-accent-200 tracking-[0.4em] uppercase text-shadow-sm">Open to Work</span>
<span class="h-px w-8 bg-accent-300/60"></span>
</div>
</div>
<h1 class="font-cinzel leading-[0.85] relative group cursor-default mix-blend-screen animate-hero-enter opacity-0" style="animation-delay: 0.4s">
<span class="block text-[14vw] md:text-[10rem] lg:text-[11rem] font-medium tracking-tighter text-transparent bg-clip-text bg-gradient-to-b from-white via-neutral-200 to-neutral-500 transform scale-y-105">FINANCE</span>
<div class="absolute top-[55%] left-1/2 -translate-x-1/2 -translate-y-1/2 w-full z-10 mix-blend-normal">
<span class="font-serif italic text-[5vw] md:text-[4rem] text-accent-100 font-light tracking-wide drop-shadow-[0_0_25px_rgba(125,211,252,0.4)] opacity-90">&amp; <span class="text-white/60 text-[0.7em] not-italic font-cinzel mx-2">AI</span> Automation</span>
</div>
</h1>
<p class="mt-8 md:mt-12 text-sm md:text-lg text-neutral-300 font-light text-center max-w-lg leading-relaxed animate-hero-enter opacity-0" style="animation-delay: 0.6s">
Bridging financial analysis with data-driven efficiency. <br>
<span class="text-accent-200/80">Power BI, Alteryx, and n8n Expert.</span>
</p>
<div class="mt-10 animate-hero-enter opacity-0" style="animation-delay: 0.8s">
<a href="#projects" class="group flex overflow-hidden uppercase transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_-10px_rgba(125,211,252,0.5)] focus:outline-none text-xs font-semibold text-white tracking-widest font-sans rounded-full pt-4 pr-10 pb-4 pl-10 relative items-center justify-center w-fit mx-auto">
<div class="absolute inset-0 -z-20 rounded-full overflow-hidden p-[1px]">
<div class="absolute inset-[-100%] bg-[conic-gradient(from_0deg,transparent_0_300deg,#7DD3FC_360deg)]" style="animation: beam-spin 3s linear infinite;"></div>
<div class="absolute inset-[1px] rounded-full bg-[#020204]"></div>
</div>
<span class="relative z-10 text-neutral-200 transition-colors group-hover:text-white">View Portfolio</span>
<span class="iconify relative z-10 ml-2 transition-transform duration-300 group-hover:translate-x-1 text-accent-300" data-icon="lucide:arrow-right" width="16"></span>
</a>
</div>
</div>
</main>
<!-- TECH STACK MARQUEE -->
<div class="relative z-20 w-full py-12 bg-[#020204] border-b border-white/5 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-[#020204] via-transparent to-[#020204] z-10 pointer-events-none"></div>
<div class="flex gap-24 items-center animate-marquee whitespace-nowrap opacity-40 hover:opacity-100 transition-opacity duration-500 marquee-mask">
<span class="text-3xl font-serif text-white/80">Power BI</span>
<span class="text-2xl font-sans font-light tracking-widest text-white/80">ALTERYX</span>
<span class="text-3xl font-serif italic text-white/80">Python</span>
<span class="text-2xl font-sans font-bold text-white/80">n8n</span>
<span class="text-3xl font-serif text-white/80">Excel</span>
<span class="text-2xl font-sans tracking-widest text-white/80">SQL</span>
<span class="text-3xl font-serif italic text-white/80">Financial Modeling</span>
<span class="text-3xl font-serif text-white/80">Power BI</span>
<span class="text-2xl font-sans font-light tracking-widest text-white/80">ALTERYX</span>
<span class="text-3xl font-serif italic text-white/80">Python</span>
<span class="text-2xl font-sans font-bold text-white/80">n8n</span>
<span class="text-3xl font-serif text-white/80">Excel</span>
<span class="text-2xl font-sans tracking-widest text-white/80">SQL</span>
<span class="text-3xl font-serif italic text-white/80">Financial Modeling</span>
</div>
</div>
<!-- TECHNICAL SKILLS -->
<section id="skills" class="relative z-20 w-full py-32 bg-[#020204]">
<div class="max-w-[1600px] mx-auto px-6">
<div class="flex flex-col items-center text-center mb-24 reveal-on-scroll">
<div class="relative">
<div class="absolute inset-0 bg-accent-400/20 blur-[60px] rounded-full opacity-40"></div>
<h2 class="relative text-4xl md:text-7xl font-serif text-white mb-4 tracking-tight z-10">
Technical <span class="text-accent-300 italic font-light">Expertise</span>
</h2>
</div>
<div class="flex items-center gap-4 mt-2 opacity-80">
<span class="w-12 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent"></span>
<span class="text-[11px] uppercase tracking-cinematic text-neutral-400">Structured Data – Automated Growth</span>
<span class="w-12 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent"></span>
</div>
</div>
<div class="grid lg:grid-cols-2 gap-12 lg:gap-24 items-start">
<div class="hidden lg:block sticky top-32 h-[700px] w-full rounded-[2rem] overflow-hidden border border-white/5 shadow-2xl reveal-on-scroll">
<div class="absolute inset-0 bg-neutral-900">
<img id="service-img-1" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&amp;w=1600&amp;auto=format&amp;fit=crop" class="service-bg-img absolute inset-0 w-full h-full object-cover transition-all duration-1000 ease-out opacity-100 scale-105 filter saturate-0 contrast-125">
<img id="service-img-2" src="https://images.unsplash.com/photo-1633412802994-5c058f151b66?q=80&amp;w=1600&amp;auto=format&amp;fit=crop" class="service-bg-img absolute inset-0 w-full h-full object-cover transition-all duration-1000 ease-out opacity-0 scale-100 filter brightness-50">
<img id="service-img-3" src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?q=80&amp;w=1600&amp;auto=format&amp;fit=crop" class="service-bg-img absolute inset-0 w-full h-full object-cover transition-all duration-1000 ease-out opacity-0 scale-100 filter brightness-50">
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent opacity-60"></div>
</div>
</div>
<div class="space-y-6">
<div class="group/card relative bg-neutral-900/40 backdrop-blur-sm border border-white/5 rounded-3xl p-8 cursor-pointer transition-all duration-300 hover:bg-neutral-800/60 hover:border-accent-300/30 hover:shadow-[0_10px_40px_-10px_rgba(0,0,0,0.5)] floating-card reveal-on-scroll" onmouseenter="setServiceImage(1)">
<div class="flex justify-between items-start mb-4">
<div>
<span class="text-[10px] font-bold text-accent-400 uppercase tracking-widest mb-1 block">Analysis</span>
<h3 class="text-2xl font-serif text-white group-hover/card:text-accent-100 transition-colors">Financial Modeling</h3>
</div>
<i data-lucide="bar-chart-2" class="text-white w-6 h-6"></i>
</div>
<p class="text-neutral-400 text-sm font-light leading-relaxed mb-6">
Constructing robust equity research models and valuation frameworks. Expertise in forecasting and scenario analysis.
</p>
</div>
<div class="group/card relative bg-neutral-900/40 backdrop-blur-sm border border-white/5 rounded-3xl p-8 cursor-pointer transition-all duration-300 hover:bg-neutral-800/60 hover:border-accent-300/30 hover:shadow-[0_10px_40px_-10px_rgba(0,0,0,0.5)] floating-card reveal-on-scroll" style="animation-delay: 0.1s" onmouseenter="setServiceImage(2)">
<div class="flex justify-between items-start mb-4">
<div>
<span class="text-[10px] font-bold text-accent-400 uppercase tracking-widest mb-1 block">Efficiency</span>
<h3 class="text-2xl font-serif text-white group-hover/card:text-accent-100 transition-colors">AI Automation</h3>
</div>
<i data-lucide="cpu" class="text-white w-6 h-6"></i>
</div>
<p class="text-neutral-400 text-sm font-light leading-relaxed mb-6">
Building autonomous workflows using n8n and LLMs. Streamlining repetitive tasks to optimize business operations.
</p>
</div>
<div class="group/card relative bg-neutral-900/40 backdrop-blur-sm border border-white/5 rounded-3xl p-8 cursor-pointer transition-all duration-300 hover:bg-neutral-800/60 hover:border-accent-300/30 hover:shadow-[0_10px_40px_-10px_rgba(0,0,0,0.5)] floating-card reveal-on-scroll" style="animation-delay: 0.2s" onmouseenter="setServiceImage(3)">
<div class="flex justify-between items-start mb-4">
<div>
<span class="text-[10px] font-bold text-accent-400 uppercase tracking-widest mb-1 block">Insight</span>
<h3 class="text-2xl font-serif text-white group-hover/card:text-accent-100 transition-colors">Data Analytics</h3>
</div>
<i data-lucide="pie-chart" class="text-white w-6 h-6"></i>
</div>
<p class="text-neutral-400 text-sm font-light leading-relaxed mb-6">
Transforming raw data into actionable dashboards. Proficient in cleaning, transforming, and visualizing complex datasets.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- NEW SECTION: FINANCIAL INTELLIGENCE ENGINES -->
<section id="projects" class="relative z-20 w-full py-32 bg-[#020204] border-t border-white/5">
<div class="max-w-[1800px] mx-auto px-6">
<!-- Section Header -->
<div class="flex flex-col items-center text-center mb-24 reveal-on-scroll">
<div class="relative inline-block">
<div class="absolute inset-0 bg-accent-300/30 blur-[60px] rounded-full opacity-40"></div>
<h2 class="relative text-4xl md:text-7xl font-serif text-white mb-4 tracking-tight z-10 leading-[1.1]">
Financial <span class="italic text-accent-300 font-light">Intelligence</span> Engines
</h2>
</div>
<p class="mt-4 text-neutral-400 text-sm font-light max-w-lg mx-auto">
Advanced builds combining financial theory with modern data infrastructure.
</p>
</div>
<!-- Masonry/Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- CARD 1: The IPO Scout (Zepto) -->
<div class="group relative flex flex-col bg-white/[0.03] backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden hover:bg-white/[0.05] hover:border-white/20 transition-all duration-500 reveal-on-scroll">
<!-- Image Placeholder (16:9) -->
<div class="relative w-full aspect-video overflow-hidden bg-[#0A0A0A] border-b border-white/5">
<img src="https://images.unsplash.com/photo-1642543492481-44e81e3914a7?q=80&amp;w=1200&amp;auto=format&amp;fit=crop" class="object-cover w-full h-full opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700 filter saturate-[0.8]">
<div class="absolute top-4 left-4">
<span class="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1 rounded-full text-[10px] font-semibold uppercase tracking-widest backdrop-blur-md">Pre-IPO Analysis</span>
</div>
</div>
<!-- Content -->
<div class="p-8 flex flex-col flex-1">
<h3 class="font-serif text-2xl text-white mb-3 group-hover:text-accent-300 transition-colors">Pre-IPO Strategic Dashboard (Zepto)</h3>
<p class="text-neutral-400 text-sm font-light leading-relaxed mb-6 flex-1">
A DRHP-based valuation model analyzing Zepto's $7-8B target valuation. Features automated visualizations of fresh issue structure, runway analysis, and dark-store unit economics.
</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mb-8">
<span class="text-[10px] text-neutral-500 uppercase tracking-wider border border-white/10 px-2 py-1 rounded bg-white/5">#IPOAnalysis</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-wider border border-white/10 px-2 py-1 rounded bg-white/5">#ValuationModeling</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-wider border border-white/10 px-2 py-1 rounded bg-white/5">#StrategicFinance</span>
</div>
<!-- Action -->
<button class="mt-auto w-full py-4 border border-white/10 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-white relative overflow-hidden group/btn hover:border-accent-300/50 transition-colors">
<div class="absolute inset-0 bg-accent-300/10 translate-y-full group-hover/btn:translate-y-0 transition-transform duration-300"></div>
<span class="relative z-10 flex items-center justify-center gap-2 group-hover/btn:drop-shadow-[0_0_8px_rgba(125,211,252,0.8)]">
View Analysis <i data-lucide="arrow-right" class="w-3 h-3"></i>
</span>
</button>
</div>
</div>
<!-- CARD 2: The Annual Report Decoder (Corporate Performance) -->
<div class="group relative flex flex-col bg-white/[0.03] backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden hover:bg-white/[0.05] hover:border-white/20 transition-all duration-500 reveal-on-scroll" style="animation-delay: 0.1s">
<!-- Image Placeholder (16:9) -->
<div class="relative w-full aspect-video overflow-hidden bg-[#0A0A0A] border-b border-white/5">
<!-- Using a generic financial dashboard image that mimics the requested style (Dark, Green Accents) -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="object-cover w-full h-full opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700">
<div class="absolute top-4 left-4">
<span class="bg-accent-500/10 text-accent-300 border border-accent-500/20 px-3 py-1 rounded-full text-[10px] font-semibold uppercase tracking-widest backdrop-blur-md">FY25 Monitor</span>
</div>
</div>
<!-- Content -->
<div class="p-8 flex flex-col flex-1">
<h3 class="font-serif text-2xl text-white mb-3 group-hover:text-accent-300 transition-colors">Corporate Performance Monitor (FY25)</h3>
<p class="text-neutral-400 text-sm font-light leading-relaxed mb-6 flex-1">
An automated equity research dashboard tracking key performance indicators (KPIs) for firms like Motilal Oswal &amp; Tata Power. visualizes Operating PAT, Net Worth, and YoY growth trends extracted from annual reports.
</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mb-8">
<span class="text-[10px] text-neutral-500 uppercase tracking-wider border border-white/10 px-2 py-1 rounded bg-white/5">#EquityResearch</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-wider border border-white/10 px-2 py-1 rounded bg-white/5">#FinancialReporting</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-wider border border-white/10 px-2 py-1 rounded bg-white/5">#DataViz</span>
</div>
<!-- Action -->
<button class="mt-auto w-full py-4 border border-white/10 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-white relative overflow-hidden group/btn hover:border-accent-300/50 transition-colors">
<div class="absolute inset-0 bg-accent-300/10 translate-y-full group-hover/btn:translate-y-0 transition-transform duration-300"></div>
<span class="relative z-10 flex items-center justify-center gap-2 group-hover/btn:drop-shadow-[0_0_8px_rgba(125,211,252,0.8)]">
View Analysis <i data-lucide="arrow-right" class="w-3 h-3"></i>
</span>
</button>
</div>
</div>
<!-- CARD 3: The Market Engine (Bloomberg Style) -->
<div class="group relative flex flex-col bg-white/[0.03] backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden hover:bg-white/[0.05] hover:border-white/20 transition-all duration-500 reveal-on-scroll" style="animation-delay: 0.2s">
<!-- Image Placeholder (16:9) -->
<div class="relative w-full aspect-video overflow-hidden bg-[#0A0A0A] border-b border-white/5">
<img src="https://images.unsplash.com/photo-1642790106117-e829e14a795f?q=80&amp;w=1200&amp;auto=format&amp;fit=crop" class="object-cover w-full h-full opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700 filter grayscale contrast-125">
<div class="absolute top-4 left-4">
<span class="bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 px-3 py-1 rounded-full text-[10px] font-semibold uppercase tracking-widest backdrop-blur-md">FinSearch Engine</span>
</div>
</div>
<!-- Content -->
<div class="p-8 flex flex-col flex-1">
<h3 class="font-serif text-2xl text-white mb-3 group-hover:text-accent-300 transition-colors">"FinSearch" Market Intelligence</h3>
<p class="text-neutral-400 text-sm font-light leading-relaxed mb-6 flex-1">
A Universal Bloomberg-Terminal style analysis engine designed for Indian listed companies. Features a search-query interface to aggregate real-time stock data and peer comparisons.
</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mb-8">
<span class="text-[10px] text-neutral-500 uppercase tracking-wider border border-white/10 px-2 py-1 rounded bg-white/5">#FintechProduct</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-wider border border-white/10 px-2 py-1 rounded bg-white/5">#UXDesign</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-wider border border-white/10 px-2 py-1 rounded bg-white/5">#MarketAnalytics</span>
</div>
<!-- Action -->
<button class="mt-auto w-full py-4 border border-white/10 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-white relative overflow-hidden group/btn hover:border-accent-300/50 transition-colors">
<div class="absolute inset-0 bg-accent-300/10 translate-y-full group-hover/btn:translate-y-0 transition-transform duration-300"></div>
<span class="relative z-10 flex items-center justify-center gap-2 group-hover/btn:drop-shadow-[0_0_8px_rgba(125,211,252,0.8)]">
View Analysis <i data-lucide="arrow-right" class="w-3 h-3"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- EXPERIENCE -->
<section id="experience" class="relative z-20 w-full py-32 bg-[#020204]">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-end mb-20 reveal-on-scroll">
<div>
<span class="text-[10px] text-accent-400 font-semibold uppercase tracking-cinematic block mb-3">Career Path</span>
<h2 class="text-4xl md:text-6xl font-serif text-white">Work <span class="text-neutral-700 italic">Experience</span></h2>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="group relative reveal-on-scroll cursor-default">
<div class="aspect-[3/4] overflow-hidden rounded-xl bg-neutral-900 relative">
<div class="absolute inset-0 bg-gradient-to-b from-neutral-800 to-black"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-30 text-8xl font-serif text-white/10 group-hover:scale-110 transition-transform duration-1000">01</div>
<div class="absolute bottom-0 left-0 w-full p-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
<div class="flex items-center gap-3 mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
<span class="px-2 py-0.5 border border-white/20 rounded text-[9px] text-white uppercase tracking-wider backdrop-blur-sm">Nov '25 - Present</span>
</div>
<h3 class="text-2xl font-cinzel text-white mb-1">BuyMore</h3>
<p class="text-xs text-accent-300 tracking-widest uppercase opacity-80">Market Research Intern</p>
<p class="mt-4 text-xs text-neutral-400 leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
Conducting competitor analysis and identifying e-commerce trends.
</p>
</div>
</div>
</div>
<div class="group relative reveal-on-scroll delay-100 cursor-default">
<div class="aspect-[3/4] overflow-hidden rounded-xl bg-neutral-900 relative">
<div class="absolute inset-0 bg-gradient-to-b from-neutral-800 to-black"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-30 text-8xl font-serif text-white/10 group-hover:scale-110 transition-transform duration-1000">02</div>
<div class="absolute bottom-0 left-0 w-full p-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
<div class="flex items-center gap-3 mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
<span class="px-2 py-0.5 border border-white/20 rounded text-[9px] text-white uppercase tracking-wider backdrop-blur-sm">Aug - Nov '25</span>
</div>
<h3 class="text-2xl font-cinzel text-white mb-1">StartGenie</h3>
<p class="text-xs text-neutral-400 tracking-widest uppercase opacity-80">Content Intern</p>
<p class="mt-4 text-xs text-neutral-400 leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
Pitched AI-based digital marketing solutions and managed client content.
</p>
</div>
</div>
</div>
<div class="group relative reveal-on-scroll delay-200 cursor-default">
<div class="aspect-[3/4] overflow-hidden rounded-xl bg-neutral-900 relative">
<div class="absolute inset-0 bg-gradient-to-b from-neutral-800 to-black"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-30 text-8xl font-serif text-white/10 group-hover:scale-110 transition-transform duration-1000">03</div>
<div class="absolute bottom-0 left-0 w-full p-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
<div class="flex items-center gap-3 mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
<span class="px-2 py-0.5 border border-white/20 rounded text-[9px] text-white uppercase tracking-wider backdrop-blur-sm">Jul - Aug '25</span>
</div>
<h3 class="text-2xl font-cinzel text-white mb-1">NorthStar</h3>
<p class="text-xs text-neutral-400 tracking-widest uppercase opacity-80">Growth Intern</p>
<p class="mt-4 text-xs text-neutral-400 leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
Utilized Gemini Pro &amp; Notebook LM for curriculum design.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CERTIFICATIONS LIST -->
<section id="certifications" class="w-full max-w-4xl mx-auto px-6 py-32 reveal-on-scroll">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-serif text-white mb-4">Certifications <span class="italic text-neutral-600 font-light">&amp; Sims</span></h2>
<div class="w-px h-8 bg-accent-300/30 mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 gap-x-16 gap-y-12">
<div class="space-y-6">
<h3 class="text-accent-300 text-xs uppercase tracking-cinematic border-b border-white/10 pb-2 mb-4">Official</h3>
<div class="flex justify-between items-baseline group cursor-default">
<div>
<span class="text-neutral-200 font-light text-base group-hover:text-white transition-colors">NISM V-A</span>
<span class="block text-[10px] text-neutral-500 mt-0.5">Mutual Fund Distributors</span>
</div>
<span class="text-white font-medium text-sm"><i data-lucide="award" class="w-4 h-4 text-accent-300"></i></span>
</div>
</div>
<div class="space-y-6">
<h3 class="text-accent-300 text-xs uppercase tracking-cinematic border-b border-white/10 pb-2 mb-4">Job Simulations</h3>
<div class="flex justify-between items-baseline group cursor-default">
<div>
<span class="text-neutral-200 font-light text-base group-hover:text-white transition-colors">PwC Power BI</span>
<span class="block text-[10px] text-neutral-500 mt-0.5">Visualizing Data</span>
</div>
<span class="text-neutral-500 font-medium text-sm">Forage</span>
</div>
<div class="flex justify-between items-baseline group cursor-default">
<div>
<span class="text-neutral-200 font-light text-base group-hover:text-white transition-colors">BCG Strategy</span>
<span class="block text-[10px] text-neutral-500 mt-0.5">Market Analysis</span>
</div>
<span class="text-neutral-500 font-medium text-sm">Forage</span>
</div>
</div>
</div>
</section>
<!-- FOOTER & CONTACT -->
<div class="bg-[#050505] border-t border-white/5 relative">
<section id="contact" class="w-full max-w-7xl mx-auto px-6 py-24 reveal-on-scroll z-20 relative">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
<div class="flex flex-col justify-center">
<span class="text-[10px] text-accent-400 font-semibold uppercase tracking-cinematic block mb-3">Connect</span>
<h2 class="text-4xl md:text-6xl font-serif text-white mb-8">Ready to <span class="text-accent-300 italic">Collaborate?</span></h2>
<div class="space-y-8 mt-4">
<div class="flex items-start gap-6">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center border border-white/10 text-accent-300">
<span class="iconify" data-icon="lucide:map-pin"></span>
</div>
<div>
<h4 class="text-white font-cinzel text-lg mb-1">Location</h4>
<p class="text-neutral-400 text-sm font-light">Bengaluru, India<br>Open to Remote</p>
</div>
</div>
<div class="flex items-start gap-6">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center border border-white/10 text-accent-300">
<span class="iconify" data-icon="lucide:linkedin"></span>
</div>
<div>
<h4 class="text-white font-cinzel text-lg mb-1">Social</h4>
<a href="https://www.linkedin.com/in/hemanth-kumar-5bla75257" target="_blank" class="text-white hover:text-accent-300 transition-colors block font-medium">LinkedIn Profile</a>
</div>
</div>
</div>
</div>
<div class="bg-neutral-900/40 border border-white/10 rounded-3xl p-8 md:p-12 relative backdrop-blur-sm">
<h3 class="text-2xl font-serif text-white mb-6">Send a Message</h3>
<form class="space-y-6" action="mailto:hemanthkumar.connect.now@gmail.com" method="post" enctype="text/plain">
<div class="grid md:grid-cols-2 gap-6">
<div class="space-y-1">
<label class="text-[10px] uppercase tracking-widest text-neutral-500 ml-1">Name</label>
<input type="text" class="w-full bg-transparent border-b border-white/15 py-3 text-white text-sm focus:outline-none focus:border-accent-300 transition-colors placeholder-white/20" placeholder="John Doe">
</div>
<div class="space-y-1">
<label class="text-[10px] uppercase tracking-widest text-neutral-500 ml-1">Company</label>
<input type="text" class="w-full bg-transparent border-b border-white/15 py-3 text-white text-sm focus:outline-none focus:border-accent-300 transition-colors placeholder-white/20" placeholder="Acme Inc.">
</div>
</div>
<div class="space-y-1">
<label class="text-[10px] uppercase tracking-widest text-neutral-500 ml-1">Email</label>
<input type="email" class="w-full bg-transparent border-b border-white/15 py-3 text-white text-sm focus:outline-none focus:border-accent-300 transition-colors placeholder-white/20" placeholder="john@example.com">
</div>
<div class="space-y-1">
<label class="text-[10px] uppercase tracking-widest text-neutral-500 ml-1">Message</label>
<textarea rows="3" class="w-full bg-transparent border-b border-white/15 py-3 text-white text-sm focus:outline-none focus:border-accent-300 transition-colors placeholder-white/20 resize-none" placeholder="Let's discuss..."></textarea>
</div>
<button class="w-full bg-white text-black font-medium py-4 mt-4 hover:bg-accent-100 transition-colors uppercase tracking-editorial text-xs rounded-lg shadow-[0_0_20px_rgba(255,255,255,0.1)] hover:shadow-[0_0_25px_rgba(125,211,252,0.4)]">Send Inquiry</button>
</form>
</div>
</div>
</section>
<footer class="w-full pt-32 pb-16 bg-[#020204] border-t border-white/10 relative overflow-hidden">
<div class="absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 w-full text-center pointer-events-none select-none z-0">
<span class="text-[18vw] font-cinzel font-bold text-white/[0.02] leading-none tracking-tight block">HEMANTH</span>
</div>
<div class="relative z-10 max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 mb-20">
<div class="md:col-span-4 space-y-8">
<div>
<span class="font-cinzel text-3xl text-white block mb-6">HEMANTH</span>
<p class="text-neutral-400 text-sm font-light leading-relaxed max-w-xs">
Finance &amp; Accountancy Student. Integrating data analytics and automation to solve structured business problems.
</p>
</div>
</div>
<div class="md:col-span-2 md:col-start-6">
<h4 class="text-white font-cinzel text-sm mb-6">Menu</h4>
<ul class="space-y-4">
<li><a href="#skills" class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Skills</a></li>
<li><a href="#projects" class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Projects</a></li>
<li><a href="#experience" class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Experience</a></li>
</ul>
</div>
<div class="md:col-span-2">
<h4 class="text-white font-cinzel text-sm mb-6">Tools</h4>
<ul class="space-y-4">
<li><a class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Power BI</a></li>
<li><a class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">Alteryx</a></li>
<li><a class="text-neutral-400 text-xs uppercase tracking-widest hover:text-accent-300 transition-colors">n8n</a></li>
</ul>
</div>
<div class="md:col-span-3">
<h4 class="text-white font-cinzel text-sm mb-6">Get in Touch</h4>
<p class="text-neutral-400 text-xs mb-4 leading-relaxed">Open for opportunities in Finance, Analytics, and AI Automation.</p>
<a href="mailto:hemanthkumar.connect.now@gmail.com" class="inline-flex items-center gap-2 text-accent-300 hover:text-white transition-colors">
<span class="text-xs uppercase tracking-widest">Email Me</span>
<span class="iconify" data-icon="lucide:arrow-right" width="14"></span>
</a>
</div>
</div>
<div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-neutral-600 text-[10px] uppercase tracking-widest">© 2025 Hemanth Kumar.</p>
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
<span class="text-neutral-500 text-[10px] uppercase tracking-wide">Available for Hire</span>
</div>
</div>
</div>
</footer>
</div>
<!-- CHATBOT WIDGET -->
<div class="fixed bottom-6 right-6 z-[60] hidden md:block font-sans">
<div class="relative group">
<button onclick="toggleChat()" class="relative w-14 h-14 bg-white hover:bg-accent-100 text-black rounded-full flex items-center justify-center shadow-[0_4px_30px_rgba(255,255,255,0.2)] hover:scale-105 active:scale-95 transition-all duration-300 z-50">
<span class="iconify" data-icon="lucide:bot" width="24"></span>
<span id="chat-indicator" class="absolute top-0 right-0 w-3.5 h-3.5 bg-green-500 border-2 border-[#020204] rounded-full"></span>
</button>
<div id="chat-box" class="absolute bottom-[calc(100%+16px)] right-0 w-[360px] bg-[#0A0A0A]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl invisible opacity-0 translate-y-4 scale-95 origin-bottom-right transition-all duration-300 overflow-hidden flex flex-col">
<div class="bg-gradient-to-r from-neutral-900 to-neutral-800 p-4 border-b border-white/5 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="relative">
<div class="w-10 h-10 rounded-full bg-accent-300/20 flex items-center justify-center border border-accent-300/30 overflow-hidden">
<span class="iconify text-accent-300" data-icon="lucide:sparkles"></span>
</div>
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-[#0A0A0A] rounded-full"></span>
</div>
<div>
<span class="block text-white text-sm font-medium">Hemanth AI</span>
<span class="block text-[10px] text-neutral-400">Online</span>
</div>
</div>
<button onclick="toggleChat()" class="text-neutral-400 hover:text-white transition-colors">
<span class="iconify" data-icon="lucide:x" width="18"></span>
</button>
</div>
<div class="p-5 space-y-4 min-h-[280px] max-h-[400px] overflow-y-auto bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-white/5 via-transparent to-transparent">
<div class="text-center text-[10px] text-neutral-500 uppercase tracking-widest mb-4">Today</div>
<div class="flex gap-3 items-start">
<div class="w-6 h-6 rounded-full bg-accent-300/20 flex-shrink-0 flex items-center justify-center border border-accent-300/10 mt-1">
<span class="iconify text-accent-300" data-icon="lucide:bot" width="12"></span>
</div>
<div class="bg-[#1A1A1A] border border-white/5 rounded-2xl rounded-tl-sm p-3 shadow-sm max-w-[85%]">
<p class="text-neutral-200 text-xs leading-relaxed">
Hi there! I'm Hemanth's portfolio assistant. How can I help you?
</p>
</div>
</div>
</div>
<div class="p-3 border-t border-white/5 bg-neutral-900/50">
<form class="flex items-center gap-2 bg-[#050505] border border-white/10 rounded-full px-4 py-2" onsubmit="event.preventDefault(); window.location.href='#contact'; toggleChat();">
<input type="text" placeholder="Type a message..." class="bg-transparent border-none focus:outline-none text-xs text-white w-full placeholder-neutral-500">
<button class="text-accent-300 hover:text-white transition-colors">
<span class="iconify" data-icon="lucide:send" width="14"></span>
</button>
</form>
</div>
</div>
</div>
</div>
</body></html>